body, html{
        height: 100%;
        margin: 0;
    }
    body {
        padding: 0;
        margin: 0;
    }


    #mapid {
        position: relative;
        display: block;
        top: 0;
        left: 0;
       width: 100%;
        height: 480px; 
    } 

    .info_box{
        font-weight: bold;
        color: #5A646F;
        font-size: 15px !important;
        margin-right: 10px;
    }

    .info_box_bg{
       /*  border: 1px solid #000000; */
       /*  display: block; */
        position: absolute;
        background-color: rgba(255,255,255,0.7);
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        z-index: 999;
        max-width: 30% !important;
        /* margin: 105px 0px 0px 15px; */
        bottom: -5px;
        right: 20px;
    }

    .info_box_bg > table tbody td, .table tbody th{
        padding: 0.5px !important;
    }

    .nanobar {
        width: 100%;
        height: 4px;
        z-index: 9999;
        top:0
    }

    .bar {
        width: 0;
        height: 100%;
        transition: height .3s;
        background:#CC0000;
    }

    .table {
        width: unset;
    }

    .table td, .table th {
        padding: 0; 
        padding: unset !important;
        padding-right: 5px !important; 
        vertical-align: middle !important;
        border: unset !important;
       /*  border-top: 1px solid #dee2e6; */
    }

    .table td:first-child{
        text-align : center;
    }
/*     #one.leaflet-pulsing-icon::after{

        -webkit-border-radius: 100%;

        border-radius: 100%;

        height: 300%;

        width: 300%;

        margin: -100% 0 0 -100%; z-index:1400;

        box-shadow: 0 0 6px 2px yellow;

        animation: pulsate 1s ease-out;

        animation-iteration-count: infinite;

        animation-delay: 1.1s; } */



/* #two.leaflet-pulsing-icon::after{

        -webkit-border-radius: 100%;

        border-radius: 100%;

        height: 300%;

        width: 300%;

        margin: -100% 0 0 -100%; z-index:1400;

        box-shadow: 0 0 6px 2px red;

        animation: pulsate 1s ease-out;

        animation-iteration-count: infinite;

        animation-delay: 1.1s; } */

.fas.fa-eye.icon-white:before
{
    color:#37a7d9;
}

.nav-link {
    display: block;
    padding: 0.5rem 0.8rem;
}

#logo_okf{
    position: absolute;
    margin: 0px 0px 0px 15px; 
    z-index: 998;
    width: 65px;
    height: 65px;
}

#okf_text{
    text-align: center; 
    margin: 0px 0px 0px; 
    position: absolute; 
    z-index: 999; 
    display: block;
     left: 25%; 
}

#zero{
    background-color:#61b559; 
    width: 15px; 
    height: 15px; 
    z-index:1400; 
    position:relative;
    margin: 0 auto;
}

#one{
    background-color:yellow; 
    width: 15px; 
    height: 15px; 
    z-index:1400; 
    position:relative;
    margin: 0 auto;
}

#two{
    background-color:red; 
    width: 15px; 
    height: 15px; 
    z-index:1400; 
    position:relative; 
    margin: 0 auto;
}

@media (max-width: 768px) {
    .table {
        transform: scale(0.7,0.7);
    }
    img#webcamimg{
        width:160px;
    }
    div.infowin{
        font-size: small;
     /*     width: calc(100% + 150px); 
         width: 150px;  */
        }
        div.infowin h3 {
            font-size: large;
        }
        #description{
            max-width:150px;
        }
/*       div.leaflet-popup-content{
        width: calc(100% + 175px) ;   
   }  
       li.nav-item{
        transform: scale(0.7,0.7);
    }  */   
} 
 
@media (min-width: 768px) {
    .table {
        transform: scale(0.8,0.8);
    }
   /*  div.leaflet-popup-content{
        width: calc(100% + 200px) ;   
   } */
    img#webcamimg{
        width:301px;
    }
/*     li.nav-item{
        transform: scale(0.8,0.8);
    } */
}

@media (min-width: 992px) {
    .table {
        transform: scale(0.9,0.9);
    }  
    div.leaflet-popup-content{
        width: calc(100% + 300px);
    } 
    img#webcamimg{
        width:301px;
    }
/*     li.nav-item{
        transform: scale(0.9,0.9);
    } */
}

@media (min-width: 1200px) {
    div.leaflet-popup-content{
        width: calc(100% + 350px);
    } 
}