/* BEGIN PAYROLL SETTING CSS*/

@media (pointer: fine) {
    *::-webkit-scrollbar {
        max-width: 5px;
        background-color: unset;
        max-height: 12px;
    }
}

input:focus {
    border: none !important;
    box-shadow: none !important;
}

.payroll-setting-container {
    width: 100%;
}

.payrollsetting-area {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 15px;
}

    .payrollsetting-area .payrollsetting-column {
        height: auto;
    }


.payrollsetting-box {
    width: 100%;
    border: 1px solid #c3b7b7;
    border-radius: 8px;
    height: 100%;
}

    .payrollsetting-box .box-header {
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #c3b7b7;
        font-weight: 700;
        display: flex;
    }

        .payrollsetting-box .box-header .title {
            width: calc(100% - 20px);
        }

        .payrollsetting-box .box-header .btn-edit-adjustment-reason {
            font-size: 16px;
            cursor: pointer;
        }

    .payrollsetting-box .box-body {
        width: 100%;
        padding: 15px;
        font-size: 14px;
    }

.line-payroll-period-setting {
    width: 100%;
    display: flex;
}

    .line-payroll-period-setting .line-title {
        width: 150px;
        font-weight: 600;
        padding-top: 10px;
    }

    .line-payroll-period-setting .line-box {
        width: calc(100% - 150px);
    }

        .line-payroll-period-setting .line-box select {
            color: var(--theme-mode-text);
            outline: none;
            border-radius: 8px;
            height: var(--px-40);
            padding: 0 var(--px-16);
            border: 1px solid #c3b7b7;
            width: -webkit-fill-available;
            background-color: var(--theme-mode-bs-200);
            font-size: 16px;
        }

    .line-payroll-period-setting[type="first-pay-date"] {
        margin-top: 15px;
    }



.payrollsetting-box[type="payroll-period"]:has(div.line-payroll-period-setting[type="period"]:has(option[value=weekly]:selected)) .line-payroll-period-setting[type="first-pay-date"] select[type="weekly"] {
    display: block;
}

.line-payroll-period-setting[type="first-pay-date"] .line-box .first-pay-date-select[type="weekly"] {
    display: block;
}

.line-checkbox-payroll-setting {
    width: 100%;
    display: flex;
    padding: 2px;
}

    .line-checkbox-payroll-setting .status {
        width: 40px;
        display: flex;
    }

    .line-checkbox-payroll-setting .title {
        width: calc(100% - 40px);
        display: flex;
        padding: 5px;
    }

.payrollsetting-box[type="tip-management"] {
    margin-top: 15px;
}

.payrollsetting-box[type="tip-management"],
.payrollsetting-box[type="cashhold-balance"] {
    height: auto;
}

.btn-save-payrollsetting {
    float: right;
    --bs-bg-opacity: 1;
    background-color: var(--bs-dudu-rgb) !important;
    width: var(--px-150);
    color: var(--theme-mode-text-white);
    font: normal normal 600 var(--s-17);
    padding: 8px;
    border-radius: 5px;
    text-align: center;
    margin-top: 10px;
}

.adjustment-reason-area {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 15px;
    margin-top: 10px;
}

    .adjustment-reason-area .adjustment-reason-header {
        grid-column-start: span 4;
        font-size: 20px;
        font-weight: 700;
    }

.edit-adjustment-reason-container {
    width: 100%;
}

    .edit-adjustment-reason-container .line-input-edit-adjustment-reason {
        width: 100%;
        display: flex;
        border-bottom: 1px solid var(--theme-mode-border);
    }

        .edit-adjustment-reason-container .line-input-edit-adjustment-reason:not(:first-child) {
            margin-top: 5px;
        }

        .edit-adjustment-reason-container .line-input-edit-adjustment-reason .remove-reason {
            width: 30px;
            font-size: 28px;
            color: #cf2323;
        }

        .edit-adjustment-reason-container .line-input-edit-adjustment-reason .content-reason {
            width: calc(100% - 30px);
            padding: 5px;
        }

            .edit-adjustment-reason-container .line-input-edit-adjustment-reason .content-reason input {
                width: 100%;
                border: none;
                outline: none;
                padding: 5px 5px 0px 5px;
            }

                .edit-adjustment-reason-container .line-input-edit-adjustment-reason .content-reason input:focus {
                    box-shadow: none !important;
                    border: none !important;
                }

        .edit-adjustment-reason-container .line-input-edit-adjustment-reason:has(input:focus) {
            box-shadow: 0px 1px 10px #5e50f9c9;
            border-bottom: 1px solid var(--bs-blue) !important;
        }

.btn-add-adjustment-reason {
    margin-top: 10px;
    display: flex;
    cursor: pointer;
}

    .btn-add-adjustment-reason .btn-icon {
        font-size: 18px;
    }

    .btn-add-adjustment-reason .btn-title {
        font-size: 16px;
        padding: 2px 0 0 5px;
    }

.semi-month-firstpaydate {
    font: normal normal 500 var(--s-16);
    background-color: var(--theme-mode-bs-200);
    padding: 10px 16px 10px 16px;
    border: 1px solid #c3b7b7;
    border-radius: 8px;
    font-size: 15px;
}

/* END PAYROLL SETTING CSS*/

/* BEGIN RUN PAYOLL CSS*/
.runpayroll-container {
    width: 100%;

}

.period-select-container {
    width: 150px !important;
}

.runpayroll-body {
    width: 100%;
}

    .runpayroll-body .nav-payroll-tabs {
        width: 100%;
        display: flex;
    }

        .runpayroll-body .nav-payroll-tabs .nav-payroll-item {
            width: 200px;
            text-align: center;
            padding: 0px 0 6px 0;
            text-transform: uppercase;
            font-weight: 800;
            cursor: pointer;
        }

            .runpayroll-body .nav-payroll-tabs .nav-payroll-item.active {
                border-bottom: 3px solid var(--bs-blue);
                color: var(--bs-blue);
            }

.nav-content {
    width: 100%;
    margin-top: 30px;
    display: none;
}

    .nav-content.active {
        display: block;
    }

.summary-grid {
    width: 100%;
    height: calc(100vh - 250px);
    overflow: auto;
}

    .summary-grid .summary-header {
        width: 100%;
        display: flex;
        text-transform: uppercase;
        padding: 10px;
        border-bottom: 1px solid var(--theme-mode-border);
        font-weight: 700;
    }

    .summary-grid .summary-column {
        width: 20%;
    }

        .summary-grid .summary-column:not(:first-child) {
            text-align: right;
        }

    .summary-grid .line-summary {
        width: 100%;
        display: flex;
        border-bottom: 1px solid var(--theme-mode-border);
    }

        .summary-grid .line-summary .summary-column {
            padding: 10px;
            font-size: 15px;
        }

            .summary-grid .line-summary .summary-column:first-child {
                font-weight: 600;
            }

.payroll-grid {
    width: 100%;
}

    .payroll-grid .payroll-header {
        width: 100%;
        display: flex;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 15px;
        border-bottom: 1px solid var(--theme-mode-border);
    }

    .payroll-grid .payroll-checkbox {
        width: 40px;
        padding-top: 7px;
    }

    .payroll-grid .payroll-column {
        width: calc((100% - 40px)/9);
        font-size: 15px;
        padding: 12px 2px 12px 2px;
    }

.nav-content[name="commission"] .payroll-grid .payroll-column {
    width: calc((100% - 40px)/9);
}

.nav-content[name="wage"] .payroll-grid .payroll-column {
    width: calc((100% - 40px)/10);
}

.payroll-grid[name="run-payroll"] .payroll-column {
    width: calc(100% / 6);
}

.payroll-grid .payroll-column .main-value {
    width: 100%;
    font-weight: 600;
}

.payroll-grid .payroll-column .sub-value {
    width: 100%;
    font-size: 11px;
    margin-top: 5px;
    display: none;
}

    .payroll-grid .payroll-column .sub-value.active {
        display: block;
    }

    .payroll-grid .payroll-column .sub-value p {
        line-height: 1.5;
    }

.payroll-grid .payroll-column.text {
    text-align: left;
}

.payroll-grid .payroll-column.num {
    text-align: right;
}

.payroll-grid .payroll-header .payroll-column {
    padding: 10px 2px 10px 2px;
}

.payroll-grid .payroll-total-line {
    width: 100%;
    display: flex;
    border-bottom: 1px solid var(--theme-mode-border);
    background-color: #f8f8fb;
    font-weight: 600;
    font-size: 16px;
}

    .payroll-grid .payroll-total-line .payroll-column {
        padding: 20px 2px 20px 2px;
    }

    .payroll-grid .payroll-total-line .payroll-checkbox {
        padding-top: 15px;
    }

.payroll-grid .payroll-list-staff-line {
    width: 100%;
    overflow: auto;
    height: calc(100vh - 380px);
}

.payroll-grid .payroll-list-staff-line.in-popup {
    width: 100%;
    overflow: auto;
    height: unset;
}

    .payroll-grid .payroll-list-staff-line .payroll-staff-line {
        width: 100%;
        display: flex;
        border-bottom: 1px solid var(--theme-mode-border);
    }

.payroll-grid .checkbox-edit-record {
    width: 40px;
    font-size: 22px;
    padding-top: 7px;
    text-align: center;
    cursor: pointer;
}

.nav-content[name="record"] .payroll-grid .payroll-column {
    width: calc((100% - 40px)/8);
}

.payroll-record-subs {
    width: 100%;
    display: none;
}

    .payroll-record-subs.active {
        display: block;
    }

    .payroll-record-subs .payroll-record-sub-line {
        margin-left: calc((100% - 40px)/8);
        cursor: pointer;
    }

        .payroll-record-subs .payroll-record-sub-line .payroll-column:first-child {
            width: calc((100% - 40px)/8*2);
        }

.payroll-popup-overview {
    width: 100%;
    font-size: 15px;
}

.line-payroll-overview {
    width: 100%;
    display: flex;
    border-bottom: 1px solid var(--theme-mode-border);
    padding: 10px 0 10px 0;
    justify-content: space-between;
}

    .line-payroll-overview .overview-title {
        width: auto;
        font-weight: 600;
    }

    .line-payroll-overview .overview-value {
        width: auto;
        text-align: right;
    }

.payroll-popup-header {
    width: 100%;
    font-size: 17px;
    font-weight: 700;
    padding: 8px 0 0px 0;
}

.payroll-popup-detail {
    width: 100%;
    font-size: 15px;
    margin-top: 15px;
}

.payroll-grid[name="commission-popup-detail"] .payroll-column:first-child {
    width: 100px;
}

.payroll-grid[name="commission-popup-detail"] .payroll-column:nth-child(4),
.payroll-grid[name="commission-popup-detail"] .payroll-column:nth-child(2) {
    width: 150px;
}

.payroll-grid[name="commission-popup-detail"] .payroll-column:nth-child(3) {
    width: 250px;
}

.payroll-grid[name="commission-popup-detail"] .payroll-column:last-child {
    width: calc(100% - 500px);
}

.payroll-grid[name="wage-popup-detail"] .payroll-column:first-child {
    width: 150px;
}

.payroll-grid[name="wage-popup-detail"] .payroll-column:nth-child(2) {
    width: 200px;
}

.payroll-grid[name="wage-popup-detail"] .payroll-column:nth-child(3) {
    width: 100px;
}

.payroll-grid[name="wage-popup-detail"] .payroll-column:nth-child(4) {
    width: 150px;
}

.payroll-grid[name="wage-popup-detail"] .payroll-column:last-child {
    width: calc(100% - 500px);
}

.payroll-popup-adjustment {
    width: 100%;
    margin-top: 15px;
    font-size: 15px;
}

.excute-option[name="run-payroll"] .sub-options-container {
    width: 250px;
    left: -100px;
}

.excute-option[name="other-options"] .sub-options-container {
    width: 170px !important;
    left: -75px;
}

.excute-option[name="add-adjustment"] .sub-options-container {
    width: 180px !important;
    left: -50px;
}

}
/* END RUN PAYOLL CSS*/


/* BEGIN ADJUSTMENT CSS*/

.adjustment-body {
    width: 100%;
}

.nav-content[name="adjustment"] {
    display: block;
}

    .nav-content[name="adjustment"] .payroll-column {
        width: calc(100% / 8)
    }

.edit-adjustment-container {
    width: 400px;
    height: auto;
    background-color: #FFF;
    z-index: 100;
}

.line-flex {
    width: 100%;
    display: flex;
    margin-top: 15px;
}

    .line-flex .line-flex-title {
        flex-basis: 25%;
        padding: 8px;
        font-weight: 600;
    }

    .line-flex .line-flex-value {
        width: 75%;
    }

.select-with-search {
    width: 100%;
    position: relative;
}

    .select-with-search .select-info {
        width: 100%;
        display: flex;
        border: 1px solid #857b7b;
        border-radius: 5px;
        font-size: 14px;
    }

        .select-with-search .select-info .select-content {
            width: calc(100% - 40px);
            padding: 10px;
        }

        .select-with-search .select-info .select-icon {
            width: 40px;
            text-align: center;
            padding: 10px;
        }

    .select-with-search .select-option-container {
        width: 100%;
        position: absolute;
        width: 100%;
        height: auto;
        border: 1px solid #857b7b;
        background-color: #FFF;
        margin-top: 3px;
        display: none;
        z-index: 10;
    }

    .select-with-search.active .select-option-container {
        display: block;
    }

    .select-with-search .select-option-container .select-search {
        width: 100%;
        display: flex;
        border-bottom: 1px solid #857b7b;
    }

        .select-with-search .select-option-container .select-search .select-search-icon {
            width: 40px;
            padding: 10px 12px 10px 12px;
        }

        .select-with-search .select-option-container .select-search .select-search-input {
            width: calc(100% - 40px);
        }

            .select-with-search .select-option-container .select-search .select-search-input input {
                width: 100%;
                border: none;
                outline: none;
                padding: 10px;
            }

                .select-with-search .select-option-container .select-search .select-search-input input:focus {
                    border: none !important;
                    box-shadow: none !important;
                }

    .select-with-search .select-option-container .select-option-list {
        width: 100%;
        max-height: 210px;
        overflow: auto;
    }

        .select-with-search .select-option-container .select-option-list .option-select {
            width: 100%;
            display: flex;
            padding: 5px 5px 5px 10px;
            border-bottom: 1px solid var(--theme-mode-border);
        }

            .select-with-search .select-option-container .select-option-list .option-select .select-icon {
                width: 40px;
            }

            .select-with-search .select-option-container .select-option-list .option-select .select-title {
                width: 40px;
                width: calc(100% - 40px);
                padding: 5px;
            }


.select-custom {
    width: 100%;
}

    .select-custom .select-info {
        width: 100%;
        display: flex;
        border: 1px solid #857b7b;
        border-radius: 5px;
        font-size: 14px;
    }

        .select-custom .select-info .select-content {
            width: calc(100% - 40px);
            padding: 10px;
        }

        .select-custom .select-info .select-icon {
            width: 40px;
            text-align: center;
            padding: 10px;
        }

    .select-custom .select-option-container {
        position: absolute;
        width: 63%;
        height: auto;
        border: 1px solid #857b7b;
        background-color: #FFF;
        margin-top: 3px;
        z-index: 10;
        display: none;
    }

        .select-custom .select-option-container .line-custom-option {
            width: 100%;
            padding: 10px;
            border-bottom: 1px solid var(--theme-mode-border);
            font-size: 14px;
        }

    .select-custom.active .select-option-container {
        display: block;
    }

    .select-custom .select-option-container .line-custom-option.add-more {
        display: flex;
    }

        .select-custom .select-option-container .line-custom-option.add-more div:first-child {
            width: 45px;
            font-weight: 700;
        }

        .select-custom .select-option-container .line-custom-option.add-more div:last-child {
            border-bottom: 1px solid #857b7b;
            width: calc(100% - 45px);
        }

            .select-custom .select-option-container .line-custom-option.add-more div:last-child input {
                width: 100%;
                border: none;
            }

.input-with-unit {
    width: 100%;
    display: flex;
    border-radius: 5px;
    border: 1px solid #857b7b;
}

    .input-with-unit .input-unit {
        width: 40px;
        font-size: 23px;
        padding-left: 10px;
        padding-top: 5px;
        border-right: 1px solid var(--theme-mode-border);
    }

    .input-with-unit .input-value {
        width: calc(100% - 40px);
    }

        .input-with-unit .input-value input {
            width: 100%;
            color: var(--theme-mode-text);
            outline: none;
            height: var(--px-40);
            padding: 0 var(--px-16);
            border: none;
            width: calc(100% - 40px);
            font: normal normal 500 var(--s-16);
            background-color: var(--theme-mode-bs-200);
        }

.line-flex[name="period-description"] .line-flex-value {
    font-size: 14px;
    font-style: italic;
}

.apply-for-loan {
    width: 100%;
}

    .apply-for-loan .select-info {
        width: 100%;
        display: flex;
        border: 1px solid #857b7b;
        border-radius: 5px;
        font-size: 14px;
    }

        .apply-for-loan .select-info .select-content {
            width: calc(100% - 40px);
            padding: 10px;
        }

        .apply-for-loan .select-info .select-icon {
            width: 40px;
            text-align: center;
            padding: 10px;
        }

.line-custom-option.deduct-loan {
    font-weight: 700;
}

.show-detail-popup {
    cursor: pointer;
}

.payroll-popup-detail-header {
    width: 100%;
    display: flex;
}

    .payroll-popup-detail-header .staff-name {
        padding-right: 20px;
        font-size: 22px;
    }

    .payroll-popup-detail-header .payroll-period-time {
        padding-left: 20px;
        font-size: 14px;
        border-left: 1px dashed #948888;
        padding-top: 7px;
    }

.payroll-popup-option-header {
    width: auto;
    display: flex;
    margin-right: 20px
}

    .payroll-popup-option-header .option-popup-header {
        font-size: 23px;
        padding: 0px 8px 0 8px;
        cursor: pointer;
    }

.adjustment-list-popup-area {
    width: auto;
}

    .adjustment-list-popup-area .line-item-adjustment {
        width: auto;
        display: flex;
        justify-content: space-between;
    }

        .adjustment-list-popup-area .line-item-adjustment .adjustment-reason {
            width: auto;
            padding: 4px;
        }

        .adjustment-list-popup-area .line-item-adjustment .adjustment-amount {
            width: auto;
            padding: 4px 0 4px 10px;
        }

        .adjustment-list-popup-area .line-item-adjustment.line-total {
            font-weight: 600;
        }

            .adjustment-list-popup-area .line-item-adjustment.line-total .adjustment-reason {
                
            }

        .adjustment-list-popup-area .line-item-adjustment.line-sub {
            font-size:13px;
            padding-left:10px;
        }
.this-period {
    color: var(--bs-blue);
}

.nav-content[name="adjustment"] .payroll-list-staff-line .payroll-column:first-child{
    cursor:pointer;
}

.line-item-adjustment{
    font-size:15px;
}
/* END ADJUSTMENT CSS*/