* {
    font-size: 0.9vw;
    font-family: Sarabun;
}

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

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


/* SideBar */

#sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #040849;
    color: #7F8299;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    width: 4.9vw;
    padding: 0.8vw;
    text-align: center;
    overflow: auto;
}

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

#sidebar .active, #sidebar li:hover {
    background-color: #E8E5FC;
    border-radius: 100%;
}

#sidebar .active {
    padding: 0.5vw;
}

#sidebar .active .circle-active {
    display: flex;
    justify-content: center;
    border-radius: 100%;
    background: #D4CEF8;
    padding: 0.5vw;
    box-shadow: 1px 1px 3px #715fd3;
}

#sidebar .active .circle-active i, #insul_warehouse, #chos_product_wh_sel, #cdesign_wh_sel {
    color: #3E479B;
    font-size: 1.2vw;
}

#sidebar a {
    color: white;
    text-decoration: none;
}

#sidebar a:hover {
    color: #BBBCCE;
}

#sidebar i {
    font-size: 1vw;
}

#sidebar p {
    font-size: 0.8vw;
    margin-bottom: 0;
}

.lng_div {
    padding-bottom: 1vw;
}

.lng_div select {
    background: transparent url(../img/angle-down-solid.svg) 92% 50% no-repeat;
    color: #3E479B;
    font-weight: bold;
    border: 0;
    background-size: 0.7vw;
    padding: 0.5vw 1.5vw 0.5vw 0.5vw;
    width: fit-content;
    appearance: none;
    cursor: pointer;
}

.lng_div select option {
    color: #43588f;
    margin: 1vw;
}

.logout_div {
    padding: 1vw;
    margin-top: 0.5vw;
    background: #3e479b;
    border-radius: 100%;
}

.logout_div button {
    background: transparent;
    border: 0;
    color: #d4cef8;
    /* font-weight: bold; */
}

/* Content Nav */

#content {
    width: calc(100% - 5vw);
    padding: 0.5vw 1vw;
    background-color: #F4F4FB;
}

#nav-content {
    padding: 1vw 2vw 0;
    height: 3.5vw;
}

.reportrange, #reportrange, .daterange_inp {
    background: #fff url(../img/calendar-alt-solid.svg) calc(100% - 0.5rem) 45% no-repeat;
    background-size: 0.9vw;
}

.reportrange, #reportrange, .daterangepicker select, #cuss_main_left select, .daterange_inp {
    cursor: pointer;
    border: 1px solid #DBE5F1;
    border-radius: 0.4vw;
    font-size: 0.9vw;
    padding: 0.2vw 2vw 0.2vw 1vw;
    margin-right: 1vw;
    color: #43588F;
}

.nav-search button, .purple-button {
    display: flex;
    align-items: center;
    background-color: #4f48f1;
    box-shadow: 1.2px 1.2px 1px #3d35eb;
    color: white;
    padding: 0.3vw 1vw;
    border-radius: 0.4vw;
    border: 0;
}

.purple-button:hover:not([disabled]) {
    background-color: #413c9a;
}

button:focus, input:focus, select:focus, textarea:focus, .modal-input:focus, .searchType:focus, .close:focus, .icon-box:focus, .cuss_group input:focus {
    outline: none !important;
}

.nav-search button i, #cuss_debtTable_parent button i, #setting_addBank i {
    color: #8782F8;
    margin-right: 0.5vw;
    font-size: 1.2vw;
}

#cuss_debtTable_parent button i {
    font-size: inherit;
}

#nav-head, #nav-head span, #nav-head button {
    font-size: 2vw;
    margin-right: 0.75vw;
    font-weight: bold;
    color: #3E479B;
}

#nav-head button span {
    font-size: 0.8vw;
}

.icon-box {
    /* padding: 0.1vw 0.6vw 0.15vw; */
    padding: 0.15vw 0.75vw 0.3vw;
    border: 1px solid #DBE5F1;
    border-radius: 0.4vw;
    cursor: pointer;
    background: white;
    line-height: initial;
}

.icon-box i, .page_num {
    color: #43588F;
}

.page_num {
    font-size: 1vw;
}

.np-page-spc, .np-page {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 0.5vw 1vw 0 0;
}

.np-page {
    background-color: #f4f4fb;
    margin-bottom: -0.5vw;
    width: 20%;
}

.np-page .purple-input, #purchaseTable input {
    /* padding: 0.2vw; */
    padding: 0.1vw 0.2vw;
}

.circle-sel {
    background-color: #d4cef8;
    color: #3e479b;
    padding: 0.4vw 1.4vw 0.4vw 1vw;
    border-radius: 2vw;
    font-size: 0.9vw;
    border: 1px solid #d4cef8;
    font-weight: bold;
}

/* Daterangepicker */
.daterangepicker {
    width: auto !important;
    font-size: 1vw !important;
}

.daterangepicker select {
    padding: 0 1vw 0 0.5vw !important;
}

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

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

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    min-width: 2vw !important;
    width: 2vw !important;
    height: 1.3vw !important;
    line-height: 1.9vw !important;
    font-size: 0.9vw !important;
}

.daterangepicker select.monthselect {
    width: 60% !important;
}

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

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

.daterangepicker .ranges li {
    font-size: 0.9vw !important;
    padding: 0.5vw 0.6vw !important;
}





/* Dashboard */
#home-top-box {
    display: flex;
    justify-content: space-between;
    height: 7vw;
    margin-bottom: 1vw;
}

#home_user_name {
    color: #4f48f1;
    font-size: 1.6vw;
    font-weight: bold;
}

.home-qty-box, .home-lstSales, .home-alert-box {
    padding: 1vw;
    border-radius: 0.2vw;
    background-color: white;
    border: 1px solid #e3e3f6b3;
    box-shadow: 0 0.15vw 0.4vw rgb(191 191 229 / 34%);
}

.home-qty-box {
    display: flex;
    align-items: center;
    width: 25%;
    margin: 0 0.5vw;
}

.home-qty-icon {
    display: flex;
    justify-content: center;
    width: 4vw;
    border-radius: 100%;
    padding: 1.2vw 0;
    margin-right: 1vw;
    color: white;
}

.home-qty-icon i {
    font-size: 1.5vw;
}

.home-qty-head {
    color: gray;
}

.home-qty {
    color: #3E479B;
    font-weight: bold;
    white-space: nowrap;
}

.home-qty-num {
    font-size: 2vw;
    margin-right: 0.2vw;
}

#home-bottom-box {
    display: flex;
    height: calc(100% - 8vw);
}

.home-lstSales {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-right: 1vw;
}

.home-alert-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-alert-head, .home-content-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5vw;
    border-bottom: 1px solid #e2e2e2;
}

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

.home-noinfo i {
    font-size: 4vw;
    margin: 1vw 0;
}

.home-content-txt {
    font-size: 1vw;
    margin-left: 0.2vw;
    font-weight: bold;
    color: #040849;
}

#home-alert-content {
    padding: 1vw 1vw 0 1.5vw;
    margin-top: 0.5vw;
    height: 100%;
    overflow: auto;
}

#alert_history_list {
    flex-grow: 1;
    padding: 1vw 1vw 0 1.5vw;
    overflow: auto;
}

.timeline-new {
    display: inline-flex;
    background: #dc3545;
    color: white;
    padding: 0 0.4vw;
    margin-left: 0.2vw;
    border-radius: 0.4vw;
}

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

.timeline-date span {
    background: #d4cef8;
    padding: 0.4vw 1vw;
    border-radius: 1vw;
    font-weight: 600;
}

.timeline-label {
    position: relative;
}

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

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

.timeline-label .timeline-label {
    width: 3.5vw;
    flex-shrink: 0;
    position: relative;
    color: #43588F;
}

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

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

#home_logo, #home_logo img {
    height: 3vw;
    width: 3vw;
    padding: 0;
    border-radius: 0.8vw;
    object-fit: contain;
    background: #f4f4fb;
    margin-right: 1vw;
}

.message-icon {
    color: #3e479b;
    margin-right: 0.5vw;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}














/* Main Content */

#main-content {
    height: calc(100% - 3.5vw);
    padding: 1vw 2vw;
    overflow: auto;
}

#orderTable ul ul {
    display: none;
}

/* Table */

#main-content tr th, #main-content tr td, #receiptTable tr th, #receiptTable tr td {
    padding: 0.8vw 1.4vw;
}

.modal-searchTable tr th, .modal-searchTable tr td, #stock_supTable tr td {
    padding: 0.6vw 1vw;
    /* padding: 0.6vw 1vw !important; */
}

#main-content tr th, #main-content tr td, #receiptTable tr th, #receiptTable tr td, .modal-searchTable tr th, .modal-searchTable tr td {
    vertical-align: baseline;
    white-space: nowrap;
}

#convert_unitTable tr td {
    vertical-align: middle;
}

#orderListTable tr th, #orderListTable tr.cnfm_order td, #purchaseTable tr th, #purchaseTable tr td {
    padding: 0.8vw 0.5vw !important;
}

#stock_serialTable tr td {
    text-align: center;
    padding: 0.6vw 0.3vw !important;
}

#purchase_paymentCal input, .on-middle .content-name, #debt_paymentCal input, #rtn_payment_div input {
    text-align: right;
}

#orderListTable tr th, #stock_serialTable tr td input {
    text-align: left;
}

#orderListTable tr.cnfm_order td:not(:last-of-type), #sel_modelTable tr td {
    border-right: 0.01vw dashed #e4e7fd;
    text-align: right;
}

#orderListTable tr td {
    padding: 0.8vw 0.15vw;
}

#orderListTable input {
    padding: 0.2vw 0.4vw;
}

#orderListTable select {
    padding: 0.2vw 1vw 0.2vw 0.4vw;
}

#orderListTable hr, #sel_modelTable hr {
    margin: 0.5vw 0;
}

/* #orderListTable tbody tr td:last-child {
    position: sticky;
    color: #040849;
    background-color: #f4f4fb;
    white-space: nowrap;
    z-index: 1;
    right: 0;
} */

#cuss_info thead tr th {
    background: #3e479b !important;
    color: white;
    font-weight: 500;
}

.modal-searchTable tbody tr, #main-content tbody tr, .modal-body tbody tr {
    color: #43588F;
    border-bottom: 0.01vw dashed #dce0fe;
}

table:not(#stock_convert_unitTable, #receiptTable, #paymentTable, #creditNoteTable) input {
    text-align: center;
}

#orderTable tr th, #bill-table tr th {
    border-bottom: 1px solid #DBE5F1;
}

.modal-searchTable table:not(.no-select) tbody tr:not(.no-list), .add-order-but label, #main-content table:not(.no-select) tr td:not(.no-list), #cuss_debtTable tbody input, #other-attr_val input, .modal-body tbody tr:not(.no-list), #adjStock_form label, #addAttr_form label, #step-1 label, #cal-main-left label, #cdesignTable label {
    cursor: pointer !important;
}

#main-content tr th, .modal-body tr th, .modal-body tr th {
    position: sticky;
    top: 0;
    color: #040849;
    background-color: #d4cef8;
    font-size: 0.9vw;
    white-space: nowrap;
    z-index: 2;
}

#bill-table tr th {
    position: unset;
}

#bill-table tr td, .bill-sum span, .bill-note span, #step-2 .label-name span, #insulated_item {
    font-size: 0.8vw;
}

#bill-table tr th, #bill-table tr td {
    padding: 0.5vw 0.2vw;
    word-break: break-word;
}

#setting_user .other-back-box tr th, #setting_user .other-back-box tr td:not(.no-list) {
    padding: 0.65vw 0.5vw 0.65vw 5vw !important;
}

#orderTable li, #cdesignTable ul {
    list-style: none;
}

#orderTable ul button, #productTable ul button {
    border: 0;
    background: transparent;
    color: #43588f;
    padding: 0 0.5vw;
}

.ellis {
    white-space: nowrap;
    width: 15vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellip-auto-box, .ellip-auto-box-08 {
    white-space: normal !important;
    position: relative;
}

.ellip-auto-box {
    min-width: 20vw;
}

.ellip-auto-box-08 {
    min-width: 8vw;
}

.ellip-auto {
    position: absolute;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 1vw;
}

.ellip-auto-box-08 .ellip-auto {
    padding-right: 0;
}

.confirm-box, .pending-box, .process-box, .ready-box, .deli-box, .delivered-box, .cancel-box, .unpaid-box, .pink-box {
    color: white;
    padding: 0.1vw 0.5vw;
    border-radius: 0.4vw;
    font-size: 0.85vw;
    font-weight: bold;
}

.pending-box {
    background: #fdff7a;
    color: #846e00;
}

.confirm-box {
    background: #ffdc9d;
    color: #e25529;
}

.process-box {
    background: #e6c9fe;
    color: #7452a5;
}

.pink-box {
    background: #ffd4dc;
    color: #e310b6;
}

.ready-box {
    background: #cfe2fc;
    color: #2e5a9c;
}

.deli-box {
    background: #cef3ee;
    color: #316660;
}

.delivered-box {
    background: #d3edd9;
    color: #26732c;
}

.cancel-box {
    background: #f7b8bf;
    color: #9e0f0f;
}

.bg-whtgray {
    background: #eaeaea;
}

.unpaid-box {
    background: #d6d9da;
    color: #383d42;
}

.due-date {
    font-size: 0.7vw;
    color: gray;
    padding-left: 0.1vw;
    line-height: initial;
}

#product_cat_tab, #stock_cat_tab, #order_tab {
    width: 80%;
    overflow-x: auto;
    overflow-y: hidden;
}

#product_cat_tab span {
    width: max-content;
}

.btn-box {
    display: flex;
    height: 2.5vw;
}

.btn-box button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    font-size: 1vw;
    color: #a6afc1;
    background-color: transparent;
    margin-right: 2vw;
}

.btn-box button:hover i {
    color: #4f48f1;
}

.sub_content {
    height: calc(100% - 3.5vw);
    background-color: white;
    overflow: auto;
    border-radius: 0.4vw;
    margin-top: 1vw;
}

.btn-box .active {
    color: #3E479B;
}

.btn-box .active span {
    font-size: 1.1vw;
    font-weight: bold;
}

.btn-box i {
    margin-right: 0.2vw;
}

.btn-box span {
    white-space: nowrap;
}

#convert_unitTable select.input_dash {
    padding: 0.3vw 1vw 0.3vw 0.6vw;
}

#convert_unitTable th, #convert_unitTable td {
    padding: 0.6vw 0.5rem;
}

/* Purchase */

.purple-input {
    border-radius: 0.2vw;
    padding: 0.2vw 0.8vw;
    box-shadow: inset 0 0 0.1vw #d4cef8;
    border: 0.1vw solid #e4e4e4;
    color: #43588F;
    width: 100%;
}

.purple-input:not([readonly]) {
    border: 0.1vw solid #d4cef8;
}

select.purple-input {
    padding: 0.2vw 1.5vw 0.2vw 0.8vw;
}

.p-12 {
    padding: 1vw 2vw !important;
}

.expand_table_parent {
    border-radius: 0.4vw;
    overflow: auto;
    border: 1px solid #8a8a8a;
    margin: 0 5vw;
}

.expand_table_parent th, .expand_table_parent td {
    padding: 0.25vw 1.2vw !important;
    text-align: right;
}

.expand_table_parent li {
    padding-bottom: 0.4vw;
}

.expand_table_parent li:last-child {
    border-bottom: 0.1vw dashed gray;
}

.expand_table_parent tr:last-child li:last-child {
    border-bottom: none;
}

.expand_table_parent th, .expand_table_parent td, .expand_table_parent span {
    font-size: 0.8vw !important;
}

.expand_table_parent th {
    background-color: #8a8a8a !important;
    color: #2d2f54 !important;
    position: inherit !important;
    border-bottom: 1px solid #8a8a8a !important;
}

.expand_table_parent td {
    color: white;
}

.expand_table_parent td:nth-child(3) {
    white-space: normal !important
}

.expand_table_parent tbody tr {
    border-bottom: 0 !important;
}

.expand_table_parent .text-white {
    font-size: 0.8vw;
}

.note-parent {
    display: flex;
    align-items: baseline;
    margin: 0 5vw;
    padding: 0.25vw 0.5vw !important;
}

.doc_list_box {
    display: flex;
    background-color: #d4cef8;
    color: #040849;
    padding: 1.5vw;
    border-radius: 0.3vw;
    margin: 1vw 0.5vw;
    box-shadow: 0 0 0.8vw #d4cef8;
}

.icon_box {
    border-radius: 100%;
    background-color: white;
    width: 3.5vw;
    padding: 0.8vw;
    text-align: center;
}

.icon_box i {
    color: #040849;
    font-size: 1.4vw;
}

.related_doc_head {
    font-size: 1.1vw;
    font-weight: bold;
    padding: 0 1vw;
}

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

.related_doc_list {
    width: 50%;
    padding: 0 2vw;
}

.doc_div {
    display: flex;
    align-items: baseline;
    margin: 0.5vw 0;
}

.doc_div span {
    font-size: 1vw;
}

.d-contents {
    display: contents !important;
}

/* Notification */

.noti-date, .noti-date-current {
    padding: 0.5vw 2vw;
    border-radius: 2vw;
    width: fit-content;
    font-weight: bold;
}

.noti-date-current {
    background: #040849;
    color: white;
}

.noti-date {
    background: #e2e4ff;
    border: 0.1vw solid #b6bbff;
    color: #040849;
}

.noti-content {
    box-shadow: 0 0 0.2vw #bfbfbf;
    padding: 1vw;
}

.noti-event {
    display: flex;
    padding: 1vw;
}

.noti-time {
    color: #43588F;
    width: 6vw;
}

.noti-text-highlight {
    color: #437dbe;
}

/* Progress Bar */

.order_div {
    display: flex;
    flex-direction: column;
    border-radius: 0.2vw;
    padding: 1vw 1.5vw;
    background-color: white;
    height: 100%;
    overflow: auto;
    box-shadow: 0 0vw 0.35vw rgb(191 191 229 / 90%);
}

.progress-step {
    display: flex;
    justify-content: space-between;
    line-height: 1vw;
    text-align: center;
    height: 5vw;
    padding-top: 0.5vw;
}

.progress-step .circle, .progress-step .bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    width: 2vw;
    height: 2vw;
    border-radius: 40px;
    border: 0.1vw solid #d5d5da;
}

.progress-step .bar {
    position: relative;
    width: 8vw;
    height: 0.3vw;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.progress-step .circle .label {
    display: block;
    width: 92%;
    height: 90%;
    line-height: 1.7;
    border-radius: 100%;
    margin: 5%;
    color: #b5b5ba;
    font-size: 1vw;
}

.progress-step .circle .title {
    display: flex;
    width: max-content;
    color: #b5b5ba;
    font-size: 0.9vw;
    line-height: 2vw;
    margin-left: -0.5vw;
}

.bar_parent {
    padding-top: 0.8vw;
    font-size: 1vw;
}

.progress-step .bar.done, .progress-step .circle.done {
    background: #eee;
}

.progress-step .bar.active {
    background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}

.progress-step .circle.done .label {
    color: #FFF;
    background: #2DAD3E;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress-step .circle.done .title {
    color: #444;
}

.progress-step .circle.active .label {
    color: #FFF;
    background: #0c95be;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress-step .circle.active .title {
    color: #0c95be;
}

/* Button */

.no-border-button {
    border: 0;
    background: transparent;
    color: #43588F;
}

.no-border-button i {
    font-size: 1vw;
}

.Button {
    background: #f4623a;
    border: none;
    border-radius: 0.4vw;
    box-shadow: 2px 2px 1px rgb(210 94 62);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    padding: 0.3vw 1vw;
    transition-property: background-color, box-shadow, transform;
    transition-duration: 0.3s;
}

.Button:hover {
    background: #f57e5e;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.4);
}

.accept-button {
    box-shadow: 0px 10px 14px -7px #9acc85;
    background: linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
    background-color: #74ad5a;
    border-radius: 0.4vw;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ffffff;
    font-size: 0.8vw;
    padding: 0.3vw 0.5vw;
    border: 0;
    text-decoration: none;
    text-shadow: 0px 1px 0px #92b879;
}

.accept-button:hover {
    background: linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
    background-color: #68a54b;
}

.decline-button {
    box-shadow: 0px 10px 14px -7px #f5978e;
    background: linear-gradient(to bottom, #e83224 5%, #c62d1f 100%);
    background-color: #f24537;
    border-radius: 0.4vw;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ffffff;
    font-size: 0.8vw;
    padding: 0.3vw 0.8vw;
    border: 0;
    text-decoration: none;
    text-shadow: 0px 1px 0px #810e05;
}

.decline-button:hover {
    background: linear-gradient(to bottom, #c62d1f 5%, #e83224 100%);
    background-color: #c62d1f;
}

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

.gray-button {
    box-shadow: 0px 1px 3px #a4a1dc;
    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    background-color: #ffffff;
    border-radius: 0.4vw;
    display: flex;
    align-items: center;
    border: 0;
    cursor: pointer;
    color: #43588F;
    font-size: 0.85vw;
    font-weight: bold;
    padding: 0.3vw 0.4vw;
    text-decoration: none;
    white-space: nowrap;
}

.gray-button:hover {
    background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    background-color: #f6f6f6;
}

.gray-button span {
    font-size: 0.85vw;
}

.gray-button:focus {
    box-shadow: inset 0px -2px 5px #b9b7b7 !important;
}

#cal-head .gray-button {
    padding: 0 0.8vw;
}

.no-button {
    border: 0;
    background: transparent;
    color: #7a64ff;
    vertical-align: middle;
    margin-left: 0.5vw;
}

.no-button:hover {
    color: #2400fd;
}

.no-button:disabled {
    background-color: transparent;
    border: none;
}

/* Form */

#neworder_form {
    height: calc(100% - 5vw);
    display: flex;
    flex-direction: column;
}

.sub_navhead, .sub_navhead span {
    font-size: 1.2vw !important;
}

/* Step 1 */

.input_group {
    display: flex;
    justify-content: center;
    margin-bottom: 0.3vw;
}

#step-1 hr {
    margin: 1vw 0;
}

#step-1 .purple-button, #stock_form .stock_info_group .purple-button {
    padding: 0.2vw 0.5vw 0.2vw 0.3vw;
}

#step-1 input[type="checkbox"] {
    margin-right: 0.2vw;
    margin-left: 0;
}

label[for=same_address] {
    display: contents;
    color: gray;
    font-size: 0.75vw !important;
}

#chos_product_name, #mvt_product_name {
    color: #3E479B;
    font-size: 1.1vw;
    font-weight: bold;
    max-width: 20vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Step 2 */

.progress-content {
    height: 100%;
    overflow: auto;
    /* min-height: 220px; */
    padding-bottom: 0.2vw;
}

.order-box {
    padding: 0.5vw;
    border: 1px solid #dee2e6;
    border-radius: 0.4vw;
    font-size: 1vw;
}

.order-box-top {
    height: calc(100% - 0.5vw);
    margin-top: 0.5vw;
    display: flex;
    flex-direction: column;
}

.order-box-mid {
    display: flex;
    justify-content: space-between;
    height: 3vw;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
    font-size: 0.9vw !important;
}

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

.add-order-but {
    padding: 0.5vw;
    height: 3vw;
    background-color: rgb(242 246 250);
    border-radius: 0 0 0.4vw 0.4vw;
    border-top: 1px solid white;
    line-height: initial;
    margin-bottom: 0.5vw;
}

.add-order-but input[type=checkbox] {
    width: 1vw !important;
    margin-left: 1vw !important;
}

:disabled:not(.btn), input:read-only:not(#reportrange, .daterange_inp, .reportrange), textarea:read-only {
    color: #676767 !important;
    background: #dce0fe;
    box-shadow: unset !important;
    border-color: #dce0fe !important;
}

.mr-02 {
    margin-right: 0.2vw !important;
}

.mr-05 {
    margin-right: 0.5vw !important;
}

.mr-10 {
    margin-right: 1vw !important;
}

.mr-20 {
    margin-right: 2vw !important;
}

.mr-30 {
    margin-right: 3vw !important;
}

.mr-50 {
    margin-right: 5vw !important;
}

.mr-60 {
    margin-right: 6vw !important;
}

.ml--01 {
    margin-left: -1vw !important;
    line-height: initial;
}

.ml--15 {
    margin-left: -1.5vw !important;
}

.ml-05 {
    margin-left: 0.5vw !important;
}

.ml-02 {
    margin-left: 0.2vw !important;
}

.z-1 {
    z-index: 1;
}

.font-14 {
    font-size: 1.4vw;
}

#step-2 .label-name, table ul {
    margin-bottom: 0;
}

.calculate_num input {
    border: 1px solid #cccccc;
    width: 100%;
    font-size: 0.9vw;
    padding: 0.2vw 0.5vw;
    border-radius: 0.2vw;
    margin-left: 0.2vw;
}

#step-2 .purple-input:focus:not(input[type=checkbox]):not([readonly]), #step-3 .purple-input:focus:not([readonly]), #step-1 .purple-input:focus:not(input[type="checkbox"]):not([readonly]), .modal-input:focus, .searchType:focus, .calculate_num input:focus, .nav-search input:focus, #updateStatus select:focus, .daterangepicker select:focus, #cuss_main select:focus, #returnTable input:focus:not(input[type=checkbox], input[readonly]), #other_cus-sel:focus, #other-input select:focus, #other-input input:focus:not(input[type=radio]), #addAttr_form input:focus, #receiptTable input:focus, .purple-input:focus:not(input[type=checkbox]):not([readonly]) {
    color: #495057;
    background-color: #fff;
    box-shadow: inset 0 0 0 0.12vw rgba(0, 13, 255, 0.25);
    outline: 0;
}

input[type=radio], input[type=checkbox] {
    height: 1vw;
}

.wm-04 {
    min-width: 4vw !important;
}

.wm-05 {
    min-width: 5vw !important;
}

.wm-06 {
    min-width: 6vw !important;
}

.wm-09 {
    min-width: 9vw !important;
}

.w-01, #other-attr_val input, input[type=radio], input[type=checkbox] {
    width: 1vw !important;
}

.w-02 {
    width: 2vw !important;
}

.w-03 {
    width: 3vw !important;
}

.w-04, .wm-04 {
    width: 4vw !important;
}

.w-05, .wm-05 {
    width: 5vw !important;
}

.w-06, .wm-06 {
    width: 6vw !important;
}

.w-07, .calculate_num input, .cal_unit {
    width: 7vw !important;
}

.w-08 {
    width: 8vw !important;
}

.w-09, .wm-09, .order_amountL label {
    width: 9vw !important;
}

.w-10, .qtt_group {
    width: 10vw !important;
}

.w-11 {
    width: 11vw !important;
}

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

.w-13, #alert_history_modal #reportrange {
    width: 13vw !important;
}

.reportrange, .w-14, #reportrange {
    width: 14vw !important;
}

.w-15 {
    width: 15vw !important;
}

.w-16, .calculate_num .content-name {
    width: 16vw !important;
}

.w-20v {
    width: 20vw !important;
}

.w-22 {
    width: 22vw !important;
}

.w-30 {
    width: 30vw !important;
}

.w-35 {
    width: 35% !important;
}

.w-35v {
    width: 35vw !important;
}

.w-40v {
    width: 40vw !important;
}

.w-45 {
    width: 45% !important;
}

.w-45v {
    width: 45vw !important;
}

.w-50v {
    width: 50vw !important;
}

.w-55v {
    width: 55vw !important;
}

.w-60v {
    width: 60vw !important;
}

.w-65v {
    width: 65vw !important;
}

.w-65 {
    width: 65% !important;
}

.w-70v {
    width: 70vw !important;
}

.w-75v {
    width: 75vw !important;
}

.w-80v {
    width: 80vw !important;
}

.w-90v {
    width: 90vw !important;
}

.w-20 {
    width: 20% !important;
}

.w-40 {
    width: 40% !important;
}

.w-60 {
    width: 60% !important;
}

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

.w-unset {
    width: unset !important;
}

.order-head {
    margin-top: -1.3vw;
    height: 1.5vw;
}

.order-head span {
    background: white;
    padding-right: 0.5vw;
    font-weight: bold;
}

.order_amount .label-name, .nx-pr {
    width: 5vw;
}

.order_amount input {
    font-size: 0.8vw !important;
    width: 8vw;
    padding: 0.1vw 1vw;
    margin-bottom: 0.1vw;
}

.table_parent {
    flex-grow: 1;
    background-color: rgb(244 244 251);
    overflow: auto;
    border-top-left-radius: 0.4vw;
    border-top-right-radius: 0.4vw;
}

#orderListTable .decline-button, #orderListTable .accept-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 50%;
}

/* #main-content tbody tr:hover:not(.tr-more_info), .modal-body tbody tr:hover:not(.tr-more_info), #print_preview_div tr:hover:not(),  */
#cdesignTable tr:hover, #content-inside table:not(#orderListTable, #calcTable) tbody tr:hover:not(.tr-more_info, .no-list), #adjStock_serialTable tr:hover {
    background-color: #ececec8c;
    /* cursor: pointer; */
}

.tr-more_info .expand_table_parent tr:hover, #print-page tr:hover {
    background-color: transparent !important;
}

#cdesignTable li {
    display: flex;
    align-items: center;
    border-bottom: 0.01vw dashed #d4cef8;
    margin-bottom: 0.5vw;
}

#chos_cdesignTable tr td {
    vertical-align: middle;
}

.no-list {
    text-align: center !important;
}

#step-2 .purple-button {
    margin-right: 0.5vw;
    padding: 0.2vw 0.52vw;
}

#order-menu button:not(.dropdown-item), #purchase_finish button, .cal_button button, #submit_div button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #DCE0FE;
    box-shadow: 0.2vw 0.15vw 0.1vw #b8bcfb;
    color: #040849;
    padding-top: 0.4vw;
    margin: 0 0.2vw;
    border-radius: 0.4vw;
    width: 6vw;
    line-height: 1.8;
    border: 0;
}

#order-menu button i, #submit_div button i {
    font-size: 1vw;
}

#order-menu button p, #purchase_finish p, #submit_div button p {
    font-size: 0.8vw;
    font-weight: bold;
    margin-bottom: 0;
}

.qtt_group {
    padding: 0 0.5vw;
}

.qtt_group label {
    font-size: 0.8vw;
    margin-bottom: 0;
    margin-left: 0.2vw;
}

.qtt_group input {
    padding: 0 !important;
}

.sel-no-pointer {
    pointer-events: none !important;
    color: #676767 !important;
    background-color: #dce0fe !important;
}

/* Step 3 */

#step-3 label {
    margin-bottom: 0;
    font-size: 0.9vw;
    width: 13vw;
}

#step-3 input:not(.small-input) {
    text-align: right;
    width: 50%;
}

.amount-box {
    padding: 1.5vw 2vw;
    background-color: #f4f4fb;
    overflow: auto;
}

.debt_div button {
    width: 9vw;
    padding: 0.5vw;
    border: 0;
    border-radius: 0.4vw;
    box-shadow: 0px 0.15vw 0.2vw #a8a8a8;
}

.small-input {
    padding: 0.2vw 1.2vw 0.2vw 0.2vw !important;
    width: 3.5vw !important;
    text-align: right;
}

.mt-02 {
    margin-top: 0.2vw !important;
}

.mt-05, #personal_info .cuss_topic {
    margin-top: 0.5vw !important;
}

.mt-06 {
    margin-top: 0.6vw !important;
}

.mt-07 {
    margin-top: 0.7vw !important;
}

.mt-10 {
    margin-top: 1vw !important;
}

.mt-20 {
    margin-top: 2vw !important;
}

.mt--20 {
    margin-top: -2vw !important;
}

.mb-02 {
    margin-bottom: 0.2vw !important;
}

.mb-03 {
    margin-bottom: 0.3vw !important;
}

.mb-05 {
    margin-bottom: 0.5vw !important;
}

.yellow-box {
    background: #fff300;
    border: 1px solid #ffed4f !important;
    color: #dc3545;
    font-weight: bold;
    padding: 0.2vw 1vw;
    border-radius: 0.2vw;
}

.qty-box {
    padding: 0.2vw 2.8vw 0.2vw 0.2vw !important;
    border-radius: 0 0.2vw 0.2vw 0 !important;
}

.qty-label-box {
    border: 1px solid #cccccc !important;
    color: gray;
    border-right: 0 !important;
    border-radius: 0.2vw 0 0 0.2vw;
    padding: 0.2vw 0;
}

.text-gray {
    color: gray !important;
}

.unit-box {
    color: #676767;
    margin-left: -3vw;
}

.pr-05 {
    padding-right: 0.5vw !important;
}

.pr-10 {
    padding-right: 1vw !important;
}

.pr-20 {
    padding-right: 2vw !important;
}

.pr-35 {
    padding-right: 3.5vw !important;
}

.pr-70 {
    padding-right: 7vw !important;
}

.p-01 {
    padding: 0 1vw !important;
}

.p-02 {
    padding: 0 2vw !important;
}

/* Step 4 */

.drawing-pic-parent {
    position: absolute;
    bottom: 7.2vw;
    left: 12vw;
}

#drawing-container {
    max-width: 57.7vw;
    overflow: auto;
}

/* #drawing-container img {
    object-fit: scale-down;
    border: 1px solid #dee2e6;
    margin-bottom: 2vw;
    border-radius: 0.4vw;
} */

.cross-button {
    border: 0;
    background: none;
    color: red;
    text-align: end;
    z-index: 1;
    margin-bottom: -3vw;
    margin-right: 1vw;
}

.cross-button i {
    font-size: 2vw;
}

.ptro-holder-wrapper {
    z-index: 100;
}

.ptro-wrapper button {
    padding: 0 0.5vw;
}

/* Step 5 */

/* Step 5 print */

/* #print_preview_div {
    height: calc(100% - 2vw);
} */

.print-head {
    min-width: 21cm;
    max-width: 70vw;
    width: auto !important;
    height: auto !important;
}

#print_preview_div {
    /* width: fit-content !important; */
    padding: 2vw !important;
}

.preview_img {
    width: 100%;
    margin-top: 1vw;
    border-top: 1px dotted #000;
    padding-top: 1vw;
}

/*----------------- not use start -----------------*/

.bill-head {
    font-size: 2rem;
}

.bill-head-sub {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.5vw;
}

.bill-head span, .bill-head-sub span {
    font-weight: bold;
    color: #444444;
}

.bill-head span {
    font-size: 2vw;
}

.bill-head-sub span {
    font-size: 1.2vw;
}

.bill-detail {
    display: flex;
    margin-top: 1vw;
}

.bill-topic {
    font-weight: bold;
    font-size: 0.9vw;
    width: 12vw;
    color: black;
}

.bill-info {
    font-size: 0.9vw;
    word-break: break-word;
    width: calc(100% - 12vw);
}

.detail-table {
    margin-top: 2vw;
}

.bill-sum {
    text-align: end;
    margin: 1vw 0 3vw;
}

.bill-sum-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bill-sum-num {
    width: 7vw;
    padding: 0.2vw;
}

.bill-note-topic {
    color: white;
    margin-right: 1vw;
}

/*----------------- not use end -----------------*/

/*  Step 6 */

.finish-txt {
    font-weight: bold;
    font-size: 3vw;
    margin-top: 6vw;
}

#step-5 img {
    width: 10vw;
}

#submit_div {
    display: flex;
    justify-content: center;
    margin-top: 2vw;
}

/* Calculate Tab */

#nav-head p, #nav-head p span {
    font-size: 1vw;
    margin-right: 0;
}

#his-mainContent, #cal-mainContent {
    background: white;
    height: calc(100% - 6.5vw);
    border-radius: 0.4vw;
    margin-top: 1vw;
}

#cal-mainContent {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    /* display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly; */
    padding: 1vw 8vw;
    overflow: auto;
    /* min-height: 30vw; */
}

#cal-mainContent img {
    width: 9vw;
    height: 5vw;
    margin-bottom: 0.5vw;
}

#cal-mainContent p {
    margin-bottom: 0;
    color: #555555;
    text-align: center;
    padding: 0.2vw 1vw;
    border-radius: 0.2vw;
    width: 100%;
    border: 1px dashed #d0d5ff;
    box-shadow: 0.3vw 0.2vw 0px 0px #d0d5ff
}

.calshape_parent {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1vw 2vw;
}

.shape11 {
    min-height: 10vw;
}

#cal-mainContent input[type=radio] {
    display: none;
}

#cal-mainContent input[type=radio]:checked+.box {
    box-shadow: 0.3vw 0.2vw 0px 0px #7a8eb9;
    background: #5972a7;
    background-color: #637aad;
    border-radius: 0.4vw;
}

#cal-mainContent input[type=radio]:checked+.box span {
    color: #cfd0e2;
    transform: translateY(0.5vw);
}

#cal-mainContent input[type=radio]:checked+.box span:before {
    transform: translateY(0px);
    opacity: 1;
}

#cal-mainContent .box {
    width: 14vw;
    height: 11vw;
    border-radius: 0.4vw;
    background-color: #ffffff;
    transition: all 250ms ease;
    will-change: transition;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-weight: 900;
    box-shadow: 0.3vw 0.2vw 0px 0px #d0d5ff;
    border: 1px solid #DCE0FE;
}

#cal-mainContent .box:active {
    transform: translateY(0.5vw);
}

.justify-content-unset {
    justify-content: unset !important;
}

.spccal_div .content-name {
    width: 11vw !important;
    padding: 0 1vw 0 0;
}

.spccal_div .cal_unit, .spccal_div input {
    width: 4vw !important;
}

.spccal_div .cal_unit {
    padding: 0 0 0 1vw;
}

#cal-mainContent .box span {
    left: 0;
    right: 0;
    transition: all 300ms ease;
    font-size: 1vw;
    user-select: none;
    color: #040849;
}

#cal-mainContent .box:hover {
    background: linear-gradient(to bottom, #5972a78a 5%, #637aad8a 100%);
}

.cal_div {
    height: 3vw;
    padding-top: 1vw;
}

.cal_div p {
    margin-bottom: 0;
    font-size: 0.9vw;
}

.cal_div i {
    margin-right: 0.5vw;
}

.cal-more-inf {
    display: flex;
    justify-content: space-between;
    padding: 0.5vw 6vw;
    width: 100%;
    flex-wrap: wrap;
}

#designHistory .cal-more-inf {
    padding: 0.5vw 2vw;
}

.calulate-info-each {
    display: flex;
    justify-content: space-between;
    width: 28%;
}

/* Shape Calculate */

/* Head */

#cal-head {
    height: 7vw;
    padding: 0.2vw;
    margin: 0 0.5vw;
}

#cal-head-left, #cal-head-right {
    padding: 0.2vw;
}

#cal-head span {
    position: relative;
    display: inline-block;
}

#cal-head button, #cal-head span {
    margin: 0.1vw 0.2vw;
}

.clean-slide {
    width: 100%;
    padding: 0.2vw 1vw 0.2vw 7vw;
    color: #43588F;
    background: white;
    border: 1px solid #DCE0FE;
    border-radius: 0.3vw;
    outline: 0;
    font-size: 0.9vw;
}

.clean-slide::-webkit-input-placeholder {
    color: #efefef;
    text-indent: 0;
    font-weight: 300;
}

.clean-slide+label {
    display: flex;
    align-items: center;
    position: absolute;
    padding-left: 0.5vw;
    font-size: 0.9vw;
    font-weight: 500;
    color: #fff;
    text-align: left;
    overflow: hidden;
    width: 6.2vw;
    top: 0;
    bottom: 0;
    background: #436aa8;
    border-top-left-radius: 0.3vw;
    border-bottom-left-radius: 0.3vw;
    margin-bottom: 0;
}

/* Left */

#cal-main {
    height: calc(100% - 7vw);
    padding-top: 1vw;
    min-height: 30vw;
}

#cal-main-left, #cal-main-right {
    padding: 0.5vw 0.5vw 0;
}

#cal-main-left .modal-foot {
    height: 4vw;
}

.cal-img {
    flex: 1 1 auto;
    padding: 1vw;
}

#roof_Img {
    /* background: url("../img/Shape/roof.jpg"); */
    background-repeat: no-repeat !important;
    background-size: contain, cover !important;
    background-position: center !important;
    width: 100%;
    height: 100%;
}

.cal_button {
    display: flex;
    height: 3.5vw;
    padding: 0.4vw;
    border-radius: 0.4vw;
}

.cal-inputsize-parent .order-head span, .cal-result-parent .order-head span {
    background-color: #F2F6FA;
    font-size: 0.9vw;
}

.cal-inputsize {
    padding: 0 0.5vw 0.5vw;
}

.cal-inputsize input, .cal-result-parent input {
    margin-bottom: 0.1vw;
}

.cal_button button, .cal_button button span {
    line-height: 1.4;
    font-size: 0.8vw;
    padding-top: 0.2vw;
    font-weight: bold;
}

.calculate_num {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.calculate_num span, #calcTable_parent span {
    font-size: 0.9vw;
    padding: 0 1vw;
}

.on-middle {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* right */
#calcTable_parent {
    flex-grow: 1;
    margin-top: 1vw;
    padding-top: 1vw;
    overflow: auto;
}

.calcTable_parent-sub {
    height: calc(100% - 1.5vw);
    border-radius: 0.4vw;
    overflow: auto;
}

.cal-result-parent {
    height: calc(100% - 4vw);
    display: flex;
    flex-direction: column;
}




/* Calculate Modal */

.pt-05 {
    padding-top: 0.5vw !important;
}

.pt-10 {
    padding-top: 1vw !important;
}

.pb-02 {
    padding-bottom: 0.2vw;
}

.pb-10 {
    padding-bottom: 1vw;
}

.more_info-head {
    color: white !important;
    font-size: 0.9vw;
    white-space: normal;
}

.more_info-number {
    color: #a4a9b6;
    font-size: 0.9vw;
}

.tr-more_info {
    background: #3C4554;
}

.more_info-icon {
    color: #3c4554;
    display: flex;
}

.more_info-icon i {
    font-size: 3vw;
    margin-top: -2.2vw;
    margin-left: 1vw;
}

.print-filter-icon {
    width: 0.8vw;
    color: #aeb6c7;
}

/* product */

.form-style-2 {
    padding-top: 0.5vw;
    height: 100%;
}

.form-style-2 label {
    display: block;
    margin-bottom: 0.4vw;
    margin-right: 0.5vw;
    width: 100%;
    font-size: 0.9vw;
    word-break: break-word;
}

.form-style-2 label>span, #add_new_product .form-style-2 label>div>span {
    width: max-content;
    font-weight: bold;
    display: flex;
    font-size: 0.9vw;
}

.form-style-2 span.required {
    color: red;
    font-size: 0.9vw;
}

.form-style-2 input.input-field, .form-style-2 .textarea-field, .form-style-2 .select-field {
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
    -webkit-box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 0.2vw;
    padding: 0.2vw 0.8vw;
    outline: none;
    font-size: 0.9vw;
}

.form-style-2 input.input-field {
    width: 100%;
}

.form-style-2 .select-field {
    width: 100%;
    padding: 0.2vw 1.5vw 0.2vw 0.8vw;
}

.form-style-2 .input-field:focus:not(:read-only), .form-style-2 .textarea-field:focus:not(.read-only), .form-style-2 .select-field:focus {
    border: 1px solid #0C0;
}

.form-style-2 .textarea-field {
    width: 100%;
}

.field_sm {
    width: 102%;
    font-size: 0.9vw;
}

.pl-18 {
    padding-left: 1.8vw !important;
}

.pl-10 {
    padding-left: 1vw !important;
}

.pl-05 {
    padding-left: 0.5vw !important;
}

.b_currency {
    padding-left: 0.9vw;
    color: #676767;
    font-size: 0.9vw;
    margin-right: -1.5vw;
    z-index: 1;
}

.form-style-2 hr {
    margin-top: 0.8vw;
    margin-bottom: 0.8vw;
}

.detail_txt {
    position: absolute;
    padding-left: 8.6vw;
    padding-top: 0.2vw;
    color: #676767;
    font-size: 0.9vw;
}

.detail_txt span {
    font-size: 0.9vw;
}

#newProduct_form .stock_info_group, #newCutting_form .stock_info_group, #product_form .stock_info_group:not(#add_product_iden .stock_info_group), #newCus_form .stock_info_group {
    align-items: center;
}

#add_new_product input:read-only, #add_new_product select:disabled {
    background: #dce0fe !important
}

.input_dash_label {
    color: #6a677c;
    font-weight: bold;
}

.input_dash {
    border: 0.01vw dashed #c8cfff;
    color: #000782;
    padding: 0.3vw 1vw;
    border-radius: 0.2vw;
    width: 100%;
}

select.input_dash {
    padding: 0.3vw 1.5vw 0.3vw 1vw;
}

.input_dash:focus:not([readonly]) {
    border: 0.01vw solid rgb(0 13 255 / 25%);
    color: #495057;
    background-color: #fff;
    box-shadow: inset 0 0 0 0.1vw rgb(0 13 255 / 25%)
}

.input_dash_unit {
    padding-left: 0.5vw;
    color: #8a8a8a;
}

.newProduct_left {
    margin: 0 1vw;
    padding-right: 1vw;
    padding-bottom: 1vw;
    overflow: auto;
}

.newProduct_right {
    padding: 1vw 0.5vw;
    box-shadow: 0px 0.1vw 0.3vw grey;
    margin: 0.5vw 2vw;
    border-radius: 0.4vw;
}

.attr-box {
    display: flex;
    align-items: center;
    margin-bottom: 0.5vw;
}

.mx-01 {
    margin-left: 1vw !important;
    margin-right: 1vw !important;
}

.mx-05 {
    margin-left: 0.5vw !important;
    margin-right: 0.5vw !important;
}

#stock_fill_attrinfo {
    overflow: auto;
    max-height: 15vw;
}

#convert_unitpriceTable input {
    padding: 0.3vw 0.5vw;
    text-align: right !important;
}

.newProduct_left:not(#adjStock_form) tbody tr:last-child {
    border-bottom: 0;
}

.tableprice tr th, .tableprice tr td {
    padding: 0.8vw 0.2vw 0.8vw 0.5vw !important;
}

/* Customer */
.choose_cuss span {
    font-size: 1.5vw;
    color: #ababab;
}

.cuss-box {
    display: flex;
    height: 2.8vw;
}

.cuss-box button:hover:not(.active) i, .text-darkblue, .stockInfo-box .btn-box button:hover i,
.payment-kiosk-tab>div:hover i  {
    color: #4f48f1;
}

.cuss-box button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    padding: 0;
    width: 8vw;
    background-color: #e8e5fc47;
    color: #a6afc1;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
}

.cuss-box .active {
    font-size: 1.2vw;
    background-color: #d4cef8;
    color: #3e479b;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    font-weight: bold;
}

#cuss_main_right .cuss-box .active {
    border-bottom: 0.2vw solid #3E479B;
    background-color: transparent;
    color: #3E479B;
}

#cuss_main_right .cuss-box button {
    padding: 0 1vw;
    margin-right: 0.5vw;
    width: auto;
    background-color: transparent;
}

#cuss_main {
    height: calc(100% - 3vw);
    display: flex;
    color: #040849;
}

#cuss_main_left {
    height: 100%;
    width: 24vw;
    padding: 1vw;
    margin-right: 1vw;
    background-color: white;
    border-radius: 0 0 0.5vw 0.5vw;
    overflow: hidden;
    box-shadow: 0 0vw 0.4vw #b7b7d338;
}

#cuss_main_left label {
    font-size: 1vw;
    font-weight: bold;
    margin-bottom: 0.2vw;
    padding-left: 0.2vw;
}

#cuss_main_mid {
    overflow: hidden;
    flex-grow: 1;
}

#cuss_main_bot {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 1vw;
}

#cuss_main_bot button {
    border: 0;
    background: transparent;
    color: #040849;
    font-size: 1vw;
    font-weight: bold;
}

#cuss_main_right {
    width: calc(100% - 25vw);
    background: white;
    padding: 1vw 2vw;
    border-radius: 0.4vw;
    box-shadow: 0 0vw 0.35vw rgb(191 191 229 / 90%);
}

.back-box {
    box-shadow: 0 0vw 0.35vw rgb(191 191 229 / 90%) !important;
}

#cuss_list {
    padding: 0.5vw 0.5vw 0 0;
    overflow: auto;
}

#cuss_list ul {
    list-style: none;
}

#cuss_list ul li {
    padding: 0.5vw 1vw;
    line-height: 1.2vw;
    cursor: pointer;
    border-radius: 0.4vw;
}

#cuss_list ul li:hover {
    background-color: #ececec8c;
}

.cuss_id {
    font-size: 0.8vw !important;
    color: gray;
    white-space: normal;
}

.cuss_id span {
    font-size: 0.8vw !important;
}

#cuss_main_right .cuss-box {
    height: 2.2vw;
}

#cuss_info {
    height: calc(100% - 2.2vw);
    overflow: auto;
    padding: 0.5vw;
}

#info_div {
    height: calc(100% - 7vw);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.cuss_group {
    display: flex;
    flex-direction: column;
    margin-right: 1vw;
    flex: 1;
}

#addType_form .cuss_group {
    width: 50%;
}

.cuss_show-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 6vw;
    background: #eaeaea;
    margin: -0.5vw 1vw 1vw;
    width: 17vw;
    border-radius: 0.5vw;
}

.cuss_show-group .cuss_detail {
    font-size: 2vw;
    font-weight: bold;
}

.cuss_group input, .cuss_group textarea, .cuss_group select {
    padding: 0.25vw 1vw;
    /* background: #eaeaea; */
    border-radius: 0.4vw;
    color: gray;
    border: 0.2vw solid #eaeaea;
    font-size: 0.9vw;
    width: 100%;
}

#other-input select {
    padding: 0.2vw 1vw 0.2vw 1.8vw;
}

.cuss_topicHead {
    font-size: 1vw;
    font-weight: bold;
    text-transform: uppercase;
    margin: 1.5vw 0 0.5vw;
}

.cussInfo_edit {
    right: 3vw;
    text-align: end;
}

.cussInfo_edit button {
    padding: 0.2vw 1vw;
    background-color: transparent;
    background: transparent;
    border: 0;
    color: gray;
}

#cuss_debtTable_parent, #cuss_hisTable_parent, #cuss_recTable_parent {
    padding: 0.5vw 1vw 0;
}

#cuss_debtTable_parent {
    display: flex;
    flex-direction: column;
}

#debt_paymentCal .cuss_group {
    margin-top: 0.2vw;
    align-items: center;
}

#cuss_debtTable_parent input:not(:read-only) {
    background-color: white;
}

.border_table {
    border: 1px solid #e2e2e2;
    border-radius: 0.5vw;
    background: linear-gradient(to bottom, #d4cef8 0, white 3vw);
    /* min-height: 10vw; */
}

.net_box {
    margin-bottom: -1.7vw;
    z-index: 1;
    font-size: 0.9vw;
    color: gray;
    margin-left: 0.8vw;
}

.pl-7 {
    padding-left: 7vw !important;
}

#debt_payment_process .purple-button {
    padding: 0.29vw 1vw;
    margin-top: 1.2vw;
}

.badgebox {
    opacity: 0;
    display: none;
}

.badgebox+.badge {
    text-indent: -999999px;
    width: 2vw;
    background-color: white;
    color: #645df6;
    box-shadow: inset 0px 0px 5px;
    box-shadow: inset 0px 0px 6px #8a84ff;
    border-radius: 100%;
    height: 100%;
    padding: .25vw .4vw;
    margin-left: 0.5vw;
}

.badgebox:checked+.badge {
    text-indent: 0;
    font-size: 1vw;
}

.payment-box-parent {
    margin-top: 2vw;
    margin-right: 3rem;
}

.payment-box {
    display: flex;
    justify-content: space-between;
    padding: 0 1vw;
}

.payment-box .gray-button {
    padding: 0.4vw 1vw;
}

#newCus_form .stock-topic {
    width: 13vw;
}

/* Supplier */

#cusInv_btn {
    margin-bottom: -2.5vw;
}

/* Other */
.other-back-box {
    border-radius: 0.4vw;
    height: 100%;
    background-color: white;
    overflow: auto;
    min-height: 30vw;
    padding: 0;
    box-shadow: 0 0vw 0.4vw #b7b7d338;
}

#settingTab .other-back-box .active {
    border-left: 0.5vw solid #425AC6;
}

.other-back-box .active .font-weight-bold, .other-topic:hover i, .other-back-box .active i {
    color: #425AC6;
}

.other-topic {
    display: flex;
    padding: 0.8vw 2vw;
    cursor: pointer;
}

.other-topic:hover {
    /* background-color: #ececec8c;
    box-shadow: inset 0 0 0.8vw #bebcec; */

    background-color: #eeeefa;
}

.other-topic:hover i, .other-back-box .active i:not(.norm) {
    font-size: 1.2vw;
}

.other-topic i {
    vertical-align: middle;
    color: gray;
}

#other_head, .other-head {
    color: #425AC6;
    font-weight: bold;
    font-size: 1.5vw;
}

#otherTable_parent, #bankTable_parent {
    padding: 1.5vw 2vw 0.2vw;
}

.other_parent {
    display: flex;
    flex-direction: column;
    padding: 1vw 4vw;
}

#other-input {
    padding: 1.5vw 2vw 0;
}

#other-note, #cusInv_btn {
    padding: 0.5vw 2vw;
}

#addType_form {
    padding: 0.5vw 1vw;
}

.other-note-box {
    padding: 0.8vw 1vw;
    background-color: #FFF6DE;
    color: #9E8544;
    border-radius: 0.5vw;
}

.oth_detail {
    padding: 0.2vw 1vw;
    background-color: white;
    color: #040849;
    border: 0.1vw solid #e2e2e2;
    border-radius: 0 0.4vw 0.4vw 0;
}

#other-input .cuss_group {
    flex-direction: row;
    align-items: center;
}

.oth_topic {
    display: flex;
    align-items: center;
    padding-left: 0.5vw;
    background: #dce0fe;
    color: #040849;
    border-radius: 0.4vw 0 0 0.4vw;
}

#other-attr_val label {
    padding: 0 0.5vw 0 0.4vw;
    margin-bottom: 0;
    font-size: 0.9vw;
    cursor: pointer;
}

#other-attr_val .stock_info_group {
    border: 0.1vw solid #e2e2e2;
    border-radius: 0 0.4vw 0.4vw 0;
    padding: 0.2vw 0.2vw 0.2vw 0.5vw;
}

#other-attr_val input {
    height: 100%;
}

#other-attr_val button {
    background: #dce0fe;
    box-shadow: unset;
    color: #425ac6;
    padding: 0.1vw 0.3vw 0.1vw 0.2vw;
}

#other-attr_val button p {
    font-size: 0.8vw;
    margin-bottom: 0;
}

#add_attrVal .modal-main {
    padding: 0.5vw 2.5vw 0 !important;
}

.border-rad-04 {
    border-radius: 0.4vw !important;
}

.max_alert {
    background: #FCEAE9;
    color: red !important;
    font-weight: bold;
}

#prop_val_parent {
    display: flex;
    flex-direction: column;
    height: calc(100% - 13vw);
}

/* Report */

.filter_div {
    display: flex;
    flex-direction: column;
    width: 12vw;
    /* width: inherit; */
    margin-right: 1vw;
}

.filter_div span {
    color: #a3a3a3;
    font-size: 0.8vw;
}

.filter_txt {
    font-size: 0.75vw !important;
    color: #a6afc1 !important;
    /* white-space: nowrap; */
    margin-right: 0.5vw;
    padding-right: 0.5vw;
    font-weight: 100 !important;
}

.filter_txt span {
    font-size: 0.75vw !important;
}

.filter_div .purple-input {
    padding-right: 1.5vw;
}

/* Report Table */
.table-scroll {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 100%;
}

.table-scroll table {
    width: 100%;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrap {
    position: relative;
}

.table-scroll th,
.table-scroll td {
    padding: 0.2vw 1vw !important;
    background: #fff;
}

.table-scroll th, .table-scroll tfoot td {
    border: 0.01vw solid #e2e2e2;
}

.table-scroll td {
    border-bottom: 1px dashed #d4cef8;
    border-right: 1px dashed #d4cef8;
}

.table-scroll thead th {
    background: #333;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    text-align: center;
    vertical-align: middle !important;
}

.table-scroll tbody th {
    font-weight: 400;
}

.table-scroll td {
    text-align: right;
}

#reportTable thead tr:nth-of-type(2) th {
    position: sticky;
    top: 1.8vw;
}

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

.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: -0.1vw;
    background: #d4cef8;
    color: #040849;
    z-index: 2;
    font-weight: bold;
}

.table-scroll tfoot th {
    z-index: 4 !important;
}

.table-scroll th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    /* z-index: 2; */
    background: #ccc;
}

.table-scroll tbody th:first-child {
    z-index: 2;
}

.index-100 {
    z-index: 100 !important;
}

#reportTable tbody tr:not(:last-child) {
    height: 1%;
}



/* Stock */

.stock_tab_sel {
    color: #3E479B;
    font-size: 2vw;
    font-weight: bold;
    padding-right: 2.5vw;
    padding-left: 0.5vw;
    margin-right: 1vw;
    margin-left: -0.5vw;
    border: 0;
    background-color: transparent;
    background-size: 0.9vw;
    max-width: 24vw;
    text-overflow: ellipsis;
}

#stock_cat_tab span {
    white-space: nowrap;
}

.stock_tab_type {
    display: flex;
    align-items: center;
    border: 0.1vw solid #dee2e6;
    padding: 0.4vw 1.5vw;
    border-radius: 2vw;
    background: #d4cef8;
    color: #3E479B;
}

input[type=radio]:not(:disabled), .stock_tab_type label, input[type=checkbox]:not(:disabled) {
    cursor: pointer;
}

#stock_serial_unit {
    max-width: 10vw;
}

/* left */

.stockInfo-box {
    padding: 1vw 1vw 1vw 2vw;
    background: white;
    box-shadow: 0 0 6px #a9a9a9;
    margin: 0 1vw;
    border-radius: 0.4vw;
}

.stockInfo-box .btn-box .active span {
    font-size: 1vw;
}

.stock_parent {
    /* height: calc(100% - 3vw); */
    padding: 0.5vw 0.5vw 0;
}

.stockc_parent {
    height: calc(100% - 5.5vw);
    padding: 0.5vw 0.5vw 0 0;
}

.stock_sm {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.stock_info_group {
    display: flex;
    padding: 0.2vw 1vw;
}

.stock-topic {
    width: 10vw;
    color: #8a8a8a;
    text-align: end;
    margin-right: 1vw;
}

.stock-info {
    color: #396cac;
    width: 100%;
}

.light-purple {
    font-size: 1.2vw;
    color: #396cac !important;
}

.stockInfo-box button span, .stockInfo-box button:not(.no-border-button) i {
    font-size: 0.8vw;
    line-height: initial;
}

/* Right */
.stock_group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0.2vw;
    padding: 0.5vw 0.6vw;
    background: #ff9145;
    width: 16vw;
}

.stock_group .stock_disp_val {
    font-size: 1.3vw;
}

.stock_group_sel {
    padding: 0 1.1vw 0 0.5vw;
    border: 0;
    border-radius: 0.2vw;
}

.stock_disp_parent {
    display: flex;
    align-items: center;
    border-radius: 0.2vw;
    padding: 0.5vw;
    width: 16vw;
}

.stock_disp_icon {
    padding: 0.8vw;
    background: white;
    border-radius: 100%;
    margin-right: 1vw;
}

.stock_disp_icon i, .modal .close span {
    font-size: 1.5vw;
}

.stock_disp_val {
    font-size: 1.5vw;
    word-break: break-all;
    font-weight: bold;
}

.stock_sel {
    padding: 0.2vw 1.2vw 0.2vw 0.5vw;
    border: 0;
    border-radius: 0.2vw;
}

.stock_disp, .stock_group {
    color: white;
}

.stock-orange {
    background: #f99f53;
}

.stock-txt-orange {
    color: #f99f53;
}

.stock-red {
    background: #EE5252;
}

.stock-txt-red {
    color: #EE5252;
}

.stock-green {
    background: #51A351;
}

.stock-txt-green {
    color: #51A351;
}

#add_stock .stock_info_group {
    align-items: center;
}

.stockInfo-right {
    width: calc(100% - 31vw);
    display: flex;
    flex-direction: column;
}

/* Multi-Select */
.attr_container {
    border: 0.01vw dashed #dce0fe;
    border-radius: 0.2vw;
    padding: 0.5vw 0.8vw;
    width: 100%;
}

#attr_box-parent, #supType_box-parent {
    display: flex;
    flex-wrap: wrap;
}

.attr_select {
    width: 100%;
}

.attr_box {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #020425;
    padding: 0.2vw 0.3vw 0.2vw 1vw;
    background-color: rgba(228, 236, 250, 0.7);
    border-radius: 2vw;
    margin: 0.1vw;
}

.attr_cross {
    display: flex;
    padding: 0 0.5vw;
    background: transparent;
    border: 0;
    color: #4f48f1;
}

.multiSelect input, .multiSelect input:focus, .attr_cross:focus {
    border: 0;
    outline: none;
}

.multiSelect input {
    width: 100%;
    padding: 0 0.5vw;
    font-size: 0.9vw;
    margin: 0.5vw 0;
    color: #0a15c9;
}

#attr_dropdown, #supType_dropdown {
    display: none;
    background: #fff;
    box-shadow: inset 0 0 1vw rgb(212 206 248);
    overflow-y: auto;
    max-height: 12vw;
    border-radius: 0.2vw;
    z-index: 100;
    margin-bottom: 1vw;
    position: absolute;
    margin-right: 5vw;
}

#attr_dropdown ul, #supType_dropdown ul {
    list-style: none;
    margin-bottom: 0;
}

#attr_dropdown ul li, #supType_dropdown ul li {
    padding: 0.3vw 1.5vw;
}

#attr_dropdown ul li:first-child, #supType_dropdown ul li:first-child {
    padding-top: 0.4vw;
}

#attr_dropdown ul li:last-child, #supType_dropdown ul li:last-child {
    padding-bottom: 0.4vw;
}

#attr_dropdown ul li:hover:not(.selected), #supType_dropdown ul li:hover:not(.selected) {
    background-color: #dce0fe;
    cursor: pointer;
}

#attr_dropdown ul .selected, #supType_dropdown ul .selected {
    color: #cccccc;
}

/* Setting */
label input~span {
    cursor: pointer;
}


/* Setting Company */
#setting_compamy_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - 4vw);
}

#setting_compamy_form>div:first-child {
    padding: 2vw 4vw 0;
    overflow: auto;
}

#setting_compamy_form img, .logo-pic {
    padding: 0;
    border-radius: 100%;
    object-fit: contain;
}

#setting_compamy_form img, .logo-pic, #add_product_add_img img, #product_img_spc img, .goods-pic {
    width: 12vw;
    height: 12vw;
}

.goods-pic, .product_img_main .goods-pic, .product_img_main img, #add_product_add_img img, #product_img_spc img {
    border-radius: 0.5vw;
    vertical-align: top;
    object-fit: contain;
}

.product_img_main .goods-pic, .product_img_main img {
    width: 6vw;
    height: 6vw;
}

.logo-pic, .goods-pic {
    text-align: center;
}

.product_img_main {
    display: flex;
    justify-content: center;
}

.setting-icon {
    display: flex;
    justify-content: center;
    width: 3vw;
    padding: 0.5vw 0;
    border: 1px solid #e1e1e1;
    background-color: white;
    border-radius: 0.4vw 0 0 0.4vw;
}

#del_upload_btn {
    margin: 0 0.5vw 0 1.5vw;
    border-radius: 0.4vw;
}

.set_comp_box {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.5vw;
}

#upload_btn {
    border: 0;
    color: white;
    background: #4f48f1;
    font-size: 0.9vw;
    padding: 0 1vw;
    border-radius: 0 2vw 2vw 0;
}

#setting_compamy_form label {
    color: #425AC6;
    font-weight: bold;
}


/* Setting Print */
#setting_print {
    padding: 3vw 1vw;
}

.setting_print_parent, .set_prefix_parent {
    height: 100%;
    padding: 0 4vw;
    overflow: auto;
}

.setting_print_box {
    margin-bottom: 1.5vw;
}

.set_prn_form {
    display: flex;
    background: #f4f4fb;
    padding: 1vw 2vw;
    border-radius: 0 0 0.5vw 0.5vw;
}

.set_print_head {
    border-bottom: 1px dashed #dee2e6;
    padding-bottom: 0.85vw;
}

.set_print_head i {
    color: #cfcfd7;
    margin-right: 0.3vw;
}

.set_print_head button {
    border: 0;
    background: transparent;
    color: #425AC6;
    font-weight: bold;
    font-size: 1.2vw;
    margin: 0;
    padding-left: 0.5vw;
}

#setting_print label {
    margin-bottom: 0.1vw;
}

#setting_print input, #setting_print select, #setting_print textarea, #setting_company input {
    padding: 0.35vw 0.8vw;
}




/* Setting Prefix */
#setting_prefix, #setting_constant {
    padding: 2vw 1vw;
}

.set_prefix_parent {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 2vw 0 3vw;
    height: 100%;
    overflow: auto;
}

.set_prefix_box {
    display: flex;
    justify-content: center;
    padding: 0.5vw 1vw;
}

.set-group-icon {
    padding: 0.5vw 0.5vw 0.5vw 1vw;
    width: 13vw;
    display: flex;
    align-items: center;
    color: #425ac6;
    border-bottom: 1px dashed #dee2e6;
}

.set-group-icon i {
    color: #cfcfd7;
}

.set_prefix_box input {
    border: 1px solid #dfdfe7;
    padding: 0.6vw 1vw;
    font-size: 1vw;
    width: 8vw;
    text-align: center;
    border-radius: 2vw 0 0 2vw;
    box-shadow: inset 0 0 0.5vw #dfdfe7;
}

.set_prefix_box input:focus {
    box-shadow: inset 0 0 0.5vw #898997;
}

.set-group-save {
    background: #04084921;
    border-radius: 0 2vw 2vw 0;
    width: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3e479b;
    border: 0;
    border-bottom: 1px dashed #dee2e6;
    border-left: 1px dashed #dddddd;
}

#bankAcc_form {
    display: flex;
    flex-direction: column;
    box-shadow: none;
    padding: 0 2rem;
}

#bankTable th, #bankTable td {
    padding: 0.8vw 0.5vw 0.8vw 2vw !important;
}




/* Modal */
.modal-head, .modal-foot {
    display: flex;
    justify-content: flex-end;
    padding: 1vw 1.5vw;
}

.modal-foot {
    border-top: 1px solid #dee2e6;
}

.modal-main {
    padding: 0 1.5vw !important;
    margin: 1vw 0;
}

.modal-title, .modal-title span {
    font-size: 1.15vw;
    color: #040849;
}

.modal-title-parent {
    text-align: center;
    padding: 1vw 2vw 0;
}

.modal .btn {
    padding: 0.375rem 1.5rem;
}

.search-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 1vw;
    padding-top: 0.5vw;
}

.border-right-00 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.border-right-04 {
    border-top-right-radius: 0.4vw;
    border-bottom-right-radius: 0.4vw;
}

.border-left-04 {
    border-top-left-radius: 0.4vw;
    border-bottom-left-radius: 0.4vw;
}

.input-group-addon {
    font-size: 0.9vw;
    color: #555;
    background-color: #eee;
    border: 1px solid #ccc;
    width: 2.8vw;
    padding: 0.3vw 0.9vw;
}

.modal-input, .searchType, #other_cus-sel {
    cursor: pointer;
    border: 1px solid #DBE5F1;
    font-size: 0.9vw;
    color: #43588F;
}

.modal-input {
    background: #fff url(../img/search-solid.svg) calc(100% - 0.75rem) 45% no-repeat;
    background-size: 0.9vw;
    padding: 0.3vw 3vw 0.3vw 1vw;
    border-top-right-radius: 0.4vw;
    border-bottom-right-radius: 0.4vw;
    width: 50%;
}

.searchType, .daterangepicker select, .form-style-2 select, #cuss_main select, #other_cus-sel {
    padding: 0.3vw 1.8vw 0.3vw 1vw;
    width: fit-content;
}

select {
    background: #fff url(../img/angle-down-solid.svg) calc(100% - 0.5rem) 50% no-repeat;
    background-size: 0.7vw;
    appearance: none;
    cursor: pointer;
}

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

.chk_icon {
    color: green;
    font-size: 3rem;
}

.wrong_icon {
    color: red;
    font-size: 3rem;
}

#mvt_productTable tbody td {
    padding: 0.6vw 0.5vw;
}

/* Payment Kiosk */
#setting_payment .set_print_head {
    border-bottom: 0.12rem dashed #dee2e6;
    padding-bottom: 0.5rem;
}

#setting_payment .set_print_head span {
    color: #425AC6;
    font-weight: bold;
}

#setting_payment .purple-input {
    padding: 0.4rem 3.5rem 0.6rem 1.25rem;
    font-size: 1.05rem;
}

.see-password {
    display: flex;
    position: relative;
}

.see-password span {
    position: absolute;
    z-index: 1;
    right: 1.2rem;
    top: 0.7rem;
    cursor: pointer;
}

.see-password span:active {
    opacity: 50%;
}

.see-password i {
    font-size: 1.1rem;
}

.set_payment_group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
    background: #f4f4fb;
    padding: 1.5vw 2vw;
    border-radius: 0 0 0.5vw 0.5vw;
}

.payment-kiosk-tab {
    display: grid;
    grid-template-columns: repeat(2, auto) 1fr;
    gap: 1rem; 
    border-bottom: 0.2rem solid #e9e9f6;
    user-select: none;
}

.payment-kiosk-tab>div {
    padding: 0.25rem 1.2rem 0.25rem 0.5rem;
    color: #a6afc1;
}

.payment-kiosk-tab>div i {
    margin-right: 0.275rem;
    font-size: 1.15rem !important;
}

.payment-kiosk-tab>div.active {
    color: #425ac6;
    border-bottom: 0.2rem solid #425ac6;
    font-weight: bold;
    margin-bottom: -0.175rem;
}

.payment-kiosk-tab>div.active i {
    color: #425ac6 !important;
}

.payment-kiosk-tab>div:active {
    opacity: 80%;
}

#kiosk_transactionTable tr th, #kiosk_transactionTable tr td:not(.no-list) {
    padding: 0.6vw 0.5vw 0.6vw 1vw !important;
}

#kiosk_transactionTable tr th:last-child, #kiosk_transactionTable tr td:last-child {
    padding-right: 1rem !important;
}

#kiosk_transactionTable tr th:nth-child(n + 4), #kiosk_transactionTable tr td:nth-child(n + 4) {
    text-align: end;
}

.sub-icon {
    color: #b7b7b7;
    font-size: 0.85rem;
    margin-right: 0.3rem;
}

.payment-kiosk-parent {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: auto;
    margin: 1.25rem 0 0.5rem;
}

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

.toggleCheckbox+.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+.toggleContainer::before {
    left: 50%;
}

.toggleContainer div {
    padding: 0.175rem 0.75rem;
    text-align: center;
    z-index: 0;
}

.toggleCheckbox {
    display: none;
}

.toggleCheckbox:checked+.toggleContainer {
    /* background: #425ac6;
    border: 0.2rem solid #425ac6;
    box-shadow: inset 0.1rem 0.1rem 0.5rem #2c45b5; */
    background: #00BDB4;
    border: 0.2rem solid #00BDB4;
    box-shadow: inset 0.1rem 0.1rem 0.5rem #2eada7;
}

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

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

.toggleCheckbox+.toggleContainer div:first-child {
    color: #97a2a9;
    transition: color 0.3s;
}

.toggleCheckbox+.toggleContainer div:last-child {
    color: #97a2a9;
    transition: color 0.3s;
}