@import url('https://fonts.googleapis.com/css?family=Asap:200,300,400,500,600,700&display=swap');

body {padding: 10px;
      margin: 0px;
  font-family: 'Asap',Helvetica,Arial,Lucida,sans-serif;
  font-size:20px;
}





#magnifying-glass
{
  font-size: 30em; /* This controls the size. */
    display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border: 0.1em solid red;
  position: fixed;
  top: 10px;
  left: 10px;
  border-radius: 0.35em;
}
#magnifying-glass::before
{
  content: "";
  display: inline-block;
  position: absolute;
  right: -0.25em;
  bottom: -0.1em;
  border-width: 0;
  background: red;
  width: 0.35em;
  height: 0.08em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}



.main-icon {
  position: absolute; 
  top: -35px; 
  right: 15px; 
  color: #F2F2F2; 
    font-size: 1100%; 
  z-index: -1;
}



.material-switch > input[type="checkbox"]:checked + label::after {
  background: #089DA7;
}




/* Charts */
  
  .plot-spin {
    background: #FFFFFF;
  }

.bb-line-forecast {
  stroke-width: 2px;
}

.bb-line-observed {
  stroke-dasharray: 12 4; stroke-width: 2px;
}

/* ValueBox */
.box {margin: 5px;}

.small-box.bg-blue { background-color: #089DA7 !important; color: #FFFFFF !important; border-radius: 5px; text-align: center;
font-family: 'Roboto', sans-serif; height: 120px;
}

.small-box.bg-green { background-color: #53BFC7 !important; color: #FFFFFF !important; border-radius: 5px; text-align: center;
font-family: 'Roboto', sans-serif; height: 120px;
}

.small-box.bg-yellow { background-color: #FAD528 !important; color: #089DA7 !important;  border-radius: 5px; text-align: center;
font-family: 'Roboto', sans-serif;height: 120px;
}

.small-box.bg-orange{ background-color: #FFAB40 !important; color: #FFFFFF !important;  border-radius: 5px; text-align: center;
font-family: 'Roboto', sans-serif;
}

.bg-green { background-color: #089DA7 !important; color: #FFFFFF !important;  border-radius: 5px; text-align: center;
font-family: 'Roboto', sans-serif; } 

.bg-red { background-color: #FF8C00 !important; color: #FFFFFF !important;  border-radius: 5px; text-align: center;
font-family: 'Roboto', sans-serif; height: 120px;}  

.bg-aqua { background-color: #53BFC7 !important;  color: #FFFFFF !important;  border-radius: 5px; text-align: center;
font-family: 'Roboto', sans-serif; height: 120px;}  

.bg-light-blue { background-color: #CCF7F8 !important; color: #FFFFFF !important;  border-radius: 5px; text-align: center;
font-family: 'Roboto', sans-serif;}

.selectize-dropdown {
    z-index: 9999!important;
}


/* Buttons */
.butt{ background-color: #089DA7 !important;  color: #FFFFFF !important;border-radius: 10px;}

.butt:hover{ background-color: #53BFC7 !important;
                               color: black !important;border-radius: 10px;
                               }
                               
/* button lite */
.btn-lite{color: #fff;font-size: 20px; background-color: #53BFC7; border-color: #089DA7;width: 300px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 10px;}
 
 .btn-lite:hover,.btn-lite:focus,.btn-lite:hover[disabled]{color: #fff;font-size: 20px; background-color: #089DA7; border-color: #089DA7;width: 300px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 10px;}  
                                                                 
/* button lite grey */
.btn-lite-grey{color: black;font-size: 20px; background-color:  #f6f9fb; border-color: #089DA7;width: 300px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 10px;}
 
 .btn-lite-grey:hover{color: #fff;font-size: 20px; background-color: #53BFC7; border-color: #089DA7;width: 300px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 10px;}  
                                                                 
/* button lite grey mobile */
.btn-lite-grey-mobile{color: black;font-size: 20px; background-color:  #f6f9fb; border-color: #089DA7;width: 50px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 10px;}
 
 .btn-lite-grey-mobile:hover{color: #fff;font-size: 20px; background-color: #53BFC7; border-color: #089DA7;width: 50px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 10px;}  
/* button lite pink */
.btn-lite-pink{color: #fff;font-size: 20px; background-color:  #D687B6; border-color: #D687B6;width: 300px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 20px;}
 
 .btn-lite-pink:hover{color: #fff;font-size: 20px; background-color: #D687B6; border-color: #D687B680;width: 300px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 20px;}  
                                                                 
/* button lite pink mobile */
.btn-lite-pink-mobile{color: black;font-size: 20px; background-color:  #f6f9fb; border-color: #089DA7;width: 50px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 10px;}
 
 .btn-lite-pink-mobile:hover{color: #fff;font-size: 20px; background-color: #53BFC7; border-color: #089DA7;width: 50px;height: 50px;text-align: center;margin: 0 auto;
                                                                 padding: 10px 10px 10px 10px;border-radius: 10px;}                                                                  
                               
/* Switchinput */
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
                                        background: #53BFC7;
                                        color: white;
                                        }
                                        
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
                                        background: #089DA7;
                                        color: white;
                                        }
                                        
                                        
/* ID boxes */
.blocksIDgreyPresentation {
                
                background-color: #f6f9fb; 
                border:0px solid #f6f9fb; 
                text-align: left;
                margin: 0 auto;
                padding: 40px;
                border-radius: 10px;
              }

.blocksIDgrey {
                
                background-color: #f6f9fb; 
                border:0px solid #f6f9fb; 
                text-align: left;
                margin: 0 auto;
                padding: 10px;
                border-radius: 10px;
              }
              
.blocksIDgreymobile {
                float: left;
                width:150px;
                height: 100px;
                background-color: #f6f9fb; 
                border:0px solid #f6f9fb; 
                text-align: left;
                margin: 1px;
                margin-bottom: 20px;
                padding: 5px;
                border-radius: 20px;
              }
              

                              .popover-content{ 
                              color: #222;
                              }              
              
.blocksIDgreytop {
                
                background-color: #f6f9fb; 
                border-top:1px solid #089DA7;
                border-right:1px solid #089DA7; 
                border-left:1px solid #089DA7; 
                text-align: left;
                margin: 0 auto;
                padding: 10px 40px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
              }
              
.blocksIDgreymiddle {
                
                background-color: #c1d6e3; 
                border-left:1px solid #089DA7; 
                border-right:1px solid #089DA7; 
                text-align: left;
                margin: 0 auto;
                padding: 10px 40px;
              }
              
.blocksIDbluebottom {
                color: #FFFFFF;
                background-color: #089DA7; 
                border:1px solid #089DA7; 
                text-align: left;
                margin: 0 auto;
                padding: 40px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
              }
              
              
.blocksIDbluefull {
                color: #FFFFFF;
                background-color: #089DA7; 
                border:1px solid #089DA7; 
                text-align: left;
                margin: 0 auto;
                padding: 40px;
                border-radius: 20px;
              }
              
.blocksIDwhite {
                background-color: #FFFFFF99; 
                border:0px solid transparent;
                text-align: left;
                margin: 20px auto;
                padding: 20px;
                border-radius: 20px;
                /*height:90vh;*/
              }
              
.vl-grey {
  border-left: 2px solid #3A3A3A;
  height: 15vh;
}

.vl-white {
  border-left: 2px solid #FFFFFF;
  height: 40vh;
}
              
              
              
.leaflet-container { border-radius: 20px; }

.tabbable > .nav > li > a {
  border-radius: 20px;
  border: transparent;
  color: #089DA7; /* Inactive tabs font color */
}

.tabbable > .nav > li.active > a {
  background-color: #089DA780; /* Active tab background */
  color: white;
}

/* Inactive tabs hover effect */
.nav-tabs > li > a:hover {
  color: #089DA7;
}

.nav li {
  text-align: center;
  width: 32%;
}

.nav-tabs {
  border: 0; /* Remove border */
}

.nav-tabs > li > a {
  border: 0; /* Remove border */
}





/* Sticky footer*/
.main-footer{ 
  width:100%;
  background-color: #089DA7;
  color:#FFFFFF;
  position: sticky; 
  bottom: 0;
  padding: 0px;
  border: 0;
}

/* Hide shiny errors */

.shiny-output-error { visibility: hidden; }
.shiny-output-error:before { visibility: hidden; }