.header-detail-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.header-detail-wrapper .header-button-title-wrapper,
.header-detail-wrapper .header-button-wrapper{
    display: flex;
}

.header-detail-wrapper .header-button-wrapper button:last-child{
    margin-left: 10px;
}

.header-detail-wrapper .header-button-title-wrapper button{
    border: none;
    background: none;
}
.header-detail-wrapper .header-button-title-wrapper button:hover i{
    color: #3F80FF;
}
.header-detail-wrapper .header-button-title-wrapper button i{
    width: 32px;
}
.header-detail-wrapper .button-detail-default{
    padding: 5px;
    background: #4585D0;
    border: 1px solid #4585D0;
    color: white;
    border-radius: 4px;
}
.containerapproval .approvalitem .text1 {
    font-size: 18px !important;
}
.containerapproval .approvalitem .item1 {
    font-size: 18px !important;
}
.containerapproval{
    padding: 8px;
    overflow: auto;
    background: white;
}
.containerapproval .approvalitem{
    display: flex;
    flex-direction: row;
    padding: 8px;
    gap: 20px;
}
.no-data-text{
    font-family: Mulish;
    font-weight: 500;
    font-size: 18px;
    color: #2F1C6A;
    text-align: center;
}
.approvalitem span{
    font-family: Mulish;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;

}
.approvalitem .number,
.approvalitem .text1{
    font-size: 16px;
    font-weight: 700;
    color: #2F1C6A;
}

.approvalitem .text2{
    font-size: 14px;
    font-weight: 400;
    color: #36344D;
}
.approvalitem .item1,
.approvalitem .item2{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
}
.approvalitem .button{
    margin-left: auto;
}
.approvalitem .button .btn-detail,
.approvalitem .button .btn-approve,
.approvalitem .button .btn-reject{
    width: 117px;
    height: 38px;
    padding: 10px;
    border-radius: 38px;
    border: 1px;
    gap: 2px;
    background: #FFFFFF;
    font-family: Mulish;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    color: #2F1C6A;
    text-align: center;
}
.approvalitem .button .btn-detail{
    border: 1px solid #2F1C6A;
}
.approvalitem .button .btn-approve{
    border: 1px solid #00B151;
    background: #00B151;
    color: #FFFFFF!important;
}
.approvalitem .button .btn-reject{
    border: 1px solid #E80A0A;
    color: #E80A0A;
}
.approvalitem .button img{
    margin-bottom: 3px;
    margin-right: 4px;
}
.column2 .row2 .text,
.column2 .row2 .text2{
    display: flex;
    flex-direction: column;
}
/* Merged: .column2 .row2 .text2 had margin-left: auto; and text-align: right; */
.column2 .row2 .text2{
    margin-left: auto;
    text-align: right;
}
.modaldayoffdetail {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.20), 0px 30px 70px -10px rgba(17, 24, 38, 0.25), 0px 0px 0px 1px rgba(152, 161, 178, 0.10);
}
/* Merged: .modal-dayoffdetail-content2 .tabs-dayoff-right and .tabs-dayoff-right */
/* Note: These selectors have conflicting 'border' and 'width' properties.
   The more specific rule (.modal-dayoffdetail-content2 .tabs-dayoff-right) will apply its properties first,
   but then the less specific rule (.tabs-dayoff-right) will override its 'border' and 'width' due to '!important' on width.
   If specific styling is intended for the modal, consider removing '!important' from the general rule or
   making the general rule less specific than the modal-specific one.
*/
.modal-dayoffdetail-content2 .tabs-dayoff-right {
    border-radius: 14px;
    border: 1px solid #00000033;
    background: #FFFFFF;
    display: flex;
    width: fit-content;
    margin: auto;
    margin-bottom: 30px;
    margin-top: 15px;
    border-bottom: 1px solid #E9EDF5;
}
.tabs-dayoff-right {
    border-radius: 14px;
    border: 1px solid #3F80FF;
    background: #FFFFFF;
    display: flex;
    width: 260px!important;
}

.modal-dayoffdetail-content2 .titleholder span,
.modal-dayoffdetail-content2 .text span{
    margin-left: 0!important;

}
.tabs-dayoff-right .row1 .titleholder{
    display: flex;
    flex-direction: column;
}

.tabs-dayoff-right .row1,
.tabs-dayoff-right .row2{
    padding: 5px; /* Set consistent padding for all rows */
    border-bottom: 1px solid #0000001A;
}

.tabs-dayoff-right .row1 {
    padding-left: 5px; /* Adjusted padding-left */
}
.modal-dayoffdetail-content2 .tabs-dayoff-right .row1{
    flex-direction: row;
    display: flex;
}
.modal-dayoffdetail-content2 .modal-row span {
    display: inline;
    font-weight: bold;
    margin-bottom: 5px;
    justify-content: center;
    font-family: Mulish;
    font-size: 14px;
    color: #36344D;
    font-weight: 400;
}
.modal-dayoffdetail-content2 {
    background: #FFFFFF;
    margin: auto;
    margin-top: 10%;
    border-radius: 12px;
    border: 6px solid #E3E3E3;
    width: 40%;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.20), 0px 30px 70px -10px rgba(17, 24, 38, 0.25), 0px 0px 0px 1px rgba(152, 161, 178, 0.10);
}
.modal-dayoffdetail-content2 .detailcontenttext{
    padding: 20px;
}
.modal-dayoffdetail-content2 .modal-row{
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #E9EDF5;
}

.modal-dayoffdetail-content2 .modal-row-approval{
    font-weight: bold;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #E9EDF5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.modal-dayoffdetail-content2 .column2 .periode,
.modal-dayoffdetail-content2 .column2 .allowance,
.modal-dayoffdetail-content2 .column2 .available{
    margin-left: 0px!important;
}
.modal-row-button {
    margin-bottom: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;

}
/* Merged: .modal-row-button button appears twice */
/* Note: The more specific rule (.modal-dayoffdetail-content2 .modal-row-button button)
   has '!important' on margin-left, which will override the general rule.
   This suggests an intentional override for buttons within the modal context.
*/
.modal-row-button button{
    margin-left: auto;
    border-radius: 20px;
    border: 1px solid #DBDBDB;
    align-content: center;
    background: #FFFFFF;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
.modal-row-button .btn-approve{
    border: 1px solid #00B151!important;
    background: #00B151!important;
    color: #FFFFFF!important;
}
.modal-dayoffdetail-content2 .modal-row-button .btn-reject{
    border: 1px solid #E80A0A!important;
    color: #E80A0A!important;
    margin-left: auto!important;
}
.modal-dayoffdetail-content2 .modal-row-button img{
    margin-bottom: 4px!important;
    margin-right: 5px!important;
}
.modal-dayoffdetail-content2 .modal-row-button button{
    margin-left: 10px!important;
    border-radius: 20px;
    border: 1px solid #DBDBDB;
    align-content: center;
    background: #FFFFFF;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
/* Merged: .modal-dayoff-top-row appears twice, combining properties */
.modal-dayoff-top-row {
    border-bottom: 1px solid #E9EDF5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
/* Merged: .modal-title appears twice */
.modal-title {
    margin: 0;
    font-family: Mulish;
    color: #2F1C6A;
    font-size: 20px;
}
/* Merged: .closeModalDayoff appears twice */
.closeModalDayoff {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.closeModalDayoff:hover,
.closeModalDayoff:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.column2 {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.column2 .row2{
    background: #F1F6FF;;
    flex: 2;

}

.column2 .row2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.column2 .row2 {
    display: flex;
    flex-direction: row;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}
.column2 .row2 > :nth-child(2) {
    margin-left: auto;
    text-align: right;
}
.column2 .row1 span,
.column2 .row2 span{
    font-family: Mulish;
}
.column2 .row1 .periode{
    font-size: 16px;
    font-weight: 700;
    color:#2F1C6A;
}
.column2 .row1 .expired{
    font-size: 12px;
    font-weight: 700;
    color:#E80A0A;
}

.column2 .row2 .date{
    font-size: 14px;
    font-weight: 600;
    color:#2F1C6A;
}
.column2 .row2 .date2{
    font-size: 14px;
    font-weight: 600;
    color:red;
}
.column2 .row2 .title{
    font-size: 14px;
    color:#36344D;
    font-weight: 400;
}
.column2 .total2{
    margin-left: 170px!important;

}
.column2 .total{
    margin-left: 170px!important;

}
.modal-row .column2 .total{
    margin-left: 100px!important;
    display: inline-block!important;
}
.modal-row .column2 .total2{
    margin-left: 100px!important;
    display: inline-block!important;

}
.column2 .row1 .title{
    font-size: 14px;
    color:#2F1C6A;
    font-weight: 800;
}
.column2 .row1 .balance{
    font-size: 14px;
    color:#2F1C6A;
    font-weight: 800;
}
.column2 .row1 .total2{
    font-size: 36px;
    color:#00B151;
    font-weight: 700;
}
.column2 .row1 .total2.red{
    color:#FF0000 !important;
}
.column2 .row1 .days2{
    font-size: 13px;
    color:#00B151;
    font-weight: 700;
}
.column2 .row1 .days2.red{
    color:#FF0000 !important;
}
.column2 .row1 .total{
    font-size: 36px;
    color:#00B151;
    font-weight: 700;
}
.column2 .row1 .total.red{
    color:#FF0000 !important;
}
.column2 .row1 .days{
    font-size: 13px;
    color:#00B151;
    font-weight: 700;
}
.column2 .row1 .days.red{
    color:#FF0000 !important;
}
.column2 .row2 .balance,
.column2 .row2 .balance2{
    font-size: 16px;
    font-weight: 700;
    color:#36344D;
}
.column2 .row2 .balance{
    color: #00B151;
}
.column2 .row2 .balance2{
    color: #2F1C6A;
}
.modal-dayoffdetail-content2 .column2 .periode,
.modal-dayoffdetail-content2 .column2 .allowance,
.modal-dayoffdetail-content2 .column2 .available{
    margin-left: 0px!important;
}
.modal-row-approval span{
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    justify-content: center;
    font-family: Mulish;
    font-size: 14px;
    color: #36344D;
    font-weight: 400;
    margin-left: auto;
}
.modal-row-approval .approval-status {
    display: flex;
    flex-direction: row;

}
.approval-status span{
    word-wrap: break-word;
    max-width: 10ch;
    overflow: hidden;
    display: inline-block;
    text-align: center;
}
.approval-status span:nth-child(1) {
    margin-left: 0!important;
}
.approval-status span:nth-child(n + 2) {
    margin-left: auto;
}
.approvalitems{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.logoapproval {
    display: flex;

}
.logoapproval div {
    position: relative;
    justify-content: center; /* Center the content horizontally within each div */
}
.logoapproval .line {
    margin-top: 16px;
    background-color: #000; /* Adjust color as needed */
    width: 280px; /* 100% width to cover the entire width of the container */
    height: 1px; /* Adjust height as needed */
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.logoapproval .storage:nth-child(1) {
    margin-left: 22px;
}
.logoapproval img {
    display: block;
    margin: 0 auto; /* Center the image horizontally */
}
.modal-dayoffdetail-content2 .detailcontenttext{
    padding: 20px;
}
.modal-row-date {
    display: flex;
    flex-direction: column;
}
.modal-row-date label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.modal-row-date span {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    justify-content: center;
    font-family: Mulish;
    font-size: 14px;
    color: #36344D;
    font-weight: 400;
    margin-left: auto;
}
.modal-row-date .date-input-wrapper {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    border-bottom: 1px solid #E9EDF5;
    margin-bottom: 5px;
    margin-top: 10px;
}
.date-input-wrapper span{
    display: block;
    font-weight: bold;

    justify-content: center;
    font-family: Mulish;
    font-size: 14px;
    color: #36344D;
    font-weight: 400;
    margin-left: auto;
}
.date-input-wrapper label{
    font-family: Mulish;
    font-size: 14px;
    color: #36344D;
    font-weight: 400;
}
.modal-row-date .date-input-wrapper input[type="date"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-sizing: border-box;
}
.modal-row-date .date-input-wrapper:last-child {
    float: right;
    width: 100%;
}
/* Merged: .ModalSuccess appears twice */
.ModalSuccess {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.20), 0px 30px 70px -10px rgba(17, 24, 38, 0.25), 0px 0px 0px 1px rgba(152, 161, 178, 0.10);
}
/* Merged: .modal-ModalSuccess-content appears twice */
.modal-ModalSuccess-content {
    background: #FFFFFF;
    margin: auto;
    margin-top: 10%;
    padding: 10px;
    border-radius: 12px;
    border: 6px solid #E3E3E3;
    width: 30%;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.20), 0px 30px 70px -10px rgba(17, 24, 38, 0.25), 0px 0px 0px 1px rgba(152, 161, 178, 0.10);
}

/* Merged: .ModalSuccess-second-row appears twice */
.ModalSuccess-second-row {
    display: flex;
    text-align: center;
    margin-top: 5px;
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 5px;
    justify-content: center;
    align-items: center;
}
/* Merged: .ModalSuccess-content1 appears twice */
.ModalSuccess-content1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ModalSuccess-content1 .success-img{
    width: 200px;
    height: 200px;
}
/* Merged: .ModalSuccess-content1 p appears twice */
.ModalSuccess-content1 p{
    font-family: Mulish;
    font-size: 16px;
    color: #36344D;
}
.modal-ModalSuccess-content .modal-top-row {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 15px;
    text-align: center;
}
/* Merged: .modal-top-row general properties */
.modal-top-row,
.modal-second-row,
.modal-third-row {
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 10px;
}
.modal-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 480px) {
    .containerapproval .approvalitem{
        display: flex;
        flex-direction: column;
        padding: 8px;
        gap: 20px;
    }
    .approvalitem .button{
       margin-left: 0px!important;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* align-content: center; */
        /* align-self: center; */
    }
    .modal-dayoffdetail-content2 {
        background: #FFFFFF;
        margin: auto;
        margin-top: 10%;
        border-radius: 12px;
        border: 6px solid #E3E3E3;
        width: 80%!important;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.20), 0px 30px 70px -10px rgba(17, 24, 38, 0.25), 0px 0px 0px 1px rgba(152, 161, 178, 0.10);
    }
    .modal-dayoffdetail-content2 .modal-row{
        font-weight: bold;
        gap: 5px;
        display: flex;
        flex-direction: column!important;
        border-bottom: 1px solid #E9EDF5;
    }
}
@media (max-width: 768px) {
    .approvalitem .button{
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* align-content: center; */
        /* align-self: center; */
    }
    .modal-dayoffdetail-content2 {
        background: #FFFFFF;
        margin: auto;
        margin-top: 10%;
        border-radius: 12px;
        border: 6px solid #E3E3E3;
        width: 90%!important;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.20), 0px 30px 70px -10px rgba(17, 24, 38, 0.25), 0px 0px 0px 1px rgba(152, 161, 178, 0.10);
    }
    .modal-dayoffdetail-content2 .modal-row{
        font-weight: bold;
        gap: 5px;
        display: flex;
        flex-direction: column!important;
        border-bottom: 1px solid #E9EDF5;
    }
}
@media (max-width: 1024px) {
    .modal-dayoffdetail-content2 {
        background: #FFFFFF;
        margin: auto;
        margin-top: 10%;
        border-radius: 12px;
        border: 6px solid #E3E3E3;
        width: 80%!important;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.20), 0px 30px 70px -10px rgba(17, 24, 38, 0.25), 0px 0px 0px 1px rgba(152, 161, 178, 0.10);
    }
}