* {
    font-size: 0.86vw;
}

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

.flex-center {
    display: flex;
    align-items: center;
    line-height: initial;
}

.flex-end {
    display: flex;
    align-items: end;
    line-height: initial;
}

/* Nav */
nav {
    display: flex;
    flex-direction: column;
    width: 5.25rem;
    padding-top: 5rem;
    border-right: 0.485rem solid #760e0d;
    padding-left: 0.4rem;
    /* overflow: auto; */
}

.nav-menu {
    width: calc(100% + 0.485rem);
    height: 4.85rem;
    background-position: center;
}

.nav-menu[data-tab='1'] {
    background: no-repeat url(../img/home-icon.png);
    background-size: contain;
}

.nav-menu.active[data-tab='1'] {
    background: no-repeat url(../img/home-icon-active.png);
    background-size: contain;
}

.nav-menu[data-tab='2'] {
    background: no-repeat url(../img/predict-icon.png);
    background-size: contain;
}

.nav-menu.active[data-tab='2'] {
    background: no-repeat url(../img/predict-icon-active.png);
    background-size: contain;
}

.nav-menu[data-tab='3'] {
    background: no-repeat url(../img/dashboard-icon.png);
    background-size: contain;
}

.nav-menu.active[data-tab='3'] {
    background: no-repeat url(../img/dashboard-icon-active.png);
    background-size: contain;
}

.nav-menu[data-tab='4'] {
    background: no-repeat url(../img/download-icon.png);
    background-size: contain;
}

.nav-menu.active[data-tab='4'] {
    background: no-repeat url(../img/download-icon-active.png);
    background-size: contain;
}

.nav-menu[data-tab='5'] {
    background: no-repeat url(../img/setting-icon.png);
    background-size: contain;
}

.nav-menu.active[data-tab='5'] {
    background: no-repeat url(../img/setting-icon-active.png);
    background-size: contain;
}

.nav-menu[data-tab='6'] {
    background: no-repeat url(../img/wind-icon.png);
    background-size: contain;
}

.nav-menu.active[data-tab='6'] {
    background: no-repeat url(../img/wind-icon-active.png);
    background-size: contain;
}

.nav-menu[data-tab='7'] {
    background: no-repeat url(../img/logout.png);
    background-size: contain;
    margin-top: auto;
    margin-bottom: 1rem;
}

/* Content */
.content {
    display: flex;
    flex-grow: 1;
    overflow: auto;
    position: relative;
    width: calc(100% - 5.25rem);
}

/* Filter */
.filter {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 25rem;
    z-index: 1;
    padding: 1.5rem 1.2rem 1.5rem 1rem;
    box-shadow: 0.1rem 0 0.5rem #704d4d6e;
    background: linear-gradient(180deg, #ab2b2a 0%, #572121 100%);
}

.filter .header {
    text-align: center;
}

.filter .header img {
    height: 3.6rem;
    margin-right: 0.75rem;
}

.filter .header span {
    font-size: 1.15rem;
    letter-spacing: 0.05rem;
    color: #ffffff;
    text-transform: uppercase;
}

.filter .body {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    padding: 0 1rem;
    overflow: auto;
    flex-grow: 1;
    max-height: 55rem;
}

.filter .body {
    color: #ffffff;
}

.filter .body .tt {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    padding-left: 0.4rem;
}

.filter .body,
.filter .body div,
.filter .body span,
.filter-btn i,
.sel-1 option,
.sel-2,
.sel-2 option {
    font-size: 0.8rem;
}

.filter-btn {
    display: flex;
    align-items: baseline;
    background: #ffffff4d;
    border-radius: 0.65rem;
    padding: 0.75rem 1rem;
}

.filter-btn i {
    margin-left: auto;
    opacity: 85%;
}

.filter-opt {
    padding: 0.1rem 0.65rem;
    margin: 0.4rem 0;
    flex-grow: 1;
    overflow: auto;
}

.filter-opt label,
.db-site label {
    display: flex;
    align-items: center;
    user-select: none;
    line-height: initial;
    position: relative;
    border-radius: 0.4rem;
    padding: 0.5rem 0.75rem;
}

.filter-opt label {
    margin: 0.4rem 0;
}

.filter-opt label,
label input[type='checkbox'],
.db-site label {
    cursor: pointer;
}

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

.filter-opt label .checkmark,
.db-site label .checkmark {
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.5rem;
    border-radius: 0.2rem;
    background-color: #a01319;
}

.filter-opt label .checkmark {
    border: 0.125rem solid #ffffff;
}

.filter-opt label input:checked~.checkmark::after,
.db-site label input:checked~.checkmark::after {
    display: block;
    margin: auto;
    content: "";
    width: 0.32rem;
    height: 0.64rem;
    border-width: 0 0.15rem 0.15rem 0 !important;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.filter-opt label input:checked~.checkmark::after {
    border: solid white;
}

#filter_dashboard_form .filter-opt label input:checked~.checkmark::after,
.db-site label input:checked~.checkmark::after {
    width: 0.34rem;
    height: 0.8rem;
}

.db-site label input:checked~.checkmark::after {
    border: solid #ffffff;
    filter: drop-shadow(0px 1px 1px #00000060);
}

.filter-opt label:has(input:checked) {
    background-color: #ffffff25;
}

.filter-opt::-webkit-scrollbar-thumb:hover,
.filter .body::-webkit-scrollbar-thumb:hover {
    background: #e5e5e5;
}

.filter-opt::-webkit-scrollbar-thumb,
.filter .body::-webkit-scrollbar-thumb {
    background-color: #ffffff;
}

.filter-opt::-webkit-scrollbar-track,
.filter .body::-webkit-scrollbar-track {
    background-color: #ffffff45;
    border-radius: 5rem;
    border: 0;
}

.no-label {
    text-align: center;
    opacity: 50%;
    margin-top: 1rem;
}


/* Home */
.map-cntn {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.map-cntn img.map {
    object-fit: cover;
    width: 100%;
    height: auto;
}

.map-details {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.map-dts-group {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
}

.map-dts-group .stn {
    position: absolute;
    color: #e04b51;
    font-weight: bold;
    top: 0;
    right: 45px;
    padding: 0 0.5rem;
    word-break: break-word;
    white-space: nowrap;
}

.map-dts-group-box+.map-dts-group-box {
    padding-top: 0.5rem;
}

#station_info {
    position: absolute;
    height: calc(100% - 60px);
    top: 55px;
    left: 3px;
    padding: 0.5rem;
    overflow: auto;
}

.cls-site {
    border: 0;
    background-color: transparent;
    padding-left: 0.5rem;
}

.map-dts-group-box .box,
.map-dts-group-box .box div,
.map-dts-group-box .box span {
    font-size: 0.8rem;
}

.map-dts-group.green .stn-pos .stn {
    color: #2cd03f;
}

.map-dts-group.pos-2 .stn-pos .stn {
    right: 0;
    text-align: end;
}

.map-dts-group-box .box {
    width: 18rem;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 0.1rem 0.5rem #80808078;
}

/* .map-dts-group.pos-1 .box {
    left: -18rem;
    top: -4rem;
} */

.map-dts-group.pos-1 .stn-val {
    display: flex;
    position: absolute;
    right: 1vw;
    width: max-content;
}

/* .map-dts-group.pos-2 .box {
    right: -18rem;
    top: -4rem;
    z-index: 1;
} */

.map-dts-group.pos-2 .stn-val {
    display: flex;
    position: absolute;
    left: 1vw;
    width: max-content;
}

.stn-val * {
    font-size: 0.7vw;
}

.map-dts-group-box .box .tt {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: calc(100% - 0.5rem);
}

.map-dts-group-box .box>div:has(.tt) {
    position: relative;
}

.map-dts-group-box .box .tt>div {
    background-color: #ffffff;
}

.map-dts-group-box .box img {
    width: 100%;
    height: 8rem;
    object-position: center;
    object-fit: cover;
}

.map-dts-group-box .box img.no-img {
    object-fit: contain;
    padding: 0.75rem;
}

.map-dts-group-box .box .name {
    display: flex;
    align-items: baseline;
    font-weight: bold;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem;
    border-bottom-right-radius: 0.5rem;
}

.map-dts-group-box .box .circle {
    width: 0.6rem;
    height: 0.6rem;
    background: #e52f35;
    border-radius: 100%;
    margin-right: 0.4rem;
}

.map-dts-group-box.green .box .circle {
    background: #49d459;
}

.map-dts-group-box .box .time {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.2rem 0.2rem 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.map-dts-group-box .box .time, .map-dts-group-box .box .time span {
    font-size: 0.6rem;
}

.stn-pos {
    display: flex;
    position: relative;
    width: 8.5rem;
    cursor: pointer;
}

.stn-pos img {
    width: 100%;
    object-fit: contain;
}

.map-dts-group-box .box:hover {
    display: block;
}

.map-dts-group-box .box .dts {
    display: grid;
    align-items: center;
    padding-bottom: 0.25rem;
    grid-template-columns: repeat(2, 1fr) auto;
}

.map-dts-group-box .box .dts>div {
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
    padding: 0 0.6rem;
}

.map-dts-group-box .box .dts>div:nth-child(2) {
    border-left: 0.15rem solid #ed8f9682;
    border-right: 0.15rem solid #ed8f9682;
}

.map-dts-group-box .box .dts>div:nth-child(3)>div {
    width: 100%;
    text-align: center;
}

.map-dts-group-box .box .dts>div:nth-child(3)>div:nth-child(1) {
    margin-bottom: 0.1rem;
    border-bottom: 0.15rem solid #ed8f9682;
}

.dts .hd {
    font-weight: bold;
    margin-right: 0.5rem;
    font-size: 0.9rem !important;
}

.dts .bd {
    text-align: center;
    line-height: 0.9rem;
}

.dts .val {
    color: #e52f35;
    font-size: 0.95rem !important;
    font-weight: bold;
}

.green .dts .val {
    color: #2cd03f;
}

.dts .unit {
    font-size: 0.6rem !important;
    color: gray;
}

.home-note-top {
    position: absolute;
    right: 0.5rem;
    top: 0.75rem;
}

.home-note-top,
.home-note-top div,
.home-note-top span {
    font-size: 0.75rem;
}

.home-note-top .time {
    color: #ae3b3e;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.2rem;
}

.green-note,
.red-note {
    padding: 0.5rem 0.5rem 0.35rem 0.75rem;
    border-radius: 0.5rem;
}

.green-note {
    background: #d3f9d8;
}

.red-note {
    background: #f9c9cb;
}

.green-note .circle,
.red-note .circle {
    width: 1.05rem;
    height: 1rem;
    margin-right: 1rem;
    margin-left: 0.35rem;
    border-radius: 100%;
}

.green-note .circle {
    background: #51cf66;
    box-shadow: 0 0 0 0.35rem #8ce99a;
}

.red-note .circle {
    background: #e52f35;
    box-shadow: 0 0 0 0.35rem #eba5a8;
}

.note-sm {
    font-size: 0.55rem !important;
    margin-top: 0.15rem;
}

.home-note-btm {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    background-color: #ffffffa8;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 0 0.5rem #0000000a;
    min-width: 22rem;
}

.home-note-btm .txt {
    background: linear-gradient(180deg, #ab2b2a 0%, #572121 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.compass {
    position: relative;
    margin-right: 1.2rem;
}

.compass img.drc {
    width: 5.5rem;
}

.compass img.arw {
    width: 2.1rem;
    position: absolute;
    top: 2rem;
    left: 1.88rem;
    rotate: 0deg;
}

.home-note-btm .val {
    font-size: 1.15rem;
    font-weight: bold;
    margin-right: 0.25rem;
}

/* Dashboard */
.content-inside {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 1.5rem 2.5rem 0.5rem;
}

.db_tt {
    color: #9a080d;
    font-size: 1.25rem;
    margin-right: 0.75rem;
    font-weight: bold;
}

.canvas {
    width: 100%;
    height: 42%;
    min-height: 42%;
    margin-top: 1rem;
}

.db-filter {
    display: grid;
    grid-template-columns: 1fr repeat(2, auto);
    align-items: center;
    border-radius: 5rem;
    padding: 0.3rem 1.5rem 0.5rem 1.5rem;
    color: #a01319;
    border: 0.15rem solid #e1e1e1;
    line-height: initial;
    margin: 1rem 1rem 0;
}

.db-site {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: auto;
}

.db-site label span {
    font-size: 0.8rem;
    white-space: nowrap;
}

.db-btm {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    overflow: auto;
    margin-top: 0.5rem;
    padding: 1rem;
}

.db-box {
    display: flex;
    flex-direction: column;
    box-shadow: 0.2rem 0.2rem 0.4rem #e1e1e1;
    padding: 1rem 1.5rem;
    border-radius: 1.5rem;
    border: 0.15rem solid #e1e1e1;
    width: 50%;
}

.db-box span,
.sel-1 option {
    color: #a01319;
}

.db-dt-group {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 0.4rem 0;
    margin-top: 0.75rem;
    padding: 0 0.5rem;
    overflow: auto;
}

.db-dt-group>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0.15rem solid #e1e1e1;
    border-left: 0;
    border-right: 0;
    padding: 0.3rem 1rem;
    line-height: 1.275rem;
}

.db-dt-group>div:nth-child(1),
.db-dt-group>div:nth-child(5n+1) {
    border-left: 0.15rem solid #e1e1e1;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.db-dt-group>div:nth-child(5n) {
    border-right: 0.15rem solid #e1e1e1;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.db-dt-tt {
    font-size: 0.8rem;
    color: #7b7b7b;
}

.db-dt-vl {
    color: #ba0c12;
}

.db-dt-group:has(.no-avg) {
    flex-grow: 1;

}

.db-dt-group .no-avg {
    grid-area: 1 / span 5;
    background: #ffeded;
    border: 0 !important;
}

/* Wind Rose */
.wr-filter {
    width: fit-content;
    align-items: end;
    margin: 0.4rem 0 0;
}

.wr-flt-btn {
    display: flex;
    border-left: 0.15rem solid #e1e1e1;
    padding: 0.3rem 1.5rem;
    margin-left: 2rem;
}

table#wind_table tbody td>div {
    height: 2.5rem;
    background: #ffecec !important;
}

table#wind_table tbody tr:first-child td>div {
    margin-top: 0;
}

table#wind_table tr td {
    padding: 0.15rem 0;
}

.chart-group {
    height: 50rem;
    max-height: 80%;
    position: relative;
}

.chart-group .location {
    display: flex;
    align-items: center;
    line-height: initial;
    margin-top: 0.5rem;
    position: absolute;
}

.chart-group .location img {
    height: 1.25rem;
    margin-right: 0.4rem;
}

.chart-group .location span {
    color: #9e0f14;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}

#wind_chart {
    width: 72rem;
    max-width: 70%;
    height: 100%;
    margin: auto;
}

/* Download */
.filter-btn.date {
    background: #ffffff25;
    cursor: pointer;
}

.footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    margin-top: auto;
    padding-top: 1.25rem;
    margin-bottom: 0.25rem;
    align-items: center;
}

.dl-note {
    color: #ffffff80;
    margin-top: 1rem;
    font-size: 0.8rem;
}

/* Setting */
.set-tt {
    color: #9a080d;
    font-size: 2rem;
    font-weight: bold;
}

.border_table {
    min-height: 15rem;
    flex-grow: 1;
    overflow: auto;
}

.border_table:not(.set) table tr th:first-child {
    border-radius: 0.3rem 0 0 0.3rem;
}

.border_table:not(.set) table tr th:last-child {
    border-radius: 0 0.3rem 0.3rem 0;
}

table:not(.table-condensed) {
    white-space: nowrap;
    width: 100%;
    color: #686969;
}

table:not(.table-condensed) tr th {
    position: sticky;
    top: 0;
    white-space: nowrap;
    z-index: 2;
    padding: 0.6rem 1rem;
    color: #ffffff;
    background-color: #9e0f14;
    font-weight: 100;
    font-size: 0.9rem;
    border-right: 0.15rem solid #ffe6e6;
    border-bottom: 0.15rem solid #ffe6e6;
}

table:not(.table-condensed) tr:nth-child(2) th {
    top: 2.8rem;
}

table:not(.table-condensed) tr th,
table:not(.table-condensed) tr td {
    text-align: center;
    line-height: initial;
}

table:not(.table-condensed) tr td {
    padding: 0.35rem 0;
}

table.table-left tr th,
table.table-left tr td {
    text-align: left;
}

table tr.no-list td {
    color: #d7a4a4;
    padding: 0.65rem 0 !important;
}

table.table-select tbody tr:not(.no-list):hover td>div {
    background: #ffecec !important;
}

table tr.no-list td,
tr.no-list th {
    vertical-align: middle !important;
    text-align: center !important;
}

table:not(.table-condensed) tbody td>div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff8f8;
    border: 0.15rem solid #ffe6e6;
    border-left: 0;
    padding: 0.25rem 1rem;
    height: 5rem;
    font-size: 0.9rem;
}

table:not(.table-condensed) tbody td:first-child>div {
    border-left: 0.15rem solid #ffe6e6;
    border-radius: 0.3rem 0 0 0.3rem;
    padding: 0.25rem 0.5rem;
}

table:not(.table-condensed) tbody td:last-child>div {
    border-radius: 0 0.3rem 0.3rem 0;
}

table:not(.table-condensed) tbody tr:first-child td>div {
    margin-top: 0.35rem;
}

.border_table::-webkit-scrollbar-track {
    margin: 0 20rem;
}

.border_table::-webkit-scrollbar {
    width: 0.38rem;
    height: 0.38rem;
}

.edit-btn {
    border: 0;
    background-color: transparent;
}

.edit-btn img {
    height: 1.8rem;
}

.set-img-site {
    height: 3.75rem;
    max-width: 7rem;
}

.set-status {
    display: flex;
    align-items: center;
    padding: 0.2rem 1rem 0.2rem 0.75rem;
    border-radius: 5rem;
}

.set-status .cl {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 100%;
    margin-right: 0.5rem;
}

.set-status span {
    font-size: 0.9rem;
}

.st-0 {
    background-color: #ffd9d9;
}

.st-0 .cl {
    background-color: #e5353a;
}

.st-0 span {
    color: #e5353a;
}

.st-1 {
    background-color: #f0feed;
}

.st-1 .cl {
    background-color: #259800;
}

.st-1 span {
    color: #259800;
}

.site-set-header {
    display: flex;
    align-items: center;
    color: #9e1015;
    border-bottom: 0.15rem solid #9e1015;
    width: 100%;
    padding: 0.2rem;
}

.site-set-header .modal-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.site-set-cntn {
    display: grid;
    gap: 1rem;
    padding: 1.5rem 2rem;
}

.ss-tt {
    color: #9e1015;
    padding-left: 0.25rem;
    padding-bottom: 0.25rem;
}

.line-dashed-left {
    border-left: 0.15rem dashed #f6d5d6;
    padding-left: 1rem;
    margin-left: 1.2rem;
}

/* Button */
button {
    outline: none;
}

.btn-1 {
    display: flex;
    align-items: center;
    background: #e52f35;
    color: #ffffff;
    border: 0;
    padding: 0.45rem 1.35rem;
    border-radius: 5rem;
    font-size: 0.9rem;
}

.btn-2 {
    border: 0;
    border-radius: 5rem;
    color: #ffffff;
    background: #e52f35;
    padding: 0.5rem 1.5rem;
    margin: 0 0.25rem;
    box-shadow: 0.12rem 0.12rem 0 #c4282dea;
}

.btn-2.active {
    color: #e52f35;
    background: #ffdfdf;
    font-weight: bold;
    box-shadow: 0.12rem 0.1rem 0 #e0b9b9;
}

.btn-3 {
    border: 0;
    color: #ffffff;
    border-radius: 5rem;
    padding: 0.375rem 1.75rem;
}

.btn-upload {
    border: 0;
    background-color: transparent;
    margin-top: 1rem;
    width: 100%;
    height: 15rem;
    border: 0.15rem dashed #ddbbbd;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.btn-upload img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
}


/* Input */
.input-date,
.input-date-red {
    display: flex;
    align-items: baseline;
    cursor: pointer;
}

.input-date {
    background: url(../img/calendar-days-solid.svg) 0.75rem 46% no-repeat, url(../img/chevron-down-solid.svg) calc(100% - 0.75rem) 46% no-repeat #ffffff25 !important;
    background-size: 0.9rem !important;
    color: #ffffff;
    width: 100%;
    border: 0;
    border-radius: 0.65rem;
    padding: 0.75rem 2.25rem;
    margin-top: 0.25rem;
    background-color: #ffffff25;
}

.input-date-red {
    background: url(../img/calendar-days-solid-red.svg) 1.5rem 44% no-repeat, url(../img/chevron-down-solid-red.svg) calc(100% - 1.75rem) 42% no-repeat #ffffff25 !important;
    background-size: 1.1rem, 0.9rem !important;
    color: #a01319;
    border: 0.15rem solid #e1e1e1;
    border-top: 0;
    border-bottom: 0;
    padding: 0.75rem 3.25rem;
    margin: 0 2rem;
    font-size: 0.9rem;
}

.set-input-date {
    background: #ffffff url(../img/calendar-days-solid-red.svg) calc(100% - 0.75rem) 44% no-repeat;
    background-size: 1rem;
    padding-right: 2.5rem !important;
}

.input-search {
    background: url(../img/magnifying-glass-solid.svg) calc(100% - 1rem) 46% no-repeat;
    background-size: 1rem !important;
    border: 0.15rem solid #ccd0d7;
    border-radius: 0.6rem;
    padding: 0.4rem 2.75rem 0.4rem 1.4rem;
    width: 19rem;
    line-height: initial;
    box-shadow: 0 0.2rem 0.4rem #e1e1e1;
}

.input-style-1 {
    border: 0.15rem solid #ccd0d7;
    border-radius: 0.375rem;
    padding: 0.375rem 1rem;
    width: 100%;
    color: #212529;
}

.input-style-1::placeholder {
    color: #d48d92;
}

::placeholder {
    opacity: 50%;
}

input:not(.input-date-red):focus {
    box-shadow: 0 0 0 0.1rem #9e0f1480;
    border-color: #9e0f1480;
}

/* Select */
.sel-1,
.sel-2 {
    appearance: none;
    border: 0.15rem solid #a66969;
    border-radius: 0.375rem;
    cursor: pointer;
}

.sel-1 {
    background: transparent url(../img/chevron-down-solid.svg) calc(100% - 0.5rem) 46% no-repeat !important;
    background-size: 0.6rem !important;
    color: #ffffff;
    padding: 0.3rem 1.45rem 0.3rem 0.5rem;
    margin: 0.25rem 0.25rem 0 0;
}

.sel-2 {
    background: transparent url(../img/chevron-down-solid-red.svg) calc(100% - 0.5rem) 46% no-repeat !important;
    background-size: 0.675rem !important;
    color: #a01319;
    padding: 0.18rem 1.45rem 0.18rem 0.5rem;
    margin: 0.1rem 0.25rem 0 0;
}

select,
input {
    outline: unset;
}

.fw-075 {
    font-size: 0.75rem;
}

/* Daterangepicker */
.daterangepicker {
    width: auto !important;
    color: #333332;
    box-shadow: 0 0.1rem 0.5rem #7a6f6f75;
}

.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right {
    padding: 0.6rem 1rem 0.9rem !important;
    margin: auto;
}

.daterangepicker .drp-calendar.left {
    border: 0 !important;
}

.daterangepicker .drp-calendar.right {
    padding-left: 0 !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: initial !important;
}

.daterangepicker .calendar-table th {
    padding: 0.4rem 0 !important;
}

.daterangepicker .drp-buttons {
    padding: 0.375rem 1rem;
}

.daterangepicker select {
    background: #fff url(../img/chevron-down-solid-dark.svg) calc(100% - 0.5rem) 50% no-repeat !important;
    background-size: 0.8rem !important;
    appearance: none;
    cursor: pointer !important;
    border: 0.15rem solid #e3e7ed !important;
    border-radius: 4rem;
    width: fit-content !important;
    padding: 0.25rem 1.75rem 0.25rem 0.75rem !important;
    line-height: initial;
}

.daterangepicker td.in-range:not(.end-date, .off) {
    background-color: #eee;
}

.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.55rem 1.5rem !important;
    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.9rem !important;
    text-wrap: nowrap;
}

.daterangepicker .drp-calendar {
    max-width: fit-content !important;
}

.daterangepicker td.active.start-date,
.daterangepicker td.active:hover {
    border-radius: 0.25rem 0 0 0.25rem;
}

.daterangepicker td.active.end-date {
    border-radius: 0 0.25rem 0.25rem 0;
}

.daterangepicker td.active.start-date.end-date {
    border-radius: 4px;
}

.daterangepicker td.active,
.daterangepicker .ranges li.active,
.daterangepicker td.active:hover {
    background-color: #e52f35;
}

.daterangepicker .ranges {
    float: none;
    background: #eee;
}

.daterangepicker .ranges ul {
    display: flex;
    width: fit-content;
}

/* Scroll */
::-webkit-scrollbar {
    width: 0.34rem;
    height: 0.34rem;
}

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

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

::-webkit-scrollbar-thumb {
    background-color: #9a060b;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    border-radius: 5rem;
}

::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    border-radius: 5rem;
    border: 0.12rem solid #dbdbdbbd;
}