@import url("/design-system/css/button.css");
@import url("/design-system/css/color.css");
@import url("/design-system/css/dynamic-tooltip.css");
@import url("/design-system/css/input-switcher.css");
@import url("/design-system/css/menu.css");
@import url("/design-system/css/pagination.css");
@import url("/design-system/css/search-filter.css");
@import url("/design-system/css/typography.css");
@import url("/design-system/css/tab.css");
@import url("/design-system/css/widget-box.css");
@import url("/design-system/css/shadow.css");
@import url("/design-system/css/select.css");
@import url("/design-system/css/steps-form.css");
@import url("/design-system/css/position-selector.css");
@import url("/design-system/css/chip.css");
@import url("/design-system/css/input.css");
@import url("/design-system/css/tooltip.css");
@import url("/design-system/css/toast.css");
@import url("/design-system/css/bootbox.css");
@import url("/design-system/css/card.css");
@import url("/design-system/css/scrollbar.css");

:root {
    --gray--50: #F6F6F7;
    --gray--100: #ECEEF0;
    --gray--200: #E3E5E8;
    --gray--300: #D4D8DB;
    --gray--400: #BFC4C9;
    --gray--500: #A7ADB4;
    --gray--600: #8F969D;
    --gray--700: #70787F;
    --gray--800: #4D5359;
    --gray--900: #272A2D;
    --primary--50: #EFF8FA;
    --primary--100: #DFF1F6;
    --primary--200: #CFEAF1;
    --primary--300: #B4DEE9;
    --primary--400: #8ECEDC;
    --primary--500: #5FB9CC;
    --primary--600: #00A5BD;
    --primary--700: #00859C;
    --primary--800: #005E71;
    --primary--900: #00303A;
    --red--50: #FFF2EE;
    --red--100: #FFE4DE;
    --red--200: #FFD7CD;
    --red--300: #FFC0B3;
    --red--400: #FFA191;
    --red--500: #FF7A6C;
    --red--600: #FF534C;
    --red--700: #EA1C2C;
    --red--800: #AF0014;
    --red--900: #5B0306;
    --volcano--50: #FFF2EB;
    --volcano--100: #FFE6D8;
    --volcano--200: #FFD9C5;
    --volcano--300: #FFC4A6;
    --volcano--400: #FFA67F;
    --volcano--500: #FF8454;
    --volcano--600: #FE622D;
    --volcano--700: #DD3A00;
    --volcano--800: #A51500;
    --volcano--900: #560F00;
    --gold--50: #FEFFE6;
    --gold--100: #FFF1B8;
    --gold--200: #FFE58F;
    --gold--300: #FFD666;
    --gold--400: #FFC53D;
    --gold--500: #FAAD14;
    --gold--600: #D48806;
    --gold--700: #AD6800;
    --gold--800: #874D00;
    --gold--900: #613400;
    --yellow--50: #FEFFE6;
    --yellow--100: #FFFFB8;
    --yellow--200: #FFFB8F;
    --yellow--300: #FFF566;
    --yellow--400: #FFEC3D;
    --yellow--500: #FADB14;
    --yellow--600: #D4B106;
    --yellow--700: #AD8B00;
    --yellow--800: #876800;
    --yellow--900: #614700;
    --grass--50: #F5F8EB;
    --grass--100: #EAF1D6;
    --grass--200: #DFEAC3;
    --grass--300: #CDDEA3;
    --grass--400: #B3CE78;
    --grass--500: #94B949;
    --grass--600: #75A317;
    --grass--700: #518500;
    --grass--800: #305E00;
    --grass--900: #1D3000;
    --green--50: #F0F9EB;
    --green--100: #E2F3D6;
    --green--200: #D3EDC3;
    --green--300: #BAE3A3;
    --green--400: #97D478;
    --green--500: #6EC048;
    --green--600: #42AA14;
    --green--700: #008C00;
    --green--800: #006300;
    --green--900: #033300;
    --cyan--50: #EEF8F8;
    --cyan--100: #DEF2F1;
    --cyan--200: #CDEBEA;
    --cyan--300: #B2E0DF;
    --cyan--400: #8BD0CF;
    --cyan--500: #5BBBBB;
    --cyan--600: #1FA5A5;
    --cyan--700: #008788;
    --cyan--800: #005F60;
    --cyan--900: #003131;
    --blue--50: #F2F6FF;
    --blue--100: #E5EEFF;
    --blue--200: #D8E5FF;
    --blue--300: #C1D7FF;
    --blue--400: #A0C4FF;
    --blue--500: #74AEFF;
    --blue--600: #3E97FB;
    --blue--700: #0079E0;
    --blue--800: #0055AB;
    --blue--900: #002B57;
    --geekblue--50: #F5F6FF;
    --geekblue--100: #EAECFF;
    --geekblue--200: #E0E3FF;
    --geekblue--300: #CDD4FF;
    --geekblue--400: #B2BFFF;
    --geekblue--500: #90A7FF;
    --geekblue--600: #6B90FD;
    --geekblue--700: #3A72E2;
    --geekblue--800: #004EAC;
    --geekblue--900: #0F2858;
    --purple--50: #FBF4FF;
    --purple--100: #F6E8FF;
    --purple--200: #F1DDFF;
    --purple--300: #E8CBFF;
    --purple--400: #DAB2FF;
    --purple--500: #C694FF;
    --purple--600: #AE78FF;
    --purple--700: #8D57EA;
    --purple--800: #6236B3;
    --purple--900: #331C5B;
    --magenta--50: #FFF2F9;
    --magenta--100: #FFE5F2;
    --magenta--200: #FFD7EC;
    --magenta--300: #FFC1E1;
    --magenta--400: #FFA2D1;
    --magenta--500: #FF7BBE;
    --magenta--600: #FD54A9;
    --magenta--700: #DF1C8C;
    --magenta--800: #A80064;
    --magenta--900: #560333;
    --shadow_-l1: 0px 1px 1px rgba(39, 42, 45, 0.14), 0px 1px 3px rgba(39, 42, 45, 0.2);
    --shadow_-l2: 0px 1px 2px rgba(39, 42, 45, 0.14), 0px 3px 6px rgba(39, 42, 45, 0.2);
    --shadow_-l3: 0px 3px 4px rgba(39, 42, 45, 0.14), 0px 6px 12px rgba(39, 42, 45, 0.2);
    --shadow_-l4: 0px 6px 6px rgba(39, 42, 45, 0.14), 0px 10px 20px rgba(39, 42, 45, 0.2);
    --shadow_-l5: 0px 10px 8px rgba(39, 42, 45, 0.14), 0px 14px 28px rgba(39, 42, 45, 0.2);
    --focus--shadow: 0px 0px 0px rgba(0, 165, 189, 0.2);
    --divider-↓: inset 0px -1px 0px rgba(236, 238, 240, 1);
    --divider-↑: inset 0px 1px 0px rgba(236, 238, 240, 1);
}

body {
    color: var(--gray--900);
    font-family: "Source Sans 3", sans-serif;
    overflow-y: hidden;
}

.page-content {
    background-color: #F0F2F5;
    position: relative;
    padding: 32px 24px;
    height: 100dvh;
    overflow-y: auto;
}

    .page-content .row {
        margin: 0px;
    }

:focus-visible {
    outline: none;
}

.main-container {
    height: 100dvh;
}

.text-primary {
    color: #1E82DF !important;
}

.font-wellell-blue {
    color: #00A5BD !important;
}

.bg-wellell-light-blue {
    background-color: #DDF6FB !important;
    color: #000000 !important;
}

.bg-light-green {
    background-color: #EBFDDA !important;
    color: #000000 !important;
}

.bg-light-blue {
    background-color: #DCEAF8 !important;
    color: #000000 !important;
}

a {
    text-decoration: none !important;
}

.pointer {
    cursor: pointer;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

.w-105 {
    width: 105%;
}

/*Calendar*/
.calendar .toolbar button {
    border: 1px solid #D4D8DB;
    border-radius: 8px;
    padding: 0px;
    background: none;
    height: 30px;
    width: 30px;
    line-height: 30px;
}

.calendar .toolbar.mobile {
    border-bottom: 2px solid #F0F0F0;
}

.calendar .view.mobile {
    overflow: auto;
    height: calc(100dvh - 240px);
}

.calendar .view .header {
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.calendar .view:hover .header.mobile {
    border: none;
    box-shadow: none;
    padding: 0px 0px 0px 0px;
}

.calendar .view .body {
    flex-basis: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

    .calendar .view .body .col {
        min-width: 0;
    }

    .calendar .view .body.mobile {
        height: auto;
        padding-top: 8px;
        padding-bottom: 24px;
    }

    .calendar .view .body .route {
        position: relative;
        border-radius: 10px;
        padding: 8px;
        margin: 0px 8px 8px 8px;
        cursor: pointer !important;
    }


        .calendar .view .body .route.repeat:after {
            content: url('/images/svg/md/repeat.svg');
            position: absolute;
            bottom: 8px;
            right: 8px;
        }

        .calendar .view .body .route.mobile {
            margin: 8px 0px;
        }

        .calendar .view .body .route.route-grey {
            background: #F6F6F7;
        }

        .calendar .view .body .route.route-secondary {
            background: #F2F6FF;
        }

        .calendar .view .body .route.route-success {
            background: #F0F9EB;
        }

        .calendar .view .body .route.route-warning {
            background: #FEFFE6;
        }

        .calendar .view .body .route.route-danger {
            background: #FFF2EE;
        }

/*Cheange History*/
ol.change-history {
    list-style: none;
}

    ol.change-history > li {
        font-size: 16px;
        font-weight: 400;
    }

        ol.change-history > li > .fa-circle {
            color: #00A5BD
        }

        ol.change-history > li > ul {
            list-style: none;
            margin-left: 24px !important;
        }

            ol.change-history > li > ul > li.title {
                font-size: 18px;
                font-weight: 600;
            }

            ol.change-history > li > ul > li.description {
                font-size: 18px;
                font-weight: 400;
            }



/*Login Css*/
.login-logo {
    background: 50% no-repeat url("/images/login-bg-word.svg"),50% /cover url("/images/login-bg.png") !important;
    height: 100%;
}

.notification-area {
    background-color: #DFF6FA !important;
}

/*Disinfection Css*/
.disinfection-text {
    font-size: 14px;
    line-height: 45px;
}
/*Check Css*/
.black {
    color: #363636;
}

.alert {
    padding: 9px 16px;
}

.alert-info {
    background-color: #E6F7FF !important;
    border-color: #91D5FF !important;
    color: #000000;
    border-radius: 8px;
}

.alert-warning {
    background-color: #FFFBE6 !important;
    border-color: #FFE58F !important;
    color: #000000;
    border-radius: 8px;
}

.alert-reminder {
    background-color: var(--blue--50);
    border-color: var(--blue--200);
    color: #000000;
    border-radius: 8px;
}

.error-area,
.repair-area,
.check-unit {
    border-radius: 8px;
    padding: 12px;
    margin-right: 16px;
    margin-bottom: 16px;
    position: relative;
}

    .repair-area a,
    .check-unit a {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        color: #00A5BD;
        cursor: pointer;
    }

    .repair-area .red-dot,
    .check-unit .red-dot {
        position: absolute;
        top: 4px;
        left: 35px;
        width: 5px;
        height: 5px;
        background-color: red;
        border-radius: 50%;
    }

a.view-reapir,
a.view-log {
    text-decoration: underline;
    float: right;
    cursor: pointer;
}

a.unit-ellipsis {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #363636;
}

    a.unit-ellipsis:hover {
        color: #00A5BD;
    }

a.unit-close {
    position: absolute;
    right: 11px;
    top: 21px;
    width: 30px;
    height: 30px;
    line-height: 17px;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 16px;
    font-size: 30px;
    text-indent: 0
}

    a.unit-close:before {
        color: #404047;
        content: "×"
    }

    a.unit-ellipsis:hover,
    a.unit-close:hover {
        text-decoration: none;
    }

.unit-scanned,
.repair-area,
.error-area {
    background: #EDFAFC;
}

.unit-default {
    background: #F2F2F2;
}

.unit-error {
    background: #FDE9ED;
}


.element-view .element-title,
.element-input .element-title {
    font-weight: 600;
    font-size: 22px;
    line-height: 24px;
    color: #363636;
}

.element-select-title {
    border: 1px solid #D5D5D5;
    background: #FFF;
    margin-right: -3px;
}

.element-select-title,
.element-input input[type='text'],
.element-input input[type='search'] {
    border-radius: 8px;
    height: 38px;
}


/*Custmer-Info Css*/
.custmer-area {
    background-color: #FFFFFF;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 32px;
}

    .custmer-area h2 {
        margin: 0px;
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 18px;
        color: #363636;
    }

    .custmer-area p.title {
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
        color: #00A5BD;
        margin: 16px 0px 8px 0px
    }

    .custmer-area p.content {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 16px;
        color: #363636;
    }
/*Work-Area Css*/
.work-area {
    background-color: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0px 1px 1px 0px #272A2D24,0px 1px 3px 0px #272A2D33;
}

.work-area h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 28px;
    color: #363636;
}

.work-area p.title {
    color: #00A5BD !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    letter-spacing: 0em !important;
}

.work-area p.repair-register-code,
.work-area p.repair-register-completetime,
.work-area p.repair-request-completetime,
.work-area p.intro {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #7D7D7D;
}

.work-area p.tag {
    background: #FFFFFF;
    border-radius: 4px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #363636;
    width: fit-content;
}

.work-area label.sub-intro {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #000000D9;
}

.work-area p.sub-intro {
    font-size: 16px;
    font-weight: 600;
}

.work-area p.sub-intro-error {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #CE3838;
}

.work-area p.content {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    color: #363636;
}

.work-area p.unit-default-intro {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #7D7D7D;
}

.work-area p.unit-error-intro {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #CE3838;
}

.work-area p.unit-success-intro {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #00B6D0;
}

.work-area ul li ul li {
    list-style-type: none;
}

.element-input label.sub-title,
.work-area .element-input label.sub-title {
    font-size: 18px;
    font-weight: 600;
}

.result {
    word-wrap: break-word;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #363636;
    margin-bottom: 0px;
}

.work-area .border-bottom:last-child {
    border: none !important;
}

.work-area .rule-item:only-child .rule-remove,
.work-area .product:only-child .product-remove {
    display: none;
}

.work-area .product .storage-item:only-child .storage-remove {
    display: none;
}

/*Table Css*/
.table-container {
    overflow-x: auto;
}

table.table {
    max-width: 100%;
    border-collapse: collapse;
}

    table.table thead {
        background-color: #FAFAFA;
        vertical-align: middle;
    }

        table.table thead tr th div.sort,
        table.table thead tr th div.sort-asc,
        table.table thead tr th div.sort-desc {
            cursor: pointer;
            word-break: break-all;
        }

            table.table thead tr th div.sort::before {
                content: "\f0dc";
                font-family: "FontAwesome", sans-serif;
                float: left;
                padding-right: 8px;
                color: #00000040;
            }

            table.table thead tr th div.sort-asc::before {
                content: "\f0de";
                font-family: "FontAwesome", sans-serif;
                float: left;
                color: #00A5BD;
                padding-right: 8px;
            }

            table.table thead tr th div.sort-desc::before {
                content: "\f0dd";
                font-family: "FontAwesome", sans-serif;
                float: left;
                color: #00A5BD;
                padding-right: 8px;
            }

    table.table tbody {
        display: block;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        vertical-align: middle;
    }

        table.table tbody tr.hyperlink {
            cursor: pointer;
        }

    table.table tfoot {
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
    }

        table.table thead tr,
        table.table tbody tr,
        table.table tfoot tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

            table.table thead tr th,
            table.table tbody tr td,
            table.table tfoot tr td {
                width: 150px;
                height: 56px;
                word-break: break-all;
            }
/*List Css*/
.scroll-list {
    height: 450px;
    overflow-y: auto;
}


.complete-list, .product-list, .inprogress-list, .packed-list {
    padding: 16px 0px;
}

.set-border-left {
    border-left: 3px solid #FFC657 !important;
    margin-left: -3px !important;
}

.unit-border-left {
    border-left: 3px solid #CE6F9E !important;
    margin-left: -3px !important;
}

.set-status {
    border-radius: 4px !important;
    background-color: #FFF2E8 !important;
    color: #FA541C !important;
    padding: 1px 8px 1px 8px;
    font-size: 12px;
    text-align: center;
}

.unit-status {
    border-radius: 4px !important;
    background-color: #FFF0F6 !important;
    color: #EB2F96 !important;
    padding: 1px 8px 1px 8px;
    font-size: 12px;
    text-align: center;
}

.inprogress-status {
    border: 2px solid #038AEC !important;
    border-radius: 4px !important;
    background-color: #D4EBFC !important;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
}

.close-status {
    border: 2px solid #008FA3 !important;
    border-radius: 4px !important;
    background-color: #DFF6FA !important;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
}

/*Storage Css*/
.storage-item-green {
    background-color: #E8F9FC;
    border: 2px solid #00A5BD;
    border-radius: 16px;
    padding: 24px;
    position: relative;
}

.storage-item-white {
    background-color: #FFFFFF;
    border: 2px solid #D9D9D9;
    border-radius: 16px;
    padding: 24px;
    position: relative;
}

.storage-item-title {
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.storage-item-sub-title {
    font-size: 14px;
    color: #8C8C8C;
}

.storage-blue-green {
    background-color: #E8F9FC;
    border: 2px solid #90DAE5;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #90DAE5;
    width: auto;
    line-height: 24px;
}

.storage-blue {
    background-color: #E7F2FC;
    border: 2px solid #97C5F0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #97C5F0;
    width: auto;
    line-height: 24px;
}

.storage-green {
    background-color: #F6FFED;
    border: 2px solid #B7EB8F;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #B7EB8F;
    width: auto;
    line-height: 24px;
}

.storage-grey {
    background-color: #FAFAFA;
    border: 2px solid #D9D9D9;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    width: auto;
    line-height: 24px;
}

.sku-status-yellow {
    background-color: #FDF7D5;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    color: #000000;
    width: auto;
}

.sku-status-green {
    background-color: #EBFDDA;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    color: #000000;
    width: auto;
}

.sku-iot-grey {
    background-color: #FAFAFA;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    width: auto;
    line-height: 20px;
}

.sku-iot-blue {
    background-color: #DCEAF8;
    border: 1px solid #97C5F0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #97C5F0;
    width: auto;
    line-height: 20px;
}

/*Lost CSS*/
.lost-row {
    background-color: #fff3cd;
}
/*Element-chip & Tag label*/
.chip {
    background: #C5D0DC;
    border-radius: 100px;
    padding: 5px 15px;
    margin: 5px 15px;
    width: auto;
    float: left;
    display: inline-block;
    display: inline;
}

    .chip:hover {
        background: #C5D0DC;
    }

    .chip i {
        float: right;
        padding-left: 10px;
        cursor: pointer;
    }

    .chip.spinner-value::after {
        padding-left: 8px;
        content: attr(spinner-value);
    }

.redio-button-check-wellell-blue:checked {
    background-color: white;
    border-color: #00a5bd;
}

    .redio-button-check-wellell-blue:checked[type=radio] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2300a5bd' stroke='%2300a5bd' stroke-width='2%'/%3e%3c/svg%3e")
    }

.full-status {
    border: 2px solid #ED5F5F !important;
    border-radius: 4px !important;
    background-color: #FDE9ED !important;
    width: 100%;
    text-align: center;
    color: #363636;
    font-weight: 400;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 28px;
}

.not-full-status {
    border: 2px solid #008FA3 !important;
    border-radius: 4px !important;
    background-color: #DFF6FA !important;
    width: 100%;
    text-align: center;
    color: #363636;
    font-weight: 400;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 28px;
}

.scrapped-status {
    border: 2px solid #CBCBCB !important;
    border-radius: 4px !important;
    background-color: #FBFBFB !important;
    width: 100%;
    text-align: center;
    color: #7D7D7D !important;
    font-weight: 400;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 28px;
}

.blue-status {
    border: 2px solid #038AEC !important;
    border-radius: 4px !important;
    background-color: #D4EBFC !important;
    width: 100%;
    text-align: center;
    color: #363636;
    font-weight: 400;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 28px;
}

.olight-signal-status {
    font-size: 8px;
    display: inline-block;
    vertical-align: middle;
}

.dropdown-menu > li > a {
    font-size: 16px;
    border-radius: 4px !important;
    border: none;
}

    .dropdown-menu > li > a:hover {
        color: black;
        background-color: #DFF6FA;
    }

.dropdown-table {
    position: absolute;
    margin: -12px 12px 0px 12px;
    z-index: 99;
    overflow: auto;
    max-height: 50dvh;
    background: white;
    box-shadow: 0px 9px 28px 8px #0000000D;
}

/*Element-Input-Bar*/
input[type=text]:disabled {
    background: var(--gray--100);
    color: var(--gray--600);
}

.input-icon input {
    min-height: 40px !important;
}

.input-icon-left input {
    padding: 0px 0px 0px 35px
}

.input-icon-left span.pattern {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translate(-5%, -50%);
    display: flex;
    align-items: center;
}

.input-icon-right input {
    padding: 5px 40px 5px 10px
}

.input-icon-right span.pattern {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(-5%, -50%);
}

.input-text-alert {
    padding: 0px 16px 0px 16px;
    margin: 0px;
}

input[type='search']::-webkit-search-cancel-button {
    position: relative;
    right: 15px;
    cursor: pointer;
    filter: grayscale(100%)
}
/*Element-step-form-vertical*/
.wizard.vertical .steps {
    float: left;
    width: 5%;
}

    .wizard.vertical .steps ul {
        position: relative;
        margin: 0px;
    }

        .wizard.vertical .steps ul:after {
            position: absolute;
            content: '';
            width: 2px;
            height: 95%;
            background: #ebebeb;
            left: 18px;
            top: 0px;
            z-index: 9;
        }

        .wizard.vertical .steps ul li {
            padding-bottom: 40px;
            position: relative;
            list-style-type: none;
            z-index: 99;
        }

            .wizard.vertical .steps ul li a {
                text-decoration: none;
                color: #222;
            }

                .wizard.vertical .steps ul li a .title {
                    -webkit-align-items: center;
                }

                    .wizard.vertical .steps ul li a .title .step-number {
                        width: 35px;
                        height: 35px;
                        -webkit-align-items: center;
                        -webkit-justify-content: center;
                        border-radius: 50%;
                        padding: 4px 8px;
                        background: #CBCBCB;
                        color: #FFFFFF;
                        margin-right: 15px;
                        display: flex;
                    }

            .wizard.vertical .steps ul li.done a .title .step-number {
                background: #00B6D0;
                color: #00B6D0;
            }

                .wizard.vertical .steps ul li.done a .title .step-number:after {
                    content: '\2714\fe0e';
                    color: #FFFFFF;
                    margin-right: 9px;
                }

            .wizard.vertical .steps ul li.current a .title .step-number {
                background: #00B6D0;
            }

.wizard.vertical .content .title {
    margin: 0px;
    height: 80px;
    padding-top: 6px;
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    color: #CBCBCB;
}

    .wizard.vertical .content .title.h-auto {
        color: #363636;
    }

    .wizard.vertical .content .title.done {
        color: #363636;
    }

    .wizard.vertical .content .title.current {
        padding-bottom: 0px;
        height: auto;
        color: #363636;
    }

.wizard.vertical .content .body {
    padding: 16px 0px;
}

.wizard.vertical .actions {
    float: left;
}

    .wizard.vertical .actions ul {
        list-style-type: none;
    }

        .wizard.vertical .actions ul li {
            float: left;
        }
/*Element-step-form-horizontal*/

.wizard.horizontal .steps {
    float: left;
    padding-bottom: 18px;
}

    .wizard.horizontal .steps ul {
        margin: 0px;
    }

        .wizard.horizontal .steps ul li:not(.last) :before {
            position: absolute;
            content: '';
            width: 30px;
            height: 1px;
            background: #ebebeb;
            right: 4px;
            top: 18px;
            z-index: 9;
        }

        .wizard.horizontal .steps ul li.done:not(.last) ::before {
            background: #00B6D0;
        }

        .wizard.horizontal .steps ul li {
            float: left;
            padding-right: 40px;
            position: relative;
            list-style-type: none;
            z-index: 99;
        }

            .wizard.horizontal .steps ul li a {
                text-decoration: none;
                color: #222;
            }

                .wizard.horizontal .steps ul li a .title {
                    -webkit-align-items: center;
                    display: flex;
                }

                    .wizard.horizontal .steps ul li a .title .step-number {
                        width: 40px;
                        height: 40px;
                        -webkit-align-items: center;
                        -webkit-justify-content: center;
                        border-radius: 50%;
                        padding: 4px 8px;
                        background: #CBCBCB;
                        color: #FFFFFF;
                        margin-right: 15px;
                        display: flex;
                    }

            .wizard.horizontal .steps ul li.done a .title .step-number {
                background: #00B6D0;
                color: #00B6D0;
            }

                .wizard.horizontal .steps ul li.done a .title .step-number:after {
                    content: '\2714\fe0e';
                    color: #FFFFFF;
                    margin-right: 9px;
                }

            .wizard.horizontal .steps ul li.current a .title .step-number {
                background: #00B6D0;
            }

.wizard.horizontal .content .title {
    display: none;
}

.wizard.horizontal .content .body {
    display: inline-block;
    width: 100%;
}

.wizard.horizontal .actions {
    float: left;
}

    .wizard.horizontal .actions ul {
        list-style-type: none;
    }

        .wizard.horizontal .actions ul li {
            float: left;
        }
/*Element-step-form-horizontal(mobile)*/

.mobile.wizard.horizontal .steps {
    float: left;
    padding-bottom: 9px;
}

    .mobile.wizard.horizontal .steps ul {
        margin: 0px;
    }

        .mobile.wizard.horizontal .steps ul li:not(.last) :before {
            width: 0px;
        }

        .mobile.wizard.horizontal .steps ul li {
            float: left;
            padding-right: 5px;
            position: relative;
            list-style-type: none;
            z-index: 99;
        }

            .mobile.wizard.horizontal .steps ul li a {
                text-decoration: none;
                color: #222;
            }

                .mobile.wizard.horizontal .steps ul li a .title {
                    -webkit-align-items: center;
                    display: flex;
                }

                    .mobile.wizard.horizontal .steps ul li a .title .step-number {
                        width: 30px;
                        height: 30px;
                        -webkit-align-items: center;
                        -webkit-justify-content: center;
                        border-radius: 50%;
                        padding: 4px 8px;
                        background: #CBCBCB;
                        color: #FFFFFF;
                        margin-right: 8px;
                        display: flex;
                    }

            .mobile.wizard.horizontal .steps ul li.done a .title .step-number {
                background: #00B6D0;
                color: #00B6D0;
            }

                .mobile.wizard.horizontal .steps ul li.done a .title .step-number:after {
                    content: '\2714\fe0e';
                    color: #FFFFFF;
                    margin-right: 9px;
                }

            .mobile.wizard.horizontal .steps ul li.current a .title .step-number {
                background: #00B6D0;
            }

.mobile.wizard.horizontal .content .title {
    display: none;
}

.mobile.wizard.horizontal .content .body {
    display: inline-block;
    width: 100%;
}

.mobile.wizard.horizontal .actions {
    float: left;
}

    .mobile.wizard.horizontal .actions ul {
        list-style-type: none;
    }

        .mobile.wizard.horizontal .actions ul li {
            float: left;
        }
/*Element-accordion-table*/
div.table .thead span.table-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: #CBCBCB;
}

div.table .thead span.table-header-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
    color: #363636;
}

div.table .thead div.accordion-down span.lbl::after {
    font-family: "FontAwesome", sans-serif;
    color: #00A5BD;
    content: "\f0dd";
    margin-right: 10px;
    cursor: pointer;
}

div.table .thead div.accordion-right span.lbl::after {
    font-family: "FontAwesome", sans-serif;
    color: #00A5BD;
    content: "\f0da";
    margin-right: 10px;
    cursor: pointer;
}

div.table .tbody span.table-row-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    color: #363636;
}

div.table .thead span,
div.table .tbody span {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    color: #363636;
}

/*Element-accordion*/
.accordion {
    background: transparent;
}

    .accordion .accordion-item {
        border: none;
        background: transparent;
    }

        .accordion .accordion-item .accordion-button {
            box-shadow: none;
            background: transparent;
            font-size: 16px;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0em;
            text-align: left;
            color: #363636;
        }

            .accordion .accordion-item .accordion-button.collapsed::after, .accordion-button::after {
                background: none !important;
            }

            .accordion .accordion-item .accordion-button.collapsed i::before {
                content: "\f078";
            }

            .accordion .accordion-item .accordion-button.collapsed i.icon::before {
                content: "\";
            }

            .accordion .accordion-item .accordion-button.collapsed i {
                margin-bottom: 0px;
            }

            .accordion .accordion-item .accordion-button i::before {
                content: "\f077";
            }

            .accordion .accordion-item .accordion-button i.icon::before {
                content: "\";
            }
/*Element-Dashboard-Card*/

.dashboard-card {
    background-color: #FFFFFF;
    border: 1px solid #D5D5D5;
    border-radius: 8px;
    padding: 20px 16px;
    margin-right: 16px;
    margin-bottom: 16px;
}

    .dashboard-card.selected {
        border: 2px solid #00A5BD;
    }

        .dashboard-card.selected .select-product {
            display: none;
        }

    .dashboard-card label {
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        letter-spacing: 0em;
        text-align: left;
    }

    .dashboard-card:not(.selected) .card-table,
    .dashboard-card:not(.selected) .clear-product,
    .dashboard-card:not(.selected) .cancel-product,
    .dashboard-card:not(.selected) .card-message {
        display: none;
    }

    .dashboard-card .card-table .card-table-header {
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        letter-spacing: 0em;
        color: #363636
    }

    .dashboard-card .card-table .card-table-body {
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0em;
        color: #363636
    }

    .dashboard-card .card-table .card-table-body-memo {
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        letter-spacing: 0em;
        text-align: left;
    }

/*Element-checktag*/
.select-tag {
    width: fit-content;
    border: 2px solid #00A5BD;
    border-radius: 4px;
    color: #00A5BD;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: center;
    cursor: pointer;
}

    .select-tag.selected {
        background: #00A5BD;
        color: #FFFFFF;
    }

        .select-tag.selected::before {
            font-family: "FontAwesome", sans-serif;
            content: "\f00c ";
            padding-right: 5px;
        }

/*Element-carousel*/
.carousel-caption {
    position: initial;
    color: #363636;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0em;
}

.carousel-indicators button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 100%;
    background: #E5E5E5 !important;
    border: none !important;
}

    .carousel-indicators button.active {
        background: #00a5bd !important;
    }

button.carousel-button {
    top: 180px;
    position: absolute;
    border: 2px solid #B2B2B2;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
}

    button.carousel-button i {
        color: #B2B2B2;
    }
/*Element-link*/
a[disabled],
.dropdown-item:disabled {
    color: var(--gray--600) !important;
    cursor: no-drop !important;
    pointer-events: none;
}

a.link {
    cursor: pointer;
    color: #00A5BD;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

a.unset {
    color: unset;
}
/*Element-switch*/
input[type=checkbox].ace.ace-switch + .lbl::before {
    height: 26px;
    width: 40px;
}

input[type=checkbox].ace.ace-switch + .lbl::after {
    width: 20px;
    height: 20px;
    top: 6px;
    left: 3px;
    box-shadow: none;
}

input[type=checkbox].ace.ace-switch:checked + .lbl::before {
    background: #00A5BD;
}

input[type=checkbox].ace.ace-switch:checked + .lbl::after {
    left: 17px;
    background: #FFFFFF;
    color: #00A5BD;
}
/*Element-treeview*/
.tree-label,
.tree .icon-caret {
    font-size: 16px;
}

.tree .tree-branch .tree-branch-header:hover,
.tree .tree-branch.tree-selected > .tree-branch-header,
.tree .tree-item.tree-selected,
.tree .tree-item.tree-selected:hover,
.tree .tree-item:hover {
    background: none;
}

.tree .fa-folder-open::before,
.tree .fa-folder::before {
    content: none;
}

.tree .tree-item.tree-selected > .tree-item-name > .tree-label,
.tree .tree-branch.tree-selected > .icon-caret ~ .tree-branch-header > .tree-branch-name > .tree-label {
    color: #00A5BD;
    font-weight: 700;
}

#station-tree .icon-circle-grey {
    padding: 0px;
}

    #station-tree .icon-circle-grey::before {
        content: none;
    }

.icon-circle-grey {
    background: #7D7D7D;
    border-radius: 100%;
    color: #FFFFFF;
    padding: 1px 0.5px 0.5px 1px;
}

/*Element-notify*/
.notify-red {
    position: absolute;
    right: 14px;
    top: 8px;
    height: 8px;
    width: 8px;
    background: #f24822;
    border-radius: 100%;
}

/*Element-btn*/
.btn-bg-white-dashed-circle,
.btn-bg-white-dashed-circle:hover,
.btn-bg-white-dashed-circle:focus {
    background: #FFFFFF;
    border: 1px dashed #D9D9D9;
    color: #000000D9;
}

.btn-bg-white-circle,
.btn-bg-white-circle:hover,
.btn-bg-white-circle:focus {
    background: #FFFFFF;
    border: 1px solid #00A5BD;
    color: #00A5BD;
}

.btn-bg-white-circle-red,
.btn-bg-white-circle-red:hover,
.btn-bg-white-circle-red:focus {
    background: #FFFFFF;
    border: 1px solid #FF0000;
    color: #FF0000;
}

input[type=search]:focus {
    border-color: #00A5BD !important;
    box-shadow: 0 0 2pt 2pt #30B7CA40 !important;
    -webkit-box-shadow: 0 0 2pt 2pt #30B7CA40 !important;
    margin-right: 2pt;
}

input[type=search]:not(.rounded-start) {
    margin-left: 2pt;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    width: 15px;
    background-image: url( '/images/delete-icon.svg' );
    background-size: 15px 15px;
}


/*Element-sumoselect*/
.SumoSelect {
    width: 100%;
}

    .SumoSelect > .optWrapper.multiple > p.select-all,
    .SumoSelect > .optWrapper.multiple > .options li.opt {
        border: none;
        padding: 8px 0px 8px 35px;
    }

        .SumoSelect > .optWrapper.multiple > p.select-all span i,
        .SumoSelect > .optWrapper.multiple > .options li.opt span i {
            border-radius: 4px;
            font-size: 16px;
            height: 24px;
            line-height: 21px;
            min-width: 24px;
            top: -3px;
        }

        .SumoSelect > .optWrapper.multiple > p.select-all.selected span i,
        .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i {
            background-color: #00A5BD;
            border-color: #00A5BD;
            color: #FFF;
            background-image: none;
            padding-left: 2px;
        }

            .SumoSelect > .optWrapper.multiple > p.select-all.selected span i::before,
            .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i::before {
                border-radius: 4px;
                font-size: 16px;
                height: 24px;
                line-height: 21px;
                min-width: 24px;
                content: '\f00c';
                display: inline-block;
                font-family: "FontAwesome", sans-serif;
                font-weight: 400;
            }

    .SumoSelect .optWrapper .options .opt label {
        margin: 0px;
    }

    .SumoSelect > .CaptionCont {
        height: fit-content;
        border-radius: 4px;
        padding: 0px 8px;
    }

        .SumoSelect > .CaptionCont.View {
            border-color: #E7E7E7;
        }

        .SumoSelect > .CaptionCont > label {
            margin-bottom: 0px;
        }

            .SumoSelect > .CaptionCont > label > i {
                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABdSURBVHgBbc0xCoAwEETRkaQIEqysxcIDWHr/U1h4BLGwErHwLywimoUXSGbISlKPpP8kz5QxIn4Kk5UCx+lhi83DATvW4A926XChQY3Fgur1ZfRVVppxqDDZPXMDvtoK8mpKbA8AAAAASUVORK5CYII=')
            }

        .SumoSelect > .CaptionCont > .chosen-container {
            display: inline-block;
            line-height: 37px;
            background: none !important;
            color: #000000D9;
            opacity: 1;
        }

            .SumoSelect > .CaptionCont > .chosen-container.placeholder {
                color: #00000040;
            }

            .SumoSelect > .CaptionCont > .chosen-container:hover {
                cursor: revert;
            }

        .SumoSelect > .CaptionCont:not(.search-select) > .chosen-container > .select-chip {
            background: #00A5BD;
            border-radius: 4px;
            padding: 0px 8px;
            margin: 4px;
            width: auto;
            float: left;
            display: inline;
            color: #FFFFFF;
        }

            .SumoSelect > .CaptionCont:not(.search-select) > .chosen-container > .select-chip i {
                float: right;
                padding-left: 10px;
                cursor: pointer;
                font-style: normal;
            }

    .SumoSelect.open > .optWrapper {
        top: auto;
    }

/*Element-p*/
p.no-data {
    text-align: center;
    color: #CECCCC;
}

p.ng-alert {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    color: #CE3838;
}

p.ng-warn {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    color: #F68D11;
}

p.intro {
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: 0em;
    text-align: left;
    color: #7D7D7D
}
/*Element-remark*/
.before-remark {
    color: #F4A21A;
}

.edit-remark {
    color: #7D7D7D;
}

textarea.form-control {
    border-radius: 8px !important;
}

    textarea.form-control:disabled {
        background-color: #ECEEF0 !important;
        color: var(--gray-700) !important;
    }

    textarea.form-control.resize {
        height: auto;
        resize: both;
        max-width: inherit;
    }


input[type=number].form-control {
    border-radius: 4px !important;
}

/*Element-spinbox*/

.ace-spinner .input-group[data-unit] .spinbox-input {
    margin-right: -6px;
}

.ace-spinner .input-group[data-unit]::after {
    border: 1px solid #D9D9D9;
    background: #FAFAFA;
    border-radius: 0px 4px 4px 0px;
    display: flex;
    align-items: center;
    content: attr(data-unit);
    position: relative;
    padding: 0px 8px;
}

.ace-spinner .spinbox-buttons {
    left: -15px;
}

    .ace-spinner .spinbox-buttons > button.btn {
        background: none;
    }

        .ace-spinner .spinbox-buttons > button.btn:active {
            background: none;
            border: none;
        }

        .ace-spinner .spinbox-buttons > button.btn.spinbox-up {
            top: 3px;
            border: none;
        }

            .ace-spinner .spinbox-buttons > button.btn.spinbox-up:active {
                top: -1px;
            }

        .ace-spinner .spinbox-buttons > button.btn.spinbox-down {
            top: -3px;
            border: none;
        }

            .ace-spinner .spinbox-buttons > button.btn.spinbox-down:active {
                top: 1px;
            }

        .ace-spinner .spinbox-buttons > button.btn > .ace-icon {
            color: #363636;
        }

            .ace-spinner .spinbox-buttons > button.btn > .ace-icon:active {
                background: none;
            }


/*Element-chosen*/
.chosen-container-multi .chosen-choices {
    border-radius: 4px;
}

.bg-white {
    background: #FFF;
}

.bg-grey {
    background: #F0F2F5;
}

.bg-light-orange {
    background: #FFFBE6;
}

.department-row:not(:last-child) .department-create {
    display: none !important;
}
/*Element-checkbox*/
input[type=checkbox].wellell-checkbox + .lbl::before {
    border-radius: 4px;
    border: 2px solid #D9D9D9;
    background-color: #FFFFFF;
    margin-right: 8px !important;
}

input[type=checkbox].wellell-checkbox:checked + .lbl::before {
    border-color: #00A5BD;
    border: 1px solid #00A5BD;
    background-color: #00A5BD;
    color: #FFFFFF;
}

input[type=checkbox].wellell-checkbox:disabled + .lbl::before {
    border: 2px solid #D9D9D9;
    background-color: #F5F5F5 !important;
    color: #B8B8B8;
}
/*Element-radio*/
input[type=radio].wellell-checkbox:checked + .lbl::before {
    background-color: #FFF;
    border-color: #00A5BD;
    color: #00A5BD;
}

input[type=radio].wellell-checkbox:disabled + .lbl::before {
    background-color: #F5F5F5 !important;
    border-color: #D9D9D9 !important;
    color: #B8B8B8;
}

.cursor-pointer {
    cursor: pointer;
}

    .cursor-pointer[disabled] {
        cursor: no-drop;
    }
.cursor-default {
    cursor: default!important;
}

/*div input*/
div.editor {
    display: inline-flex;
}

    div.editor > i {
        margin: auto;
    }

    div.editor > [contenteditable][placeholder] {
        -moz-appearance: textfield;
        font: -moz-field, sans-serif;
        padding: 2px 5px;
        margin: 5px;
        cursor: text;
    }

        div.editor > [contenteditable][placeholder]:focus {
            outline: none;
        }

        div.editor > [contenteditable][placeholder]:empty:before {
            content: attr(placeholder);
            position: absolute;
            color: #c0c0c4;
            background-color: transparent;
        }

.mobile-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .mobile-body .header-area {
        margin-top: -50px;
        padding-top: 16px
    }

    .mobile-body .body-area {
        flex-grow: 1;
    }

    .mobile-body .footer-area {
        padding: 12px 16px 12px 16px;
    }

.mobile-popup-banner {
    flex-direction: column;
    margin: 0;
    display: flex;
    justify-content: space-between;
    box-shadow: 3px 3px 0px 0px #0000001A;
}

    .mobile-popup-banner .header {
        margin: 10px;
        font-size: 18pt;
        font-weight: bold;
    }

    .mobile-popup-banner .footer {
        width: 100%;
        height: auto;
    }

.mobile-popup-banner-down .footer {
    padding: 0px 0px 0px 0px;
}

.mobile-popup-banner-up .footer {
    padding: 20px 0 0px 0;
}

@media(min-width: 992px) {
    .main-content-inner {
        height: calc(100dvh - 41px);
    }

    .mobile-popup-banner-down {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        position: absolute;
        background-color: white;
        width: 25dvw;
        height: auto;
        overflow-y: auto;
        bottom: 10px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 1051;
    }

    .mobile-popup-banner-up {
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        position: absolute;
        background-color: white;
        width: 25dvw;
        height: auto;
        overflow-y: auto;
        top: 0px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 1051;
    }

    #mobile-popup-scrim {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.513);
        z-index: 1050;
    }

    #reader-container {
        max-width: 1200px;
        margin: auto;
    }

    #reader {
        width: 80%;
        margin: auto;
        padding: 0px;
    }

    .search-bar {
        padding: 16px 8px 16px 8px;
    }

    .package-type {
        width: 60%;
    }

    .package-search-list {
        overflow: auto;
        height: 70dvh;
    }
}

@media(max-width: 992px) {
    .page-content {
        height: 100dvh;
    }

    .no-skin .main-container .main-content {
        position: fixed;
        top: 48px;
        height: calc(100% - 48px);
        min-height: auto;
        border-left: none !important;
        width: 100%;
    }

        .no-skin .main-container .main-content .main-content-inner {
            height: 100%;
        }

            .no-skin .main-container .main-content .main-content-inner .page-content {
                height: calc(100% - var(--bottom-buttons));
            }

    .mobile-popup-banner-down {
        border-radius:0px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        position: absolute;
        width: 100%;
        background-color: white;
        height: auto;
        overflow-y: auto;
        bottom: 0px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 1051;
    }

    .mobile-popup-banner-up {
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        position: absolute;
        width: 100%;
        background-color: white;
        height: auto;
        overflow-y: auto;
        top: 0px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 1051;
    }

    #mobile-popup-scrim {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.513);
        z-index: 1050;
    }

    #reader {
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    #scanner {
        height: calc(100dvh - 240px - var(--bottom-buttons));
    }


    .search-bar {
        width: auto;
        padding: 16px 8px 16px 8px;
        display: flex;
        flex-direction: column;
    }

    .package-type {
        width: 100%;
    }

    .package-search-list {
        overflow: auto;
        height: calc(100dvh - 310px);
    }

    .mp-results {
        top: unset !important;
        bottom: 0 !important;
    }
}

@media(min-width: 992px) {
    .main-content-inner {
        height: 100dvh;
    }
}



.h-0 {
    height: 0;
}

.h-70 {
    height: 70%;
}

.h-80 {
    height: 80%;
}

.h-85 {
    height: 85%;
}

.h-160px {
    height: 160px;
}

.vh-10 {
    height: 10dvh;
}

.vh-25 {
    height: 25dvh;
}

.vh-50 {
    height: 50dvh;
}

.vh-60 {
    height: 60dvh;
}

.vh-70 {
    height: 70dvh;
}

.vh-75 {
    height: 75dvh;
}

.vh-80 {
    height: 80dvh;
}

.vw-25 {
    width: 25dvw;
}

.vw-35 {
    width: 35vw;
}

.vw-40 {
    width: 40dvw;
}

.vw-50 {
    width: 50dvw;
}

.vw-75 {
    width: 75dvw;
}

.max-height-768px {
    max-height: 768px
}

.max-height-50-vh {
    max-height: 50vh;
}

.h7 {
    font-size: 14px !important;
}

.h8 {
    font-size: 12px !important;
}

.border-light-green {
    border-color: #52C41A !important;
}

.border-light-blue {
    border-color: #1E82DF !important;
}

.border-dashed-grey {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='silver' stroke-width='5' stroke-dasharray='10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

.border-dashed-blue {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='darkcyan' stroke-width='5' stroke-dasharray='10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

.row-hover:hover div {
    background-color: #DDF6FB !important;
}

.svg-icon-hover:hover path {
    stroke: #00859C;
}

.svg-icon-hover:hover img {
    filter: invert(51%) sepia(34%) saturate(5787%) hue-rotate(155deg) brightness(94%) contrast(104%) !important;
}

.process-height {
    height: 8px;
}

.custom-container {
    min-width: fit-content;
    width: 100%;
}

    .custom-container .row {
        flex-wrap: nowrap;
    }

    .custom-container .col {
        min-width: 150px;
    }


.border-start-90 {
    position: relative;
}

    .border-start-90::after {
        content: "";
        position: absolute;
        right: 0;
        top: 5%;
        bottom: 5%;
        height: 90%; /* 控制框線的高度 */
        border-left: 1px solid var(--gray--50)
    }

.clear-after::after {
    content: none !important;
}

.remark-icon.have-data:after {
    position: absolute;
    content: '';
    background-color: var(--blue--600);
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    width: 8px;
    height: 8px;
    pointer-events: none;
    margin-left: -6px;
    margin-top: 2px;
}

.remark-icon-order {
    width: 48px;
    height: 48px;
    background-color: var(--primary--50);
    color: var(--primary--600);
    border-radius: 16px;
    align-content: center;
    text-align: center;
    font-size: 24px;
}

.radio-card {
    border: 2px solid var(--gray--300);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    width: 100%;
}

    .radio-card:has(input[type="radio"]:checked) {
        border-color: var(--primary--600);
    }

    .radio-card .radio {
        margin-right: 18px;
        margin-top: 4px;
    }

        .radio-card .radio input[type="radio"] {
            appearance: none;
            outline: none;
            width: 22px;
            height: 22px;
            border: 1px solid var(--primary--600);
            border-radius: 50%;
        }

            .radio-card .radio input[type="radio"]:checked {
                background-color: var(--primary--600);
                box-shadow: inset 0 0 0 4px white; /* 模擬內圓 */
            }

    .radio-card .info {
        flex: 1;
    }