* {
    padding: 0;
    margin: 0;
    font-size: 0.865vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: NotoSansMedium;
}

@supports (-webkit-touch-callout: none) {

    /* CSS specific to iOS devices */
    * {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
}

@supports not (-webkit-touch-callout: none) {
    /* CSS for other than iOS devices */
}

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

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

#mainpage {
    display: flex;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    overflow: hidden;
}

.blurBack {
    -webkit-filter: blur(0.4rem);
    filter: blur(0.4rem);
    pointer-events: none
}

.for-mob {
    display: none !important;
}

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

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


/* SideBar */
#sidebar {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background: #1c1c1c;
    color: #fff;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    width: 5.2rem;
    min-width: 5.2rem;
    padding: 0.5rem;
    text-align: center;
    overflow: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.25);
}

#sidebar ul {
    padding: 0;
}

#sidebar li, .logout-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.7rem;
    height: 3.5rem;
    border-radius: 100%;
    line-height: initial;
}

#sidebar li {
    cursor: pointer;
    list-style-type: none;
    margin: 0.6rem 0;
}

#sidebar .circle-active {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    width: 2.7rem;
    height: 2.5rem;
}

#sidebar .active {
    background-color: #5a564b;
}

#sidebar li:not(.active):hover {
    background-color: #fdba0a;
    border-radius: 100%;
}

#sidebar li:not(.active):hover i {
    font-size: 1.1rem;
    filter: drop-shadow(0px 1px 1px rgb(160 137 14));
}

#sidebar .active .circle-active {
    background: #fdba0a;
    box-shadow: 1px 1px 3px #584600;
}

#sidebar .active .circle-active i {
    color: #333332;
    font-size: 1.25rem;
    line-height: initial;
}

#sidebar li span, .logout-btn span {
    position: absolute;
    left: 4.75rem;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    color: #fff;
    font-size: 0.95rem;
}

#sidebar li:hover span, .logout-btn:hover span {
    visibility: visible;
    opacity: 1;
    padding: 0.8rem 1.5rem 0.8rem 1rem;
    background-color: #1c1c1c;
    border-radius: 0 3rem 3rem 0;
    box-shadow: 10px 0 50px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.logout-btn {
    color: #333332;
    background: #fdba0a;
    border: 0;
    font-size: 1.25rem;
}

.side-bottom {
    padding-bottom: 1rem;
}

.side-bottom select {
    background: transparent url(../img/angle-down-solid.svg) calc(100% - 0.5rem) 44% no-repeat;
    color: #fdba0a;
    font-weight: bold;
    border: 0;
    background-size: 0.7rem;
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
    width: fit-content;
    appearance: none;
    cursor: pointer;
}

.side-bottom select option {
    color: #43588f;
    margin: 1rem;
}

select option:disabled {
    background-color: rgba(128, 128, 128, 0.178);
}


/* Navbar */
.navbar, .navbar-btm {
    color: #333332;
    background-color: #fdcb0a;
    z-index: 3;
    box-shadow: inset 0 0 5px rgb(0 0 0 / 24%);
}

.navbar {
    position: fixed;
    height: 3.25rem;
    padding: 0 1rem;
    width: -webkit-fill-available;
}

.navbar-btm {
    display: flex;
    justify-content: end;
    padding: 0.75rem 1.25rem;
}

.navbar-btm button, .menu-btn {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin: 0 1.5rem;
}

.navbar-btm button i, .menu-btn i {
    color: #fff;
    font-size: 2.1rem;
    margin-right: 0.5rem;
    margin-bottom: 0.1rem;
}

.navbar-btm .fa-door-open, .navbar-btm .fa-file-invoice-dollar, .menu-btn .fa-door-open {
    font-size: 1.8rem;
}

select.navbar-brand {
    background: url(../img/angle-down-black.svg) 0.5rem 50% no-repeat;
    padding: 0.2rem 0.5rem 0.25rem 2rem;
    /* background: url(../img/angle-down-black.svg) calc(100% - 0.75rem) 50% no-repeat; */
    /* padding: 0.2rem 2.5rem 0.25rem 0.5rem; */
    background-size: 1rem;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.25rem;
    max-width: 100%;
}

.navbar-nav>div {
    margin: 0.4rem 0.75rem;
}

.nav-act {
    display: flex;
    line-height: initial;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
    padding: 0.1rem;
    text-wrap: nowrap;
}

.nav-act i {
    font-size: 1.5rem;
}

.nav-act .fa-caret-down {
    font-size: 1rem;
    padding-top: 0.1rem;
}

.nav-act .fa-circle-user {
    font-size: 1.5rem;
}

.nav-act .fa-warehouse {
    font-size: 1.25rem;
}

.nav-act .fa-bell, .nav-act .fa-floppy-disk, .nav-act .fa-globe {
    font-size: 1.375rem;
}

.nav-act span {
    margin: 0 0.5rem;
}

.nav-act:hover {
    background: linear-gradient(90deg, #754704 0%, #333332 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-act.dropdown-toggle::after {
    display: none;
}

.dropdown-item i {
    width: 1.5rem;
    text-align: center;
    margin-right: 0.2rem;
}


/* Header Menu */
.tab-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 0.25rem solid #80808047;
    margin: 0.5rem 0 1rem;
}

.tab-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: bold;
    color: #666665;
    line-height: initial;
    padding: 0 1.5rem 0.4rem 0.5rem;
    cursor: pointer;
}

.circle-icon-gray {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #D9D9D9;
    border-radius: 100%;
    min-width: 2.4rem;
    height: 2.3rem;
    padding-bottom: 0.05rem;
    box-shadow: inset -0.2rem -0.1rem 0.25rem 0 #c9c9c9;
}

.circle-icon-gray i {
    font-size: 1.05rem;
    background: linear-gradient(90deg, rgba(142, 142, 142, 1) 0%, rgba(165, 165, 165, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tab-header.active {
    border-bottom: 0.25rem solid rgba(255, 179, 71, 1);
    border-image: linear-gradient(0.25turn, rgba(253, 203, 10, 1), rgba(255, 179, 71, 1));
    border-image-slice: 1;
    margin-bottom: -0.25rem;
}

.tab-header.active span {
    font-size: 1.1rem;
    color: #333332;
    font-weight: bold;
}

.tab-group:not(.sub) .tab-header:hover span {
    font-size: 1.1rem !important;
}

.tab-header.active .circle-icon-gray {
    background: linear-gradient(0.25turn, rgba(253, 203, 10, 1), rgba(255, 179, 71, 1));
    box-shadow: inset -0.2rem -0.1rem 0.25rem 0 rgb(212 163 1);
}

.tab-header:hover .circle-icon-gray, .setting-tab-group:not(.active):hover .circle-icon-gray {
    background: linear-gradient(0.25turn, rgb(253 228 10 / 61%), rgb(255 202 26));
    box-shadow: inset -0.2rem -0.1rem 0.25rem 0 rgb(228 176 3);
}

.tab-header:not(.active):hover .circle-icon-gray i, .setting-tab-group:not(.active):hover i {
    opacity: 75%;
}

.tab-header.active .circle-icon-gray i, .tab-group:not(.sub) .tab-header:hover i, .setting-tab-group:not(.active):hover i {
    font-size: 1.1rem;
    background: linear-gradient(90deg, #754704 0%, #333332 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Filter */
.tab-filter {
    display: grid;
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, auto));
    max-width: 100%;
}

.filter-text-group {
    display: flex;
    border: 0.15rem solid #D9D9D9;
    box-shadow: 0 0.1rem 0.4rem 0 #d9d9d9 inset;
    border-radius: 4rem;
}

.filter-text-header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 2rem;
    background: #fdcb0a;
    min-width: 4rem;
    margin: 0.1rem;
    z-index: 1;
    padding: 0 0.75rem;
    margin-left: 0.15rem;
    text-wrap: nowrap;
}

.filter-text-header span {
    font-size: 0.9rem;
}

.filter-icon-header {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f7c503;
    padding-left: 1rem;
    padding-bottom: 0.1rem;
}

.filter-icon-header i {
    font-size: 1.1rem;
}




/* Sub menu */
.tab-sub-group {
    display: flex;
    border-radius: 5rem;
    margin: 1rem 0;
    background-color: #EBEBEB;
    color: #9B9B9B;
    /* min-height: 3rem; */
    box-shadow: 0 0 0.75rem 0 #c9c9c957 inset;
}

.tab-sub-sub-group {
    display: flex;
    overflow: auto;
    text-wrap: nowrap;
    margin-right: 1rem;
}

.tab-sub, .tab-sub-select {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0.4rem 2rem;
    margin: 0.2rem;
    cursor: pointer;
    line-height: initial;
    text-wrap: nowrap;
}

.tab-sub.active {
    font-weight: bold;
    border-radius: 5rem;
    background: linear-gradient(0.25turn, rgba(253, 203, 10, 1), rgba(255, 179, 71, 1));
    box-shadow: inset -0.2rem -0.1rem 0.25rem 0 rgb(212 163 1);
}

.tab-sub.active span {
    color: #333332;
    font-size: 1.05rem;
}

.tab-sub:hover {
    border-radius: 5rem;
    color: #333332;
    background: linear-gradient(0.25turn, rgb(247 229 92), rgb(255 202 26));
    box-shadow: inset -0.2rem -0.1rem 0.25rem 0 rgb(228 176 3);
}

.tab-sub-select {
    border-radius: 5rem;
    background: linear-gradient(90deg, #204073 0%, rgba(24, 76, 159, 0.92) 100%);
    box-shadow: -2px -2px 4px 0px rgba(1, 1, 1, 0.25) inset;
    padding: 0.35rem 1rem 0.35rem 1rem;
    min-width: 14rem;
}

.tab-sub-select select {
    background: url(../img/angle-down-yellow.svg) calc(100% - 0.75rem) 50% no-repeat;
    background-size: 1rem;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    color: #fff;
    padding: 0.2rem 2.5rem 0.2rem 1rem;
    width: 100%;
}

.tab-sub-select select option {
    color: #0a0c3a;
}

.doc {
    display: flex;
    overflow: auto;
}

/* Content */
#main_content {
    width: calc(100% - 5rem);
}

.content {
    height: calc(100% - 3.25rem);
    /* padding: 1rem 2rem; */
    margin-top: 3.25rem;
}

.content-inside {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem 2rem;
}

/* Dashboard */
.dsh-top {
    height: 7.5rem;
    margin-bottom: 1rem;
}

.dsh-btm {
    height: calc(100% - 8.5rem);

}

.dsh-box {
    display: flex;
    align-items: center;
    background: #FFF;
    border-radius: 0.4rem;
    /* box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); */
    box-shadow: 0px 0px 8px 0px #c8c8c8;
    padding: 1rem 1rem 0.75rem;
}

.dsh-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.75rem;
    height: 4.5rem;
    border-radius: 100%;
    margin-right: 1rem;
}

.dsh-icon i {
    font-size: 2rem;
}

.dsh-info {
    width: calc(100% - 4.75rem);
}

.dsh-info-title {
    opacity: 60%;
    padding-top: 0.5rem;
}

.dsh-info-num {
    font-size: 2.5rem;
    color: #204073;
    font-weight: bold;
}

.dsh-info-unit {
    color: #204073;
    padding-left: 0.25rem;
}

#home-alert-content {
    padding: 1rem 1rem 0 1.5rem;
    height: 100%;
    overflow: auto;
}

.timeline-date {
    padding-bottom: 1.25rem;
    margin-left: -1rem;
}

.timeline-date span {
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-weight: 600;
}

.timeline-label {
    position: relative;
}

.timeline-label:before {
    content: "";
    position: absolute;
    left: 3.5rem;
    width: 0.2rem;
    top: 0;
    bottom: 0;
    background-color: #eff2f5;
}

.timeline-label .timeline-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-bottom: 1.25rem;
}

.timeline-label .timeline-label {
    width: 3.5rem;
    flex-shrink: 0;
    position: relative;
    color: #204073;
}

.timeline-label .timeline-badge {
    flex-shrink: 0;
    background: #fff;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
    margin-top: 0.1rem;
    margin-left: -0.5rem;
    padding: 0.2rem !important;
    border: 0.4rem solid #fff !important;
}

.timeline-label .timeline-content {
    flex-grow: 1;
    color: #040849;
}

.noti-filter input, .noti-filter select {
    min-width: 13rem;
}

#alert_history_list {
    flex-grow: 1;
    padding: 1rem 2rem 0 1.5rem;
    overflow: auto;
    margin-top: 0.5rem;
}

.home-noinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.home-noinfo i {
    font-size: 5rem;
    margin: 1rem 0;
}

.home-noinfo span {
    font-size: 1.1rem;
}

.history-filter {
    padding: 0 3rem 1rem;
    border-bottom: 0.12rem dashed #D7D7D7;
}

/* Document */
.bg-doc-list {
    min-height: 15rem;
    flex-grow: 1;
    overflow: auto;
}

.doc-group-parent {
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid #E5E5E5;
}

.doc-info-box, .doc-info-box-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}

.doc-info-box {
    width: 100%;
    padding: 0.75rem 0.25rem;
}

.doc-info-box-1 {
    flex-grow: 1;
}

.doc-info-2 {
    display: flex;
    align-items: center;
    margin: 0.2rem 1rem;
}

.doc-info-box-1.info-4>div:last-child, .doc-info-box-1.info-6>div:last-child {
    min-width: 9rem;
}

.doc-info-2>div {
    color: #8E8E8E;
    margin-right: 0.5rem;
}

.doc-btn-stat {
    display: flex;
    color: #fff;
    border-radius: 0 0.4rem 0.4rem 0;
    width: 3.175rem;
}

.doc-btn-stat .btn-trans {
    padding: 0.5rem 1rem;
}

.bg-doc-list>div:nth-child(even) {
    background-color: #fbfaf8;
}

.doc-btn-stat {
    display: flex;
    color: #fff;
    border-radius: 0 0.4rem 0.4rem 0;
}

.bg-full-page {
    display: flex;
    flex-direction: column;
    background-color: #F7F7F7;
    height: 100%;
    /* margin: -1rem -2rem; 
    height: calc(100% + 2rem);*/
}

.no-doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: initial;
    height: 100%;
    width: 100%;
    padding: 0.5rem;
}

.no-doc i {
    font-size: 4rem;
    margin-bottom: 0.75rem;
    color: #dedede;
}

.no-doc span {
    opacity: 25%;
    font-weight: bold;
}

#person_not_select .no-doc img {
    width: 18rem;
}

#import_table .label {
    align-items: baseline;
    margin: 0;
}

.serial-table-head {
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0 1.25rem;
}

.serial-alert {
    background: #faebd79e;
    border-radius: 0.25rem;
    padding: 0.75rem;
    color: #dc3545;
    margin: 0.5rem 3rem 0 0;
    height: 7.5rem;
}

.serial-alert .form-header-dash {
    border-color: #ffb63e69;
    margin-top: 0;
}

.serial-count {
    /* display: flex;
    align-items: center;
    justify-content: end;
    min-width: 2rem;
    opacity: 50%;
    margin-right: 1rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    /* opacity: 50%; */
    /* background: #d9d9d9; */
    background: #fdcb0a;
    margin-right: 0.2rem;
    border-radius: 2rem 0.5rem 0.5rem 2rem;
    /* box-shadow: 0 0.1rem 0.4rem 0 #20407363 inset; */
}



/* Related Document */
.doc_list_box {
    display: flex;
    color: #333332;
    padding: 1rem 1.25rem;
    border-radius: 0.3rem;
    margin: 0.75rem 0.5rem;
    box-shadow: 0 0 20rem 0 rgb(228 176 3 / 28%);
    border: 0.15rem solid #f7e77b;
}

.related-doc .doc_list_box:nth-child(odd) {
    background: linear-gradient(0.25turn, rgb(253 228 10 / 55%), rgb(255 202 26 / 44%));
}

.related-doc .doc_list_box:nth-child(even) {
    background: linear-gradient(0.25turn, rgb(253 228 10 / 24%), rgb(255 202 26 / 24%));
}

.related_doc_topic {
    display: flex;
    align-items: baseline;
    border-right: 0.15rem solid #ffffff;
    width: 50%;
}

.icon_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 2.8rem;
    border-radius: 100%;
    background-color: white;
    box-shadow: inset 0.1rem 0.1rem 0.25rem 0 rgb(226 218 160 / 84%);
}

.icon_box i {
    color: #040849;
    font-size: 1.5rem;
}

.related_doc_head {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0 1rem;
    width: calc(100% - 3rem);
    line-height: 2.1rem;
}

.related_doc_list {
    display: grid;
    justify-content: start;
    align-content: baseline;
    width: 50%;
    padding: 1.1rem 0 0 2rem;
    gap: 0.5rem;
}

.related_doc_list button span {
    font-weight: bold;
    margin-right: 0.5rem;
}

/* Car conditions */
.form-parent {
    display: grid;
    align-content: baseline;
    gap: 1.25rem;
    flex-grow: 1;
    overflow: auto;
    padding: 1.75rem 7.5rem 1rem;
}

.detail-box {
    margin: 0 !important;
}

.detail-box .header {
    border-radius: 0.4rem;
    padding: 0.3rem 1.75rem 0.25rem;
    margin: -1.5rem 0 1rem -0.25rem;
    width: fit-content;
    background: #204073;
    box-shadow: 0.225rem 0.225rem 0.15rem #183562;
    color: #fff;
}

.form-inline-2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

.form-inline-3 {
    display: grid;
    gap: 2rem 3rem;
    grid-template-columns: repeat(3, 1fr);
}

.form-inline-4 {
    display: grid;
    gap: 5rem;
    grid-template-columns: 1.75fr 1fr;
}

.form-group, .form-group-1, .form-group-2, .form-group-3, .form-group-4, .form-group-5, .form-group-8 {
    display: grid;
    align-items: baseline;
    align-content: baseline;
    gap: 0.275rem 1rem;
}

.form-group {
    grid-template-columns: auto 1fr auto 1fr;
}

.form-group .input-style-2 {
    width: 100%;
    line-height: initial;
}

.form-group-1 {
    grid-template-columns: auto 1fr auto 18% auto 18%;
}

.form-group-1 select {
    width: 75%;
}

.form-group-2 {
    text-wrap: nowrap;
    grid-template-columns: auto 1fr;
}

.form-group-4 {
    grid-template-columns: 1fr 1.5fr;
}

.form-group-5 {
    grid-template-columns: 1fr auto;
}

.form-group-3 {
    align-items: center;
    grid-template-columns: repeat(2, auto);
}

.form-group-6 {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    overflow: auto;
    padding: 0.5rem 1rem;
    gap: 0.275rem 1rem;
    margin-top: 1.25rem;
}

.form-group-7 {
    display: grid;
    gap: 0.275rem 1rem;
    grid-template-columns: 1fr 1.25fr;
}

.form-group-8 {
    grid-template-columns: 1fr auto 1fr auto;
}

.form-group-8>div:nth-child(odd) {
    text-align: end;
}

.form-group-btn {
    display: flex;
}

.form-group-btn input, .form-group-btn textarea, .form-group-btn select {
    border-right-color: #fdc519;
    border-radius: 0.4rem 0 0 0.4rem;
}

.form-group-btn button, .unit-end {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-radius: 0 0.4rem 0.4rem 0;
    border: 0;
    min-width: 3rem;
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
}

.form-group-btn button i {
    color: #333332;
}

.form-group-btn input:disabled, .form-group-btn.disabled input {
    border-right: 0;
}

.form-group-btn button:disabled, .form-group-btn.disabled button {
    background: linear-gradient(90deg, rgb(142 142 142 / 71%) 0%, rgba(165, 165, 165, 1) 100%);
}

.form-group-btn.disabled {
    pointer-events: none;
}

.form-header-dash {
    display: flex;
    align-items: baseline;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-bottom: 0.12rem dashed #D7D7D7;
    margin-bottom: 0.75rem;
    margin-top: 2rem;
}

.form-header-dash i {
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

#checkList_table tr:not(:first-child) th {
    padding-top: 2rem;
}

#checkList_table td {
    vertical-align: middle;
}

#checkList_table tr th:first-child, #checkList_table tr td:first-child {
    text-align: start;
    white-space: normal;
}

.tr-header td {
    background-color: #E5E5E5;
    text-align: start !important;
    font-weight: bold;
}

.ext-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0.4rem;
    background: linear-gradient(90deg, rgba(32, 64, 115, 0.12) 0%, rgba(165, 165, 165, 0.16) 100%);
    padding: 0rem 0;
    margin-top: 1.5rem;
}

.ext-group {
    display: flex;
    align-items: center;
    width: calc(100% - 2rem);
    color: #204073;
    margin: 0.75rem 0.75rem;
}

.ext-img, .ext-img img {
    border-radius: 0.4rem;
}

.ext-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.5rem;
    height: 6rem;
    margin-right: 1rem;
    background: #b3becf;
    cursor: pointer;
    border: 0.25rem solid white;
}

.ext-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ext-img input {
    display: none;
}

.ext-txt {
    width: calc(100% - 7.5rem);
}

.ext-txt textarea {
    width: 100%;
}

.gap-0-1 {
    gap: 0 1rem !important;
}

/* Quotation */
.grid-col-2-1 {
    grid-column: 2 / -1;
}

.label {
    display: flex;
    align-items: center;
    margin: 0.25rem 0.75rem;
    cursor: pointer;
    line-height: initial;
    user-select: none;
}

.label span {
    margin-left: 0.4rem;
}

.flex-wrap-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#sellSvList table tr :nth-child(2), #sellSvList table tr :nth-child(3) {
    text-align: start;
}

#sellSvList table tr :nth-child(n+4) {
    text-align: end;
}

.table-inside table thead tr th {
    padding: 1rem 1rem 0.5rem;
}

.table-group {
    height: max-content;
    width: 100%;
    overflow: auto;
    position: relative;
}

.table-tab, .table-btn {
    display: flex;
}

.table-tab .tab {
    color: #8E8E8E;
    background-color: #EBEBEB;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem 0.4rem 0 0;
    width: 18rem;
    max-width: 50%;
    text-align: center;
    cursor: pointer;
}

.table-tab .tab.active {
    color: #fff;
    background-color: #204073;
}

.table-btn {
    position: absolute;
    top: 0;
    right: 0;
}

.table-btn button {
    border-radius: 0.4rem 0.4rem 0 0;
    box-shadow: unset;
}

.table-outside {
    flex-grow: 1;
    overflow: auto;
    background: #EBEBEB;
    border-radius: 0 0 0.4rem 0.4rem;
    padding: 0.5rem;
    min-height: 15rem;
}

.table-box {
    background: #FFF;
    border-radius: 0.4rem;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
}

.table-inside {
    height: 20rem;
    overflow: auto;
    padding: 0 1rem;
}

.table-last-btn {
    width: 3rem;
    text-align: center !important;
}

.no-list td {
    background-color: #e5e5e58a;
    cursor: default;
}

.promo-inside {
    display: flex;
    align-items: baseline;
    margin-top: 0.5rem;
    padding: 0.5rem
}

.promo-inside .form-group-btn {
    padding: 0.25rem;
    width: 25rem;
}

.promo-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.promo-box {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.5rem;
    color: #204073;
    border-radius: 0.4rem;
    width: fit-content;
    margin: 0.25rem;
    box-shadow: 0 0 0.5rem 0 #cfd3d9 inset;
    background: linear-gradient(90deg, rgba(32, 64, 115, 0.12) 0%, rgba(165, 165, 165, 0.16) 100%);
}

.promo-box>div {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.25rem;
}

.balance-box {
    display: flex;
    justify-content: end;
    align-items: center;
    border-radius: 0.4rem;
    background-color: #FFF300;
    /* margin-bottom: 1rem; */
    padding: 0.375rem 1rem;
    line-height: initial;
}

.balance-val {
    color: #DC3545;
    /* margin: 0 0.25rem 0 1rem; */
    font-size: 1.1rem;
    font-weight: bold;
}

.input-percent {
    display: flex;
    align-items: baseline;
    margin-right: 1rem;
}

.input-percent input {
    width: 4.5rem !important;
    padding: 0.3rem 1.5rem 0.3rem 0.75rem;
}

.input-percent span {
    margin-left: -1.5rem;
}

.w-1-1 {
    width: 1.1rem !important;
}

.w-max-9 {
    width: 9rem;
    justify-self: start;
}

.w-min-10 {
    min-width: 10rem !important;
}

.w-min-20 {
    min-width: 20rem !important;
}

.w-max-15 {
    max-width: 15rem !important;
}

.w-5rem {
    width: 5rem !important;
}

.w-7rem {
    width: 7rem !important;
}

.w-10rem {
    width: 10rem !important;
}

.w-12rem {
    width: 12rem !important;
}

.w-14rem {
    width: 14rem !important;
}

.w-16rem {
    width: 16rem !important;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

.w-max-100 {
    max-width: 100%;
}

.w-max {
    width: max-content !important;
}

.w-min-max {
    min-width: max-content !important;
}

.h-max-25 {
    max-height: 25rem !important;
}

.overflow-unset {
    overflow: unset !important;
}

.px-2rem {
    padding-left: 2rem;
    padding-right: 2rem;
}

.wrap-min-12 {
    white-space: normal;
    min-width: 12rem;
}

.wrap-max-30 {
    max-width: 30rem;
    white-space: normal;
    width: max-content;
}

.text-md-wrap {
    text-wrap: wrap;
}

.form-inline-2.sum input, .cal-sum input {
    text-align: end;
}

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

.flex-baseline {
    display: flex;
    align-items: baseline;
}

.sum-title {
    width: 100%;
    text-align: end;
    margin-right: 1rem;
    line-height: 1rem;
    white-space: nowrap;
}

.disc-title {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    margin-right: 1rem;
    line-height: 1rem;
}

.sum-minus, .sum-plus, .sum-total, .sum-remain {
    box-shadow: unset !important;
}

.sum-remain {
    background: #ffe3e3d6 !important;
    border-color: #fbdbdb !important;
}

.sum-minus {
    background: #ffe3e3d6 !important;
    border-color: #fbdbdb !important;
}

.sum-plus {
    background: #ccead3a3 !important;
    border-color: #ccead3 !important;
}

.sum-total {
    background: #fffcc6 !important;
    border-color: #fffa9b !important;
}

.complete-doc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.complete-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.complete-icon {
    text-align: center;
    margin-bottom: 1rem;
}

.complete-icon i, .complete-icon div {
    background: linear-gradient(90deg, #28A745 0%, #5CA86D 100%);
}

.complete-icon i {
    font-size: 6rem;
    color: #A1D8AD;
    border-radius: 100%;
    margin-bottom: 1rem;
    box-shadow: 0.1rem 0.1rem 0.25rem #40a857;
}

.complete-icon div {
    font-size: 1.25rem;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.complete-txt {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.5rem 1rem;
}

.complete-txt :nth-child(odd) {
    color: #989898;
}

.complete-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    border-top: 0.12rem solid #E5E5E5;
    padding: 1rem 0.5rem;
}

.complete-menu button {
    padding: 0.75rem;
    margin: 0.5rem;
    min-width: 12rem;
    max-width: calc(50% - 1rem);
    text-wrap: nowrap;
}

.product-group {
    display: grid;
    align-content: baseline;
    gap: 0.25rem;
    height: 100%;
}

.product-bg {
    background: whitesmoke;
    border: 0.15rem solid #E5E5E5;
    border-bottom: 0;
}

.product-box {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border: 0.1rem solid #e8e8e8;
    background: #fff;
    border-radius: 0.25rem;
    padding: 0.75rem 1.25rem;
    gap: 0.75rem 2rem;
    cursor: pointer;
}

.product-box:hover {
    border: 0.1rem solid #D9D9D9;
    box-shadow: 0 0 0.4rem 0 #d9d9d9;
    background: #fff8d6;
}

.product-name .name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1.1rem;
    color: #0355cf;
    margin-right: 0.5rem;
}

.product-name {
    display: flex;
    /* min-width: 30%;
    max-width: 100%; */
}

.service-name {
    min-width: 30%;
}

.product-name .product-price {
    text-wrap: nowrap;
    /* margin-left: 0.5rem; */
    white-space: nowrap;
}


.product-price {
    font-size: 1.1rem;
    color: #dc3545;
}

.product-sub, .service-sub {
    display: grid;
    align-content: end;
    flex-grow: 1;
    gap: 0.2rem 1rem;
    min-width: 60%;
    max-width: 100%;
    color: #0a0c3a;
}

.service-sub {
    grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
}

.product-sub>div {
    line-height: 1.375rem;
}

.box-style-1 {
    background: #f1f1f1;
    padding: 0.4rem 0.75rem;
    border-radius: 0.25rem;
    text-wrap: wrap;
}


/* Fuel indicator */
.range {
    display: inline-block;
    background: silver;
    background: linear-gradient(to right, silver 0.2rem, transparent 1px) repeat-x;
    background-size: calc(100%/((100 - 0) / 24.9) - .1%) 30%;
    background-position: 0 bottom;
    position: relative;
    width: 90%;
    margin: 1rem 0 1.25rem 0.5rem;
}

.range>input {
    width: calc(100% + 12px);
    margin: 0 -6px;
}



/* Warehouse */
#addProduct_form .attr-list-box {
    min-height: 3.4rem;
}

.table-style-1 tr th:nth-last-child(-n+3), .table-style-1 tr td:nth-last-child(-n+3),
.table-style-2 tr th:nth-last-child(4), .table-style-2 tr td:nth-last-child(4),
.table-style-3 tr th:nth-last-child(-n+4), .table-style-3 tr td:nth-last-child(-n+4) {
    text-align: end;
}

.table-style-2 tr th:nth-last-child(3), .table-style-2 tr td:nth-last-child(3),
.table-style-2 tr th:nth-last-child(5), .table-style-2 tr td:nth-last-child(5) {
    text-align: center;
}

.table-style-2 tr td:nth-child(2) {
    white-space: normal;
}

tbody.table-style-1 tr:not(.no-list) {
    cursor: pointer;
}

tbody.table-style-1 tr:not(.no-list):hover {
    background: #fff8d6;
}

.table-style-2 tr th:nth-last-child(2), .table-style-2 tr td:nth-last-child(2) {
    min-width: 10rem;
    padding-left: 2rem;
}

.table-style-2 tr th:last-child, .table-style-2 tr td:last-child {
    padding: 0.5rem 0.75rem;
    width: 5rem;
}

.product-upload-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.product-upload-img {
    display: flex;
    overflow: auto;
    padding: 0.5rem;
    margin-right: 0.5rem;
    max-width: 30rem;
}

.product-img, .product-img img, .product-img-sm, .product-img-sm img, .logo-img, .logo-img img {
    padding: 0;
    border-radius: 0.4rem;
    object-fit: cover;
}

.product-img, .product-img-sm {
    position: relative;
}

.product-img button, .product-img-sm button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border: 0;
    padding: 0.25rem;
    background: #ffffff99;
}

.product-img, .product-img img {
    width: 8rem;
    height: 8rem;
}

.logo-img {
    width: 24rem;
    height: 7.5rem;
    padding: 0.5rem;
    background: #f5f5f5;
}

.logo-img img {
    width: 23rem;
    height: 6.5rem;
    object-fit: contain;
}

.product-img-sm, .product-img-sm img {
    width: 5rem;
    height: 5rem;
}

.product-upload-group .filter-text-group:focus {
    box-shadow: 0 0 0 0.04rem #f7c503 !important;
}

.img-disp {
    z-index: 30000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.875);
}

.img-disp .close {
    color: #ffffff70;
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.5rem 2rem;
}

.img-disp .close i {
    font-size: 2.25rem;
}

.img-display-parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 4rem 0 1rem;
}

.img-display-main {
    display: contents;
}

.img-display-main, .img-display-main img {
    text-align: center;
    width: auto;
    max-width: 95%;
    height: calc(100% - 14rem);
}

.img-display-main, .img-display-main img, .img-sub, .img-sub img {
    object-fit: contain;
    padding: 0;
    border-radius: 0.4rem;
}

#sub_img_display div:first-child {
    margin-left: 5rem;
}

#sub_img_display div:last-child {
    margin-right: 5rem;
}

.img-display-sub {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    width: 100%;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.4rem;
}

.img-display-sub .img-list {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.img-sub {
    margin: 0.1rem 0.5rem;
    box-shadow: 0 0 0 0.15rem #fff;
    background-color: #ffffff;
}

.img-sub, .img-sub img {
    width: 6.75rem;
    height: 6.25rem;
}

.img-sub.active, .img-sub.active img {
    width: 8rem;
    height: 7.5rem;
}

.img-arrow-btn {
    position: absolute;
    color: #ffffff73;
    height: 100%;
    z-index: 100;
    background: #00000070;
    border: 0;
    padding: 1rem;
}

.img-arrow-btn:hover {
    background-color: rgba(0, 0, 0, 0.875);
}

.img-arrow-btn:hover i {
    color: #ffffff;
}

.img-arrow-btn i {
    font-size: 3rem;
}

.img-display-sub button:first-child {
    left: 0;
}

.img-display-sub button:last-child {
    right: 0;
}

/* Promotion */
#set_other_page .gradient-color-3 {
    padding: 0.1rem;
}

.promo-up-div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
    padding: 0 2rem;
}

.promo-img, .promo-img img {
    width: 100%;
    border-radius: 1rem;
}

.promo-img {
    background: #f5f5f5;
    flex-grow: 1;
    overflow: auto;
    padding: 1.5rem;
}

.promo-img img {
    height: 100%;
    object-fit: contain;
}

/* Stock */
#stock_infoPage .left {
    width: 34rem;
    margin: 0 0.5rem;
    /* padding-top: 1.5rem; */
}

#stock_infoPage .right {
    margin: 0 0.1rem;
    width: calc(100% - 35rem);
}

#stock_infoPage [data-lp] {
    text-wrap: wrap;
    word-break: break-word;
}

.col-span-2 {
    grid-column: 1 / 3;
}

.stock-title {
    max-width: 10rem;
    text-wrap: wrap;
    text-align: end;
    opacity: 50%;
    padding-left: 1rem;
}

.stock-attr-group {
    display: flex;
    align-items: baseline;
}

.stock-attr-group .title {
    opacity: 50%;
    padding: 0 0.25rem;
}

.stock-attr {
    line-height: 1.5rem;
    text-wrap: wrap;
    word-break: break-word;
}

.line-height-175 {
    line-height: 1.75;
}

.stock-attr-parent i {
    opacity: 25%;
    font-size: 0.9rem;
}

.stock-box-group {
    display: grid;
    gap: 1rem;
    padding: 0 2.25rem;
    grid-template-columns: repeat(3, 1fr);
}

.stock-box {
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: 0.25rem;
}

.stk-box-1 {
    background-color: #51A351;
}

.stk-box-2 {
    background-color: #EE5252;
}

.stk-box-3 {
    background-color: #1087e6;
}

.stock-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 3.75rem;
    background: white;
    border-radius: 100%;
    margin-right: 1rem;
}

.stock-box-icon i {
    font-size: 1.85rem;
}

.stock-box-val {
    font-size: 1.5rem;
}

.transaction-box {
    border: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 0.25rem;
    background: #eaeaea;
    font-weight: bold;
}

.transaction-box i, .transaction-box span {
    font-size: 0.9rem;
}

.adj-input-group {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.adj-title {
    width: 13rem;
    text-wrap: wrap;
    text-align: end;
    opacity: 50%;
    padding-right: 1rem;
}

/* Person */
.main-bg-gray {
    display: flex;
    flex-grow: 1;
    border-radius: 0 0 0.4rem 0.4rem;
    padding: 0.65rem 0.25rem;
    background: #EBEBEB;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    overflow: auto;
}

.box-white-gray {
    background: #FFF;
    border-radius: 0.4rem;
    /* box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); */
    box-shadow: 0px 0px 8px 0px #c8c8c8;
    margin: 0 0.4rem;
    padding: 1rem;
}

.person-tab-left {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 29rem;
    min-width: 29rem;
}

.person-add-btm {
    display: flex;
    justify-content: center;
    border-top: 0.12rem dashed #D7D7D7;
    margin-top: 0.5rem;
    padding: 0.85rem 0 0.1rem;
}

.person-add-btm button {
    display: flex;
    align-items: baseline;
    font-weight: bold;
}

.person-add-btm button i, .person-add-btm button span {
    font-size: 1.1rem;
}

.person-header {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 1rem 0.75rem 0.25rem;
}

.person-header span {
    font-size: 1.1rem;
}

.person-list {
    display: grid;
    align-content: baseline;
    gap: 0.25rem;
    overflow: auto;
    padding: 0.5rem 0.25rem;
}

.person-group {
    padding: 0.5rem 0.5rem 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    line-height: 1.4rem;
}

.person-group .head {
    padding: 0 0.5rem;
}

.person-group .sub {
    display: flex;
    flex-wrap: wrap;
}

.person-group .sub>div {
    display: flex;
    align-items: center;
    margin: 0.25rem 0.5rem;
    text-wrap: wrap;
    color: #707070;
}

.person-group .sub i {
    font-size: 0.8rem;
    margin-right: 0.25rem;
    color: #BABABA;
    padding-bottom: 0.1rem;
}

.person-group.active {
    color: #204073;
    background: linear-gradient(90deg, rgb(255 243 135 / 25%), rgb(255 214 78 / 25%));
}

.person-group.active .head, .person-group:not(.empty):hover .head {
    font-weight: bold;
}

.person-group.active .sub i, .person-group:not(.empty):hover .sub i {
    color: #20407381;
}

.person-group.active .sub>div, .person-group:not(.empty):hover .sub>div {
    color: rgba(32, 64, 115, 0.75);
}

.person-group:not(.active, .empty):hover {
    color: #204073;
    background: linear-gradient(90deg, rgba(32, 64, 115, 0.12) 0%, rgba(165, 165, 165, 0.12) 100%);
}

.tab-group.sub .tab-header {
    gap: 0.25rem;
    padding-left: 0.75rem;
}

.tab-group.sub .tab-header.active i, .tab-group.sub .tab-header:hover i {
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#person_selected .tab-header i {
    padding: 0.1rem;
}

.tab-group.sub .tab-header.active span {
    font-size: 1rem;
}

.white-blue-box {
    text-align: center;
    min-width: 15rem;
    padding: 1rem 1rem 0.75rem;
    border-radius: 0.4rem;
    color: #204073;
    background: linear-gradient(90deg, rgba(32, 64, 115, 0.21) 0%, rgba(165, 165, 165, 0.25) 100%);
    box-shadow: -2px -2px 4px 0px rgba(1, 1, 1, 0.15) inset;
}

.white-blue-box .num {
    font-size: 1.55rem;
    font-weight: bold;
}

.person-edit-absolute {
    display: flex;
    position: absolute;
    right: 1.75rem;
}

.person-edit-absolute i, .person-content .no-doc span {
    font-size: 1.25rem;
}

.person-edit-absolute i.fa-people-arrows {
    font-size: 1.15rem;
}

.person-edit-absolute i {
    width: 1.5rem;
    text-align: right;
}

.person-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    padding: 1rem;
}

.person-content .no-doc i {
    font-size: 7rem;
}

.right-box {
    display: flex;
    flex-direction: column;
    /* width: calc(100% - 23.7rem); */
    height: auto;
    position: relative;
    flex-grow: 1;
    overflow: auto;
}

.grid-style-1 {
    display: grid;
    gap: 0.75rem;
}

.grid-style-2 {
    display: grid;
    gap: 0.3rem;
}

#withdrawal_modal textarea:focus {
    background-color: #ffffff !important;
}

.sm-txt-unit {
    font-size: 0.85rem;
    white-space: nowrap;
}

.note-box {
    display: block;
    width: 100%;
    flex-grow: 1;
    overflow: auto;
    background: #fff7d7;
    padding: 4.5rem 2.5rem 1.5rem;
    border-radius: 0.5rem;
    white-space: break-spaces;
}

.no-note {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 35%;
    font-size: 1.2rem;
    height: 100%;
}

.person-content.sub-13 .person-edit-absolute {
    border-radius: 5rem;
    margin: 1rem 2.5rem 0 0;
    padding: 0.5rem 1.25rem 0.25rem 0.75rem;
    background-color: #ffffff;
}

/* Report */
.content-report {
    border-radius: 0;
    position: relative;
    width: 100%;
    padding: 0;
    overflow: auto;
}

.header-report {
    padding: 2rem 1rem 0.75rem;
}

.filter-btn {
    display: flex;
    align-items: baseline;
    width: 100%;
    padding: 2.75rem 0.5rem 0 1rem;
}

.filter-name {
    display: flex;
    align-items: center;
    color: #204073;
    font-weight: bold;
    margin-right: 0.75rem;
    font-size: 1.2rem;
}

.filter-name i {
    font-size: 1.1rem;
    padding: 0 0.3rem 0.25rem 0;
    color: #fdcb0a;
}

.flt-search, .flt-sel {
    width: 100%;
    max-width: 27rem;
}

.flt-sel option:disabled {
    background-color: rgba(128, 128, 128, 0.28);
}

.icon-arrow {
    background-color: #316AB1;
    opacity: 60%;
    height: 1.15rem;
    width: 2rem;
    mask: url(../img/angle-down-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/angle-down-solid.svg) no-repeat center / contain;
}

#filter_expand.expand .icon-arrow {
    opacity: 100%;
    mask: url(../img/angle-up-solid.svg) no-repeat center / contain;
    -webkit-mask: url(../img/angle-up-solid.svg) no-repeat center / contain;
}

.sel-report-parent {
    background-color: #FFF5CE;
    padding-left: 2rem;
    border-radius: 0.25rem;
}

#report_type {
    font-family: THSarabunNew !important;
    font-size: 1.4rem;
}

.sel-report {
    background: url(../img/angle-down-black.svg) calc(100% - 1rem) 54% no-repeat;
    appearance: none;
    border: 0;
    border-radius: 0.25rem;
    color: #333332;
    cursor: pointer;
    line-height: initial;
    padding: 0.4rem 3.25rem 0 0;
    background-size: 1.2rem;
    font-size: 2rem !important;
    line-height: 3.25rem !important;
    font-weight: bold;
    background-color: #FFF5CE;
    text-align: center;
}

.sel-report option {
    font-size: 1.1rem;
}

.time-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1.5rem;
}

#report_filter {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: end; */
    width: 100%;
}

#report_filter>div {
    display: flex;
    white-space: nowrap;
}

#report_filter .unavailable {
    opacity: 60%;
    pointer-events: none;
}

#report_filter .unavailable .label-search, #report_filter .unavailable select, #report_filter .unavailable input {
    background-color: #dee9f0;
}

#report_filter .icon-box {
    background: #c6def9;
    line-height: 1.3rem;
    padding: 0.4rem 1.5rem 0.2rem;
}

#report_filter .icon-box i {
    font-size: 1.25rem;
    opacity: 100%;
}

#report_filter .icon-box span {
    font-size: 0.9rem;
    opacity: 75%;
}

.label-search {
    font-size: 0.9rem;
    color: #5e89bb;
    padding: 0.5rem 0.75rem 0.1rem;
    background: #c6def9;
    border-radius: 0.25rem 0 0 0.25rem;
    border: 0.1rem solid #BEDBEF;
    border-bottom: 0;
}

#filter_list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

#filter_list .filter-group {
    display: flex;
    padding: 0 0.25rem;
    /* border-left: 0.05cm solid #c4d5f0; */
}

#filter_list .filter-group .label {
    opacity: 75%;
    margin: 0 0.4rem 0 0;
}

.report-btn {
    position: absolute;
    top: 2.2rem;
    z-index: 1;
    right: 1.75rem;
}

/* #report_type, #report_type option, #report_iframeTable tr th, #report_iframeTable tr td, #report_iframeTable tr th span, #report_iframeTable tr td span,
#reportTable tr th, #reportTable tr td, #reportTable tr th span, #reportTable tr td span .filter-group .label, .filter-group span, #report_filter select, #report_filter span {
    font-family: THSarabunNew !important;
    font-size: 1.4rem;
    line-height: 1.5rem;
} */

#reportTable, #report_iframeTable {
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
    line-height: initial;
}

#reportTable thead, #report_iframeTable thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

#reportTable tfoot, #report_iframeTable tfoot {
    position: sticky;
    bottom: 0;
}

#reportTable th, #report_iframeTable th {
    border-radius: 0;
}

#reportTable tr th, #report_iframeTable tr th {
    vertical-align: middle;
    border: 0.01cm solid #516585;
}

#reportTable tr th, #reportTable tr td, #report_iframeTable tr th, #report_iframeTable tr td {
    padding: 0.45rem 0.75rem;
    text-align: center;
}

#reportTable tr td, #report_iframeTable tr td {
    color: #26394f;
    border: 0.01cm solid #e5e5e5;
}

#reportTable tbody tr th:first-child {
    max-width: 30rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

#reportTable thead tr:first-child th:first-child,
#reportTable tbody th:first-child,
#reportTable tbody td:first-child,
#reportTable tfoot th:first-child {
    position: sticky;
    left: 0;
    z-index: 0;
}

#reportTable thead tr:first-child th:first-child,
#reportTable tfoot th:first-child {
    z-index: 100;
}

#reportTable tbody tr:nth-child(even) td:first-child {
    background-color: #f5f5f5;
}

#reportTable tbody tr:nth-child(odd) td:first-child {
    background-color: #fff;
}

#reportTable tbody th:first-child, #report_iframeTable tbody th:first-child {
    background: #fff8d6;
    color: #204073;
    border: 0.01cm solid #e5e5e5;
}

#table_scroll, #iframe_content {
    border-radius: 0;
    box-shadow: unset;
    border: 0;
}

#table_scroll::-webkit-scrollbar {
    width: 0.75rem !important;
    height: 0.75rem !important;
}

#table_scroll::-webkit-scrollbar-thumb,
#table_scroll::-webkit-scrollbar-track {
    border-radius: 0;
}

#r_flt_date {
    width: 10rem;
    min-width: 10rem !important;
}



/* Setting */
.setting-tab-left {
    max-width: 22rem;
    min-width: 22rem;
    overflow: auto;
    height: 100%;
    padding-right: 0.5rem
}

.setting-tab-left-inside {
    overflow: auto;
    height: 100%;
    padding: 0.5rem;
}

.setting-tab-group {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
    cursor: pointer;
    justify-content: space-between;
}

.setting-tab-group .circle-icon-gray {
    box-shadow: none !important;
}

.setting-tab-group .circle-icon-gray {
    margin-right: 0.75rem;
    background-color: #E3E3E3;
}

.setting-tab-group.active .circle-icon-gray {
    background-color: transparent;
}

.setting-tab-group.active i {
    font-size: 1.75rem;
    opacity: 100%;
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.setting-tab-group span {
    font-weight: bold;
    font-size: 0.9rem;
    color: #666665;
}

.setting-tab-group.active span, .setting-tab-group:not(.active):hover span {
    color: #333332;
}

.setting-tab-group.active span {
    font-size: 1.1rem;
}

.setting-tab-group:not(.active):hover .title {
    font-size: 1rem;
}

.setting-tab-group .active-bar {
    width: 0.75rem;
    height: 3.75rem;
    border-radius: 1rem;
    margin-left: 1rem;
}

.setting-tab-group.active .active-bar {
    height: 3.8rem;
}

.setting-tab-group.active .active-bar {
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
}

.setting-tab-sub {
    line-height: 1.1rem;
}

.setting-tab-sub .details, .setting-tab-sub .details span {
    font-size: 0.8rem;
    opacity: 80%;
}

/* Setting right */
.setting-tab-right {
    padding: 1.75rem 5rem 1.5rem;
}

.setting-name {
    display: flex;
    align-items: center;
    color: #204073;
    font-weight: bold;
    font-size: 1.5rem;
    height: 2.9rem;
}

.table-alert-check th:first-child, .table-alert-check td:first-child {
    text-align: left;
}

.table-alert-check tbody td:not(:first-child) {
    padding: 0;
}

.table-alert-check tbody td:not(:first-child) label {
    padding: 0.5rem 1rem 0;
    cursor: pointer;
}

.table-alert-check td {
    text-wrap: wrap;
}

#permissionList .label {
    align-items: baseline;
}

.attr-list-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    width: 100%;
    min-height: 5.4rem;
    border-radius: 0.4rem;
    padding: 0.4rem;
    background: linear-gradient(90deg, #FDFAE3 25%, rgb(225 234 248) 100%);
}

.attr-box {
    display: flex;
    align-items: center;
    padding: 0.1rem 0.25rem 0.1rem 0.75rem;
    color: #008dcc;
    border-radius: 0.4rem;
    background: white;
    margin: 0.2rem 0.3rem;
    box-shadow: 0px 0px 0.25rem 0px rgb(181 196 214);
}

/* Setting other */
.set-form-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    padding: 0 1.5rem 0.75rem;
}

.set_prn_form {
    display: flex;
    align-items: end;
    padding: 0.9rem 2rem;
    border-radius: 0 0 0.5rem 0.5rem;
    background: #fefbeb;
}

.setting_print_box .form-header-dash {
    border-bottom: 0.1rem dashed #D7D7D7;
    margin-top: 2rem;
}

#setting_prefix_form input {
    text-align: center;
}

#setting_constant_form input {
    text-align: end;
}

.form-group-2.hours {
    align-items: center;
    gap: 1rem 2rem;
    padding: 0 2rem;
    margin-top: 1rem;
}

/* Toggle */
.toggleContainer {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: fit-content;
    border-radius: 5rem;
    font-weight: bold;
    color: #343434;
    line-height: initial;
    user-select: none;
    border: 0.2rem solid #d4dae370;
    box-shadow: inset 0.1rem 0.1rem 0.5rem #b5c1cc65;
    background: #ebebeb;

    border: 0.2rem solid #c2c4c5;
    box-shadow: inset 0.1rem 0.1rem 0.5rem #afb3b7;
    background: #c6c6c6;
}

.toggleCheckbox:not(:disabled)+.toggleContainer {
    cursor: pointer;
}

.toggleContainer::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0%;
    border-radius: 20px;
    background: white;
    transition: all 0.3s;
}

.toggleCheckbox:checked:not(:disabled)+.toggleContainer::before {
    left: 50%;
}

.toggleContainer div {
    padding: 0.165rem 0.75rem;
    text-align: center;
    z-index: 0;
    font-size: 0.9rem;
    height: 1.45rem;
}

.toggleCheckbox {
    display: none;
}

.toggleCheckbox:checked:not(:disabled)+.toggleContainer {
    background: #00BDB4;
    border: 0.2rem solid #00BDB4;
    box-shadow: inset 0.1rem 0.1rem 0.5rem #2eada7;
}

.toggleCheckbox:checked:not(:disabled)+.toggleContainer div:first-child {
    color: rgba(255, 255, 255, 0.499);
    font-weight: 100;
    transition: color 0.3s;
}

.toggleCheckbox:checked:not(:disabled)+.toggleContainer div:last-child {
    color: #00BDB4;
    transition: color 0.3s;
}

.toggleCheckbox+.toggleContainer div:first-child, .toggleCheckbox+.toggleContainer div:last-child {
    color: #90959a;
    transition: color 0.3s;
}

.toggle-txt {
    min-width: 4rem;
    padding-left: 0.75rem;
    margin-right: 0.75rem;
    color: #909294;
}

.toggle-txt::after {
    content: "Close";
}

.toggleCheckbox:checked~.toggle-txt {
    color: #00a59d;
}

.toggleCheckbox:checked~.toggle-txt::after {
    content: "Open";
}

.toggleCheckbox~.time {
    display: none;
}

.toggleCheckbox:checked~.time {
    display: flex;
}


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

table:not(.table-condensed) {
    white-space: nowrap;
    width: 100%;
    color: #0a0c3a;
    /* color: #333332; */
}

table:not(.table-condensed) tr {
    border-bottom: 0.15rem solid #E5E5E5;
    background-color: #fff;
}

table:not(.table-condensed) tr th {
    position: sticky;
    top: 0;
    white-space: nowrap;
    z-index: 2;
    color: #204073;
    background-color: white;
}

table:not(.table-condensed) tr th, table:not(.table-condensed) tr td {
    padding: 0.5rem 1rem;
    vertical-align: top;
    text-align: center;
}

table:not(.table-condensed) .end-group, table:not(.table-condensed) .end-group td {
    border-bottom: 0.4rem solid #ffffff;
}

table:not(.table-condensed) .group, table.table-input tr td {
    vertical-align: middle;
}

table.table-input .i-arrow-down, table.table-input-2 .i-arrow-down {
    background-color: #fff;
}

table.table-input-2 td:nth-child(n+3) {
    padding: 0.5rem 0 0.5rem 0.5rem;
}


.input-inside {
    padding: 0 !important;
    vertical-align: middle !important;
}

.table-detail-group {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem
}

.table-detail-group>div {
    color: #0d6efd;
    margin: 0 0.4rem;
    font-size: 0.9rem;
}

.table-detail-group i {
    font-size: 0.9rem;
    margin-right: 0.1rem;
}

.table-detail-group span, .small-gray {
    color: gray;
    font-size: 0.9rem;
}

.table-head-blue table thead tr {
    border: 0;
}

.table-head-blue table tr th {
    color: #fff;
    background-color: #204073;
    font-weight: 100;
}

.table-head-blue table tr th:first-child {
    border-radius: 0.4rem 0 0 0;
}

.table-head-blue table tr th:last-child {
    border-radius: 0 0.4rem 0 0;
}

.table-head-blue table tbody tr {
    border-left: 0.15rem solid #E5E5E5;
    border-right: 0.15rem solid #E5E5E5;
    border-bottom: 0;
}

.table-head-blue {
    border-radius: 0.4rem;
    /* box-shadow: inset 0 0 0rem 0.12rem #E5E5E5; */
    box-shadow: inset 0 0.1rem 0rem 0.12rem #E5E5E5;
    border-bottom: 0.12rem solid #e5e5e5;
}

.table-head-blue .np-page {
    border-top: 0.15rem solid #E5E5E5;
    padding: 0.5rem 0.75rem 0.7rem;
}

.table-head-blue tbody tr:nth-child(even) {
    /* background-color: #e5e5e58a; */
    background-color: #ececec8c;
    border-bottom: 0.15rem solid #e5e5e58a;
}

.table-head-blue tbody tr:nth-child(odd) {
    background-color: #fff;
    border-bottom: 0.15rem solid #e5e5e58a;
}

.lt-group>div:nth-child(even) {
    background-color: whitesmoke;
}

.lt-group>div:nth-child(odd) {
    background-color: #ffffff;
}

/* .table-select tbody tr:not(.no-list):active  */
.table-head-blue tbody tr.selected, .product-box.selected {
    /* background: linear-gradient(180deg, #FDCB0A 0%, #FFB347 120%); */
    background: linear-gradient(180deg, #f9ce29 0%, #ffea47 120%) !important;
}

table.table-left tr th, table.table-left tr td {
    text-align: start;
    line-height: initial;
}

#carReg_table tr td {
    white-space: normal;
}

.table-select tbody tr {
    cursor: pointer;
}

.table-select tbody tr:not(.no-list):hover, table .td-lb:not(.no-lb):hover {
    background: #fff8d6;
}

table .td-lb.no-lb label {
    cursor: default;
}

.table-setting th, .table-setting td {
    padding: 0.5rem 2rem !important;
}

.table-setting thead th:last-child {
    width: 6rem;
}

.table-unit input {
    text-align: end;
}

.table-unit td:nth-child(2) {
    padding: 0;
}

.table-unit td:nth-child(n+3) {
    padding: 0;
    padding-left: 0.5rem;
}

.table-ins {
    border-collapse: initial;
    white-space: normal;
}

.table-ins td {
    padding: 0.25rem 1rem !important;
}

.radio-box {
    display: flex;
    width: fit-content;
    border-radius: 4rem;
    padding: 0.4rem;
    box-shadow: 0 0 0.5rem 0 #cfd3d9 inset;
    background: linear-gradient(90deg, rgba(32, 64, 115, 0.12) 0%, rgb(165 165 165 / 16%) 100%);
}

/* Next-Previos Page */
.np-page {
    display: flex;
    justify-content: center;
}

.np-page .btn-yellow {
    padding: 0.3rem 1.25rem;
    margin: 0 0.2rem;
}

.icon-box, .white-btn {
    border-radius: 0.4rem;
    box-shadow: -0.1rem 0 0.1rem #c6def9 !important;
    margin: 0 0.15rem;
    border: 0;
}

.np-page input {
    width: 4rem;
    margin-right: 0.5rem;
    text-align: center;
    padding: 0.3rem;
}

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


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

::placeholder {
    opacity: 50%;
}

select {
    appearance: none;
}

.input-style-1, .input-style-2 {
    border: 0.15rem solid #D9D9D9;
    color: #333332;
    box-shadow: 0 0.1rem 0.4rem 0 #2040731c inset;
    line-height: normal;
}

.input-style-1 {
    padding: 0.3rem 1rem 0.3rem 3rem;
    border-radius: 4rem;
}

.input-style-2, .input-style-3 {
    padding: 0.3rem 1rem;
    border-radius: 0.4rem;
}

.input-style-2:not(.sum-plus, .sum-minus):disabled, input.input-style-2:not(.i-date):read-only {
    /* background-color: #E4E8EE; */
    box-shadow: 0 0 0.5rem 0 #cfd3d9 inset;
    /* background: linear-gradient(190deg, rgba(32, 64, 115, 0.12) 0%, rgb(165 165 165 / 16%) 100%); */
    opacity: 1;
    /* -webkit-text-fill-color: #333332; */
    background-color: rgb(165 165 165 / 19%);
    color: #5d5d5d;
}

.input-style-3 {
    border: 1px solid #d9d9d983;
    background: #E4E8EE;
}

select.input-style-1 {
    padding-right: 2.25rem;
}

.filter-select {
    padding: 0.3rem 2.25rem 0.3rem 0.5rem;
    /* width: 100%; */
}

.i-arrow-down {
    background: url(../img/angle-down-yellow.svg) calc(100% - 0.75rem) 50% no-repeat;
    color: #333332;
    cursor: pointer;
    line-height: initial;
    padding-right: 2.5rem;
}

.i-search {
    background: url(../img/search-solid.svg) 1rem 48% no-repeat;
    width: 100%;
    max-width: 100%;
    /* max-width: 18rem; */
}

.input-style-1.i-date {
    background: url(../img/calendar-days-solid.svg) 1rem 45% no-repeat;
    min-width: 14rem;
}

.input-style-2.i-date {
    background: url(../img/calendar-days-solid.svg) calc(100% - 0.75rem) 45% no-repeat;
}

.i-search, .i-date, .i-filter, .i-arrow-down {
    background-size: 1.05rem !important;
}

.filter-text-group .filter-select {
    border: 0;
}

.sel-nav {
    background: url(../img/angle-down-black.svg) calc(100% - 0.5rem) 50% no-repeat;
    background-size: 0.9rem;
    border: 0;
    background-color: transparent;
    font-weight: bold;
    padding: 0 1.75rem 0 0.4rem;
    color: #333332;
}

input:not(:disabled, :read-only, .no-focus, [type='radio'], [type='checkbox'], [type='range']):focus, textarea:focus,
.filter-text-group:focus-within, select:not(:disabled, .no-focus, .navbar-brand, .input-style-4):focus {
    box-shadow: inset 0 0 0 0.04rem #f7c503 !important;
    /* box-shadow: inset 0 0 0.1rem 0.05rem #f7c503 !important; */
    border: 0.15rem solid #f7c503 !important;
}

.filter-text-group select:focus {
    box-shadow: none !important;
    border: none !important;
}

input:read-only {
    cursor: default;
}

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

.btn {
    line-height: normal;
}

input[type='radio'], input[type='checkbox'] {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
    position: relative;
    bottom: 0.05rem;
}

input[type='radio'], input[type='checkbox'], .i-date, .sel-nav, .form-group-btn input:not(:disabled) {
    cursor: pointer !important;
}

input[type='file']::file-selector-button {
    border: 0 !important;
    border-radius: 0.25rem;
    background-color: #ffffff7a;
}

.input-style-4 {
    border: 0;
    border-bottom: 0.15rem solid #D9D9D9;
    margin: 0 0.5rem;
    padding: 0rem 1.85rem 0.1rem 0.5rem;
    background-position-x: calc(100% - 0.4rem);
    background-size: 0.95rem !important;
}

.input-style-4:focus {
    border-bottom: 0.15rem solid #f7c503;
}

.input-style-4:disabled {
    cursor: default;
    opacity: 50%;
}


/* 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 {
    background: #fff url(../img/angle-down-yellow.svg) calc(100% - 0.5rem) 50% no-repeat !important;
    background-size: 0.9rem !important;
    appearance: none;
    cursor: pointer !important;
    border: 0.15rem solid #D9D9D9;
    box-shadow: 0 0.1rem 0.4rem 0 #d9d9d9 inset;
    border-radius: 4rem;
    padding-left: 0.75rem !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker .ranges li.active {
    color: #333332;
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
}

.daterangepicker td.in-range {
    background-color: #fffbde;
}

.daterangepicker .drp-selected {
    vertical-align: middle !important;
    padding-right: 0.4rem !important;
    font-weight: bold;
    font-size: 1rem !important;
    color: #0d6efd;
}

.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-buttons .btn, .daterangepicker .ranges li {
    font-size: 0.9rem !important;
}

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

/* Bottom button */
.btn-btm {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 0.5rem 1rem 0;
    border-top: 0.25rem solid #80808047;
}

.btn-yellow, .btn-blue-green {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.5rem;
    border: 0;
    font-weight: bold;
    color: #333332;
    border-radius: 0.4rem;
    line-height: initial;
    text-wrap: nowrap;
}

.btn-yellow {
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
    box-shadow: inset -2px -2px 1px 0px #B4921B;
}

.btn-blue-green {
    background: linear-gradient(90deg, #16a6adc2 0%, rgb(129 210 229 / 58%) 100%);
    box-shadow: -2px -2px 4px 0px rgb(77 175 181) inset;
    color: #002d55;

    /* background: linear-gradient(90deg, #003eb1 0%, rgb(0 172 241) 100%);
    box-shadow: -2px -2px 4px 0px rgb(56 116 213) inset;
    color: #ffffff; */
}

.btn-yellow:disabled, .btn-blue-green:disabled {
    background: linear-gradient(90deg, rgb(142 142 142 / 60%) 0%, rgb(165 165 165 / 48%) 100%);
    box-shadow: inset -2px -2px 1px 0px #a7a7a780;
    opacity: 50%;
}


.btn-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
    width: 8.5rem;
    box-shadow: inset -0.1rem -0.1rem 0.5rem #0000003b;
}

.btn-border-end {
    border-right: 0.25rem solid gainsboro;
    padding-right: 2rem;
}

.btn-main i {
    font-size: 1.2rem;
}

.btn-main:disabled {
    background-color: #dcdcdc;
    opacity: 100%;
    border-color: #dcdcdc;
    color: #a4a4a4;
}

.sort-btn {
    border: 0;
    background: transparent;
    padding-left: 0.4rem;
    color: white;
}

.sort-btn:active {
    position: relative;
    top: -0.05rem;
}

button:focus, select:focus, input:focus, textarea:focus {
    outline: none !important;
}

/* Button */
.btn-trans {
    border: 0;
    background-color: transparent;
}

.btn-trans:disabled {
    opacity: 25%;
}

button:not(:disabled):active {
    opacity: 60%;
}

/* Modal */
body.modal-open .content-inside, body.modal-open #main_content nav {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    pointer-events: none;
}

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

.popup_icon {
    color: orange;
}

.check_icon {
    color: #20a969;
}

.text-alert {
    text-align: center;
    padding-top: 1rem;
}

.nav-yellow {
    color: #333332;
    background-color: #fdcb0a;
    padding: 0.75rem 1rem;
}

.nav-yellow .modal-title {
    color: #333332;
}

.modal-title {
    font-weight: bold;
    color: #204073;
}

.no-sel {
    pointer-events: none;
    background: #fff !important;
}

/* Modal - Receipt */
.payment-mode-parent {
    display: flex;
    justify-content: center;
}

.payment-mode-parent input[type='radio'] {
    display: none;
}

.payment-mode-parent input[type='radio']:checked+.payment-style {
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
}

.payment-style {
    display: flex;
    align-items: center;
    background: #D9D9D9;
    border-radius: 0.4rem;
    padding: 0.4rem 1.5rem 0.4rem 0.4rem;
    margin: 0.25rem 0.5rem;
    width: 100%;
    cursor: pointer;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25) inset;
    text-wrap: nowrap;
}

.payment-style .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    width: 2.05rem;
    height: 2rem;
    box-shadow: inset 0px 0 4px 0px #d0d5d8;
    background-color: #fff;
    margin-right: 0.5rem;
}

.payment-style .circle i {
    color: #333332;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.payment-style span {
    width: calc(100% - 2.1rem);
}

/* Modal - Payment */
.toggle-parent {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.2rem solid #fdcb0c;
    border-radius: 0.4rem;
    margin: 0 -0.25rem;
}

.toggle-btn {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    position: relative;
    text-align: center;
    line-height: initial;
    color: #afafaf;
}

input[type=radio].toggle {
    display: none;
}

input[type=radio].toggle+label {
    cursor: pointer;
}

input[type=radio].toggle+label:hover {
    background: none;
    color: #1a1a1a;
}

input[type=radio].toggle+label:after {
    background: #1a1a1a;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    z-index: -1;
}

input[type=radio].toggle.toggle-left+label:after {
    left: 100%;
}

input[type=radio].toggle.toggle-right+label:after {
    left: -100%;
}

input[type=radio].toggle:checked+label {
    cursor: default;
    color: #333332;
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
}



/* Color */
.bg-1 {
    background-color: #d9d9d9 !important;
}

.bg-2 {
    background-color: #f1f1f1 !important;
}

.bg-3 {
    background-color: #fff7d7 !important;
}

.color-1 {
    color: #8E8E8E !important;
}

.color-2 {
    color: #0d867b !important;
    /* color: #139287 !important; */
}

.color-3 {
    color: #204073 !important;
}

.color-4 {
    color: #0355cf !important;
}

.color-5 {
    color: #03A9F4 !important;
}

.gradient-color-1 {
    background: linear-gradient(90deg, rgba(142, 142, 142, 1) 0%, rgba(165, 165, 165, 1) 100%);
}

.gradient-color-2 {
    background: linear-gradient(90deg, #754704 0%, #333332 100%);
    line-height: inherit;
}

.gradient-color-3 {
    background: linear-gradient(90deg, #FDCB0A 0%, #FFB347 100%);
}

.gradient-color-4 {
    background: linear-gradient(90deg, #FF5722 0%, #F44336 100%);
}

.gradient-color-5 {
    background: linear-gradient(90deg, #009688 0%, #4CAF50 100%);
}

.gradient-color-1, .gradient-color-2, .gradient-color-3, .gradient-color-4, .gradient-color-5 {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bt {
    color: white;
    padding: 0.1rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    font-weight: bold;
}

.bt-noact {
    background: #eaeaea !important;
    pointer-events: none;
}

.bt-0 {
    background: #fdff7a;
    color: #846e00;
}

.bt-1 {
    background: #d3edd9;
    color: #26732c;
}

.bt-2 {
    background: #f7b8bf;
    color: #9e0f0f;
}

.bt-3 {
    background: #ffe7c6;
    color: #ec6200;
}

.bt-4 {
    background: #dbf0ff;
    color: #0071cb;
}

.bt-5 {
    background: #e8dbff;
    color: #673AB7;
}

.bt-6 {
    background: #ffdee9;
    color: #e70093;
}


/* ETC */
.round-top {
    border-radius: 0.4rem 0.4rem 0 0;
}

.round-btn-left-0 {
    border-radius: 0.4rem 0.4rem 0.4rem 0;
}

.round-btm {
    border-radius: 0 0 0.4rem 0.4rem !important;
}


/** webkit scrollbar */

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

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

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

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

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

/* Loading */
.sm-loader {
    margin: 4em auto;
    font-size: 0.5rem !important;
    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);
}

#loader {
    z-index: 30000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    /* background-color: rgba(0, 0, 0, 0.5); */
}

#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%;
}

@-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;
    }
}

#printFile_iframe {
    width: 22.6cm !important;
}

@media (max-width: 1180px) {
    .text-md-wrap {
        text-wrap: nowrap;
    }

    .payment-style {
        text-wrap: wrap;
    }
}

@media (min-width: 240px) {
    .modal, .modal-sm {
        --bs-modal-width: 34rem;
    }

    .modal-dialog {
        margin-right: auto;
        margin-left: auto;
    }

    .modal-xl, .modal-lg, .modal-print, .modal-60, .modal-35, .modal-40, .modal-45, .modal-50, .modal-65, .modal-70, .modal-75, .modal-85 {
        --bs-modal-width: 95%;
        max-width: 95%;
    }

    .modal-xl {
        width: 90rem;
    }

    .modal-lg, .modal-60 {
        width: 60rem;
    }

    .modal-35 {
        width: 35rem;
    }

    .modal-40 {
        width: 40rem;
    }

    .modal-45 {
        width: 45rem;
    }

    .modal-50 {
        width: 50rem;
    }

    .modal-65 {
        width: 65rem;
    }

    .modal-70 {
        width: 70rem;
    }

    .modal-75 {
        width: 75rem;
    }

    .modal-85 {
        width: 85rem;
    }

    .modal-print {
        width: 22.85cm;
        /* height: 1170px; */
    }
}

@media (max-width: 576px) {
    .payment-mode-parent {
        flex-wrap: wrap;
    }

    .navbar {
        height: unset;
        padding: 0.5rem 1rem;
    }
}