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

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


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

b {
  font-weight: 700;
}

/*body > .container-fluid {
  padding: 0;
  margin-top: -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;}

.butt:hover{ background-color: #53BFC7 !important;
                               color: black !important;
                               }
                               
/* 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;display: block;}
 
 .btn-lite:hover{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;}                                                                
                               
                               
/* 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 */
.blocksTransparent {
        border: 0px transparent;
        background-color: #FFFFFF66;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
}
.blocksID {
                
                background-color: #FFFFFF;/*#f6f9fb; */
                /*border:2px solid #089DA7;*/
                text-align: center;
                margin: 0 auto;
                padding: 20px;
                border-radius: 10px;
                /*box-shadow: 5px 5px 5px lightgrey;*/
                position: relative;
              }
              
              
.blockshalftransparent {
                
                background-color: #FFFFFFCC;/*#f6f9fb; */
                /*border:2px solid #089DA7;*/
                text-align: center;
                margin: 0 auto;
                padding: 20px;
                border-radius: 10px;
                /*box-shadow: 5px 5px 5px lightgrey;*/
                position: relative;
              }
              
.blockslightgrey {
        border: 0px transparent;
        background-color: #F5F5F5;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
}  
              
.blocksgrey {
        border: 0px transparent;
        background-color: #F4F4F4;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
}
              
.blocksID-top {
                
                background-color: #FFFFFF;/*#f6f9fb; */
                /*border:2px solid #089DA7;*/
                text-align: center;
                margin: 0 auto;
                padding: 20px ;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                /*box-shadow: 5px 5px 5px lightgrey;*/
                position: relative;
              }  
.blocksID-bottom {
                
                background-color: #FFFFFF;
                text-align: center;
                margin: 0 auto;
                padding: 20px 0 20px 20px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                /*box-shadow: 5px 5px 5px lightgrey;*/
                position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
              }    
              
.blocksID-middle {
                
                background-color: #FFFFFF;
                text-align: center;
                margin: 0 auto;
                padding: 0px 20px 40px 20px;
                /*box-shadow: 5px 5px 5px lightgrey;*/
                position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
              }   
              
              
.blocksID-bottom .btn-holder {
    position: absolute;
    bottom: 10px;
    width: 80%;
    margin: 0 auto;
}

.btn-lite{color: #fff;font-size: 15px; background-color: #53BFC7; border-color: #089DA7;
height: 50px;width: 80%;text-align: center;margin: 5 auto;border-radius: 10px;display: table-cell; vertical-align: bottom;}
 
.btn-lite:hover{ width: 80%;background-color: #089DA7; border-color: #089DA7;}
                                                                 
 .btn-lite:active{width: 80%;
   background-color: #089DA7; border-color: #089DA7;
 }
 
 .btn-transparent{        
   cursor: pointer;
        border: 0px solid transparent;
        background-color: transparent;
        height: 50px;
        width: 200px;
        color: #089DA7;
        font-size: 1.5em}
        
  .btn-transparent:hover{ border: 0px solid transparent;
        background-color: transparent;}
        
        
 .btn-blue-transparent{        
   cursor: pointer;
        border: 2px solid  #089DA7;
        background-color: transparent;
        height: auto;
        width: 200px;
        color: #089DA7;
        border-radius: 10px;
        font-size: 1em}
        
  .btn-blue-transparent:hover{ border: 3px solid #089DA7;
  color: #089DA7;
  border-radius: 10px;
        background-color: transparent;}
              

.blocksFirst .content {
   background-color: #FFFFFF;/*#f6f9fb; */
                border:4px solid #089DA7;
                text-align: left;
                margin: 0 auto;
                padding: 20px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                box-shadow: 5px 5px 5px lightgrey;
}
.blocksFirst .title {
    height:60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background:#089DA7;
    text-align: center;
    font-size:18px;
    font-weight:bold;
    display:block;
    color:white;
    display:block;
    padding:10px;
    border:6px solid #089DA7;
    border-bottom:none;
    box-shadow: 5px 5px 5px lightgrey;
}

.blocksSecure .content {
   background-color: #FFFFFF;/*#f6f9fb; */
                border:2px solid #D687B699;
                text-align: left;
                margin: 0 auto;
                padding: 20px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                box-shadow: 5px 5px 5px lightgrey;
}
.blocksSecure .title {
    height:60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background:#D687B699;
    text-align: center;
    font-size:18px;
    font-weight:bold;
    display:block;
    color:white;
    display:block;
    padding:10px;
    border:2px solid #D687B699;
    border-bottom:none;
    box-shadow: 5px 5px 5px lightgrey;
}

.blocksGreen .content {
                background-color: #FFFFFF;
                border:2px solid #3CB37199;
                text-align: left;
                margin: 0 auto;
                padding: 20px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                box-shadow: 5px 5px 5px lightgrey;
}
.blocksGreen .title {
    height:60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background:#3CB37199;
    text-align: center;
    font-size:18px;
    font-weight:bold;
    display:block;
    color:white;
    display:block;
    padding:10px;
    border:2px solid #3CB37199;
    border-bottom:none;
    box-shadow: 5px 5px 5px lightgrey;
}


.blocksGreyOffer {
   background-color: #F4F4F4;/*#f6f9fb; */
                border:0px solid transparent;
                text-align: left;
                margin: 0 auto;
                padding: 20px;
                border-radius: 20px;
}

details{
  text-align: left;
}     

details > summary {
  text-align: left;
  margin: 0 auto;
  padding: 5px;
  border-radius: 10px;
  width: 150px;
  /*background-color: #eeeeee;*/
  color: #089DA7;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

.jhr{display: inline;
     vertical-align: middle;
     padding-left: 10px;
}