/* @import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url(fix-bootstrap.css);
@import url(fix-slick.css);
@import url(general.css);
@import url(color.css);
@import url(font.css);
@import url(button.css);
@import url(form.css);
@import url(popup.css);
@import url(layout.css);
@import url(template.css);

:root {
    --blue-100: #d0dcf0;
    --blue-300: #6f96d1;
    --blue-400: #344ead;
    --blue-600: #091f5b;
    --grey: #8592a3;
    --green: #00e9af;
    --font: "Kanit", sans-serif;
    --text-xs: 12px;
    --text-2sm: 13px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 22px;
    --text-3xl: 24px;
    --text-4xl: 26px;
    --text-5xl: 30px;
    --text-6xl: 35px;
    --text-7xl: 40px
}

#nav__main {
    font-size: 12px;
}

.text-sm {
    font-size: 11px !important;
}

.text-base {
    font-size: 13px !important;
}

.left-drawer {
    background: #f8f8f8;
    position: absolute;
    /* top: 80px; */
    left: 0;
    justify-content: space-between;
    height: calc(100vh - 0px);
    width: 270px;
    font-size: 12px;
    opacity: 1;
    transition: transform 750ms 250ms ease-out;
    z-index: 1;
    padding: 10px;
    padding-top: 90px;
    /* overflow-y: auto; */
    overflow-x: hidden;
    max-height: 100%;
    -webkit-box-shadow: 0px 0px 1px 0px rgba(1, 1, 1, .3);
    box-shadow: 0px 0px 1px 0px #0101014d;
}

.list-group-item {
    padding: 3px 5px 3px 3px !important;
    font-size: 12px;
    background: #f8f8f8;
}

.badge {
    width: 40px;
    font-size: 10px;
    font-weight: 400;
}

.width10 {
    width: 10%;
}
.width70 {
    width: 70%;
}
.width20 {
    width: 10%;
}

.pm25-class1 {
    background-color: #9cd84e;
}
.pm25-class2 {
    background-color: #facf39;
}
.pm25-class3 {
    background-color: #f99049;
}
.pm25-class4 {
    background-color: #f65e5f;
}
.pm25-class5 {
    background-color: #a06a7b;
}
.pm25-class6 {
    background-color: #890215;
}

.fire-class {
    background-color: #bb071f;
}

.pm25-classtext1 {
    color: #9cd84e;
}
.pm25-classtext2 {
    color: #facf39;
}
.pm25-classtext3 {
    color: #f99049;
}
.pm25-classtext4 {
    color: #f65e5f;
}
.pm25-classtext5 {
    color: #a06a7b;
}
.pm25-classtext6 {
    color: #890215;
}


.full-screen-logo {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-screen-logo img {
    width: auto;
    height: 30px;
}
 #logo_usaid {
    height: 50px;
}
#logo_nasa {
    height: 50px;
}
#logo_servir {
    height: 25px;
}

.pulse {
    animation: pulsate 2s ease-out;
    -webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}

.pulse-logo {
    animation: pulsate 4s ease-out;
    -webkit-animation: pulsate 4s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0;
}

@keyframes pulsate {
    0% { opacity: 0.0; }
    50% { opacity: 1.0; }
    100% { opacity: 0.0; }
}