/* body{
    background: #c1c1c142;
} */

.header-body-location img{
    height: 74px;
}
.fa-rotate-45 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    transform: rotate(45deg);
}
.fa-rotate-315 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    transform: rotate(315deg);
}
.content{
	background:white;
	padding-top:35px;
	padding-bottom:35px;
}
#image-loading {
    position: absolute;
    top: 27px;
    left: 40px;
    display: none;
  }
#change-avatar-btn {
    width: 160px;
    margin-top: 2px;
}
#avatar-image {
    height: 100px;
    width: 100px;
    background-color: #fff;
    border: 2px solid gray;
    border-radius: 5px;
    cursor: pointer;
}
#updateStripePaymentGeo, #aboutGeo, #contactGeo, #signUpGeo, #logInGeo, #apiKeyGeo, #settingGeo, #resetPass, #forgot, #stripePaymentGeo, #historyGeo{
    padding: 0px;
}
#header{overflow:hidden;}
.header-box h1{
    padding-top: 40px;
    padding-bottom: 40px;
	color:black;
	font-weight:bold;
}
#apiKeyGeo select.custom-select{
    width: 80px;
}
.jcrop-keymgr{
    display: none;
}
#contactGeo .content{
    margin-top: 1%;
}
#contactGeo h2{
	margin-bottom:0px !important;
}
#contactGeo i{color:#004cff;margin-right:25px;margin-top:8px;display:block;}
#contactGeo .contact-sub-title div:first-child{color:#aeaeae;}
#contactGeo .contact-sub-title div:last-child{color:#4f4f4f;font-weight:bold;}

#contactGeo .content .textarea-contact{
    margin-bottom: 4%;
    margin-top: 4%;
}

#logGeolocation .menu-log-in{
    /* margin-left: 84%; */
    border-radius: 10px;
    /* margin-top: -1%; */
    background: darkgrey;
    min-width: 8rem;
}

#logGeolocation .menu-log-in .dropdown-item{
    color: white;
}

#logGeolocation .menu-log-in .dropdown-item:focus, .dropdown-item:hover {
    background-color: #545b62;
}

.alert-errors{
    color: red;
    font-size: small;
}

.alert-errors-1{
    color: red;
    font-size: small;
}

#apiKeyGeo .frames-key{
    border-style: ridge;
    background: white;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

#apiKeyGeo .frames-key .api-latlng{
    margin-top: 10px;
}

#apiKeyGeo .frames-key .introduce-api{
    text-align: center;
    padding-top: 7px;
}

#apiKeyGeo .btn-upgrade{
    float: right;
}

#alert-change-password{
    color: aqua;
    text-align: center;
}

#apiKeyGeo .frames-key .btn-danger:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

#btnStartTop:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0);
}

header .logo-geo{
    height: 40px;
    width: 40px;
}

footer .footer-logo-geo{
    height: 20px;
    width: 20px;
}

.banner-location{
    width: 100%;
    height: 340px;
    background: url(/frontend/images/banner.png) no-repeat;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
}

#locationGeo .card-text{
    height: 72px;
}

.banner-location .content-banner{
    width: 25%;
    margin-left: 15%;
    padding-top: 5%;
}

.banner-location .content-banner img {
    height: 60px;
}

#locationGeo .card-deck .fa-circle{
    color: #007bff;
}

#locationGeo .card-body .package{
    background-color: #2F344A;
    color: white;
}

#locationGeo .card-body .package .card-title{
    margin-bottom: 0px;
}

#locationGeo .card-body .package .price_request{
    font-size: 40px;
}

#locationGeo .card-body .contact{
    background-color: #27A2FF;
    color: white;
}

#locationGeo .card-body .card-head{
    height: 208px;
}

.link-scroll{
    color: black;
    font-size: 20px;
    font-weight: 500;
}

#settingGeo .account-information{

}

#settingGeo .add-credit-card{

}

#logInGeo .log-in{

}

#signUpGeo .sign-up{

}

#contactGeo .contact{

}

#aboutGeo .about{

}

#monthCard {
    border-radius: 10px;
    /* background: linear-gradient(white, #c0c1c2); */
    /* background: url(/frontend/images/up-down.png) no-repeat 254px 12px; */
}

#yearCard {
    border-radius: 10px;
    /* background: linear-gradient(white, #c0c1c2); */
    /* background: url(/frontend/images/up-down.png) no-repeat 254px 12px; */
}

#updateStripePaymentGeo .content{
    background: #e9ecef;
    padding: 40px 0px;
}

#stripePaymentGeo .content{
    background: #e9ecef;
    padding: 40px 0px;
}

footer .text-right{
    margin-top: 10px;
}

footer .text-right i{
    color: rgb(73, 160, 227);
}

footer a{
    color: #007bffc2;
}

footer a:hover{
    color: #007bffc2;
}

#exampleModalCenter .fa-check-circle{
    color: #007bff;
}

#apiKeyGeo .frames-key .api-latlng{
    word-break: break-all;
}

#apiKeyGeo .frames-key .api-address{
    word-break: break-all;
}

#apiKeyGeo .frames-key .introduce-api{
    word-break: break-all;
}

#apiKeyGeo .canvas-chart{
    height:550px;
    width:100%
}

#searchx:focus{
    outline: 0px;
}

#suggestion:focus{
    outline: 0px;
}

#suggestion{
    display: none;
    background: white;
    border-radius: 10px 0 0 10px;
}

#suggestion ul{
    padding-left: 0px;
    height: 240px;
    overflow: auto;
    width: 100%;
}

#suggestion ul li{
    list-style-type: none;
    cursor: pointer;
}

#inputSearch:focus{
    box-shadow: 0 0 0 0.2rem rgba(250,250,250,.25);
}
#zzz li:hover{
    background-color: #ccc;
}
#zzz li{
    padding: 5px 20px;
}

#rechargeLogs_filter {
    padding-right: 10px;
}

#rechargeLogs_paginate {
    padding-right: 10px;
}


.loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999999999999;
}


/* Transparent Overlay */

.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}


/* :not(:required) hides these rules from IE9 and below */

.loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.25em;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.25em;
    -webkit-box-shadow: rgb(0, 191, 255) 1.5em 0 0 0, rgb(0, 191, 255) 1.1em 1.1em 0 0, rgb(0, 191, 255) 0 1.5em 0 0, rgb(0, 191, 255) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.25) -1.5em 0 0 0, rgba(0, 0, 0, 0.25) -1.1em -1.1em 0 0, rgb(0, 191, 255) 0 -1.5em 0 0, rgb(0, 191, 255) 1.1em -1.1em 0 0;
    box-shadow: rgb(0, 191, 255) 1.5em 0 0 0, rgb(0, 191, 255) 1.1em 1.1em 0 0, rgb(0, 191, 255) 0 1.5em 0 0, rgb(0, 191, 255) -1.1em 1.1em 0 0, rgb(0, 191, 255) -1.5em 0 0 0, rgb(0, 191, 255) -1.1em -1.1em 0 0, rgb(0, 191, 255) 0 -1.5em 0 0, rgb(0, 191, 255) 1.1em -1.1em 0 0;
}


/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}



.dropdown-result-search {
    background: #fff;
    border-radius: 4px;
    display: none;
    font-weight: 500;
    left: 0;
    list-style: none;
    position: absolute;
    right: 0;
    top: 110%;
    z-index: 9999;
    margin: 0 40px;
}
.dropdown-result-search ul.list-item{
    max-height: 240px;
    overflow: auto;
}
.dropdown-result-search li a {
  background: #fff;
  border: inherit;
  color: #333;
  display: inline-block;
/*  text-align: right;*/
  text-decoration: none;
   width: 100%;
}
.dropdown-result-search li{
  padding: 5px 20px;
}
.dropdown-result-search li:hover,.dropdown-result-search li:hover a {
  background-color: #ccc;
  cursor: pointer;
}
/*.group-search .img-search{
    width: 18%;
    float: left;
}
.group-search .img-location{
    text-align: right;
    width: 18%;
    float: left;
}*/
.group-search{
    position: relative;
    width: 100%;
}
.group-search .img-location{
   position: absolute;
   z-index: 9999;
   height: 24px;
   top: 6px;
   left: 10px;
   border-right: 1px solid #ccc;
}
.group-search .img-location img{
    height: 20px;
    position: relative;
    top: 2px;
}
.group-search .img-search{
    position: absolute;
    z-index: 9999;
    right: 0;
    top: 0;
    background:#004cff;
    border-radius:0 4px 4px 0;
    padding: 5px 12px;
    color:#fff;
}
.group-search  .delete-btn img{
    height: 14px;
}
.group-search .search-holder{
    position: relative;
    width: 100%;
    /*float: left;*/
    /*padding : 0 1%;*/
}
.group-search .search-holder input{
    padding-left: 48px !important;
    padding-right: 70px !important;
}
.group-search img{
    vertical-align: inherit;
}
.group-search{
    width: 100%;
    margin : 10px auto;
}
.group-search .search-holder input[name="search_location"]{
    width: 100%;
    display: inline-block;
    padding: .375rem 2.5rem .375rem .75rem;
}
.group-search .search-holder .delete-btn{
    position: absolute;
    right: 52px;
    top: 8px;
}
.group-search ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.m-pointer{
    cursor: pointer;
} 
#mapSearchContainer{position:fixed;top:20px;right:40px;height:30px;width:180px;z-index:110;font-size:10pt;color:#5d5d5d;border:solid 1px #bbb;background-color:#f8f8f8;}

.zoom_wrapper{z-index:1001;overflow:hidden;transition:.7s opacity 0s;-webkit-transition:.7s opacity 0s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:relative;white-space:nowrap;pointer-events:auto;top:80px;right:10px;position:absolute;}
.zoom_wrapper .zoombox-in{cursor: pointer;display: inline-block;background: #004cff;color: white;padding: 0px 3px 3px 3px;border-top-left-radius: 3px;border-top-right-radius: 3px;width: 30px;text-align: center;font-weight: bold;font-size: 20px;}
.zoom_wrapper .zoombox-out{cursor: pointer;display: inline-block; background: white;color: #333333;padding: 0px 3px 3px 3px;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px; width: 30px; text-align: center; font-weight: bold;font-size: 20px;}
.zoom_wrapper a, zoom_wrapper a:focus, .zoom_wrapper a:active, .zoom_wrapper a:focus-within, .zoom_wrapper a:hover, .zoom_wrapper a:visited{outline:0 !important;line-height:1 !important;text-decoration: none;}
.zoombox-in a, .zoombox-in a:focus, .zoombox-in  a:active, .zoombox-in a:focus-within, .zoombox-in  a:hover, .zoombox-in a:visited{color:white;}
.zoombox-out a, .zoombox-out a:focus, .zoombox-out  a:active, .zoombox-out a:focus-within, .zoombox-out  a:hover, .zoombox-out a:visited{color:#333333;}

.layer_wrapper{z-index:1002;overflow:hidden;transition:.7s opacity 0s;-webkit-transition:.7s opacity 0s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:relative;white-space:nowrap;pointer-events:auto;top:147px;right:10px;position:absolute;}
.layer_wrapper > span{cursor: pointer;display: block;background: white;color: #333333;padding: 0px 3px 3px 3px;width: 30px;text-align: center;font-weight: bold;font-size: 20px;}
.layer_wrapper > span:first-child{border-top-right-radius: 3px; border-top-left-radius: 3px;}
.layer_wrapper > span:last-child{border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}
.icons-layer, .icons-layer-active{font-size: 0.7em !important;line-height:12px;margin:2px;}
.icons-layer-active{background-color: #004cff; box-shadow: 0 0 4px 0 black;color: white; border-radius: 25px;display: inline-block;width: 20px;height: 20px;padding-top: 3px;text-align:center;}

.info_wrapper{z-index:1000;overflow:hidden;transition:.7s opacity 0s;-webkit-transition:.7s opacity 0s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-width:250px;position:relative;white-space:nowrap;pointer-events:auto;bottom:50px;right:10px;position:absolute;}
.data_fullscreen_box{text-align:right;color:#333333;margin-bottom:7px;}
.map_fullscreen{margin-left:4px;}
.map_fullscreen > span > span{width: 30px;text-align: center;display:inline-block;background: white;padding: 5px 5px 2px 5px;border-top-left-radius: 3px;border-top-right-radius: 3px;}
.map_info_container .map_info:focus{outline:none;}
.map_info_container > span > span{width: 30px;text-align: center;border-top:1px solid #e5e5e5;display:inline-block;background: white;padding: 2px 5px 5px 5px;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;}

.unit_wrapper{z-index:1001;overflow:hidden;transition:.7s opacity 0s;-webkit-transition:.7s opacity 0s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-width:250px;position:relative;white-space:nowrap;pointer-events:auto;bottom:24px;right:10px;position:absolute;}
.unit{margin-right: unset !important;display:none;cursor:pointer;-webkit-transition:.3s opacity;transition:.3s opacity;margin-bottom:5px;border-radius:3px;}
.unit-box{width:100%;background-color:#7c7c7c;white-space:nowrap;font-size:12px;box-shadow:0 0 4px 0 black;}
.unit-box > div > div{color:white;text-align: center; vertical-align: middle;padding: 0px !important; height: 17px;margin-top: 5px;margin-bottom: 5px;font-size: 12px;line-height:18px}
.one-unit {pointer-events: none;}

.unit-temp-f{background: linear-gradient(to right, rgb(149, 137, 211), rgb(149, 137, 211), rgb(149, 137, 211), rgb(149, 137, 211), rgb(150, 209, 216), rgb(129, 204, 197), rgb(103, 180, 186), rgb(95, 143, 197), rgb(80, 140, 62), rgb(121, 146, 28), rgb(171, 161, 14), rgb(223, 177, 6), rgb(243, 150, 6), rgb(236, 95, 21), rgb(190, 65, 18), rgb(138, 43, 10), rgb(138, 43, 10));}
.unit-temp-c{background: linear-gradient(to right, rgb(149, 137, 211), rgb(149, 137, 211), rgb(149, 137, 211), rgb(149, 137, 211), rgb(150, 209, 216), rgb(129, 204, 197), rgb(103, 180, 186), rgb(95, 143, 197), rgb(80, 140, 62), rgb(121, 146, 28), rgb(171, 161, 14), rgb(223, 177, 6), rgb(243, 150, 6), rgb(236, 95, 21), rgb(190, 65, 18), rgb(138, 43, 10), rgb(138, 43, 10));}
.unit-rain-mm{background: linear-gradient(to right, rgb(95, 88, 124), rgb(95, 88, 124), rgb(95, 88, 124), rgb(95, 88, 124), rgb(89, 93, 139), rgb(54, 116, 143), rgb(44, 122, 141), rgb(32, 129, 137), rgb(12, 140, 130), rgb(83, 154, 102), rgb(251, 158, 191), rgb(249, 162, 193), rgb(249, 162, 193));}
.unit-rain-in{background: linear-gradient(to right, rgb(95, 88, 124), rgb(95, 88, 124), rgb(95, 88, 124), rgb(95, 88, 124), rgb(89, 93, 139), rgb(54, 116, 143), rgb(44, 122, 141), rgb(32, 129, 137), rgb(12, 140, 130), rgb(83, 154, 102), rgb(251, 158, 191), rgb(249, 162, 193), rgb(249, 162, 193));}
.unit-snow-cm{background: linear-gradient(to right, rgb(70, 83, 151), rgb(70, 83, 151), rgb(70, 83, 151), rgb(70, 83, 151), rgb(67, 97, 160), rgb(64, 113, 164), rgb(62, 139, 166), rgb(65, 163, 167), rgb(95, 154, 56), rgb(168, 169, 65), rgb(171, 134, 62), rgb(172, 95, 62), rgb(174, 62, 86), rgb(177, 60, 116), rgb(177, 60, 116));}
.unit-snow-in{background: linear-gradient(to right, rgb(70, 83, 151), rgb(70, 83, 151), rgb(70, 83, 151), rgb(70, 83, 151), rgb(67, 97, 160), rgb(64, 113, 164), rgb(62, 139, 166), rgb(65, 163, 167), rgb(95, 154, 56), rgb(168, 169, 65), rgb(171, 134, 62), rgb(172, 95, 62), rgb(174, 62, 86), rgb(177, 60, 116), rgb(177, 60, 116));}
.unit-wind-kmh{background: linear-gradient(to right, rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(61, 110, 163), rgb(74, 148, 170), rgb(74, 146, 148), rgb(77, 142, 124), rgb(76, 164, 76), rgb(103, 164, 54), rgb(162, 135, 64), rgb(162, 109, 92), rgb(141, 63, 92), rgb(151, 75, 145), rgb(95, 100, 160), rgb(91, 136, 161), rgb(91, 136, 161));}
.unit-wind-kt{background: linear-gradient(to right, rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(61, 110, 163), rgb(74, 148, 170), rgb(74, 146, 148), rgb(77, 142, 124), rgb(76, 164, 76), rgb(103, 164, 54), rgb(162, 135, 64), rgb(162, 109, 92), rgb(141, 63, 92), rgb(151, 75, 145), rgb(95, 100, 160), rgb(91, 136, 161), rgb(91, 136, 161));}
.unit-wind-bft{background: linear-gradient(to right, rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(61, 110, 163), rgb(74, 148, 170), rgb(74, 146, 148), rgb(77, 142, 124), rgb(76, 164, 76), rgb(103, 164, 54), rgb(162, 135, 64), rgb(162, 109, 92), rgb(141, 63, 92), rgb(151, 75, 145), rgb(95, 100, 160), rgb(91, 136, 161), rgb(91, 136, 161));}
.unit-wind-ms{background: linear-gradient(to right, rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(61, 110, 163), rgb(74, 148, 170), rgb(74, 146, 148), rgb(77, 142, 124), rgb(76, 164, 76), rgb(103, 164, 54), rgb(162, 135, 64), rgb(162, 109, 92), rgb(141, 63, 92), rgb(151, 75, 145), rgb(95, 100, 160), rgb(91, 136, 161), rgb(91, 136, 161));}
.unit-wind-mph{background: linear-gradient(to right, rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(98, 113, 184), rgb(61, 110, 163), rgb(74, 148, 170), rgb(74, 146, 148), rgb(77, 142, 124), rgb(76, 164, 76), rgb(103, 164, 54), rgb(162, 135, 64), rgb(162, 109, 92), rgb(141, 63, 92), rgb(151, 75, 145), rgb(95, 100, 160), rgb(91, 136, 161), rgb(91, 136, 161));}
.unit-pressure-hpa{background: linear-gradient(to right, rgb(143, 180, 185), rgb(143, 180, 185), rgb(143, 180, 185), rgb(143, 180, 185), rgb(104, 181, 180), rgb(69, 168, 167), rgb(57, 123, 148), rgb(52, 97, 140), rgb(58, 117, 53), rgb(165, 153, 61), rgb(171, 84, 67), rgb(95, 60, 81), rgb(95, 60, 81));}
.unit-pressure-inhg{background: linear-gradient(to right, rgb(143, 180, 185), rgb(143, 180, 185), rgb(143, 180, 185), rgb(143, 180, 185), rgb(104, 181, 180), rgb(69, 168, 167), rgb(57, 123, 148), rgb(52, 97, 140), rgb(58, 117, 53), rgb(165, 153, 61), rgb(171, 84, 67), rgb(95, 60, 81), rgb(95, 60, 81));}
.unit-pressure-mmhg{background: linear-gradient(to right, rgb(143, 180, 185), rgb(143, 180, 185), rgb(143, 180, 185), rgb(143, 180, 185), rgb(104, 181, 180), rgb(69, 168, 167), rgb(57, 123, 148), rgb(52, 97, 140), rgb(58, 117, 53), rgb(165, 153, 61), rgb(171, 84, 67), rgb(95, 60, 81), rgb(95, 60, 81));}
.unit-humidity-percent{background: linear-gradient(to right, rgb(174, 110, 56), rgb(174, 110, 56), rgb(174, 110, 56), rgb(174, 110, 56), rgb(174, 146, 56), rgb(105, 174, 56), rgb(54, 175, 148), rgb(56, 158, 174), rgb(56, 142, 174), rgb(56, 133, 174), rgb(56, 111, 166), rgb(56, 71, 116), rgb(56, 71, 116));}
.unit-clouds-mm{background: linear-gradient(to right, rgb(59, 124, 162), rgb(59, 124, 162), rgb(59, 124, 162), rgb(59, 124, 162), rgb(59, 126, 162), rgb(59, 128, 162), rgb(58, 133, 162), rgb(58, 137, 162), rgb(58, 153, 162), rgb(50, 166, 111), rgb(74, 164, 57), rgb(129, 162, 59), rgb(162, 162, 59), rgb(162, 60, 59), rgb(171, 54, 107), rgb(164, 58, 154), rgb(164, 58, 154));}
.unit-clouds-in{background: linear-gradient(to right, rgb(59, 124, 162), rgb(59, 124, 162), rgb(59, 124, 162), rgb(59, 124, 162), rgb(59, 126, 162), rgb(59, 128, 162), rgb(58, 133, 162), rgb(58, 137, 162), rgb(58, 153, 162), rgb(50, 166, 111), rgb(74, 164, 57), rgb(129, 162, 59), rgb(162, 162, 59), rgb(162, 60, 59), rgb(171, 54, 107), rgb(164, 58, 154), rgb(164, 58, 154));}

.logo_wrapper {z-index: 1000; position: relative;bottom: 7px;right: 10px;position: absolute;}
.copyright{color:white;font-size:11px;font-weight:bold;pointer-events:auto;text-shadow:0px 0px 5px rgba(0, 0, 0, 0.7);text-align:right;}

.display_none{display:none;}
.clickable-box{cursor:pointer;}
.clickable-box:hover {transform: scale(1.05, 1.05);}
.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

.popover_map_info_container{right:40px;bottom:61px;position:absolute;z-index:1060;display:block;max-width:500px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;}
.popover_info_box{line-height:1.8;text-transform: none;white-space: normal;font-size: 12px;padding: 0;}
.popover_info_box img {position: absolute;right: 20px;top: 15px; max-width: 200px;max-height: 80px;opacity: .6;}
.popover_info_box .copy{font-size:9px;margin-top:2em;text-align:center;padding:0 20px;opacity:.6;}
.popover_info_box .section-title{color:#9d0300;margin-top:.8em;}
.popover_info_box .menu-block{background-color:#415641;color:white;padding:10px 15px;width:100%;position:relative;overflow:hidden;margin:8px;margin-left:0;margin-right:0;border-radius:8px;}
.popover_info_box .menu-block div{font-size:1.6em;font-weight:300;line-height:1.6;text-align:center;}
.tooltiptext, .tooltiptext:hover{font-size:9px!important;line-height:30px!important;text-decoration:underline;margin-top:-23px!important;padding:0!important;}
.pointer{position:absolute;top:86px;left:60px;z-index:99999;}

.tooltip-inner {background-color:white;color: #004cff !important;}
.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {border-left-color: white !important;}

.setting_wrapper{z-index:1001;overflow:hidden;transition:.7s opacity 0s;-webkit-transition:.7s opacity 0s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:40px;position:relative;white-space:nowrap;pointer-events:auto;top:80px;left:10px;position:absolute;}
.setting_wrapper .setting_config{color: #333333;width: 30px;text-align: center;display:block;background: white;padding: 5px 5px 2px 5px;border-top-left-radius: 3px;border-top-right-radius: 3px;}
.setting_wrapper .setting_share{color: #333333;width: 30px;text-align: center;border-top:1px solid #e5e5e5;display:block;background: white;padding: 2px 5px 5px 5px;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;}
.setting_wrapper_cjcbd{z-index:1008;display:none;background:white;overflow:hidden;transition:.7s opacity 0s;-webkit-transition:.7s opacity 0s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;max-width:calc(100% - 50px);position:relative;pointer-events:auto;top:67px;left:40px;position:absolute;border-top-right-radius: 3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;}
.cover-btn-close{text-align:right;}
.btn-close-x{width:31px;border:white;background:white;margin-bottom: 5px;}
.btn-outline-dark:focus{box-shadow:0 0 0 0.2rem rgba(255, 255, 255, 0.5);}
.active-unit-btn{background:#004cff !important;color:white !important;}
.setting-selected span:first-child{border-top-right-radius: 0px !important;}
.setting-selected span:last-child{border-bottom-right-radius: 0px !important;}
.setting-unit-selected{background:#004cff !important;color: white !important; }
.breakline{border-bottom: 1px solid #ccc;width: 100%;margin-bottom: 20px;margin-top: 14px;}
.setting-content-box{padding:10px;max-width:480px;}
.setting-content-box p{text-overflow: ellipsis;overflow:hidden;}

.expand_wrapper{z-index:1002;overflow:hidden;transition:.7s opacity 0s;-webkit-transition:.7s opacity 0s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;position:relative;white-space:nowrap;pointer-events:auto;top:147px;right:10px;position:absolute;}
.expand_wrapper span{color: #333333; width: 30px;text-align: center;display: block;background: white;padding: 5px 5px 4px 5px; border-radius:3px;}
.expand_box{display:none;}
.expand-show{border-bottom-left-radius: 0px !important;border-top-left-radius: 0px !important;border-left: 1px solid #e5e5e5;}
.layer-show span:last-child{border-bottom-right-radius: 0px !important;border-top-right-radius: 0px !important;}

.unit-box-container{padding-left:0px !important;}
.unit-box-container span:first-child{border-left:1px solid #333333;border-radius: 3px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
.unit-box-container span:last-child{border-radius: 3px;border-top-left-radius: 0px;border-bottom-left-radius: 0px;}
.unit-box-container-one span:first-child{border-left:0px !important;border-radius: 3px;border-top-right-radius: 3px !important;border-bottom-right-radius: 3px !important;}
.unit-box-container-one span:last-child{border-radius: 3px;border-top-left-radius: 3px !important;border-bottom-left-radius: 3px !important;}
.unit-box-content{cursor:pointer;border: 1px solid #333333;float: left;padding: 0px 5px 2px 5px;color: black; border-left: 0px;}
.unit-box-content:hover{color:#004cff;}
.unit-box-content-select{padding: 0px !important;height: 30px;}
.setting_warpper_mobile,.info_warpper_mobile{position: absolute;top: 0px;z-index: 1000;left: 0px;height: 55px;background: #002272;width: 100%;color:white;}
#setting-unit-language-layout > select{padding: 0px !important;height: 30px;}

.hader_mobile_back{position: absolute;top: 5px;left: 12px; font-size: 30px;}
.header_mobile_title{position: absolute; left: 0; right: 0;text-align: center;width: 100%;padding-top: 14px; font-weight: bold;height: 55px;}

.clickable{cursor:pointer;}
 #layer-control-bottom{z-index:1002;margin-right:270px;height:60px;user-select:none;transition:all ease-in-out .4s;position:absolute;bottom:7px;right:0;left:0;}
 #layer-control-bottom #prev-btn{position: absolute;top: 21px; left: 10px}
 #layer-control-bottom #timeline-bar{user-select:none;-webkit-transition:.5s margin-bottom ease-in-out 0s;position:absolute;left:47px;right:0;height:30px;bottom:0;margin-bottom:0;}
 #layer-control-bottom #next-btn{position: absolute;top: 21px; right: 5px}
 .timeline-bar .progress-line{z-index:1;left:0px;padding-right:50px;height:6px;cursor:pointer;position:relative;border:6px solid transparent;background-clip:padding-box;border-right:none;border-left:none;top:-6px;transition:width ease-in-out .7s;}
 .timeline-bar .progress-line .played{background-color:#e5e5e5;height:6px;float:left;border-top-left-radius:3px;border-bottom-left-radius:3px;}
 .timeline-bar .progress-line #running-line{height:6px;background-color:rgba(68, 65, 65, 0.84);width:100%;border-radius:6px;}
 .timeline-bar .progress-line i{display:block;width:3px;height:6px;position:absolute;background-color:#946051;top:0;}
 .timeline-bar .progress-line .running_start_date > i{display:block;width:3px;height:6px;position:absolute;background-color:#00bcd4;top:0;}

 #layer-control-bottom #timeline-bar .timecode{font-size:13px;position:absolute;display:none;box-sizing:border-box;top:-2.4em;margin-left:-2em;}
 .timecode.ghost-timecode .box{box-shadow:none;cursor:pointer;color:white;background-color:rgba(68, 65, 65, 0.84);}
 .timecode .box{position:relative;background-color:#d49500;color:white;height:1.8em;box-sizing:border-box;padding:1px .8em;white-space:nowrap;text-align:center;display:block;vertical-align:middle;border-radius:.5em;box-shadow:0 0 4px 0 black;}
 .timecode.ghost-timecode .box > .current-time-arrow{border-top-color:rgba(68, 65, 65, 0.84);}
 .timecode .box > .current-time-arrow{top:100%;left:2em;border:solid transparent;content:' ';height:0;width:0;position:absolute;border-top-color:#d49500;border-width:.5em;margin-left:-0.5em;}
 #layer-control-bottom #timeline-bar #playpause{position:absolute;top:-12px;left:5px;z-index:10;text-align:center;display:block;font-size:25px;color:#9d0300;width:1.2em;height:1.2em;border-radius:1.2em;box-shadow:0 0 4px 0 black;background-color:#e5e5e5;}
 #layer-control-bottom #timeline-bar #playpause i{font-size:15px;top:50%;transform:translateY(-53%);}
 #layer-control-bottom #timeline-bar #calendar{position:absolute;left:0px;right:0;top:6px;white-space:nowrap;}
 #layer-control-bottom #timeline-bar #calendar div{display:inline-block;box-sizing:border-box;text-align:left;padding:3px 0 0 2px;font-size:12px;line-height:1;height:17px;white-space:nowrap;overflow:hidden;text-shadow:0 0 4px black;color:#fff3e1;}
 #layer-control-bottom #timeline-bar #calendar div:not(:first-child){/*border-left:1px solid rgba(68, 65, 65, 0.84);*/}
 .ghost-timecode{opacity:0;left:46px;margin-top:0px;}

 .widget_info_wrapper{z-index:1000;overflow:hidden;transition:.7s opacity 0s;-webkit-transition:.7s opacity 0s;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-width:250px;position:relative;white-space:nowrap;pointer-events:auto;bottom:5px;left:0; right:0; position:absolute;}
 .widget_copyright{color:white;font-size:11px;font-weight:bold;pointer-events:auto;text-shadow:0px 0px 5px rgba(0, 0, 0, 0.7);text-align:center;}

 /* //update_csss */

 html{
    --size-body:18px;
    --line-height-body:28px;
    --sub-text:16px;
    --sub-text-article:15px;
    --size-h1:40px;
    --size-h2:32px;
    --size-h3:22px;
    --c-text-primary:#3694C2;
    --c-text-white:#fff;
    --c-text-gray:#616161;
    --c-text-black:#414141;
}
a:hover {
    text-decoration:none;
}
.size-h1 {
    font-size:var(--size-h1)
}
.size-h2 {
    font-size:var(--size-h2)
}
.size-h3 {
    font-size:var(--size-h3)
}
.sub-text {
    font-size:var(--sub-text)
}
.c-text-primary {
    color:var(--c-text-primary)
}
.c-text-white {
    color:var(--c-text-white)
}
.c-text-gray {
    color:var(--c-text-gray)
}
.c-text-black {
    color:var(--c-text-black)
}
.pt-section {
    padding-top: 50px;
}
.mt-section {
    margin-top: 50px;
}
.pt-content {
    padding-top: 20px;
}
.breadcrumb {
    padding-left: 0;
}
.text-3-line {
    overflow: hidden;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.size-sub-text-article {
    font-size: var(--sub-text-article)
}
.pt-fixed {
    padding-top: 65px;
}
body {
    font-size:var(--size-body);
    line-height:var(--line-height-body);
    background-color: #ededed;
}
/* --------------header---------- */
header#header {
    background-image: url(/frontend/images/bg_header.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    position: relative;
    z-index: 9999999999;
}

header#header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999999999999;
}

header .navbar-expand-lg .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    font-size:1.05rem;
    padding-left:0.75rem;
    padding-right:0.75rem;
}

header .navbar-expand-lg .navbar-nav .nav-link::before {
    content:'';
    width:calc(100% - 24px);
    height:3px;
    position: absolute;
    bottom:0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius:2px;
    opacity: 0;
}

header .navbar-expand-lg .navbar-nav .nav-item.active .nav-link::before {
    opacity: 1
}

header .navbar-expand-lg .navbar-nav .nav-item.active .nav-link {
    font-weight:500;
    color: #fff;
}

header .navbar-expand-lg .navbar-nav .nav-link:hover {
    color: #fff;
}

header .navbar-toggler .navbar-toggler-icon {
    background-image: url(/frontend/images/menu.svg);
}

/* -----------home--------------- */

section.radar .box-image a>img {
    width:100%;
    aspect-ratio:2
}
.setting_wrapper, .zoom_wrapper {
    top:80px
}
.group-search .img-search {
    position: absolute;
    z-index: 9999;
    right: 0;
    top: 0;
    background: #004cff;
    border-radius: 0 4px 4px 0;
    padding: 5px 12px;
    color: #fff;
}

section.radar .list-button {
    background-color: var(--c-text-white);
    padding:16px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap:12px;
}

section.radar .list-button .item {
    color:var(--c-text-gray);
    text-decoration:none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: var(--sub-text);
    padding:2px
}
section.radar .list-button .item:hover {
    color:var(--c-text-white);
    border-color:var(--c-text-primary);
    background-color: var(--c-text-primary)
}

section.radar .list-button .item span {
    padding-left:30px;
    position: relative;
}
section.radar .list-button .item span::before {
    content:'';
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0;
    top: 50%;
    transform:translateY(-50%);
    background-position:center;
    background-repeat: no-repeat;
    background-size:contain
}
section.radar .list-button .item span.wind::before {
    background-image: url(/frontend/images/btn_wind.svg);
}
section.radar .list-button .item span.temperature::before {
    background-image: url(/frontend/images/btn_temperature.svg);
}
section.radar .list-button .item span.snow::before {
    background-image: url(/frontend/images/btn_snow.svg);
}
section.radar .list-button .item span.rain::before {
    background-image: url(/frontend/images/btn_rain.svg);
}
section.radar .list-button .item span.pressure::before {
    background-image: url(/frontend/images/btn_pressure.svg);
}
section.radar .list-button .item span.humidity::before {
    background-image: url(/frontend/images/btn_humidity.svg);
}
section.radar .list-button .item span.cloud::before {
    background-image: url(/frontend/images/btn_cloud.svg);
}

section.radar .list-button .item:hover span.wind::before {
    background-image: url(/frontend/images/btn_wind_white.svg);
}
section.radar .list-button .item:hover span.temperature::before {
    background-image: url(/frontend/images/btn_temperature_white.svg);
}
section.radar .list-button .item:hover span.snow::before {
    background-image: url(/frontend/images/btn_snow_white.svg);
}
section.radar .list-button .item:hover span.rain::before {
    background-image: url(/frontend/images/btn_rain_white.svg);
}
section.radar .list-button .item:hover span.pressure::before {
    background-image: url(/frontend/images/btn_pressure_white.svg);
}
section.radar .list-button .item:hover span.humidity::before {
    background-image: url(/frontend/images/btn_humidity_white.svg);
}
section.radar .list-button .item:hover span.cloud::before {
    background-image: url(/frontend/images/btn_cloud_white.svg);
}

section.feature .list-feature .item {
    padding:8px 16px 0px 16px;
    background-color: var(--c-text-white);
    border-radius: 12px;
    height:100%;
}

section.feature .list-feature>div {
    margin-bottom: 16px;
}

section.app {
    background-image: url(/frontend/images/bg_home_app.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding:20px 30px;
    border-radius:16px;
}

section.app .item>a {
    width: 100%;
}
section.app .item>a>img {
    max-width: 100%;
    height: auto;
}

section.people-say .list-people-say {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap:16px
}

section.people-say .list-people-say .item {
    display: grid;
    grid-template-columns: 30% auto;
    grid-gap:12px;
    padding:24px 16px;
    background-color:var(--c-text-white);
    border-radius:10px
}

section.blog .link-default {
    color: var(--c-text-black);
}
section.blog .link-default:hover {
    color: var(--c-text-primary);
    text-decoration: none;
}

section.people-say .list-people-say .item .star {
    background-image: url(../images/5_star.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    margin-top: 12px;
}


/* ------------mobile-app------------- */
section.app.bg-mobile-app {
    background-image: url(/frontend/images/bg_app.jpg);
    border-radius: 0;
    padding: 40px  0;
}

section.app.about {
    background-image: url(/frontend/images/bg_about.jpg);
}

section.app.weather {
    padding:60px 0;
    background-image: url(/frontend/images/bg_weather.jpg);
}
section.app.weather .btn-visit-weather {
    color:var(--c-text-white);
    background-color: var(--c-text-primary);
    text-decoration: none;
    max-width: 240px;
    padding:10px 18px;
    border-radius:30px
}

section.app.weather .btn-visit-weather:hover {
    background-color: #4d54a2;
}


/* ----------footer------------- */
footer {
    background-image: url(/frontend/images/bg_footer.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
}
footer .content-footer {
    color: #fff;
    background-color: transparent;
}
footer .content-footer a.brand {
    font-size:40px;
    color: #fff;
    font-weight: bold
}
footer .list-social {
    padding-top: 8px;
    display: grid;
    grid-template-columns: 32px 32px 32px 32px;
    grid-gap: 8px;
}
footer .list-social img {
    width: 32px;
    height: 32px;
}
footer ul{
    list-style: none;
}
footer ul.list-cate li>a {
    color:#fff;
    text-transform: uppercase;
    text-decoration: none;
}
footer ul.list-cate li>a:hover {
    color: var(--c-primary)
}
footer .container {
    padding-top: 36px;
    padding-bottom: 24px;
}
footer .content-footer {
    display: grid;
    grid-template-columns:3fr 1fr 1fr;
    grid-gap:30px
}
footer .title {
    font-weight: 600;
    line-height: normal;
    height:80px;
    display: flex;
    align-items: center;
}
footer .list-ul {
    display: grid;
    grid-template-columns:auto 1fr;
    grid-gap:20px;
}
footer ul.list-cate {
    list-style: none;
}

/* search */
.box-search-article {
    position: relative;
  }
  #search-input{
    border:1px solid var(--c-text-black);
    padding:8px 40px 8px 16px;
    border-radius:6px;
    outline: none;
  }
  .box-search-article>img {
    position: absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    cursor: pointer;
  }
  .box-search-article .dropdown-result-search-article {
    border-radius: 4px;
    display: none;
    font-weight: 500;
    left: 0;
    list-style: none;
    position: absolute;
    right: 0;
    top: 110%;
    z-index: 4;
    border:1px solid var(--c-text-black);
    background-color: #fff;
    margin-left: 0;
    margin-right: 0;
  }
  .box-search-article .dropdown-result-search-article ul.list-item {
    overflow: auto;
    margin: 0;
    list-style: none;
    padding-left: 16px;
  }

  .box-search-article .dropdown-result-search-article ul.list-item li>a{
    color:var(--c-text-black);
  }
  .box-search-article .dropdown-result-search-article ul.list-item li{
    padding: 4px 0;
  }
  .box-search-article .dropdown-result-search-article ul.list-item li>a:hover{
    color:var(--c-text-primary);
    background-color: unset!important;
  }
  .box-search-article .dropdown-result-search-article ul.list-item li:hover {
    background-color: unset!important;
  }


/* update_reponsive */
@media (max-width: 1200px) {
    section.radar .list-button {
        grid-template-columns: repeat(5,1fr);
    }
}

@media (max-width: 992px) {
    section.radar .list-button {
        grid-template-columns: repeat(4,1fr);
    }
}

@media (max-width: 768px) {
    section.radar .list-button {
        grid-template-columns: repeat(3,1fr);
    }

    section.people-say .list-people-say .item {
        grid-template-columns: 1fr;
        grid-gap:0
    }

    section.radar .detail-radar iframe {
        aspect-ratio:1
    }
    footer .content-footer {
        grid-template-columns:1fr;
        grid-gap:16px
    }
    footer .title {
        font-weight: 600;
        line-height: var(--line-height);
        height:unset;
        display: block;
    }
}

@media (max-width: 575px) {
    html{
        --size-body:16px;
        --line-height-body:26px;
        --sub-text:14px;
        --size-h1:32px;
        --size-h2:28px;
        --size-h3:20px;
    }
    .group-search .img-search {
        padding:6px 12px
    }
    .expand_wrapper span {
        padding: 2px 5px 1px 5px;
    }
    .pt-section {
        padding-top: 30px;
    }
    .mt-section {
        margin-top: 30px;
    }
    .pt-content {
        padding-top: 14px;
    }

    .list-article-new .item.top-1 .content {
        position: unset !important;;
    }

    section.radar .list-button {
        grid-template-columns: repeat(2,1fr);
    }

    section.people-say .list-people-say {
        grid-template-columns: 1fr;
    }

    header#header {
        background-image: url(/frontend/images/bg_header_mb.jpg);
    }

    footer {
        background-image: url(/frontend/images/bg_footer_mb.jpg);
    }
}