.app-content{
    margin-left:0;
}
.app{
    padding-top:0;
}

input[type="checkbox"]:checked {
    background-color: #FEE4C0;
}

#Table_css table {
    color: black;
    border-style: unset;
    border-width: unset;
    font-size: 12px;
    background-color: #FEE4C0;
}
    table {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
     
    table td {
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        border-left: 1px solid #eee;
    }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgb(225 225 225 / 70%);
    color: var(--bs-table-striped-color)
}

#EmpModal table th {
    background-color: #FEE4C0;
    /*background-color: #1EBCEC;*/
}
/*
#Table_css th:last-child, #table_Leavedetail tr:nth-child(1), #EmpModal th:nth-child(1) {
    border-radius: 10px 0 0 0;
}
#Table_css th:last-child, #table_Leavedetail th:last-child, #EmpModal th:last-child {
    border-radius: 0 10px 0 0;
}
*/
.button-search {
    border: none;
    /*background: #fff;*/
    position: absolute;
    color: #777777;
    /*padding: 5px 8px;*/
    margin: 8.5px 10px;
    border-radius: 3px;
    cursor: pointer;
}
.form-control, .form-select {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.form-control:focus, .form-select:focus {
    box-shadow: 0 3px 5px 0rem rgba(13,110,253,.25) !important;
}
.dataTables_filter, .dataTables_length{
    margin-bottom:16px;
}
.btn-custom {
    background-color: #F3C17B;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.2);
    margin: 5px;
    transition: 0.3s;
}
    .btn-custom:hover {
        background-color: #F6AB41;
    }

td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
}
.group1 {
    width: 47.9%;
    float: left;
    margin-right: 9px;
    margin-left: 2%;
}
.group7 {
    width: 47.9%;
    float: left;
    margin-right: 9px;
    margin-left: 15px;
}
.group-1 {
    width: 47.9%;
    float: left;
    margin-right: 9px;
    margin-left: 0px
}
.group2 {
    width: 47.9%;
    float: left;
}
.group3 {
    width: 96.8%;
    margin-left: 15px;
    float: left;
}
.group4 {
    width: 96.8%;
    float: left;
}
.group-bottom {
    margin-left: 15px;
    width:97.5%;
}
.info-l {
    width: 50%;
    float: left;
}
.info-r {
    width: 50%;
    float: left;
}
.timep {
    width: 80%;
    float: left;
}
.cl {
    width:40px;
}
@media (width=1440px) {
    
    .group1 {
        width: 47%;
        margin-right: 6px;
        margin-left: 3%;
    }
    .group7 {
        width: 47%;
        margin-right: 6px;
        margin-left: 12px;
    }
    .group-1 {
        width: 47%;
        margin-right: 6px;
        margin-left: 15px;
    }

    .group2 {
        width: 45%;
        margin-left: 12px;
    }

    .group3 {
        width: 94.5%;
        margin-left: 15px;
    }

    .group4 {
        width: 94.8%;
        margin-left: 15px;
    }

    .group-bottom {
        margin-left: 15px;
        width: 97.8%;
    }
}

@media (width=1024px){
    .group1 {
        width: 45%;
        margin-right: 5px;
        margin-left: 3%;
       
    }
    .group-1 {
        width: 45%;
        margin-right: 5px;
        margin-left: 15px;
    }
    .group2 {
        width: 44%;
        margin-left: 13px;
        margin-bottom: 4%;
    }
    .group3 {
        width: 94.5%;
        margin-left: 15px;
    }
    .group4 {
        width: 94.5%;
        margin-left: 15px;
    }
    .group-bottom {
        margin-left: 15px;
        width: 97.5%;
    }
    
}

@media (width=768px) {
    
    .group1 {
        width: 45%;
        margin-right: 5px;
        margin-left: 12px;
    }

    .group-1 {
        width: 45%;
        margin-right: 5px;
        margin-left: 15px;
    }

    .group2 {
        width: 45%;
        margin-left: 13px;
        margin-bottom: 4%;
    }

    .group3 {
        width: 95%;
        margin-left: 14px;
    }

    .group4 {
        width: 95%;
        margin-left: 15px;
    }
    .group-bottom {
        margin-left: 14px;
        width: 97.5%;
    }
}

@media (width=425px){
    
    .info-l {
        width:100%;
        float:left
    }
    .info-r {
        width:100%;
        float:left;
    }
    .group1 {
        width: 48.5%;
        margin-left:0;
    }

    .group-1 {
        width: 48.5%;  
    }
    .group2 {
        width: 48.5%;
        margin-left: 0;
    }

    .group3 {
        width: 100%;
        margin-left: 0;
    }
    .group4 {
        width: 100%;     
    }
    .group-bottom {
        margin-left:0;
        width: 100%;
    }

}
.btn-custom-success {
    background-color: #F3C17B;
    color: white;
    border: none;
    padding: 10px;
    width: 20%;
    border-radius: 10px;
    box-shadow: 2px 4px 4px rgba(0,0,0,0.4);
    margin: 5px;
    transition: 0.3s;
}
.btn-custom-danger {
    background-color: #C1C1C1;
    color: white;
    border: none;
    padding: 10px;
    width: 20%;
    border-radius: 10px;
    box-shadow: 2px 4px 4px rgba(0,0,0,0.4);
    margin: 5px;
    transition: 0.3s;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #F3C17B;
    padding: 10px;
    font-size: 16px;
}

@media (min-width:1981px) {
    #img_back {
        height: 50vh;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position-y: -30rem;
        background-position: center;
    }
}
@media (max-width:1980px){
    #img_back {
        height: 50vh;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position-y: -30rem;
        background-position: center;
    }
}
@media (max-width:1440px) {
    #img_back {
        height: 50vh;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position-y: -20rem;
        background-position: center;
    }
}
@media (max-width:1040px) {
    #img_back {
        height: 50vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: -15rem;
        background-position: center;
    }
}
@media (max-width:768px) {
    #img_back {
        height: 60vh;
        background-repeat: no-repeat;
        background-size: cover;
    }  
}

@media (max-width:580px) {
    #img_back {
        height: 40vh;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #TableCompauny {
        width: 375px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    #ListCompauny {
        width: 375px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    #Img_Page {
        position: relative;
        width: 100%;
        top: 0;
    }
}

@media (max-width:375px) {
    #img_back {
        height: 40vh;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #TableCompauny {
        width: 320px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    #ListCompauny {
        width: 325px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    #Img_Page {
        position: relative;
        width: 100%;
        top: 0;
    }
    .btn-custom-danger {
        width: 100px;
    }
    .btn-custom-success {
        width: 100px;
    }
    #Tb_Leave, #Tb_LeaveType {
        font-size: 10px;
    }
    .h4 {
        font-size: 16px;
    }
    
}
@media screen and (max-width: 640px) {
    .dataTables_wrapper .dataTables_length{
        float: none;
        text-align: center;
        display:none;
    }
}

@media (max-width:425px) {

    #Tb_Leave, #Tb_LeaveType {
        font-size: 12px;
    }
    .h4 {
        font-size: 16px;
    }
    
}
/*@media (max-width:425px) {
    #table_Leavedetail td:nth-child(5), #table_Leavedetail td:nth-child(6), #table_Leavedetail td:nth-child(7), #table_Leavedetail td:nth-child(8), #table_Leavedetail td:nth-child(9), #table_Leavedetail td:nth-child(10),
    #table_Leavedetail th:nth-child(5), #table_Leavedetail th:nth-child(6), #table_Leavedetail th:nth-child(7), #table_Leavedetail th:nth-child(8), #table_Leavedetail th:nth-child(9), #table_Leavedetail th:nth-child(10) {
        display: none;
    }
   
    #table_Leavedetail {
        width:100%;
        border-collapse: collapse;
        white-space: nowrap;
        
    }
        #table_Leavedetail tr {
            display: block;
            margin-bottom: 15px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
            border-radius: 8px; 
        }

        #table_Leavedetail td,
        #table_Leavedetail th {
            display: block;
            text-align: left;
            padding: 10px;
            border: none; 
        }

        
        #table_Leavedetail thead {
            display: none;
        }

      
        #table_Leavedetail td {
            background: #f8f9fa; 
            margin-bottom: 10px; 
        }

       
        .table-wrapper {
            overflow-x: auto;
        }
        #table_Leavedetail td {
            background: #f8f9fa; 
            margin-bottom: 10px; 
        }
        #showview {
            width: 40%
        }
        .btn-custom-danger {
            width: 120px;
        }
        .btn-custom-success {
            width: 120px;
        }
        
   */ 

/*@media (max-width:425px){
    #table_Leavedetail td:nth-child(5), #table_Leavedetail td:nth-child(6), #table_Leavedetail td:nth-child(7), #table_Leavedetail td:nth-child(8), #table_Leavedetail td:nth-child(9), #table_Leavedetail td:nth-child(10),
    #table_Leavedetail th:nth-child(5), #table_Leavedetail th:nth-child(6), #table_Leavedetail th:nth-child(7), #table_Leavedetail th:nth-child(8), #table_Leavedetail th:nth-child(9),#table_Leavedetail th:nth-child(10) {
        display: none;     
    }
}
@media (max-width:786px) {
    #table_Leavedetail td:nth-child(5), #table_Leavedetail td:nth-child(6), #table_Leavedetail td:nth-child(7), #table_Leavedetail td:nth-child(8), #table_Leavedetail td:nth-child(9), #table_Leavedetail td:nth-child(10),
    #table_Leavedetail th:nth-child(5), #table_Leavedetail th:nth-child(6), #table_Leavedetail th:nth-child(7), #table_Leavedetail th:nth-child(8), #table_Leavedetail th:nth-child(9), #table_Leavedetail th:nth-child(10) {
        display: none;
    }
}*/
/*
@media (max-width:1024px) {
    #table_Leavedetail td:nth-child(8), #table_Leavedetail td:nth-child(9),
    #table_Leavedetail th:nth-child(8), #table_Leavedetail th:nth-child(9),
     {
        display: none;
    }
}*/

@media (min-width:1024px) {
    #table_Leavedetail td:nth-child(11),
    #table_Leavedetail th:nth-child(11) {
        display: none;
    }
}
.sticky {
    position: sticky;
    right: 0;
    top: 0;
    background-color: #ccc !important;
    z-index: 10;
    padding: 10px;
    
}

.custom-danger1 {
    background-color: #C1C1C1;
    color: white;
    border: none;
    padding: 10px;
/*    width: 20%;*/
    border-radius: 10px;
    box-shadow: 2px 4px 4px rgba(0,0,0,0.4);
    margin: 5px;
    transition: 0.3s;
}
/*@media (max-width:675px) {
    .custom-danger1{
        width:70px !important;
    }
}*/

.email-status-modal-popup {
    border-radius: 20px;
    border: 1px solid #eadfcf;
    box-shadow: 0 20px 50px rgba(38, 24, 9, 0.22);
    padding: 1.25rem 1.25rem 1.1rem;
    background: linear-gradient(160deg, #fffefb 0%, #fff9f1 100%);
    max-width: 560px;
}

.email-status-modal-title {
    font-size: 2rem;
    font-weight: 700;
    color: #3f2d1f;
    margin-bottom: 0.5rem;
}

.email-status-modal {
    text-align: left;
}

.email-status-recipient-card {
    border: 1px solid #efe3d5;
    background: #fff;
    border-radius: 14px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.7rem;
}

.email-status-recipient-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9d7e57;
    margin-bottom: 0.18rem;
}

.email-status-recipient-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2f2520;
    word-break: break-all;
}

.email-status-row {
    margin: 0.35rem 0 0.5rem;
}

.email-status-chip {
    display: inline-block;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.32rem 0.75rem;
    letter-spacing: 0.01em;
}

.status-chip-unknown {
    background: #eceef3;
    color: #50576a;
}

.status-chip-sending {
    background: #e7f1ff;
    color: #0f4fa6;
}

.status-chip-retrying,
.status-chip-cooldown {
    background: #fff2d6;
    color: #8a5a00;
}

.status-chip-failed {
    background: #ffe3e3;
    color: #b11d1d;
}

.status-chip-sent {
    background: #e2f6e8;
    color: #0f7a32;
}

.email-status-detail {
    color: #6a6f80;
    line-height: 1.5;
    margin-bottom: 0.85rem;
    min-height: 24px;
}

.email-status-retry-btn {
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ee8f2a 0%, #d76d12 100%);
    color: #fff;
    font-weight: 700;
    padding: 0.58rem 1rem;
    box-shadow: 0 8px 18px rgba(212, 114, 20, 0.28);
}

.email-status-retry-btn:disabled {
    opacity: 0.65;
    box-shadow: none;
}

.email-status-ok-btn {
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b87d4 0%, #2b6cb5 100%);
    color: #fff;
    font-weight: 700;
    padding: 0.58rem 1.2rem;
    box-shadow: 0 8px 20px rgba(43, 108, 181, 0.28);
}

.email-status-ok-btn:disabled {
    opacity: 0.65;
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .email-status-modal-popup {
        width: calc(100% - 1.25rem);
        margin: 0.625rem;
        padding: 1rem 0.9rem;
    }

    .email-status-modal-title {
        font-size: 1.45rem;
    }

    .email-status-recipient-value {
        font-size: 1rem;
    }
}