a:link { color: #000000; text-decoration: none}
a:visited { color: #000000; text-decoration: none}
a:hover { color: #3366CC; text-decoration: underline}
a:active { color: #000000; text-decoration: none}

body{
    overflow-x: hidden;
    overflow-y: scroll;
}
#popupStats,#popupAbout {
    /* margin: 10px;
    padding: 0 10px;
    max-width: 60%;
    border: 2px solid #444;
    background: white; */

    margin-right: auto;
    margin-top: 15px;
    height: 95%;
    /* max-width: 60%; */
    padding-top: 5px;
    padding-bottom: 5px;
}


#popupStats .modal-content,#popupAbout .modal-content{
    border: 0px;
}
#popupStats .modal-header,#popupAbout .modal-header{
    padding-top: 0px;
}

#popupStats .modal-dialog,#popupAbout .modal-dialog{
    margin-top: 10px;
}

.select-styled{
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    display: block;
}

.modal-dialog{
    max-width: 100% !important;
}

.select-pays{
    margin-bottom: 15px;
}

.stats-box{
    margin-right: 10px;
}

.param-column{
    margin-right: 10px;
}
#display-phase{
    margin-top: 20px;
}



.zone-column .btn-group{
    margin-top: 12px;
    margin-left: 40px;
}
.zone-column select{
    margin-left: 10px;
    max-width: 75%;
}
.stats-row{
    margin-bottom: 15px;
    border-bottom: 1px gainsboro solid;
    padding-bottom: 8px;
    padding-top: 8px;
}

.stats-row button a{
    color:white;
}

/* #selectedDate{
    margin-left: 25%;
} */



.loading-overlay {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .loading-overlay {
    overflow: hidden;   
}

body { height: 100vh; overflow: hidden; }



.controls-row label{
    font-weight: 500;
    margin-bottom: 2px;
}

.controls-row .btn-group{
    /* margin-top: 15px; */
    margin-bottom: 5px;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loading-overlay {
    display: block;
}
.box {
    float: left;
    height: 26px;
    width: 20px;
    /* margin-bottom: 15px; */
    margin-right: 5px;
    border: 1px solid black;
    clear: both;
}

.red {
    background-color: red;
}  

.blue {
    background-color: blue;
}

#pandemic-dynamic {
    display: none;
    text-align: center;
}

.title-graph{
    color: #1c323f; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: 100; line-height: 26px; letter-spacing: 1px;text-align: center;
}

#cadre-carte{
    /* width: 90%; */
    height: 100%;
}

/* #controls{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
} */

#popupAbout a{
    color: blue;
}
@media (min-width: 550px) { 
    .controls-row .btn-sm {
        padding: 1px 2px;
        font-size: 12px;
    }
    .btn-modal{
        margin-bottom: 10px;
        width: 70%;
    }
    .map-row{
        height: 90%;
    }
    #dateRange{
        width: 100%;
    }
    .controls-row{
        height: 10%;
        padding-top: 40px !important;
        width: 95%;
        margin-left: auto !important;
        margin-right: auto !important;    
    }
    .controls-row label{
        font-size: 14px;
    }
    #small-label-control{
        font-size: 11px;
    }
    .select-styled{
        height: 26px;
        width: 90%;
        margin-right: 10px;
        padding-left: 5px;
        font-size: 13px;
    }
    #popupStats,#popupAbout {
        width: 80%;
        margin-left: 25%;
    }
}

@media (min-width: 768px) { 
    .controls-row .btn-sm {
        padding: 1px 2px;
        font-size: 12px;
    }
    .btn-modal{
        margin-bottom: 10px;
        width: 70%;
    }
    .map-row{
        height: 45%;
    }
    #dateRange{
        width: 100%;
    }
    .controls-row{
        height: 10%;
        padding-top: 40px !important;
        width: 95%;
        margin-left: auto !important;
        margin-right: auto !important;    
    }
    .controls-row label{
        font-size: 14px;
    }
    #small-label-control{
        font-size: 11px;
    }
    .select-styled{
        height: 26px;
        width: 90%;
        margin-right: 10px;
        padding-left: 5px;
        font-size: 13px;
    }
    #popupStats,#popupAbout {
        width: 80%;
        margin-left: 25%;
    }
}

@media (min-width: 992px) { 
    .controls-row .btn-sm {
        padding: 1px 2px;
        font-size: 12px;
    }
    .btn-modal{
        margin-bottom: 10px;
        width: 70%;
    }
    .map-row{
        height: 80%;
    }
    #dateRange{
        width: 100%;
    }
    .controls-row{
        height: 20%;
        padding-top: 40px !important;
        width: 95%;
        margin-left: auto !important;
        margin-right: auto !important;    
    }
    .controls-row label{
        font-size: 14px;
    }
    #small-label-control{
        font-size: 11px;
    }
    .select-styled{
        height: 25px;
        width: 90%;
        margin-right: 10px;
        padding-left: 5px;
        font-size: 12px;
    }
    #popupStats .btn-stats{
        font-size: 12px;
        margin-bottom: 7px;
    }
    .zone-column h6,.param-column h6{
        font-weight: 500;
        margin-top: 10px;
        font-size: 14px;
    }
    .param-column label{
        font-size: 11px;
    }
    #popupStats,#popupAbout {
        width: 75%;
        margin-left: 12.5%;
    }
}

@media (min-width: 1200px) { 
    .controls-row .btn-sm {
        padding: 1px 2px;
        font-size: 14px;
    }
    .map-row{
        height: 85%;
    }
    #dateRange{
        width: 80%;
    }
    .controls-row{
        height: 15%;
        padding-top: 15px !important;
    }
    .controls-row label{
        font-size: 16px;
    }
    #small-label-control{
        font-size: 14px;
    }
    .select-styled{
        height: 30px;
        width: 90%;
        margin-right: 15px;
        padding-left: 10px;
    }
    .btn-stats{
        font-size: 14px;
    }
    .zone-column h6,.param-column h6{
        font-weight: 500;
        margin-top: 12px;
        font-size: 16px;
    }
    .param-column label{
        font-size: 14px;
    }
    #popupStats,#popupAbout {
        width: 60%;
        margin-left: 20%;
    }
}

@media (min-width: 1400px) { 
    .controls-row .btn-sm {
        padding: 4px 8px;
    }
    .btn-modal{
        margin-bottom: 10px;
        width: 45%;
    }

    .controls-row{
        padding-top: 30px !important;   
    }
}