body {
    overflow-x: hidden;
}

#checkout-service-datetime-modal {
    color: black;

}

#service-type {
    position: relative;
    width: 100%;
    padding: 10px 0 10px 0;
    display: flex;
    justify-content: space-between;
}

.modal-title {
    font-size: 18px;
}

.modal-body {
    padding-bottom: 30px;
}


.tab {
    width: 100%;
    height: 10%;
    text-align: center;
    padding: 2%;
    cursor: pointer;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    font-size: 14pt;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.under-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 5px;
    border-bottom: 3px solid #e5bcc2;
    /* Apply the border color to active tab */
    transition: all .3s ease-in-out;
}

@keyframes moving {
    from {
        transform: translateX(50px);
        opacity: 0
    }

    to {
        transform: translateX(50px);
        opacity: 1
    }
}

.tab::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    /* Initial width */
    height: 3px;
    /* Border thickness */
    background-color: #e5bcc2;
    transition: width 0.3s ease, transform 0.3s ease;
    /* Transition for sliding and width change */
    transform: translateX(-100%);
    /* Initial position outside the tab */
}

.tab.active {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}


.tag:active~.under-line {
    width: 0;
    /* Reset width */
    left: 0;
    /* Reset position */
    transition: none;
    /* Disable transition */
}


.tab.active::before {
    width: 100%;
    /* Expand the border width to 100% */
    transform: all .10s ease 0;
    /* Slide the border inside the tab */
}

.service-body {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.service-body table td,
.service-body table th {
    padding: 5px 10px;
}

.service-body table th {
    border-bottom: #e5bcc2 solid 1px;
}

.service-body .select2 {
    margin-top: 10px;

}

.service-body label {
    margin-left: 5px;
}

.edit_schedule {
    background-color: #d597a2;
    color: white;
    font-weight: 600;
    margin-top: 94px;
}

.orange.add_address,
#submit_payment.orange{
    font-weight: 600;
}

#checkout-service-datetime-modal .modal-content {
    max-width: 50%;
    max-height: 70%;
    height: 70%;
    width: 50%;
    overflow-y: auto;
    overflow-x: hidden;
}

#checkout-service-datetime-modal .modal-body {
    height: 80%;
    overflow-y: hidden;
}


#service-body-container {
    height: 95%;
    max-height: 100%;
    padding-bottom: 2%;
}

.service_button {
    position: relative;
    padding-bottom: 5%;
}



#checkout-service-datetime-modal .button {
    font-size: 12px;
    padding: 0;
    margin: 2px;
    width: 100px;
    float: right;
}


#checkout-service-datetime-modal table {
    width: 100%;
}

/* width */
#service-body-container::-webkit-scrollbar {
    width: 10px;
}

/* Track */
#service-body-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
#service-body-container::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
#service-body-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.table-container {
    width: 100%;
    overflow-x: auto;
}

@media only screen and (max-width: 920px) {
    #checkout-service-datetime-modal .modal-content {
        max-height: 75%;
        height: 75%;
        max-width: 80%;
        width: 80%;
    }

    #service-body-container {
        height: 90%;
        max-height: 100%;
        overflow-y: auto;
    }

    .modal-title {
        font-size: 12pt;    
    }

    .tab {
        height: 10%;
        padding: 2%;
        font-size: 11pt;
    }
}

@media only screen and (max-width: 720px) {
    #checkout-service-datetime-modal .modal-content {
        max-height: 60%;
        height: 60%;
        max-width: 95%;
        width: 95%;
    }
    .modal-title{
        font-size: 10pt;
    }

    #service-type {
        padding: 0 ;
        font-size: 10pt;
    }
    #checkout-service-datetime-modal .modal-body {
        max-height: 70%;
        height: 70%;
        max-width: 100%;
        width: 100%;
    }

    .service-body {
        font-size: 12px;
    }

    #checkout-service-datetime-modal table {
        width: 125%;
        margin: 10px;
        font-size: 8pt;
    }

    .service-body input {
        font-size: 12px;
        padding-right: 3px;
        padding-left: 3px;
    }
}

@media only screen and (max-width: 320px) {

    #checkout-service-datetime-modal .modal-body {
        max-height: 75%;
        height: 75%;
        max-width: 100%;
        width: 100%;
    }


    .modal-title {
        font-size: 12px;
    }

    .tab {
        width: 100%;
        height: 10%;
        padding: 2%;
        font-size: 10pt;
    }

    .service-body table td,
    .service-body table th {
        padding: 2px 5px;
    }

    .service-body table th {
        border-bottom: #e5bcc2 solid 1px;
    }

    .service-body .select2 {
        margin-top: 5px;
    }

}