#PageRetainerTickets {
    .ant-btn.btn-main-tertiary {
        @include atxs {
            width: 100%;
            height: 40px !important;
        }
    }
    .ant-btn-lg {
        height: 40px !important;
    }
    .btn-add {
        width: 190px;
        background-color: $mainPrimary;
        color: #ffffff;
        border-color: $mainPrimary;

        &:hover,
        &:focus {
            background-color: $mainPrimary;
            color: #ffffff;
            border-color: $mainPrimary;
            box-shadow: none;
        }

        @include atxs {
            width: 100%;
            margin-bottom: 10px;
        }
    }

    .btn-top-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 9px;

        @include atsm {
            margin-top: 10px;
        }

        @include atxs {
            flex-direction: column;
            margin-top: 0px;
        }

        .ant-btn {
            width: calc(90px);
            border-radius: 3px;
            @include atxs {
                width: 100%;
            }
        }
    }

    .btn-priority {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
            line-height: normal;
        }

        &.btn-standard {
            color: #ffffff;
            background-color: $primary !important;
            border-color: $primary !important;
        }
        &.btn-rapid {
            color: #ffffff;
            background-color: $successActive !important;
            border-color: $successActive !important;
        }
        &.btn-fastest {
            color: #ffffff;
            background-color: #993300 !important;
            border-color: #993300 !important;
        }
    }

    .tbl_client_request_questions {
        .title {
            display: flex;
            align-items: center;
            gap: 5px;

            .text {
                &.active {
                    color: $mainPrimary;
                }
            }

            .active-status {
                position: relative;
                height: 22px;

                &::before {
                    content: "•";
                    position: absolute;
                    top: -22px;
                    font-size: 38px;
                    color: #0bb400;
                }
            }
        }
    }

    .row-uncharge {
        background-color: #d8ead2;
    }

    .update-actual-hours {
        background-color: #d8ead2;
    }
    .update-actual-hours:hover {
        background-color: #d8ead2 !important;

        .ant-table-cell-row-hover {
            background-color: #d8ead2 !important;
        }
    }

    .table-pagination-wrapper {
        .ant-pagination {
            .table-pagination {
                @include atsm {
                    justify-content: flex-end !important;
                }
            }
        }
    }

    .retainer-tickets-mobile {
        & .tbl-page-size {
            justify-content: flex-start;
            @include atMin576 {
                justify-content: flex-end;
            }
        }
    }

    .tbl-page-size {
        .ant-select {
            @include atxs {
                // width: 100% !important;
            }
        }

        .ant-select-selector {
            border: none !important;
            @include atxs {
                height: 40px;
                display: flex;
                align-items: center;
            }
        }
    }

    .position-midle {
        display: flex;
        flex-direction: row-reverse;
    }

    // .table-pagination-retainer {
    //     .table-pagination {
    //         // margin-right: -10px !important;
    //     }
    // }

    .pagination-and-support-details {
        display: flex;
        // justify-content: flex-end;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
    }

    .mrtop-0 {
        margin-top: 0px;

        @include atxs {
            margin-top: 4px;
        }
    }

    .display-right {
        display: flex;
        justify-content: flex-end;

        @include atxs {
            justify-content: center;
        }

        .ant-space {
            @include atxs {
                width: 100%;
            }
        }

        .table-showing-entries {
            justify-content: flex-end;
            @include atxs {
                display: flex;
                align-items: center;
            }
        }

        .ant-pagination {
            @include atxs {
                display: flex;
                justify-content: center;
            }

            .ant-pagination-total-text {
                @include atxs {
                    margin-right: 0px !important;
                }
            }

            .ant-pagination-next {
                margin-right: -10px !important;

                @include atxs {
                    margin-right: 0px !important;
                }
            }
        }
    }

    .ant-table-wrapper {
        .ant-table {
            .ant-table-container {
                .ant-table-body {
                    tbody {
                        tr {
                            td {
                                &.ant-table-cell-row-hover {
                                    background: transparent;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .ant-table-wrapper
        .ant-table
        .ant-table-container
        .ant-table-header
        table
        thead.ant-table-thead
        tr
        th.ant-table-cell
        .ant-table-selection
        .ant-checkbox-wrapper:hover
        .ant-checkbox.ant-checkbox-checked
        .ant-checkbox-inner::after,
    .ant-table-wrapper
        .ant-table
        .ant-table-container
        .ant-table-header
        table
        thead.ant-table-thead
        tr
        th.ant-table-cell
        .ant-table-selection
        .ant-checkbox-wrapper.ant-checkbox-wrapper-checked
        .ant-checkbox.ant-checkbox-checked
        .ant-checkbox-inner::after {
        left: 22%;
    }

    .ant-table-wrapper
        .ant-table
        .ant-table-container
        .ant-table-body
        table
        tbody.ant-table-tbody
        tr.ant-table-row
        td.ant-table-cell
        .ant-checkbox-wrapper.ant-checkbox-wrapper-checked
        .ant-checkbox.ant-checkbox-checked
        .ant-checkbox-inner::after {
        left: 22%;
    }

    .page-system-settings.tab-retainer-individual {
        .ant-tabs-content-holder {
            .ant-tabs-content {
                .ant-tabs-tabpane {
                    .remaining_hours__wrapper {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: 47px;
                    }
                }
            }
        }
    }
}

.courtesy-no-charge {
    font-weight: 800 !important;
}

.modal-form-client-project {
    .ant-modal {
        width: 550px !important;

        .ant-modal-content {
            // .ant-modal-close {
            //     width: auto;
            //     height: auto;
            //     padding: 0px;
            //     top: -10px;
            //     right: -10px;

            //     .ant-modal-close-x {
            //         width: 20px;
            //         height: 20px;
            //         line-height: normal;
            //         padding: 5px;
            //         background: var(--yellow);
            //         border-radius: 50%;
            //         color: #fff;
            //         display: flex;
            //         align-items: center;
            //         justify-content: center;
            //         font-size: 12px;
            //     }
            // }

            // .ant-modal-header {
            //     background-color: transparent !important;
            //     text-align: center;
            //     border: 0px;

            //     .ant-modal-title {
            //         color: #000000 !important;
            //         font-weight: 600;
            //         font-size: 22px;
            //         line-height: normal;
            //     }
            // }

            .ant-modal-body {
                .ant-radio-group {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;

                    .ant-radio-wrapper {
                        > .ant-radio {
                            > .ant-radio-inner {
                                border-color: #5e5e5e;
                            }
                        }

                        &.ant-radio-wrapper-checked {
                            > .ant-radio {
                                &.ant-radio-checked {
                                    > .ant-radio-inner {
                                        border-color: #8c53fb;
                                        &::after {
                                            background-color: #ffffff;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .ant-space {
                        width: 100%;
                        gap: 0px !important;

                        .ant-space-item {
                            .horizontal {
                                display: flex;

                                > .ant-radio-wrapper {
                                    width: 50%;
                                    margin-right: 0px;
                                }
                            }

                            .ant-divider {
                                &::before,
                                &::after {
                                    border-top: 1px solid #8c53fb;
                                }

                                .ant-divider-inner-text {
                                    color: #545454;
                                }
                            }

                            .general-note {
                                font-size: 12px;
                                color: #808285;
                            }
                        }
                    }
                }

                .timer-wrapper {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 12px;

                    .ant-btn {
                        width: auto;
                        height: auto;
                        padding: 0px;
                        line-height: normal;

                        svg {
                            font-size: 32px;
                            color: #057900;
                            cursor: pointer;
                        }
                    }

                    .btn-play {
                        &.is_loading {
                            svg {
                                color: #545454;
                            }
                        }
                    }

                    .timer {
                        display: flex;
                        line-height: 38px;
                        gap: 3px;

                        > div {
                            font-size: 38px;
                            line-height: 38px;
                        }
                    }
                }
            }
        }
    }
}

.add-retainer-hours-modal {
    .ant-card .ant-card-head {
        min-height: auto;
    }
    & .ant-card-head-title {
        font-size: 16px;

        padding: 9px 0;
    }

    & .ant-table {
        & thead.ant-table-thead tr th {
            font-weight: 600;
        }
    }
}

.ant-popover {
    &.ant-popconfirm {
        &.popconfirm_retainer_charge_status {
            .ant-popover-content {
                .ant-popover-inner {
                    .ant-popover-inner-content {
                        .ant-popover-message {
                            .ant-popover-message-title {
                                position: relative;
                                height: 125px;

                                .btn-group-wrapper {
                                    margin-top: 10px;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;
                                    position: absolute;
                                    width: 100%;
                                    left: -12px;

                                    .confirm-wrapper {
                                        display: flex;
                                        justify-content: center;
                                        gap: 8px;
                                    }

                                    .ant-btn {
                                        color: #fff;
                                        height: 24px;
                                        padding: 0px 7px;
                                        font-size: 14px;
                                        border-radius: 2px;

                                        &.btn-confirm {
                                            background-color: $mainPrimary;
                                            border-color: $mainPrimary;
                                        }

                                        &.btn-cancel {
                                            color: $mainPrimary;
                                            border-color: $mainPrimary;
                                        }

                                        &.btn-edit-hours {
                                            background-color: $mainPrimary;
                                            border-color: $mainPrimary;
                                        }
                                    }

                                    .ant-divider {
                                        margin: 0px;
                                        color: #ffffff;

                                        &::before,
                                        &::after {
                                            border-top: 0px;
                                        }
                                    }
                                }
                            }
                        }
                        .ant-popover-buttons {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

.add-retainer-hours-card {
    .ant-card-body {
        .ant-form-item {
            margin-bottom: 0px;
        }

        .mb-24 {
            margin-bottom: 24px;

            .ant-form-item-explain-error {
                margin-bottom: -20px !important;
            }
        }

        .mb-custom {
            .ant-form-item-explain-error {
                margin-bottom: 0px !important;
            }
        }
    }
}

.add-retainer-hours-collapse {
    border: 1px solid #d9d9d9 !important;
    border-radius: 5px !important;

    .ant-form-item {
        margin-bottom: 0px;
    }

    .mb-24 {
        margin-bottom: 24px;
    }

    .ant-collapse-header {
        background: #f1f3f2;
        height: 43.14px;
        padding: 8px 24px !important;

        .ant-collapse-header-text {
            font-size: 16px;
            font-weight: 600;
            color: #4c4e4d;
        }
    }

    .ant-collapse-content {
        border: 0px !important;
        padding: 0px !important;

        .ant-collapse-content-box {
            padding: 24px 24px 0 24px !important;
        }
    }
}