:root {
    --primary-color: 0, 65, 111;
    --secondary-color: 13, 115, 183;
    --success-color: 8, 146, 165;
    --danger-color: 230, 0, 0;
    --info-color: 64, 64, 64;
    --warning-color: 224, 122, 7;
    --table-header--bg-color: 76, 93, 104;
    --page-header--bg-color: 81, 140, 163;
    --popup-header--bg-color: 81, 140, 163;
    --mute-color: 230, 230, 230;
    --disable-color: 136, 136, 136;
    --input-border--color: var(--mute-color);
    --gray-color: 215, 215, 215;
    --dark-color: 107, 107, 107;
    --light-color: var(--mute-color);
    --text-color: 51, 51, 51;
}

.main-container {
}
    .modal-popup a,
    .main-container a {
        text-decoration: none;
        color: rgb(var(--primary-color));
        cursor: pointer;
    }
        .modal-popup a:hover,
        .main-container a:hover {
            text-decoration: underline;
        }

        .modal-popup a:active,
        .modal-popup a:visited,
        .main-container a:active,
        .main-container a:visited {
            text-decoration: none;
            color: rgb(var(--primary-color));
            cursor: pointer;
        }

    .modal-popup label,
    .main-container label {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        display: block;
        padding: 5px 0px 5px 0px;
        cursor: pointer;
    }


.hr {
    display: block;
    border-top: thin solid rgb(var(--mute-color));
    border-bottom: none;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: -1px;
}

.input {
    border: thin solid rgb(var(--input-border--color));
    padding: 5px;
    display: block;
    width: 100%;
}

.button {
    padding: 6px 5px;
    border: none !important;
    cursor: pointer;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button-ori {
    background-color: rgb(var(--primary-color));
    text-align: center;
    vertical-align: middle;
    color: white;
}

    .button-ori:hover {
        background-color: rgba(var(--primary-color), 0.75);
    }

.button-primary {
    background-color: rgb(var(--primary-color));
}

    .button-primary:hover {
        background-color: rgba(var(--primary-color), 0.75);
    }

.button-success {
    background-color: rgb(var(--success-color));
}

    .button-success:hover {
        background-color: rgba(var(--success-color), 0.75);
    }

.button-danger {
    background-color: rgb(var(--danger-color));
}

    .button-danger:hover {
        background-color: rgba(var(--danger-color), 0.75);
    }

.div-container {
    border: thin solid rgb(var(--dark-color));
    background-color: white !important;
    height: 100%;
    overflow-y: auto;
}

.table-detail,
.table-search {
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
    border: none;
}

    .table-detail td,
    .table-detail th,
    .table-search td,
    .table-search th {
        padding: 5px;
        text-align: left;
    }

    .table-detail .td-title {
        width: 160px;
    }

    .table-search .td-title {
        width: 120px;
    }

    .table-detail tr td:not(:first-child).td-title,
    .table-search tr td:not(:first-child).td-title {
    }

    .table-search .td-input {
        width: 280px;
    }

    .table-detail .td-input {
        width: 200px;
    }

    .table-detail .input,
    .table-search .input {
        width: calc(100% - 30px);
    }

.table-grid {
    width: 100%;
}

    .table-grid th,
    .table-grid td {
        padding: 5px;
    }

        .table-grid th .input,
        .table-grid td .input {
            max-width: calc(100% - 12px) !important;
        }

    .table-grid .button{
        font-size: 12px !important;
    }

    .breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        list-style: none;
        padding: 0px;
        margin: 0px;
        padding-left: 10px;
        background-color: white;
    }

    .breadcrumb li {
        position: relative;
        display: block;
    }

        .breadcrumb li > span,
        .breadcrumb li > a {
            display: block;
            padding: 15px 10px 15px 10px;
            text-decoration: none;
        }

    .breadcrumb span {
        color: var(--disable-color);
    }

    .breadcrumb .home {
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

        .breadcrumb .home .icon {
            width: 20px;
            height: 20px;
        }

            .breadcrumb .home .icon svg,
            .breadcrumb .home .icon img {
                max-height: 20px;
                max-width: 20px;
                opacity: 0.75;
            }

    .breadcrumb > *:not(:last-child)::after {
        position: absolute;
        content: "/";
        width: 10px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(var(--mute-color));
        top: 0px;
        left: calc(100% - 5px);
    }

.table-header,
.popup-header {
    padding: 10px;
    font-weight: bold;
    color: white;
    text-align: left;
}


.page-header span,
.page-header strong {
    font-size: 18px !important;
    text-align: left;
}

.table-header {
    background-color: rgb(var(--table-header--bg-color));
}

.popup-header {
    background-color: rgb(var(--table-header--bg-color));
}

.text-white {
    color: white;
}

.text-bold {
    font-weight: bold;
}

.text-danger {
    color: rgb(var(--danger-color));
}

.text-uppercase {
    text-transform: uppercase;
}

.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}

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

.bg-white {
    background-color: white;
}

.bg-light {
    background-color: rgb(var(--light-color));
}

.padding--5px {
    padding: 5px;
}

.padding--10px {
    padding: 10px;
}

.padding--20px {
    padding: 20px;
}

.padding-top--20px {
    padding-top: 20px;
}

.padding-x--5px {
    padding-left: 5px;
    padding-right: 5px;
}

.padding-y--5px {
    padding-top: 5px;
    padding-bottom: 5px;
}

.padding-x--10px {
    padding-left: 10px;
    padding-right: 10px;
}

.padding-y--10px {
    padding-top: 10px;
    padding-bottom: 10px;
}

.display-flex--h {
    display: flex;
}

.display-none{
    display: none;
}

.flex-gap--5px {
    gap: 5px;
}

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

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

.flex-gap--10px {
    gap: 10px;
}

.flex-grow--1 {
    flex-grow: 1;
}

.radius-5px {
    border-radius: 5px;
}

.cursor-pointer {
    cursor: pointer;
}

.width-full {
    width: 100%;
}

.width-full--minus-20px{
    width: calc(100% - 20px) !important;
}

.width-full--minus-30px {
    width: calc(100% - 30px) !important;
}

.width-full--minus-40px {
    width: calc(100% - 40px) !important;
}

.position-absolute{
    position: absolute;
}

.postion-relative{
    position: relative;
}

.modal-popup {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    /*z-index: 1080;*/
    display: none;
    justify-content: center;
    align-items: center;
}

    .modal-popup .modal-container {
        background-color: white;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        border-radius: 5px;
    }

    .modal-popup .modal-content {
        max-height: 70vh;
        max-width: 70vw;
        overflow-y: auto;
    }

    .modal-popup .modal-header {
        font-weight: bold;
        color: white;
        text-align: left;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

        .modal-popup .modal-header strong {
            font-size: 16px !important;
        }

    .modal-popup .modal-section {
        padding: 15px;
    }

    .modal-popup .modal-footer {
        padding: 15px;
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 5px;
        border-top: thin solid rgb(var(--mute-color));
    }

    .modal-popup .modal-container .button-close {
        position: absolute;
        border: none;
        background-color: transparent !important;
        color: rgb(var(--mute-color));
        display: flex;
        align-content: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 5px;
        font-size: 30px;
        right: 10px;
        top: 3px;
        cursor: pointer;
    }

        .modal-popup .modal-container .button-close:hover {
            color: white;
            background-color: rgb(var(--danger-color));
        }

/* Special Class */
#modal-order .modal-container {
    max-width: calc(15px + 160px + 200px + 160px + 200px + 160px + 200px + 15px) !important;
}

#modal-order .table-grid {
    max-width: calc(160px + 200px + 160px + 200px + 160px + 200px - 30px) !important;
    margin-left: auto;
    margin-right: auto;
}

    #modal-order .table-grid .idx {
        width: 10px;
    }

    #modal-order .table-grid .product-name {
        width: auto;
    }

    #modal-order .table-grid .remark {
        width: 260px;
    }

    #modal-order .table-grid .before-tax-amount {
        width: 100px;
    }

    #modal-order .table-grid .after-tax-amount {
        width: 100px;
    }

    #modal-order .table-grid .tax-amount {
        width: 100px;
    }

/* Special Class */
#modal-order-edit .modal-container {
    max-width: calc(15px + 160px + 280px + 15px) !important;
}

#modal-order-edit .table-detail .td-input {
    width: 280px !important;
}