@font-face {
    font-family: 'MeteoconsRegular';
    src: url('../font/meteocons-webfont.eot');
    src: url('../font/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/meteocons-webfont.woff') format('woff'),
    url('../font/meteocons-webfont.ttf') format('truetype'),
    url('../font/meteocons-webfont.svg#MeteoconsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body, html {
    font-family: 'Alef', 'sans-serif';
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.main{
    position: fixed;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 40px;
}

.main-open{
    padding-right: 0 !important;
    transition: padding-right 1s;
}

.main-close{
    padding-right: 300px !important;
    transition: padding-right 1s;
}

.map-canvas{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

input, button, select, textarea {
    font-family: 'Alef', 'sans-serif';
}

a.brand {
    padding: 1px !important;
    margin-right: 8px !important;
    cursor: pointer
}

.brand-img{
    height: 26px;
    cursor: pointer
}

div.gm-style {
    font-family: 'Alef', 'sans-serif';
}

.filter-description {
    width: 300px;
    border-bottom: 2px solid #ddd; margin-bottom: 0 !important;
    background-color: white;
    height: 142px;
}

.filter-menu {
    background-color: white;
    line-height: 40px !important;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 300px;
    padding-top: 8px;
}

.filter-panel {
    border-top: 2px solid #ddd; margin-bottom: 0 !important;
    margin-top: 10px;
    -webkit-order: 1;
    order: 1;
    overflow-x: hidden;
    position: absolute;
    top: 198px;
    bottom: 40px;
    width:100%;
    right:0px;
}

input[type=radio], .filter-panel {
    display: none;
}

input[type=radio]:checked + .filter-button {
    color: #08c;
    background: #eee;
}

input[type=radio]:checked + .filter-button + .filter-panel {
    display: block;
}

.filter-button{
    font-size:20px !important;
    color: #ccc;
    cursor: pointer;
    text-align:center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: block;
    vertical-align: middle !important;
    line-height: 40px !important;
    margin: 3px;
}

.filter-button:hover{
    color: #08c;
    background: #eee;
}

.filter-button-label{
    font-size: 9px !important;
    margin-top: 3px !important;
    font-weight: 700 !important;
}

.filter-button-icon{
    margin-top: 5px !important;
}

.active{
    color: #08c;
}

.separator{
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.center{
    justify-content: center !important;
    padding-right: 0 !important;
}

.btn-wrap{
    display: flex;
    justify-content: center;
    vertical-align: middle;
    line-height: 30px;
    flex-wrap: wrap;
    padding-right: 10px;
    padding-left: 10px;
}

.btn-label{
    color: #ccc;
    cursor: default;
    line-height: 35px;
    padding: 0px 10px;
}

.btn, input[type='checkbox']:checked:hover + label{
    color: #ccc !important;
    background: white;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
}

.btn:hover, input[type='checkbox']:checked + label{
    color: #08c !important;
    background: #f2f2f2;
}

.btn:hover, input[type='radio']:checked + label{
    color: #08c !important;
    background: #f2f2f2;
}

.one{
    border-radius: 3px 3px 3px 3px !important;
    margin: 3px 3px 3px 3px;
}

.two{
    width:30%;
}

.three{
    width:20%;
}

.left{
    border-radius: 3px 0 0 3px !important;
}

.right{
    border-left: none !important;
    border-radius: 0 3px 3px 0 !important;
}

.middle{
    border-radius: 0 0 0 0 !important;
    border-left: none !important;
}

.fatal:hover, input[type='checkbox']:checked + label[for="checkbox-fatal"]{
    color: #D81C32 !important;
}

.severe:hover, input[type='checkbox']:checked + label[for="checkbox-severe"]{
    color: #FF9F1C !important;
}

.light:hover, input[type='checkbox']:checked + label[for="checkbox-light"]{
    color: #FFD82B !important;
}

.btn .date{
    width: 36%;
    font-size: 10px !important;
}

.time{
    width: 36%;
    font-size: 10px !important;
}

.icon-weather{
    font-family: 'MeteoconsRegular';
    font-size: 20px;
    width: auto;
    height:20px;
}

input[type="date"],input[type="time"]{
    color:#ccc;
    border-color: #ddd;
    margin-bottom: 0;
}

.current-view-count{
    padding-left: 10px;
    font-weight:normal;
    color: #08c;
    float: left;
}

.current-view{
    overflow-y: scroll;
    position: absolute;
    top: 76px;
    bottom: 0px;
    padding-right: 8px;
    width: 100%;
}

.context-menu {
    position: absolute;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    margin: 0;
    border: 0;
    list-style: none;
    cursor: pointer;
}

.context-menu li {
    line-height: 25px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid #eee;
    padding: 2px 5px;
    box-sizing: border-box;
    display:table-row;
    text-align: right;
}

.context-menu li:hover {
    background: #f2f2f2;
}

.sidebar-container{
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    background: white;
    padding-top: 40px;
    width: 300px !important;
    display: block;
}

.sidebar-container-close{
    right: -300px;
    transition: right 1s;
}

.sidebar-container-open{
    right: 0;
    transition: right 1s;
}

.sidebar-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-container ul li {
    border-bottom: 1px solid #eee;
    cursor: pointer;
    padding-top: 4px;
    padding-bottom: 4px;
}

.sidebar-title {
    height: 30px;
    padding: 5px;
    line-height: 30px;
    border-bottom: 1px solid #ddd;
    background: #eee;
    font-weight: bold;
}

.sidebar-container input[type=checkbox] {
    margin-top: 0;
}

.map-control{
    width: 62px;
    height: auto;
}

.map-button{
    height: 30px;
    width: 30px;
    background-color: white;
    text-align: center;
    vertical-align: middle;
    line-height: 32px;
    margin: 16px;
    border-radius: 50%;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
}

.map-button:hover{
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    border-color: #4d90fe;
}

.reset-map-control:after{
    font-size: 17px;
    color: #ccc;
    font-family: 'Material Icons';
    content: '\e1b3';
}

.download-csv-control:after{
    font-size: 17px;
    color: #ccc;
    font-family: 'Material Icons';
    content: '\e2c4';
}

.link-map-control:after{
    font-size: 17px;
    color: #ccc;
    font-family: 'Material Icons';
    content: '\e157';
}

.statistics-control:after{
    font-size: 15px;
    color: #ccc;
    font-family: 'FontAwesome';
    content: '\f080'
}

.full-screen-control:after{
    font-size: 15px;
    color: #ccc;
    font-family: 'FontAwesome';
    content: '\f0b2'
}

.reports-control:after {
    font-size: 15px;
    color: #ccc;
    font-family: 'FontAwesome';
    content: '\f15c'
}

.heat-map-control:after{
    font-size: 17px;
    color: #ccc;
    font-family: 'Material Icons';
    content: '\e80e'
}

.heat-map-control-red:after{
    color: #ef5350;
}

.map-button:hover .control-label{
    visibility: visible !important;
    position: fixed;
    margin-right: 46px;
    height: 28px;
    width: auto;
    text-align: right;
    padding-right: 10px;
    padding-left: 12px;
    line-height: 28px;
    font-size: 15px;
    color: #999999;
    background-color: white;
    border-radius: 3px;
    border-color: #ccc;
    border-width: 1px;
    border-style: solid;
}

.control-label{
    position: fixed;
    visibility: hidden;
}

.map-button .blink{
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 8px rgba(82,168,236,0.6);
}

.toggle-control-bg{
    width: 50px;
    height: 28px;
    background-color: #ccc;
    border-radius: 32px;
    margin: 16px;
    vertical-align: middle;
    line-height: 32px;
    cursor: pointer;
}

.toggle-control{
    margin: -2px;
}

.toggle-control:after{
    font-size: 20px;
    color: #ccc;
    font-family: 'Material Icons';
}

.toggle-control-disabled:hover{
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(236,82,82,0.6) !important;
    border-color: #F44336 !important;
}

.toggle-control-disabled-label{
    position: fixed;
    visibility: hidden;
}

.toggle-control-disabled:hover + .toggle-control-disabled-label{
    visibility: visible !important;
    position: absolute;
    top: 0;
    right: 50px;
    margin-right: 10px;
    height: 28px;
    width: auto;
    white-space: nowrap;
    text-align: right;
    padding-right: 10px;
    padding-left: 12px;
    line-height: 28px;
    font-size: 15px;
    color: #999999;
    background-color: white;
    border-radius: 3px;
    border-color: #ccc;
    border-width: 1px;
    border-style: solid;
}

.pin:after{
    content: '\e55f';
}

.dot{
    margin-right: 18px;
}

.dot:after{
    content: '\e3ea';
}

.tour-control:after{
    font-size: 20px;
    color: #ccc;
    font-family: 'Material Icons';
    content: '\e80c';
}

.blink{
    animation-name: blink;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: 15;

    /* Chrome, Safari, Opera */
    -webkit-animation-name: blink;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 15;
}

@-webkit-keyframes blink {
    0%,100%{
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 8px rgba(82,168,236,0.6);
    }
    25%,75%{
        box-shadow: inset 0 3px 3px rgba(0,0,0,0.075),0 0 16px rgba(82,168,236,0.6);
    }
    50%{
        box-shadow: inset 0 6px 6px rgba(0,0,0,0.075),0 0 32px rgba(82,168,236,0.6);
    }
}

@keyframes blink {
    0%,100%{
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 8px rgba(82,168,236,0.6);
    }
    25%,75%{
        box-shadow: inset 0 3px 3px rgba(0,0,0,0.075),0 0 16px rgba(82,168,236,0.6);
    }
    50%{
        box-shadow: inset 0 6px 6px rgba(0,0,0,0.075),0 0 32px rgba(82,168,236,0.6);
    }
}

#map_canvas img {
    max-width: none;
}
/* Bootstrap Css Map Fix*/
#map_canvas label {
    width: auto; display:inline;
}

.navbar-inner{
}

.navbar-brand{
    float: right; display: inline-flex; justify-content: flex-end
}

.footer{
    position:fixed;
    height: 40px;
    bottom:0;
    width:100%;
    text-align:
    left; background: white;
    box-shadow: inset 0 0 0 -1px rgba(0,0,0,0.1),0 1px 10px rgba(0,0,0,0.1);
    background-image: linear-gradient(to bottom,#f2f2f2, #fff);
}

.description {
    white-space: pre;
}

/* for search box: */
.controls {
    margin-top: 16px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
    background-color: #fff;
    padding: 0 11px 0 13px;
    width: 400px;
    height: 30px;
    font-size: 15px;
    font-weight: 400;
    text-overflow: ellipsis;
}

#pac-input:hover{
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    border-color: #4d90fe;
}

#pac-input:focus {
    border-color: #4d90fe;
    margin-left: -1px;
    padding-left: 14px;  /* Regular padding-left + 1. */
    width: 400px;
}

.pac-container {
}


.embed-code {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.reports-container .report-item {
    margin-top: 10px;
}

.reports-container .report-item:last-child {
    margin-bottom: 10px;
}

.form-control-wide {
    width: 400px;
    direction: ltr;
    text-align: left;
}

h4 {
    max-width:340px
}

textarea.form-control-wide {
    height: 100px;
}
.popover{
    width:300px !important;
    max-width:300px !important;}
/* agam */
.popover-title{
    font-weight: bold;
}
.popover-navigation{
    padding: 8px 14px;
}
.gm-style-iwtour {
    font-family: 'Alef','sans-serif';
    font-size: 14px;
    line-height: 20px;
    width: 300px !important;
    max-width: 300px !important;
    top: 15px !important;
    right: 0px !important;
    left: 0px !important;
    background-color: #fff;
    box-shadow: 0.5px 0.5px 0.5px 1px #bbbbbb;
    border: 1.5px solid #fff;/*rgba(72, 181, 233, 0.6);*/
    border-radius: 5px 5px 5px 5px;

}

.navbar-fixed-top{
    position: absolute !important;
}

#app{
    position: relative;
    width: 100%;
    height: 100%;
}

.sb-button{
    min-height: initial !important;
}

.info-window{
    position: relative;
    height: 100%;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1),0 1px 10px rgba(0,0,0,0.1);
    width: 300px;
}

.marker-info-window{
    overflow-y: hidden;
    overflow-x: hidden;
    /* height: 370px; */
    width: 300px;
}

.gm-style-iw > div::-webkit-scrollbar{
    -webkit-appearance: none;
    width: 7px;
}

.gm-style-iw > div::-webkit-scrollbar-thumb{
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.toggle-wrapper {
    margin-right: 118px;
    vertical-align: middle;
    cursor: pointer;
    line-height: 40px;
    padding-top: 12px;
}

#toggle-sidebar {
    /*border-right: 1px solid #ddd;*/
    /*padding-right: 8px;*/
    /*border-left: 1px solid #ddd;*/
    padding-left: 8px;
    height: 100%;
    /*padding-top: 1px;*/
}

#toggle-sidebar div {
    width: 20px;
    height: 2px;
    background: #555;
    margin: 4px auto;
    transition: all 0.3s;
    backface-visibility: hidden;
}

#toggle-sidebar.on .one {
    transform: rotate(45deg) translate(4px, 4px);
}

#toggle-sidebar.on .two {
    opacity: 0;
}

#toggle-sidebar.on .three {
    transform: rotate(-45deg) translate(4px, -5px);
}

input[type='date']{
    /*font-size: 13px;*/
    /*color: red !important;*/
    color: #08c !important;
    background: #f2f2f2 !important;
}

input[type='checkbox']{
    display: none;
}

#filter-description{
    height: 100%;
}

#filter-string{
    text-align: center;
    vertical-align: middle;
    padding-top: 4% !important;
}

#filter-string > p{
    font-weight: bold;
    text-align: center;
    line-height: 30px !important;
    font-size: 30px !important;
}

#filter-string > span {
    font-size: 20px !important;
    font-weight: bold;
}

#filter-string > span > a{
    display: inline;
    text-decoration: none;
    cursor: pointer;
}

#filter-string > span > a:hover{
    color: grey !important;
}

#step6tour li, #step6tour .btn-label{
    padding-right: 10px;
}

.gm-style-iw > div > div{
    height:100%;
    max-height:380px;
}

.current-view .gmnoprint{
    position: relative;
}

.sidebar-pin .gmnoprint{
    top: 33px;
    left: 15px;
}

.sidebar-dot .gmnoprint{
    top:5px;
}

.current-view a > div:first-child{
    float: right;
    display: inline;
}

.sidebar-pin a > div:first-child{
    margin-left: 7px;
}

.sidebar-dot a > div:first-child{
    margin: 15px;
    margin-right: 0px;
}
/* for login popup*/
.modal-header {
    background-color: lightgray;
}
.modal-header h3 {
    font-size: 20px;
}

.modal-header .close {
    font-size: 40px;
}

.btn-social-icon {
    width: 160px;
    /*border-radius: 0px;*/
    color: #fff !important;
}
.btn-facebook {

    /*background-color: #3B5998;*/
    background-image: linear-gradient(#4C69BA, #3B55A0);
}

.btn-facebook:hover {
    background-color: #3B5998;
    color: #fff !important; 
}

.btn-google {
    /*background-color: #EA4335;*/
    background-color: #EA4335;
}

.btn-google:hover {
    background-color: #D94330;
    color: #fff !important; 
}
