* {
    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;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    width: 5vw;
    padding: 0.8vw;
    text-align: center;
    overflow: auto;
    color: #ffffff;
    background: linear-gradient(90deg, #e98101 0%, #df6b00 90%, #e1822d 100%);
}

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

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

#sidebar .active {
    padding: 0.5vw;
}

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

#sidebar .active .circle-active i {
    color: #ffffff;
    font-size: 1.2vw;
}

#insul_warehouse,
#chos_product_wh_sel,
#cdesign_wh_sel {
    font-size: 1.2vw;
}

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

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

#sidebar i {
    font-size: 1vw;
    filter: drop-shadow(0px 0.25rem 0.25rem #b95700);
}

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

.lng_div {
    padding-bottom: 1vw;
}

.lng_div select {
    background: transparent url(../img/angle-down-solid-new.svg) 92% 50% no-repeat;
    color: #ffffff;
    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: #ffa240;
    border-radius: 100%;
}

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

/* Content Nav */

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

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

.reportrange,
#reportrange,
.daterange_inp {
    background: #fff url(../img/calendar-alt-solid.svg) calc(100% - 0.6rem) 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: #f17148;
    box-shadow: 1px 1px 2px #f7b086;
    color: white;
    padding: 0.3vw 1vw;
    border-radius: 0.4vw;
    border: 0;
}

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

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: #f8ac82;
    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: #490404;
}

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

.icon-box {
    padding: 0.1vw 0.5vw;
    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: #fbf8f4;
    margin-bottom: -1vw;
    width: 20%;
}

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

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

/* 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;
    box-shadow: 0 0.15vw 0.4vw rgb(4 9 20 / 5%);
    border: 1px solid #e5e5e5;
}

.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 {
    color: #490404;
    background-color: #f7cfa9;
    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;
}

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

#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 tbody tr,
.add-order-but label,
#main-content tr td,
#cuss_debtTable tbody input,
#other-attr_val input,
.modal-body tbody tr,
#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: #490404;
    background-color: #f7cfa9;
    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;
}

.other-back-box tr th,
.other-back-box tr td:not(.no-list) {
    padding: 0.8vw 0.5vw 0.8vw 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: #df6b00;
}

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

.btn-box .active {
    color: #490404;
}

.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 #dce0fe;
    border: 0.1vw solid #e4e4e4;
    color: #43588F;
    width: 100%;
}

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

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: #ffdab9;
    color: #040849;
    padding: 1.5vw;
    border-radius: 0.3vw;
    margin: 1vw 0.5vw;
    box-shadow: 0 0 0.8vw #ffdab9;
}

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

#purchase_new select.modal-title {
    font-weight: bold;
    padding-right: 1.75vw;
    padding-left: 0.5vw;
    margin-right: 1vw;
    border: 0;
    background-color: transparent;
    text-indent: 0.2rem;
    width: calc(100% + 0.5rem);
    line-height: 2;
    margin: -0.25rem 0 -1rem;
}


/* 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;
    box-shadow: 0px 1px 5px rgb(0 0 0 / 40%);
    border-radius: 0.2vw;
    padding: 1vw 1.5vw;
    background-color: white;
    height: 100%;
    overflow: auto;
}

.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: 0px 2px 3px rgba(0, 0, 0, 0.4);
    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 2px #949292;
    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: #f36228;
    vertical-align: middle;
    margin-left: 0.5vw;
}

.no-button:hover {
    color: #b63d0d;
}

.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: #fbf7f4;
    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;
    box-shadow: unset !important;
    background: #eaeaea;
    border: 0.1vw solid #eaeaea;
}

.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: #fbf7f4;
    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),
#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 #ffdab9;
    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;
    color: #490404;
    background-color: #ffdece;
    box-shadow: 0.2vw 0.15vw 0.1vw #fbc9b8;
    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: #fbf7f4;
    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;
}

.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 {
    color: #df6b00;
}

.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: #ffdab9;
    color: #490404;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    font-weight: bold;
}

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

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

#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 {
    box-shadow: 0 0 0.3vw #bfb7b0;
    width: calc(100% - 25vw);
    background: white;
    padding: 1vw 2vw;
    border-radius: 0.4vw;
}

.back-box {
    box-shadow: 0 0.1vw 0.3vw #bfb7b0;
}

#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;
    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, #ffdab9 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;
    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.5vw 1vw;
    box-shadow: 0px 0px 0.2vw #949292;
}

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

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

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

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

.other-topic:hover {
    background-color: #ececec8c;
    box-shadow: inset 0 0 0.8vw #f3ccad;
}

.other-topic:hover i,
.other-back-box .active i {
    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;
    margin-right: 1vw;
}

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

.filter_txt {
    font-size: 0.75vw !important;
    color: #a6afc1 !important;
    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 #f5f5f5;
}

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

.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: #ffdab9;
    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: #490404;
    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;
    color: #490404;
    background-color: #f7cfa9;
}

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 #bfb7b0;
    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;
    /* height: 3vw; */
}

.stock_info_group {
    display: flex;
    /* line-height: initial; */
    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: #490404 !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;
    /* box-shadow: 1px 1px 4px #ebebeb; */
    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 */
/* 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;
    /* background-color: transparent; */
}

.logo-pic,
.goods-pic {
    text-align: center;
    /* background: #eeeeee; */
}

.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.25vw;
    /* color: #040849; */
    color: #490404;
}

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

.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: 3vw;
    padding: 0.3vw 1vw;
}

.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) 97% 50% no-repeat;
    background-size: 1vw;
    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-new.svg) calc(100% - 0.5rem) 52% no-repeat;
    background-size: 0.75vw;
    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;
}