* {
    padding: 0;
    margin: 0;
    font-size: 0.95vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: NotoSansThai-Regular;
    line-height: initial;
}

@font-face {
    font-family: 'NotoSansThai-Regular';
    src: URL('../font/NotoSansThai-Medium.ttf') format('truetype');
}

#mainpage {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.blurBack {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    pointer-events: none
}

#content {
    display: flex;
    padding: 1rem;
    height: calc(100% - 3.5rem);
}

.on-between {
    display: flex;
    justify-content: space-between;
}

.grow-parent {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*Map*/
#mapid {
    border-radius: 1rem;
}

img.huechange {
    filter: hue-rotate(140deg) brightness(1.2);
}

img.huechange.active {
    filter: hue-rotate(140deg) contrast(2);
}

img.resource2 {
    filter: hue-rotate(180deg) brightness(1.2) !important;
}

img.huechange.resource4 {
    filter: hue-rotate(240deg) brightness(1.2) !important;
}

img.huechange.resource4.Resource4_aq {
    filter: hue-rotate(10deg) brightness(1.1) !important;
}

img.huechange.resource4.Resource4_noise {
    filter: hue-rotate(90deg) brightness(1.1) !important;
}

img.huechange.resource4.Resource4_sw {
    filter: hue-rotate(260deg) !important;
}

img.huechange.resource4.Resource4_ww {
    filter: brightness(1.3) !important;
}

img.huechange.resource4.Resource4_sed {
    filter: hue-rotate(170deg) !important;
}

img.huechange.resource4.Resource4_soil {
    filter: grayscale(1) !important;
}

img.huechange.resource4.Resource4_gw {
    filter: hue-rotate(40deg) !important;
}

img.huechange.resource4.Resource4_rw {
    filter: hue-rotate(200deg) brightness(1.2) !important;
}

.leaflet-popup-content-wrapper {
    border-radius: 2px !important;
}

.leaflet-popup-close-button {
    display: none;
}

.all-text-blue * {
    color: #0480C7;
}

.text-gray {
    color: #4C648E;
}

.text-dark-gray {
    color: #566B8C;
}

.map-popup-header {
    font-weight: bold;
    font-size: 1.15rem;
}

.map-detail-btn {
    color: #20488F;
    background-color: #C1DAF3;
    width: fit-content;
    margin-left: auto;
    padding: 0.3rem 1.3rem;
    border-radius: 2rem;
    box-shadow: 2px 3px 4px #a8c6e5;
    cursor: pointer;
}

.border-bottom-dashed {
    border-bottom: 1px dashed gray;
}

#flue_detail_div {
    background-color: #fff;
    z-index: 10000;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    border: 2px;
    min-width: 20vw;
}

#flue_detail_div>div>div {
    padding: 1rem 2rem;
}

/* Navbar */
.navbar {
    height: 3.5rem;
    padding: 0.5rem 1rem;
    box-shadow: 0px 4px 6px 0px rgba(72, 72, 72, 0.25);
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo img {
    width: 3.5rem;
    margin-right: 0.5rem;
}

.nav-logo span {
    font-size: 1.25rem;
    color: #0480C7;
    font-weight: bold;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-menu-group {
    padding: 0.25rem 1.5rem;
    border-left: 0.12rem solid #DBDBDB;
}

.nav-menu-group i {
    color: #84C9E9;
    font-size: 1.1rem;
}

.dropdown-item i {
    font-size: 1rem;
    width: 1rem;
    margin-right: 0.25rem;
}


/* Sidebar */
#side_bar {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 29rem;
    margin-right: 1rem;
    padding-top: 1rem;
    transition: 0.6s ease;
}

.side-collapse {
    margin-left: -30rem;
}

#side_header {
    border-bottom: 0.12rem dashed #DBDBDB;
    padding-bottom: 1rem;
}

#side_bar .header {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 0.4rem;
}

.circle-blue {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.85rem;
    height: 1.85rem;
    flex-shrink: 0;
    border-radius: 100px;
    background: #C1DAF3;
    box-shadow: 0px 4px 4px 0px #A8C6E5 inset;
    margin-right: 0.5rem;
    /* background: #ffd24a;
    box-shadow: 0px 4px 4px 0px #fae422 inset; */
}

.circle-blue i {
    color: #20488F;
    filter: drop-shadow(1px 2px 4px #A0ADC3);
    /* color: #4CAF50;
    filter: drop-shadow(0px -2px 0px #1d8621); */
}

#side_menu {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
}

#side_bar .header span {
    font-size: 1.05rem;
    color: #20488F;
    font-weight: bold;
    padding-top: 0.2rem;
}

.main_menu {
    display: grid;
    overflow: auto;
    gap: 0.6rem;
    padding: 0 0.4rem 0.4rem;
}

.main-menu-header {
    display: flex;
    align-items: flex-start;
    color: #4C648E;
    cursor: pointer;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.main-menu-header:hover .icon-main-menu:not(.down, .up) {
    background-color: #0075FF;
    width: 1.5rem;
}

.main-menu-header .icon {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 1.85rem;
    margin-right: 0.5rem;
    padding-top: 0.15rem
}

.main-menu-header span {
    width: calc(100% - 1.9rem);
}

.sub-menu {
    border-radius: 0.4rem;
    background: #C1DAF3;
    box-shadow: -0.2rem -0.2rem 0.3rem 0px #A8C6E5 inset;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0rem 0.5rem 0.75rem;
}

.sub-menu label {
    display: flex;
    align-items: flex-start;
    color: #20488F;
    cursor: pointer;
    margin: 0.5rem 0;
}

.sub-menu label input {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.sub-menu label span {
    font-size: 0.9rem;
}

.sub-menu-check {
    display: flex;
    height: 1.2rem;
    padding-top: 0.125rem;
}

.sub-menu-btn {
    padding-bottom: 0.25rem;
    text-align: end;
}

.main-menu-header .icon-main-menu {
    height: 1.2rem;
    width: 1rem;
    margin: 0.15rem 0.5rem 0 0.85rem;
    background-color: #4C648E;
}

.main-menu-header.active .icon-main-menu {
    background-color: #0075FF;
}

.main-menu-header.active {
    color: #0075FF;
}

.main-menu-header .down {
    mask: url(../img/circle-chevron-down-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/circle-chevron-down-solid.svg) no-repeat center / contain;
}

.main-menu-header .up {
    mask: url(../img/circle-chevron-up-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/circle-chevron-up-solid.svg) no-repeat center / contain;
}

.main-menu-header .circle {
    mask: url(../img/circle-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/circle-solid.svg) no-repeat center / contain;
}

.main-menu-header .smog {
    mask: url(../img/smog-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/smog-solid.svg) no-repeat center / contain;
}

.main-menu-header .city {
    mask: url(../img/city-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/city-solid.svg) no-repeat center / contain;
}

.main-menu-header .earth {
    mask: url(../img/earth-asia-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/earth-asia-solid.svg) no-repeat center / contain;
}

.main-menu-header .medical {
    mask: url(../img/truck-medical-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/truck-medical-solid.svg) no-repeat center / contain;
}

.main-menu-header .file-ex {
    mask: url(../img/file-circle-exclamation-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/file-circle-exclamation-solid.svg) no-repeat center / contain;
}

.main-menu-header .heart {
    mask: url(../img/hand-holding-heart-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/hand-holding-heart-solid.svg) no-repeat center / contain;
}

.divide {
    border-bottom: 0.12rem dashed #DBDBDB;
}

#summary_menu {
    margin-top: 1rem;
    border-top: 0.12rem dashed #DBDBDB;
}


/* Content */
#content_main {
    width: 100%;
    position: relative;
    border-radius: 1rem;
    background-color: #C1DAF3;
    box-shadow: 0 0.4rem 0.4rem 0 #A8C6E5 inset;
}

/* #content_main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom: 2rem;
    border-radius: 1rem;
} */

/* Industry */
.ind-grid-parent {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 1rem 2rem;
}

.ind-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    column-gap: 2rem;
}

.grid-col-3 {
    grid-column: 1 / span 3;
    margin: 0.4rem 0;
    border-bottom: 0.12rem dashed #cedced;
}

#industryTable tbody tr:nth-child(even) {
    background: #f3f8fd
}

#industryTable {
    text-align: start;
}

.sub-detail {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0.5rem;
}

/* Environment */
.code-box {
    background: #C1DAF3;
    box-shadow: 0px 4px 4px 0px #A8C6E5 inset;
    border-radius: 2rem;
    padding: 0.1rem 0.5rem;
    min-width: 3rem;
    display: inline-block;
    line-height: initial;
    margin-right: 0.4rem;
    text-align: center;
}

.std-line {
    color: #878787;
}

.env-name {
    text-align: start;
    white-space: normal;
    min-width: 22rem;
}

.arrange-col,
.arrange-rows {
    display: grid;
    text-align: start;
    gap: 0rem 1rem;
}

.arrange-rows {
    grid-auto-flow: column;
}

.cols-2 {
    grid-template-columns: repeat(2, auto);
}

.cols-3 {
    grid-template-columns: repeat(3, auto);
}

.rows-2 {
    grid-template-rows: repeat(2, auto);
}

.rows-3 {
    grid-template-rows: repeat(3, auto);
}

.rows-4 {
    grid-template-rows: repeat(4, auto);
}

.rows-8 {
    grid-template-rows: repeat(8, auto);
}

.rows-14 {
    grid-template-rows: repeat(14, auto);
}

.arrange-rows span,
.arrange-col span {
    opacity: 75%;
}

.import-date-group {
    display: flex;
    align-items: center;
}

.import-date-group span {
    color: #566B8C;
    margin: 0 1rem;
}

.canvas-box {
    display: flex;
    position: relative;
    height: 100%;
    overflow: auto;
    padding: 1rem 6rem;
}

.canvas-box canvas {
    z-index: 1;
    flex-grow: 1;
    overflow: auto;
}

.no-graph {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: initial;
    width: calc(100% + 12rem);
    display: flex;
    background: #c1daf35e;
    border-radius: 0.75rem;
    color: #20488F;
    margin: 0 -6rem;
}

.exceed {
    color: #dc3545;
    font-weight: bold;
}


/* Social events */
#social_events {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 0.75rem;
    border-radius: 0.5rem;
    padding: 2rem 4rem 0.75rem;
    height: calc(100% - 1.5rem);
    box-shadow: 0 0 0.4rem 0 #DFECF8 inset;
}

#social_events .header {
    display: flex;
    padding: 0 0.5rem;
}

#social_events .header-name {
    color: #0075FF;
    font-weight: bold;
    border-bottom: 0.2rem solid #0075ff6e;
    padding-bottom: 0.1rem;
    width: 100%;
}

#social_events .header-name span {
    font-size: 1.25rem;
}

#events_list {
    display: grid;
    align-content: baseline;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
    padding: 0.25rem 0.5rem;
    margin: 1rem 0;
    overflow: auto;
    flex-grow: 1;
}

.blue-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #C1DAF3;
    box-shadow: -4px -4px 4px 0px #A8C6E5 inset;
    border-radius: 0.5rem;
    padding: 1rem;
}

.blue-box .topic {
    display: flex;
    align-items: baseline;
    color: #20488F;
}

.blue-box .period {
    padding-left: 1.5rem;
}

.blue-box .period span {
    color: #20488F;
    font-size: 0.9rem;
}

.blue-box .bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-top: 1rem;
}

.blue-box.no-list {
    grid-column: 1 / 3;
    color: #20488F;
    text-align: center;
    padding: 1.5rem 0;
}

/* Modal */
body.modal-open #mainpage {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    pointer-events: none;
}

.modal-fixed {
    max-width: unset !important;
    margin: 1.75rem auto !important;
    max-height: calc(100% - 3.5rem) !important;
}

.popup_icon,
.check_icon {
    font-size: 3rem;
    margin: 1rem 0;
}

.popup_icon {
    color: orange;
}

.check_icon {
    color: #20a969;
}

.text-alert {
    text-align: center;
    line-height: 1.75rem;
}

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

.wrem-40 {
    width: 40rem;
}

.wrem-45 {
    width: 45rem;
}

.wrem-75 {
    width: 75rem;
}


/* Table */
.border_table {
    overflow: auto;
    height: 100%;
    min-height: 15rem;
    border-radius: 0.4rem;
    box-shadow: inset 0 0 0.1rem 0.1rem #cedced;
    background-color: white;
}

table:not(.table-condensed) {
    white-space: nowrap;
    color: #20488F;
    width: 100%;
    text-align: center;
    background: white;
}

table:not(.table-condensed) tr th,
table:not(.table-condensed) tr td {
    padding: 0.5rem;
    font-weight: 500;
    vertical-align: top;
}

table:not(.table-condensed) tr:first-child th:first-child {
    border-left: 0.12rem solid #cedced;
}

table:not(.table-condensed) tr:first-child th:last-child {
    border-right: 0.12rem solid #cedced;
}

table:not(.table-condensed) thead {
    position: sticky;
    top: 0;
    white-space: nowrap;
    z-index: 2;
    background-color: #345A9C;
    color: #ffffff;
}

table:not(.table-condensed) tr th {
    /* border: 0.12rem solid #426ea5; */
    box-shadow: inset 0 0 0.1rem #cedced;
}

table:not(.table-condensed) tr th,
table:not(.table-condensed) tr td,
table div,
table span {
    font-size: 0.9rem;
}

table:not(.table-condensed) tr td {
    border: 0.12rem solid #4378b942;
}

table.editable tr th:last-child,
table.editable tr td:last-child {
    width: 3rem;
    padding: 0.5rem;
    text-align: center !important;
}

table.editHide tr:first-child th:last-child {
    display: none;
}

table .unit {
    font-size: 0.8rem;
    opacity: 75%;
}

/* Next-Previos Page */
.np-page-box {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid #c9d8eb;
}

.np-page {
    display: flex;
}

.icon-box {
    border-radius: 0.4rem;
    box-shadow: -0.1rem 0 0.1rem #316ab1ba !important;
    margin: 0 0.15rem;
    border: 0;
    line-height: initial;
    padding: 0.2rem 0.9rem;
    background-color: #BEDBEF;
}

.icon-box i,
.icon-box span,
.page_num {
    color: #316ab1;
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.25));
}

.page_num {
    padding: 0.25rem 0.5rem 0;
}

.np-page .input-blue {
    margin-right: 0.2rem;
    padding: 0.25rem 0.75rem;
    width: 4rem;
    text-align: center;
}

.icon-box:disabled {
    opacity: 50%;
    background-color: #d9e2eb;
}

/* Button */
.nav-btn {
    display: flex;
    align-items: center;
    border: 0;
    background-color: transparent;
    color: #0480C7;
}

.nav-btn i {
    font-size: 1.1rem;
    margin-right: 0.4rem;
}

.arrow-btn {
    border: 0;
    color: #007EC6;
    background-color: #fff;
    box-shadow: 0.5rem 0.2rem 0.6rem 0 rgba(72, 72, 72, 0.29);
    position: absolute;
    top: 2rem;
    padding: 1rem 0.4rem;
    border-radius: 0 0.75rem 0.75rem 0;
    z-index: 1000;
}

.white-btn {
    background: #FFF;
    box-shadow: -0.2rem -0.2rem 0.4rem 0 #A8C6E5 inset;
    border: 0;
    padding: 0.25rem 1rem;
    border-radius: 2rem;
    color: #20488F;
    font-size: 0.9rem;
    font-weight: bold;
}

.circle-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    box-shadow: -0.2rem -0.2rem 0.4rem 0 #A8C6E5 inset;
    border: 0;
    border-radius: 100%;
    padding-bottom: 0.15rem;
    font-size: 0.9rem;
    width: 2.2rem;
    height: 2.2rem;
}

.icon-btn {
    border: 0;
    padding: 0.2rem 0.25rem;
    background-color: transparent;
}

button:not(.arrow-btn, [disabled]):active {
    top: 0.05rem;
    opacity: 75%;
    position: relative;
}

.btn-close:focus {
    box-shadow: unset !important;
}

/* button:focus {
    box-shadow: unset !important;
} */

button:focus,
select:focus,
input:focus {
    outline: none;
}


/* Input - Select */
.input-search {
    background: #fff url(../img/magnifying-glass-solid.svg) calc(100% - 0.75rem) 50% no-repeat;
    background-size: 0.95rem;
    padding: 0.4rem 2.5rem 0.4rem 1rem;
}

.input-blue {
    padding: 0.4rem 0.75rem;
}

.input-blue,
.input-search {
    border: 0.1rem solid #BEDBEF;
    border-radius: 0.4rem;
    color: #20488F;
    cursor: pointer;
    line-height: initial;
    background-color: #ffffff;
    box-shadow: 0 2px 6px 0 #A8C6E5 inset;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.file-box {
    background-color: #C1DAF3;
    box-shadow: -4px -4px 4px 0px #A8C6E5 inset;
    padding: 2rem 1rem;
    text-align: center;
    border-radius: 0.4rem;
    margin: 1rem 0;
}

.inputfile+label {
    font-size: 1rem;
    font-weight: 700;
    color: #20488fbf;
    text-overflow: ellipsis;
    cursor: pointer;
    overflow: hidden;
    padding: 0 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
}

.inputfile:focus+label,
.inputfile.has-focus+label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile:focus+label,
.inputfile.has-focus+label,
.inputfile+label:hover {
    color: #20488F;
}

.inputfile:focus+label i,
.inputfile.has-focus+label i,
.inputfile+label:hover i {
    background-color: #20488F;
    color: #fff;
    filter: drop-shadow(1px 2px 2px #5572a3b6);
}

.inputfile+label i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #fff;
    padding: 1.2rem;
    margin: 0 auto 1rem;
    color: #20488F;
    filter: drop-shadow(1px 2px 4px #71a5dc);
}

select {
    appearance: none;
}

.select-style-1 {
    background: url(../img/angle-down-blue.svg) calc(100% - 0.25rem) 50% no-repeat;
    background-size: 0.85rem;
    padding: 0.11rem 1.5rem 0 0.25rem;
    color: #0480C7;
    border: 0;
    cursor: pointer;
}

.select-style-2 {
    display: flex;
    align-items: center;
    position: relative;
}

.select-style-2 input {
    padding: 0.15rem 1rem 0rem 2.5rem;
}

.select-style-2 select {
    background: url(../img/angle-down-blue2.svg) calc(100% - 0.75rem) 52% no-repeat;
    background-size: 0.85rem;
    padding: 0.15rem 2.5rem 0;
}

.select-style-2 input,
.select-style-2 select {
    height: 2.5rem;
    background-color: #C1DAF3;
    color: #20488F;
    letter-spacing: 0.02rem;
    box-shadow: 0 4px 4px 0 #A8C6E5 inset;
    border: 0;
    border-radius: 0.4rem;
    width: 100%;
    cursor: pointer;
}

.select-style-2 select option {
    background-color: #fff;
}

select option:disabled {
    background-color: rgb(216, 216, 216);
}

.select-style-2 .icon {
    left: 0.5rem;
    top: 0.54rem;
    position: absolute;
    width: 1.5rem;
    text-align: center;
}

.select-style-2 i {
    color: #fff;
    filter: drop-shadow(0.1rem 0.1rem 0.1rem #4C648E);
    font-size: 0.9rem;
}

.select-style-2 .cal-icon i {
    font-size: 1.1rem;
}

select:not(.no-focus):focus,
input:not(.no-focus):focus {
    outline: none;
    box-shadow: 0 0 0.2rem #a9c7e5;
}

.group-style-1 .header,
.group-style-2 .header {
    border: 2px solid #C1DAF3;
    background: #C1DAF3;
    line-height: initial;
}

.group-style-1 .header {
    border-radius: 0.4rem 0.4rem 0 0;
    padding: 0 1rem;
}

.group-style-1 .header span,
.group-style-2 .header span {
    font-size: 0.85rem;
    opacity: 75%;
    white-space: nowrap;
}

.group-style-1 input,
.group-style-1 select,
.group-style-2 input,
.group-style-2 select {
    border: 2px solid #C1DAF3;
    background: #FFF;
    color: #20488F;
    width: 100%;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    text-align: center;
    line-height: initial;
}

.group-style-1 input,
.group-style-1 select {
    border-radius: 0 0 0.4rem 0.4rem;
}

.group-style-1 select,
.group-style-2 select {
    background: url(../img/angle-down-blue2.svg) calc(100% - 0.75rem) 50% no-repeat;
    background-size: 0.85rem;
    padding: 0.4rem 2.5rem 0.4rem 1rem;
    text-align: start;
    cursor: pointer;
}

.group-style-1 select:disabled {
    background: #C1DAF3;
    cursor: auto;
}

.group-style-2 {
    display: flex;
}

.group-style-2 .header {
    display: flex;
    align-items: center;
    border-radius: 0.4rem 0 0 0.4rem;
    padding: 0 0.75rem;
}

.group-style-2 input,
.group-style-2 select {
    border-radius: 0 0.4rem 0.4rem 0;
}

.group-style-2 input:read-only {
    background: #C1DAF3;
    padding: 0.4rem 0.25rem 0.4rem 0;
    text-align: start;
}

.py-075 {
    padding: 0.75rem 0;
}

#env_import .border_table,
#ind_import .border_table {
    box-shadow: unset;
    border: 0.1rem solid #dee2e6;
}

#envImport_table input,
#indImport_table input {
    width: 9rem;
    text-align: center;
    padding: 0.25rem 0.4rem;
}

#envImport_table tbody tr td,
#indImport_table tbody tr td {
    vertical-align: middle;
}

#envImport_table tbody tr td:first-child,
#indImport_table tbody tr td:first-child {
    white-space: normal;
    line-height: initial;
    text-align: start;
}

#envImport_table tr th,
#envImport_table tr td,
#indImport_table tr th,
#indImport_table tr td {
    border: 0;
    padding: 0.75rem 1.2rem;
}

#envImport_table tr td,
#indImport_table tr td {
    border-bottom: 0.1rem dashed #dee2e6;
}

td.tt {
    text-align: center !important;
    background: #c1daf3;
}

table.table-no-border td {
    border: none !important;
    padding: 0.2rem 0.5rem !important;
    text-align: left;
}

.imp-left {
    width: 50%;
    margin: 0.5rem 0;
    margin-right: 1rem;
    box-shadow: 0.8rem 0 0.9rem #c1daf373;
    padding: 2rem;
    border-radius: 0.75rem;
    overflow: auto;
}

.imp-left .group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.imp-right {
    width: 50%;
    margin: 0.5rem 0;
    margin-left: 1rem;
    box-shadow: -0.8rem 0 0.9rem #c1daf373;
    padding: 2rem;
    border-radius: 0.75rem;
}

.border-top-dash {
    border-top: 2px dashed #c1daf3;
    padding-top: 1rem;
}

/* Color */
.color-1 {
    color: #20488F;
}

/* Daterangepicker */
.daterangepicker {
    width: auto !important;
    color: #204073;
}

.daterangepicker select {
    padding: 0.25rem 1.5rem 0.25rem 0.5rem !important;
    line-height: initial;
}

.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right {
    padding: 1rem 0.4rem !important;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-width: 0 0.1rem 0.1rem 0 !important;
    padding: 0.2rem !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    min-width: 2rem !important;
    width: 2.5rem !important;
    height: 2rem !important;
    line-height: 2rem !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    margin: 0 0.1rem;
    border: 1px solid #15699a8f;
    border-radius: 0.25rem;
    background: url(../img/angle-down-solid.svg) 95% 48% no-repeat;
    appearance: none;
    background-size: 0.9rem;
    border: 0.1rem solid #BEDBEF;
}

.daterangepicker .drp-selected {
    vertical-align: middle !important;
    padding-right: 0.4rem !important;
    font-weight: bold;
}

.daterangepicker .drp-buttons .btn {
    margin-left: 0.2rem !important;
    padding: 0.2rem 0.4rem !important;
    font-weight: 500 !important;
}

.daterangepicker .ranges li {
    padding: 0.75rem 1rem !important;
}

.on-center,
.plus-button,
.blue-blue-btn,
.white-blue-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: initial;
}

.daterangepicker .calendar-table .prev span {
    transform: rotate(135deg) translateX(-43%) !important;
}

.daterangepicker .calendar-table .next span {
    transform: rotate(-45deg) translateY(-37%) !important;
}

.daterangepicker .next.available {
    margin-left: 0.4rem;
}

.daterangepicker,
.daterangepicker select,
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td,
.daterangepicker .drp-selected,
.daterangepicker .drp-buttons .btn,
.daterangepicker .ranges li {
    font-size: 0.85rem !important;
}

.daterangepicker .drp-calendar {
    max-width: 300px !important;
}

.daterangepicker select {
    background: #cee7f8 url(../img/angle-down-blue2.svg) calc(100% - 0.5rem) 50% no-repeat !important;
    background-size: 0.9rem !important;
    appearance: none;
    border: 0.1rem solid #cee7f8 !important;
    border-radius: 0.2rem;
    cursor: pointer !important;

}

/** webkit scrollbar */
::-webkit-scrollbar {
    width: 0.4vw;
    height: 0.4vw;
}

::-webkit-scrollbar-track {
    background: #f6f6f6;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

::-webkit-scrollbar-corner {
    background: #f6f6f6;
}

/* Loading */
#loader {
    z-index: 30000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    /* background: rgb(0 56 99 / 56%); */
}

#loader>div {
    font-size: 1.2rem;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    top: 50%;
    left: 50%;
}

.leaflet-popup {
    margin-bottom: 30px !important;
}

.custom-marker-icon {
    background-color: #4e95d9;
    border-radius: 50%;
    border: 3px solid #0056a7;
    width: 30px !important;
    height: 30px !important;
    margin-left: -15px !important;
    margin-top: -15px !important;
}

.custom-marker-icon>div {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 6px;
    font-weight: bold;
    font-size: 9px;
}

div.huechange.resource4.Resource4_noise {
    background-color: #ff66cc;
    border-color: #f100a0;
}

div.huechange.resource4.Resource4_sw {
    background-color: #008000;
    border-color: #004c00;
    color: #fff;
}

div.huechange.resource4.Resource4_ww {
    background-color: #00b0f0;
    border-color: #0084b4;
}

div.huechange.resource4.Resource4_sed {
    background-color: #cc6600;
    border-color: #984c00;
}

div.huechange.resource4.Resource4_soil {
    background-color: #7f7f7f;
    border-color: #606060;
}

div.huechange.resource4.Resource4_gw {
    background-color: #9966ff;
    border-color: #6729e5;
}

div.huechange.resource4.Resource4_rw {
    background-color: #cc9900;
    border-color: #9f7700;
}

div.huechange.resource4.Resource4_bio {
    background-color: #09c99d;
    border-color: #059977;
}

@-webkit-keyframes load5 {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #3d9cd4, 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.5), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.7), 1.8em -1.8em 0 0em #3d9cd4, 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.5), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.7), 2.5em 0em 0 0em #3d9cd4, 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.5), 2.5em 0em 0 0em rgba(61, 156, 212, 0.7), 1.75em 1.75em 0 0em #3d9cd4, 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.5), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.7), 0em 2.5em 0 0em #3d9cd4, -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.5), 0em 2.5em 0 0em rgba(61, 156, 212, 0.7), -1.8em 1.8em 0 0em #3d9cd4, -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.5), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.7), -2.6em 0em 0 0em #3d9cd4, -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.5), -2.6em 0em 0 0em rgba(61, 156, 212, 0.7), -1.8em -1.8em 0 0em #3d9cd4;
    }
}

@keyframes load5 {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #3d9cd4, 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.5), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.7), 1.8em -1.8em 0 0em #3d9cd4, 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.5), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.7), 2.5em 0em 0 0em #3d9cd4, 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.5), 2.5em 0em 0 0em rgba(61, 156, 212, 0.7), 1.75em 1.75em 0 0em #3d9cd4, 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.5), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.7), 0em 2.5em 0 0em #3d9cd4, -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.2), -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.5), 0em 2.5em 0 0em rgba(61, 156, 212, 0.7), -1.8em 1.8em 0 0em #3d9cd4, -2.6em 0em 0 0em rgba(61, 156, 212, 0.2), -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.5), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.7), -2.6em 0em 0 0em #3d9cd4, -1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(61, 156, 212, 0.2), 1.8em -1.8em 0 0em rgba(61, 156, 212, 0.2), 2.5em 0em 0 0em rgba(61, 156, 212, 0.2), 1.75em 1.75em 0 0em rgba(61, 156, 212, 0.2), 0em 2.5em 0 0em rgba(61, 156, 212, 0.2), -1.8em 1.8em 0 0em rgba(61, 156, 212, 0.5), -2.6em 0em 0 0em rgba(61, 156, 212, 0.7), -1.8em -1.8em 0 0em #3d9cd4;
    }
}