@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css';

/* /Components/ActionIconBar.razor.rz.scp.css */
.outer-icon[b-pucjivzra5] {
    /*background-color: #fff;*/
   /* border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 15px;
    margin-bottom: 20px;*/
    transition: all 0.3s ease;
    width:55%;
    position:absolute;
    bottom:4vh;
    
}

/*.outer-icon:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}*/
  /*  .first-icon:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }
*/
.icon-pos[b-pucjivzra5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
/*    gap: 15px;*/
}

.first-icon[b-pucjivzra5] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    padding: 12px 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    background-color: #f0f0f0;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

    .first-icon:hover[b-pucjivzra5] {
        background-color: #ececeb;
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.first-icon i[b-pucjivzra5] {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: #333;
    transition: all 0.2s ease;
}

.first-icon:hover i[b-pucjivzra5] {
    color: #000;
    transform: scale(1.15);
}

.first-icon label[b-pucjivzra5] {
    font-size: 12px;
    font-weight: 500;
    color: #555;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: center;
}

.first-icon:hover label[b-pucjivzra5] {
    color: #000;
}

@media (max-width:1700px) {
    .first-icon i[b-pucjivzra5] {
        font-size: 2rem;
        margin-bottom: 8px;
        color: #333;
        transition: all 0.2s ease;
    }
    .first-icon label[b-pucjivzra5]{
        font-size:14px;
    }
    .first-icon[b-pucjivzra5]{
        padding:15px 30px;
    }
}
@media (max-width:1400px) {
    .first-icon i[b-pucjivzra5] {
        font-size: 1.8rem;
        margin-bottom: 8px;
        color: #333;
        transition: all 0.2s ease;
    }
}
@media (max-width:1200px){
    .first-icon i[b-pucjivzra5] {
        font-size: 1.5rem;
        margin-bottom: 8px;
        color: #333;
        transition: all 0.2s ease;
    }

}
@media (max-width:1080px) {
.first-icon i[b-pucjivzra5]{
    font-size:1.2rem;
}
.first-icon[b-pucjivzra5]{
    padding:10px;
}
}
    /* Responsive styles */
    @media (max-width: 768px) {
        .icon-pos[b-pucjivzra5] {
            gap: 10px;
        }

        .first-icon[b-pucjivzra5] {
            min-width: 70px;
            padding: 10px 8px;
        }

            .first-icon i[b-pucjivzra5] {
                font-size: 1.2rem;
            }

            .first-icon label[b-pucjivzra5] {
                font-size: 11px;
            }
    }

    @media (max-width: 576px) {
        .icon-pos[b-pucjivzra5] {
            gap: 8px;
        }

        .first-icon[b-pucjivzra5] {
            min-width: 60px;
            padding: 8px 6px;
        }

            .first-icon i[b-pucjivzra5] {
                font-size: 1.1rem;
                margin-bottom: 6px;
            }

            .first-icon label[b-pucjivzra5] {
                font-size: 10px;
            }
    }
/* /Components/AppointmentCard.razor.rz.scp.css */
.appointment-detail[b-1twinnltj2] {
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

    .appointment-detail:hover[b-1twinnltj2] {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

.card-title[b-1twinnltj2] {
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
}

    .card-title h5[b-1twinnltj2] {
        margin-bottom: 0;
        font-size: 18px;
        font-weight: 500;
        margin-bottom:0.4rem;
    }
        .card-title h5[b-1twinnltj2]::first-letter, .card-title h6[b-1twinnltj2]::first-letter {
            text-transform: uppercase;
        }
        .card-subtitle[b-1twinnltj2] {
            font-size: 16px;
            font-weight: 500;
        }

.bookbtn[b-1twinnltj2] {
    font-size: 16px;
    font-weight: 500;
    border: none;
    padding: 5px;
    background-color: #383838;
    color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    border: none;
    width: 100%;
}
    .bookbtn:hover[b-1twinnltj2] {
        background-color: #030303;
    }
.product-container[b-1twinnltj2] {
    height: 60vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.image[b-1twinnltj2] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
    /*    margin-bottom: 3%;
    margin-right: 2%;*/
    padding: 10px;
}

    .image:hover[b-1twinnltj2] {
    }

.card-btn[b-1twinnltj2] {
    display: flex;
    justify-content: center;
}

    .card-btn:hover[b-1twinnltj2] {
        opacity: 0.8;
    }

.card-head[b-1twinnltj2], .card-foot[b-1twinnltj2] {
    background-color: #F8F8F8;
    padding: 10px;
    border-radius:10px;
}

.card-body[b-1twinnltj2] {
    padding: 5px 10px;
}
.card-title-icon[b-1twinnltj2]{
    display:flex;
    align-items:center;
}
tbody th[b-1twinnltj2]{
    font-size:16px;
    font-weight:500;
}
tbody td[b-1twinnltj2] {
    font-size: 16px;
    font-weight: 500;
}
@media only screen and (max-width:1700px) {
    .card-title h5[b-1twinnltj2] {
        font-size: 20px;
    }

    .card-subtitle[b-1twinnltj2] {
        font-size: 18px;
        font-weight: 500;
    }

    tbody th[b-1twinnltj2] {
        font-size: 18px;
        font-weight: 500;
    }

    tbody td[b-1twinnltj2] {
        font-size: 18px;
        font-weight: 500;
    }

    .bookbtn[b-1twinnltj2], .bookbtn i[b-1twinnltj2] {
        font-size: 18px;
    }
}
    @media only screen and (max-width:1440px) {
        .card-title h5[b-1twinnltj2] {
            font-size: 18px;
        }

        .card-subtitle[b-1twinnltj2] {
            font-size: 16px;
            font-weight: 500;
        }

        tbody th[b-1twinnltj2] {
            font-size: 16px;
            font-weight: 500;
        }

        tbody td[b-1twinnltj2] {
            font-size: 16px;
            font-weight: 500;
        }

        .bookbtn[b-1twinnltj2], .bookbtn i[b-1twinnltj2] {
            font-size: 16px;
        }
    }

    @media only screen and (max-width:1200px) {
        .card-title h5[b-1twinnltj2] {
            font-size: 16px;
        }

        .card-subtitle[b-1twinnltj2] {
            font-size: 14px;
            font-weight: 500;
        }

        tbody th[b-1twinnltj2] {
            font-size: 14px;
        }

        tbody td[b-1twinnltj2] {
            font-size: 14px;
        }

        .bookbtn[b-1twinnltj2], .bookbtn i[b-1twinnltj2] {
            font-size: 14px;
        }
    }

    @media only screen and (max-width:1080px) {
        .card-title h5[b-1twinnltj2] {
            font-size: 14px;
        }

        .card-subtitle[b-1twinnltj2] {
            font-size: 13px;
            font-weight: 500;
        }

        tbody th[b-1twinnltj2] {
            font-size: 13px;
        }

        tbody td[b-1twinnltj2] {
            font-size: 13px;
        }

        .bookbtn[b-1twinnltj2], .bookbtn i[b-1twinnltj2] {
            font-size: 13px;
        }
    }
/* /Components/ArtistSelector.razor.rz.scp.css */
.artist-search-container[b-9bn884rbno] {
    position: relative;
    width: 100%;
    /*margin-bottom: 0.5rem;*/
}

.search-input-wrapper[b-9bn884rbno] {
    position: relative;
}

.search-input[b-9bn884rbno] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
}

.search-icon[b-9bn884rbno] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.clear-icon[b-9bn884rbno] {
    position: absolute;
    right: 10px;
    color: #666;
    cursor: pointer;
    padding: 4px;
}

.clear-icon:hover[b-9bn884rbno] {
    color: #333;
}

.search-results[b-9bn884rbno] {
    position: absolute;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color:#000;
    text-align:start;
}

.search-result-item[b-9bn884rbno] {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.search-result-item:last-child[b-9bn884rbno] {
    border-bottom: none;
}

.search-result-item:hover[b-9bn884rbno] {
    background-color: #f5f5f5;
}

.search-result-item.selected[b-9bn884rbno] {
    background-color: #e0e0e0;
}

.artist-name[b-9bn884rbno] {
    font-weight: 500;
}

.no-results[b-9bn884rbno] {
    padding: 10px 15px;
    color: #888;
    text-align: center;
}

/* Custom scrollbar for the dropdown */
.search-results[b-9bn884rbno]::-webkit-scrollbar {
    width: 6px;
}

.search-results[b-9bn884rbno]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.search-results[b-9bn884rbno]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.search-results[b-9bn884rbno]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

@media only screen and (max-width:1700px) {
    .search-input[b-9bn884rbno] {
        font-size: 16px;
    }
}

@media only screen and (max-width:1440px) {
    .search-input[b-9bn884rbno] {
        font-size: 14px;
    }
}

@media only screen and (max-width:1200px) {
    .search-input[b-9bn884rbno] {
        font-size: 13px;
    }
}

@media only screen and (max-width:1080px) {
    .search-input[b-9bn884rbno] {
        font-size: 12px;
    }
}
/* /Components/CustomerSearch.razor.rz.scp.css */
.customer-search-container[b-7ouboyocmn] {
    position: relative;
    width: 100%;
   /* margin-bottom: 0.5rem;*/
}

.search-section[b-7ouboyocmn] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-input-wrapper[b-7ouboyocmn] {
    position: relative;
    flex: 1;
}

.search-input[b-7ouboyocmn] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
}

.search-icon[b-7ouboyocmn] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.add-customer-btn[b-7ouboyocmn] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .add-customer-btn:hover[b-7ouboyocmn] {
        background-color: #e0e0e0;
    }

    .add-customer-btn i[b-7ouboyocmn] {
        font-size: 18px;
        color: #555;
    }

.search-results[b-7ouboyocmn] {
    position: absolute;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.search-result-item[b-7ouboyocmn] {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

    .search-result-item:last-child[b-7ouboyocmn] {
        border-bottom: none;
    }

    .search-result-item:hover[b-7ouboyocmn] {
        background-color: #f5f5f5;
    }

.customer-name[b-7ouboyocmn] {
    font-weight: 500;
}

.customer-phone[b-7ouboyocmn] {
    font-size: 12px;
    color: #777;
}

.no-results[b-7ouboyocmn] {
    padding: 10px 15px;
    color: #888;
    text-align: center;
}

.modal-content-small[b-7ouboyocmn] {
    background-color: #F8F8F8;
    border-radius: 0;
    text-align: center;
    position: fixed;
    height: auto;
    left: 25%;
    width: 50%;
    top: 5%;
    max-width: 50%;
}

.update-quantity-modal-header[b-7ouboyocmn] {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.update-quantity-modal-footer[b-7ouboyocmn] {
    justify-content: center;
}

.update-quantity-save-btn[b-7ouboyocmn] {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 0;
}
.quantity-footer-btn[b-7ouboyocmn] {
    justify-content: center;
    background-color: #000;
    color: #fff;
    padding: 10px;
    width: 50%;
}
@media only screen and (max-width:1700px) {
    .search-input[b-7ouboyocmn] {
        font-size: 16px;
    }
}
@media only screen and (max-width:1440px){
    .search-input[b-7ouboyocmn]{
        font-size:14px;
    }
}
@media only screen and (max-width:1200px) {
    .search-input[b-7ouboyocmn] {
        font-size: 13px;
    }
}
@media only screen and (max-width:1080px) {
    .search-input[b-7ouboyocmn] {
        font-size: 12px;
    }
}
/* /Components/ServiceSelector.razor.rz.scp.css */
.services-container[b-fdxzt2g0je] {
    padding: 15px;
}

.no-services-message[b-fdxzt2g0je] {
    text-align: center;
    padding: 40px 0;
}

.services-grid[b-fdxzt2g0je] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.service-card[b-fdxzt2g0je] {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
}

.service-card:hover[b-fdxzt2g0je] {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.service-icon[b-fdxzt2g0je] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-right: 15px;
    border-radius: 50%;
    background-color: #f8f9fa;
    color: #000;
}

.service-details[b-fdxzt2g0je] {
    flex: 1;
}

.service-title[b-fdxzt2g0je] {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
}

.service-description[b-fdxzt2g0je] {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.add-new-service-btn[b-fdxzt2g0je] {
    text-align: center;
    margin-top: 20px;
}

.addaservice-btn[b-fdxzt2g0je] {
    background-color: #030303;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 10px;
    transition: all 0.2s ease;
}
    .addaservice-btn:hover[b-fdxzt2g0je] {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
    }


@media only screen and (max-width:1700px) {
    .service-title[b-fdxzt2g0je]{
        font-size:18px;
    }
    .service-icon i[b-fdxzt2g0je] {
        font-size: 2.2rem;
    }
    .service-description[b-fdxzt2g0je]{
        font-size:16px;
    }

    .addaservice-btn[b-fdxzt2g0je] {
        font-size: 18px;
    }
    .search-[b-fdxzt2g0je]
}
    @media only screen and (max-width:1440px) {
        .services-container[b-fdxzt2g0je] {
            padding: 15px;
        }

        .no-services-message[b-fdxzt2g0je] {
            text-align: center;
            padding: 40px 0;
        }

        .services-grid[b-fdxzt2g0je] {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .service-card[b-fdxzt2g0je] {
            display: flex;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.2s ease;
            background-color: #fff;
        }

            .service-card:hover[b-fdxzt2g0je] {
                transform: translateY(-5px);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            }

        .service-icon[b-fdxzt2g0je] {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            margin-right: 15px;
            border-radius: 50%;
            background-color: #f8f9fa;
            color: #000;
        }

        .service-details[b-fdxzt2g0je] {
            flex: 1;
        }

        .service-title[b-fdxzt2g0je] {
            margin: 0 0 5px 0;
            font-size: 16px;
            font-weight: 600;
        }

        .service-description[b-fdxzt2g0je] {
            margin: 0;
            font-size: 14px;
            color: #6c757d;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .add-new-service-btn[b-fdxzt2g0je] {
            text-align: center;
            margin-top: 20px;
        }

        .addaservice-btn[b-fdxzt2g0je] {
            background-color: #030303;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 10px;
            transition: all 0.2s ease;
        }

            .addaservice-btn:hover[b-fdxzt2g0je] {
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                transform: translateY(-5px);
            }

        .service-icon i[b-fdxzt2g0je] {
            font-size: 2rem;
        }

        .addaservice-btn[b-fdxzt2g0je] {
            font-size: 16px;
        }
    }

    @media only screen and (max-width:1200px) {
        .service-card[b-fdxzt2g0je] {
            padding: 10px;
        }

        .service-icon i[b-fdxzt2g0je] {
            font-size: 1.8rem;
        }

        .service-title[b-fdxzt2g0je] {
            font-size: 14px;
        }

        .service-description[b-fdxzt2g0je] {
            font-size: 13px;
        }

        .addaservice-btn[b-fdxzt2g0je] {
            font-size: 14px;
        }
    }

    @media only screen and (max-width:1080px) {
        .service-card[b-fdxzt2g0je] {
            padding: 10px;
        }

        .service-icon i[b-fdxzt2g0je] {
            font-size: 1.5rem;
        }

        .service-title[b-fdxzt2g0je] {
            font-size: 13px;
        }

        .service-description[b-fdxzt2g0je] {
            font-size: 12px;
        }

        .addaservice-btn[b-fdxzt2g0je] {
            font-size: 13px;
        }

        .service-icon[b-fdxzt2g0je] {
            height: 40px;
        }
    }
/* /Components/TransactionPage.razor.rz.scp.css */
.modal.show[b-d5l2t2laqd] {
    display: flex !important; 
}

.modal-content[b-d5l2t2laqd] {
    background-color: #F8F8F8;
    border-radius: 0;
    text-align: center;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    width: 100%;
}

.transaction-name[b-d5l2t2laqd] {
    margin-bottom: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.modal-title[b-d5l2t2laqd] {
    font-size: 22px;
}

.title-customer[b-d5l2t2laqd] {
    font-size: 20px;
}
.modal-body[b-d5l2t2laqd]{
    padding:1rem 1rem 0 0;
}

.modal-content-small[b-d5l2t2laqd] {
    background-color: #F8F8F8;
    border-radius: 0;
    text-align: center;
    position: fixed;
    height: auto;
    left: 30%;
    width: 50%;
}

.modal-header[b-d5l2t2laqd] {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
}

.modal-header h4[b-d5l2t2laqd] {
    margin: 0%;
}

.back-arrow[b-d5l2t2laqd] {
    color: #000;
    font-size: 22px;
}

.transaction-row[b-d5l2t2laqd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
/*    margin-top:6%;*/
    padding:0;
}

.transaction-col[b-d5l2t2laqd] {
    display: flex;
    justify-content: start;
    flex-direction: column;
}

.rightnavigation-content[b-d5l2t2laqd] {
    display: flex;
    flex-direction: column;
/*    gap: 5px;*/
    width: 100%;
    justify-content:space-between;
    height:100%;
}

.rightnavigation-content a[b-d5l2t2laqd] {
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
   /* border-radius: 5px;
    margin-bottom: 5px;*/
   height:33%;
   justify-content:center;

}
.nav-link i[b-d5l2t2laqd]{
    margin-bottom:1rem;
    font-size:30px;
}
.rightnavigation-content a i[b-d5l2t2laqd] {
    color: white;
    margin-bottom: 5px;
}

.tender-btn[b-d5l2t2laqd] {
    bottom: 0;
    position: absolute;
    width: 20%;
    right: 0;
    border-radius:0;
}

.procede-tender[b-d5l2t2laqd] {
    background-color: #000;
    color: #fff;
    width: 100%;
    padding: 20px;
    border-radius:0;
}

.title-customer[b-d5l2t2laqd] {
    display: flex;
    margin: 2% 0;
    text-align: start;
    width: 100%;
    padding: 0 40px;
}

.heading-pos[b-d5l2t2laqd] {
    font-weight: 500;
}

.amount-color[b-d5l2t2laqd] {
    background-color: #ECECEB;
    padding: 10px 20px;
}

.amount-nocolor[b-d5l2t2laqd] {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cash-payment-option[b-d5l2t2laqd] {
    padding: 20px 80px;
}

.number-input[b-d5l2t2laqd] {
    border: 1px solid #cdcdcd;
    padding: 5px;
    border-radius: 10px;
    background-color: transparent;
}

.transaction-qr-img[b-d5l2t2laqd] {
    height: 40vh;
    width: 25vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.transaction-qr-img img[b-d5l2t2laqd] {
    height: 100%;
    width: 100%;
}

.transaction-qr-img i[b-d5l2t2laqd] {
    color: #000;
}

.qr-container[b-d5l2t2laqd] {
    color: #000;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.back-icon-transaction[b-d5l2t2laqd] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}

.alert-warning-transaction[b-d5l2t2laqd] {
    padding: 15px;
    margin-bottom: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.nav-link[b-d5l2t2laqd] {
    background-color: black;
}

.nav-link.active[b-d5l2t2laqd] {
    background-color: #198754; 
    color: white;
    border-radius: 5px;
}

.nav-link.active i[b-d5l2t2laqd] {
    color: white;
}

.payment-header[b-d5l2t2laqd] {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    width:100%;
}

.payment-header i[b-d5l2t2laqd] {
    margin-right: 15px;
}

.payment-header h5[b-d5l2t2laqd] {
    margin-bottom: 0;
}
.alltotal[b-d5l2t2laqd]{
    font-size:18px;
    font-weight:600;
}
/* /Pages/APOS.razor.rz.scp.css */



.top-navbar[b-gc9s93r88h] {
    margin-bottom: 2%;
}

.pos-title[b-gc9s93r88h] {
    align-items: center;
    align-content: center;
    font-size: 28px;
    font-weight: 500;
}

.nav-btn button[b-gc9s93r88h] {
    font-size: 16px;
    font-weight:600;
    color: #000;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    border-radius: 10px;
    padding: 5px;
    position: relative;
    background: transparent;
}

    /* Add this for the bottom line animation */
    .nav-btn button[b-gc9s93r88h]::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        background-color: #000; 
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .nav-btn button:hover[b-gc9s93r88h]::after {
        width: 100%;
    }

    /* Keep the shadow effect */
    .nav-btn button:hover[b-gc9s93r88h] {
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    }

    /* Style for active tab (if needed) */
    .nav-btn button.active[b-gc9s93r88h]::after {
        width: 100%;
    }
   /* .calender-main {
        background-color: #F8F8F8;
        position: absolute;
        width: 75%;
        height: 97%;
        right: 0px;
        margin-top: 4px;
        margin-right: 5%;
        border-radius: 20px 0px 0px 20px;
    }*/

/*.top-calender {
    width: 100%;
    height: 12%;
    border-radius: 20px 0px 0px 0px;
    margin-bottom: 7px;
}

.right-top {
    align-content: center;
    margin-left: 5%;
}

.title-calender {
    font-weight: 600;
    font-size: 27px;
}

.calender-outerlayer {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}*/

/*.left-top {
    display: flex;
    gap: 5%;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    padding: 1%;
}

    .left-top i {
        cursor: pointer;
        font-size: 23px;
    }

.thi-display {
    display: flex;
    align-items: flex-end;
    border-style: solid;
    border-color: #D9D9D9;
    border-radius: 10px;
    width: 150%;
}

.thi-icon {
    padding: 1% 10%;
}

.logo-outer {
    padding: 5% 13%;
    margin: 0% 0%;
}

.text-outer {
    padding-top: 5%;
    padding-bottom: 15%;
}

table  tr{
    border-bottom:;
}*/



/* body-css */
.pos-body[b-gc9s93r88h] {
    display: grid;
    grid-template-columns: 65% 35%;
    background-color: #f8f8f8;
    color: #000;
    height: 88vh;
    padding: 0px 0px 0px 20px;
    border-radius: 0px 0 0 50px;
}

.right-pos[b-gc9s93r88h] {
    border-radius: 0% 0% 0% 4%;
}

.left-pos[b-gc9s93r88h] {
    background-color: #f8f8f8;
    padding: 15px;
    border-left: 5px solid #fff;
    display:flex;
    flex-direction:column;
    gap:2vh;
}
.customerandartist[b-gc9s93r88h]{
    display:flex;
    flex-direction:column;
    gap:1vh;
}

.current-title[b-gc9s93r88h] {
    font-size: 18px;
}
.top-scale[b-gc9s93r88h]{
    margin-bottom:1%;
    justify-content:space-between;
}

.image-nav[b-gc9s93r88h] {
    text-align: center;
    margin-bottom: 2%;
}

    .image-nav a[b-gc9s93r88h] {
        color: #000;
        text-decoration: none;
        font-size: 16px;
        border-bottom: 3px solid transparent;
        padding: 0% 3%;
    }

        .image-nav a:hover[b-gc9s93r88h] {
            border-bottom: 3px solid #000;
        }


        .image-nav a:active[b-gc9s93r88h] {
            border-bottom: 3px solid #000;
        }

        .image-nav a:focus[b-gc9s93r88h] {
            border-bottom: 3px solid #000;
        }




.img-container[b-gc9s93r88h] {
    align-items: center;
    text-align: center;
}

    .img-container img[b-gc9s93r88h] {

        padding: 2% 1%;
    }

.imgishere[b-gc9s93r88h]{
    height:13vh;
    width:100%;
    border-radius:20px 20px 0 0;
    background-color:#ffffff;

}
    .imgishere img[b-gc9s93r88h]{
        height:100%;
        width:100%;
        border-radius:20px 20px 0 0;
    }
    /* icon-pos */
 /*   .icon-pos {
        padding-bottom: 4px;
        padding-top: 15px;
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 4vh;
        width: 60%;
    }
outer-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    width:98%;
}

.first-icon {
    background-color: #dfdfde;
    border-radius: 10%;
    text-align: center;
    align-items: center;
    align-content: center;
    height: 10vh;
    width: 6vw;
}

    .first-icon i {
        font-size:24px;
    }
    .first-icon label{
        font-size:14px;
    }

.add-customer {
    display: flex;
    background-color: #FFFF;
    justify-content:space-around;
    gap: 10%;
    padding:7px;
}
.select-customer {
    border: none;
    border-bottom: 1px solid #cdcdcd;
    border-radius: 0;
    width:100%;
    padding:8px;
}
.text-muted{
    padding:5px;
}
.left-first {
    margin-bottom: 2%;
}
*/





.image-side[b-gc9s93r88h]{
    padding:0 5px 0 0 ;
}

.layer-image[b-gc9s93r88h] {
        width: 100%;
    border-radius: 20px;
    background-color: #ffffff;
}

.text-image[b-gc9s93r88h]{
    font-size: 12px;
    font-weight:600;
}
.text-image-price[b-gc9s93r88h]{
    font-size:12px;
}

.image-side[b-gc9s93r88h] {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-columns: repeat(5,1fr);
    gap: 1.5rem;
    padding: 10px;
}

.images-section[b-gc9s93r88h] {
    text-align: center;
    justify-content: center;
    align-content: center;
    display: flex;
    border-radius: 20px;
    background-color: #ffffff;
/*    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;*/
    position: relative;
    transition: all 0.2s ease;
   /* border: 1px solid #ccc;*/
    
}
    .images-section:hover[b-gc9s93r88h] {
        /*  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        border:1px solid #ccc;*/
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

.bottomofimg[b-gc9s93r88h] {
    position: absolute;
    bottom: 0;
    text-align: center;
}


/*.back-arrow {
    color: #000;
    font-size: 22px;
}*/
.buttomofimg[b-gc9s93r88h] {
    padding: 5px;
    display: flex;
    flex-direction: column;
    background-color: #f0f0f0;
    border-radius:0 0 20px 20px;
}


/*.three-dot button {
    border: none;
}


.profile-image i{
    font-size:20px;
}*/



/*.text-add {
    text-align: center;
    align-content: center;
    font-size: 16px;
}

.item-name {
    display: grid;
    grid-template-columns: 70% 25%;
    gap: 5%;
    font-size:14px;
    padding:5px;
    border-bottom:1px solid #000;
}*/


.appluydisbtn[b-gc9s93r88h]{
    display:flex;
    text-align:start;
    padding:0 5px;
    background-color:#383838;
   /* border-radius:8px;*/
    color:#fff;
    border:none;
    font-size:16px;
    justify-content:center;
}
.appluydisbtn:hover[b-gc9s93r88h]{
    background-color:#030303;
}

.finalist[b-gc9s93r88h]{
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    bottom: 12vh;
    position: fixed;
    width: 30%;
    right: 1%;
}
.add-discount[b-gc9s93r88h]{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}


/*
.item-one {
    display: grid;
        grid-template-columns: repeat(2,1fr);
    gap: 5%;
}*/

.centerof[b-gc9s93r88h]{
text-align:end;
}
.final[b-gc9s93r88h]{

    font-weight:600;
}


.right-item[b-gc9s93r88h], .left-item[b-gc9s93r88h] {
    text-align: start;
}

.quantity-item[b-gc9s93r88h] {
    text-align: center;
    font-weight: bold;
}
/*.discount {
    font-weight: 600;
    font-size: 16px;
}
*/



.charge-btn[b-gc9s93r88h] {
    border: none;
    background-color: #000;
    color: #FFFFFF;
    width: 29vw;
    height: 8vh;
    position: absolute;
    bottom: 4vh;
    right: 1vw;
}



.up-down[b-gc9s93r88h] {
    height: 35vh;
    max-height: 40vh;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid none;
    background-color:transparent;
    margin-top:4%;
    padding:0 10px;
}
.updown-danger[b-gc9s93r88h]{
    padding:0;
}
.apos-table[b-gc9s93r88h] {
    width: 100%;
    background-color: #fff;
}
    .apos-table thead[b-gc9s93r88h] {
        position: sticky;
        top: 0;
        background-color: #f8f8f8;
        font-weight:500;
    }
    .apos-table tbody[b-gc9s93r88h] {
        background-color: #f8f8f8;
    }


.apos-table tbody tr td[b-gc9s93r88h]{
   
    border:none;
    padding:10px 5px;
    
}

.table-striped td span[b-gc9s93r88h]{
    padding:0;
}


/*.nav-link {
    background-color: black;
}

    .nav-link.active {
        background-color: #198754; 
        color: white;
        border-radius: 5px;
    }*/


.discount-section[b-gc9s93r88h] {
    display: grid;
    grid-template-columns:repeat(2,1fr);
    gap:5%;
}


    .dis-applied[b-gc9s93r88h]{
        text-align: start;
    }




    .modal.show[b-gc9s93r88h] {
        display: flex !important; 
    }

/*.transaction-name{
    margin-bottom:0;
    color:#fff;
    font-size:18px;
    font-weight:600;

}*/
/*.title-customer{
    font-size:20px;
}*/

.form-radios[b-gc9s93r88h] {
    display: flex;
    margin:0 0 2% 0 !important;
    padding:0;
}
/* Modal Content */
.modal-content[b-gc9s93r88h] {
    background-color: #F8F8F8;
    border-radius: 0;
    text-align: center;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    width: 100%;
    color:#000;
}
.modal-title[b-gc9s93r88h]{
    font-size:22px;
}

.modal-content-small[b-gc9s93r88h] {
    background-color: #F8F8F8;
    border-radius: 0;
    text-align: center;
    position: fixed;
    height: auto;
    left: 25%;
    width: 50%;
    top:5%;
    max-width:50%;
    color:#000;
}
.custom-input[b-gc9s93r88h]{
    margin-bottom:5%;
}


.modal-header[b-gc9s93r88h], .modal-header-small[b-gc9s93r88h] {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
}

.modal-header h4[b-gc9s93r88h]{
    margin:0%;
}
.modal-body[b-gc9s93r88h]{
    max-height:80vh;
    overflow-y:scroll;
}

.modal-header-advance[b-gc9s93r88h]{
    padding:0 0 0 20px;
}
.remarks-section[b-gc9s93r88h]{
    margin-top:2%;
    text-align:start;
}

.update-quantity-modal-header[b-gc9s93r88h] {
    display: flex;
    justify-content: space-between;
    padding: 0;
}
.update-quantity-modal-footer[b-gc9s93r88h]{
    justify-content:center;
}
.update-quantity-save-btn[b-gc9s93r88h] {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 0;
}
.cross-save[b-gc9s93r88h] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.save-btn[b-gc9s93r88h] {
    justify-content: end;
    text-align: end;
}

    .save-btn button[b-gc9s93r88h] {
        border: none;
        background-color: #000;
        color: #FFFFFF;
        padding: 5px 20px;
        position: absolute;
        top: 1%;
        right: 4px;
    }


/* The Close Button */
/*.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    background: none;
    border: none;
    color: black;
}*/

/*    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
*/

/*.plane-line {
    border-width: 1.5px;
    border-color: #FFFFFF;
    border-style: solid;
    margin-top: 5%;
}*/


.title-quality[b-gc9s93r88h] {
    margin: 1% 2%;
}

/* addition and subtraction */
.add-sub[b-gc9s93r88h] {
    margin: 4% 0%;
}

.counter-container[b-gc9s93r88h] {
    display: flex;
    justify-content: start;
    justify-content: space-evenly;
}



.number[b-gc9s93r88h] {
    font-size: 24px;
    font-weight: bold;
    align-content: center;
    color:#000;
    width:15vw;
}


.minus[b-gc9s93r88h], .plus[b-gc9s93r88h] {
    padding: 1% 2%;
    background-color: #000;
    color: #ffff;
    border: none;
    border-radius: 10%;
}

/* kush */
.notes[b-gc9s93r88h] {
    margin: 0% 4%;
}

.note-title[b-gc9s93r88h] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}


.login-box .user-box[b-gc9s93r88h] {
    position: relative;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: none;
}

    .login-box .user-box input[b-gc9s93r88h] {
        width: 100%;
        margin: 10px 0px;
        padding: 1% 0%;
        font-size: 16px;
        border: none;
        border-bottom: 1px solid #000;
        outline: none;
    }

    .login-box .user-box label[b-gc9s93r88h] {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0;
        font-size: 16px;
        color: #000;
        pointer-events: none;
        transition: .5s;
    }

    .login-box .user-box input:focus ~ label[b-gc9s93r88h],
    .login-box .user-box input:valid ~ label[b-gc9s93r88h] {
        top: -18px;
        left: 0;
        color: silver;
        font-size: 14px;
    }

.login-box .user-discount input[b-gc9s93r88h] {
    border: none;
    border-top: 1px solid#000;
    border-bottom: 1px solid#000;
    outline: none;
    margin: 2% 0%;
    padding: 1.5% 0%;
    width: 50%;
}

    .login-box .user-discount input:focus ~ label[b-gc9s93r88h],
    .login-box .user-discount input:valid ~ label[b-gc9s93r88h] {
        border: none;
    }



/*.form-check{
    color:#000;
    margin:2% 0%;
}*/


.list-group[b-gc9s93r88h]{
    padding: 5% 15%;
}

.quantity-footer-btn[b-gc9s93r88h]{
    justify-content:center;
    background-color:#000;
    color:#fff;
    padding:10px;
    width:50%;
}

/*.remove-btn button {
    border: none;
    background-color: #000;
    color: #FFFFFF;
    padding: 10px 100px;
}

.remove-btn {
    text-align: center;
    display: flex;
    justify-content: center;
    justify-items: center;
    margin: 18px 0px;
}
*/

/* second-modal */

/*.charge {
    position: fixed; 
    z-index: 1; 
    padding-top: 15px; 
    right: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content-second {
    background-color: #fcf8f8;
    width: 70%;
    height: 92%;
    border: 1px solid #888;
    position: fixed; 
    right: 95px;
    border-radius: 10px 10px 0px 0px;
}


.left-button {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: black;
}

    .left-button:hover {
        color: #007bff;
    }

.prev-button {
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 20px;
    font-weight: 600;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: black;
}

    .prev-button:hover {
        color: #007bff;
    }


.customer-detail {
    display: grid;
    grid-template-columns: 30% 70%;
}

.dollar-img img {
    margin-top: 10.5px;
    width: 56%;
}

.board-img img {
    width: 56%;
}

.card-img img {
    width: 56%;
}


.click-me{
    border:none;
    background-color:#000;
    color:#FFFFFF;
    padding: 1% 8%;
    border-radius:5px;
}

.title-customer {
    display:flex;
    margin:2% 0;
    text-align:start;
    width:100%;
    padding:0 40px;
}

.heading-pos {
    font-weight: 500;
}
.amount-color {
    background-color: #ECECEB;
    padding: 10px 20px;
}
.amount-nocolor{
    padding:10px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.cash-payment-option{
    padding:20px 80px;
}
.number-input{
    border:1px solid #cdcdcd;
    padding:5px;
    border-radius:10px;
    background-color:transparent;
}

.customer-amount {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 16%;
    background-color: silver;
    width: 70%;
    text-align: center;
    padding: 2% 0%;
}

.customer-amount-second {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 1%;
    width: 70%;
    text-align: center;
    padding: 2% 0%;
}

.customer-amount-three {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 1%;
    background-color: silver;
    width: 70%;
    text-align: center;
    padding: 2% 0%;
}

.customer-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 18.5%;
}

    .customer-btn button {
        border: none;
        background-color: #000;
        color: #FFFFFF;
        padding: 2% 15%;
    }

.prev-button {
    position: absolute;
    top: -13px;
    left: 12px;
    font-size: 40px;
    font-weight: 600;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: black;
}

.custom-modal {
    display: none; 
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
}

.custom-modal-content {
    background-color: #fcf8f8;
    width: 70%;
    height: 92%;
    border: 1px solid #888;
    position: fixed; 
    right: 95px;
    border-radius: 10px 10px 0px 0px;
    margin-top: 1%;
}

.new-prev-btn {
    position: absolute;
    top: -13px;
    left: 10px;
    font-size: 40px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: black;
}


    .new-prev-btn:hover {
        color: #007bff;
    }

#trigger-Modal-1 {
    border: none;
}


.return-amount-three {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 33%;
    background-color: silver;
    width: 70%;
    text-align: center;
    padding: 2% 0%;
}

.return-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 19%;
}

    .return-btn button {
        border: none;
        background-color: #000;
        color: #FFFFFF;
        padding: 2% 15%;
    }*/


/*    modal-discount*/
    .modal-heading[b-gc9s93r88h]{
        color:#000;
        text-align:start;
        
    }


.modal-title[b-gc9s93r88h] {
    margin-bottom: 0;
    line-height: 1.5;
    color: #000;
    font-weight:500;
}

    .amount-section[b-gc9s93r88h]{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:5%;
        margin-bottom:2%;
    }


    .total-amount[b-gc9s93r88h], .received-amount[b-gc9s93r88h], label[b-gc9s93r88h]{
        text-align:start;
        padding:1% 0;
    }

.silver-line[b-gc9s93r88h] {
    border-width: 1.5px;
    border-color: #000;
    border-style: solid;
    margin-bottom: 5%;
}



.amount-button[b-gc9s93r88h]{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5%;
}
.totalamt[b-gc9s93r88h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
}







/* Example: pos.css */
/*.p-2 {
    padding: 0.5rem;
}

.border {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.pos-item img {
    max-width: 100%;
    height: auto;
}*/

/*.modal-content {
    background-color: white;
    color: black;
}


.modal-title {
    font-size: 20px;
    font-weight: bold;
}

.modal-body label,
.modal-body input,
.modal-body span {
    color: black;
}

.close {
    font-size: 20px;
    font-weight: bold;
    color: black;
}
*/



/* Ensure quantity buttons are visible */
/*.btn-quantity {
    background-color: black;
    color: white;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.btn-remove {
    background-color: red;
    color: white;
    font-weight: bold;
}

.btn-save {
    background-color: blue;
    color: white;
}


.alert-warning-transaction{
    padding: 15px;
    margin-bottom: 0;
    position: absolute;
    top: 0;
    right: 0;
}
*/


/*
.outer-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}


.bookbtn {
position:relative;
bottom:0;
width:100%;
background-color:#000;
color:#fff;
}


.transaction-row {
    display: flex;
    justify-content: center;
    align-items: center;
}
.transaction-col {
    display: flex;
    justify-content: start;
    flex-direction:column;
}

.rightnavigation-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}
.rightnavigation-content a{
    background-color:#000;

}

.tender-btn {
    bottom: 5px;
    position: absolute;
    width: 20%;
    right: 5px;

}
.procede-tender{
    background-color:#000;
    color:#fff;
    width:100%;
    padding:20px;
}
*/


/*.colorishere{
    bottom:0;
}

.colorishere p {
    margin-bottom: 0;
}

.transaction-qr-img{
    height:40vh;
    width:25vw;
    display:flex;
    justify-content:center;
    align-items:center;
}
    .transaction-qr-img img {
        height: 100%;
        width: 100%;
    }


.qr-container {

    color: #000;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;

}


.back-icon-transaction{
display:flex;
align-items:center;
justify-content:center;
}*/


/*===============Appointment card====================*/

.product-container[b-gc9s93r88h] {
    height: 55vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
.image[b-gc9s93r88h] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
  
    padding: 10px;
}
    .image:hover[b-gc9s93r88h] {
    }


/*
.appointment-detail {
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.appointment-detail:hover{
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}
.card-title {
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
}
.card-title h5 {
    margin-bottom: 0;
    font-size:18px;
    font-weight:500;
}
.card-subtitle {
    font-size: 16px;
    font-weight: 500;
}
.bookbtn{
    font-size:16px;
    font-weight:500;
    border:none;
    padding:5px;
}

.card-btn {
    display: flex;
    justify-content: center;
}
.card-btn:hover {
    opacity: 0.8;

}
.card-head, .card-foot {
    background-color: #F8F8F8;
    padding: 5px 10px;
}
.card-body{
    padding:5px 10px;
}*/

/*====================================*/


/*scrollbar*/
/* Entire scrollbar */
.product-container[b-gc9s93r88h]::-webkit-scrollbar {
    width: 5px; /* vertical scrollbar width */
    
}

/* Track (background) */
.product-container[b-gc9s93r88h]::-webkit-scrollbar-track {
    background: #ecebeb;
    border-radius: 10px;
}

/* Thumb (scroll indicator) */
.product-container[b-gc9s93r88h]::-webkit-scrollbar-thumb {
    background: #38383838;
    border-radius: 15px;
}

    /* Thumb on hover */
    .product-container[b-gc9s93r88h]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/*==========================*/

.up-down[b-gc9s93r88h]::-webkit-scrollbar {
    width: 5px; 
}

.up-down[b-gc9s93r88h]::-webkit-scrollbar-track {
    background: #ecebeb;
    border-radius: 10px;
}

.up-down[b-gc9s93r88h]::-webkit-scrollbar-thumb {
    background: #38383838;
    border-radius: 15px;
}

    .up-down[b-gc9s93r88h]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }



/*add-servic-modal*/
.addservice-modal-content[b-gc9s93r88h]{
    height:auto ;
    width:50% ;
    top:5%;
    left:25%;
}
.addservice-modal-header[b-gc9s93r88h]{
    display:flex;
    padding:0;
    justify-content:space-between;
}
.addservice-btn-close[b-gc9s93r88h]{
    margin:0;
}
.addservice-save-btn[b-gc9s93r88h]{
    border-radius:0;
    padding:10px 20px;
}
.addservice-modal-footer[b-gc9s93r88h]{
    display:flex;
    justify-content:center;
}
.addservice-cancel[b-gc9s93r88h]{
    width:50%;
    background-color:#030303;
    color:#fff;
}
.add-label[b-gc9s93r88h]{
    text-align:start;
    display:flex;
    justify-content:start;
    width:100%;
}




/* media-quary*/
@media (max-width:768px) {
    .pos-body[b-gc9s93r88h] {
        background-color: #fff;
        color: #000;
        height: 86vh;
        border-radius: 0px 0 0 0px;
    }
}


/*@media only screen and (max-width:1700px){
    .text-image {
        font-size: 14px;
    }

    .profile-image img {
        height: 100%;
    }

    .product-container {
        height: 55vh;
        width: 155vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .up-down {
        height: 150px;
        background-color: #FFFFFF;
        max-height: 150px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .current-title {
        font-size: 20px;
    }
}
*/
[b-gc9s93r88h]::-webkit-scrollbar {
    width: 5px;
}

[b-gc9s93r88h]::-webkit-scrollbar-track {
    background: #ecebeb;
    border-radius: 10px;
}

[b-gc9s93r88h]::-webkit-scrollbar-thumb {
    background: #030303;
    border-radius: 15px;
}

[b-gc9s93r88h]::-webkit-scrollbar-thumb:hover {
        background: #555;

}


/*for radio btn*/
.radio-wrapper-27[b-gc9s93r88h] {
    display: flex;
    align-items: center;
    --bc: 27.8078% .029596 256.847952;
}

    .radio-wrapper-27 label[b-gc9s93r88h] {
        padding-left: .6em;
        font-size: .875rem;
        line-height: 1.25rem;
        --tw-text-opacity: 1;
        color: oklch(var(--bc)/var(--tw-text-opacity));
    }

    .radio-wrapper-27 input[type="radio"][b-gc9s93r88h] {
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 1.5rem;
        width: 1.5rem;
        cursor: pointer;
        border-radius: 9999px;
        border-width: 1px;
        border-style: solid;
        border-color: oklch(var(--bc) / var(--tw-border-opacity));
        --tw-border-opacity: .2;
        --chkbg: var(--bc);
        --b1: 100% 0 0;
    }

        .radio-wrapper-27 input[type="radio"]:checked[b-gc9s93r88h],
        .radio-wrapper-27 input[type="radio"][aria-checked=true][b-gc9s93r88h] {
            --tw-bg-opacity: 1;
            background-color: oklch(var(--bc) / var(--tw-bg-opacity));
            background-image: none;
            animation: radiomark-27-b-gc9s93r88h var(--animation-input, .2s) ease-out;
            box-shadow: 0 0 0 4px oklch(var(--b1) / 1) inset, 0 0 0 4px oklch(var(--b1) / 1) inset;
        }

@keyframes radiomark-27-b-gc9s93r88h {
    0% {
        box-shadow: 0 0 0 12px oklch(var(--b1) /1) inset, 0 0 0 12px oklch(var(--b1) /1) inset;
    }

    50% {
        box-shadow: 0 0 0 3px oklch(var(--b1) /1) inset, 0 0 0 3px oklch(var(--b1) /1) inset;
    }

    100% {
        box-shadow: 0 0 0 4px oklch(var(--b1) /1) inset, 0 0 0 4px oklch(var(--b1) /1) inset;
    }
}

@media only screen and (max-width:1700px) {
    .nav-btn button[b-gc9s93r88h]{
        font-size:18px;
    }
    .image-side[b-gc9s93r88h]{
        grid-template-columns:repeat(6, 1fr);
        gap:1rem;
    }
    .list-name[b-gc9s93r88h] {
        font-size: 18px;
    }
    .apos-table[b-gc9s93r88h] {
        font-size: 18px;
    }
    .current-title[b-gc9s93r88h]{
        font-size:20px;
    }
    .search-input[b-gc9s93r88h]{
        font-size:16px !important;
    }
    .finalist[b-gc9s93r88h] {
        font-size: 20px;
    }
    .charge-btn[b-gc9s93r88h]{
        font-size:18px;
    }
    .appluydisbtn[b-gc9s93r88h]{
        font-size:18px;
    }


    

}
    @media only screen and (max-width:1440px) {
        .top-navbar[b-gc9s93r88h] {
            margin-bottom: 2%;
        }

        .pos-title[b-gc9s93r88h] {
            font-size: 28px;
        }

        .nav-btn button[b-gc9s93r88h] {
            font-size: 16px;
            transition: all 0.3s ease;
            border-radius: 10px;
            padding: 5px;
        }

        .text-image[b-gc9s93r88h] {
            font-size: 12px;
            font-weight: 600;
        }

        .text-image-price[b-gc9s93r88h] {
            font-size: 12px;
        }

        .image-side[b-gc9s93r88h] {
            padding: 0 5px 0 0;
            display: grid;
            transition: all 0.2s ease;
        }

        .images-section:hover[b-gc9s93r88h] {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .pos-body[b-gc9s93r88h] {
            display: grid;
            grid-template-columns: 65% 35%;
            height: 88vh;
            padding: 0px 0px 0px 20px;
        }

        .right-pos[b-gc9s93r88h] {
            border-radius: 0% 0% 0% 4%;
        }

        .left-pos[b-gc9s93r88h] {
            padding: 15px;
            gap: 2vh;
        }

        .buttomofimg[b-gc9s93r88h] {
            padding: 5px;
            border-radius: 0 0 20px 20px;
        }

        .appluydisbtn[b-gc9s93r88h] {
            display: flex;
            text-align: start;
            padding: 0 5px;
            background-color: #383838;
            color: #fff;
            border: none;
            font-size: 16px;
            justify-content: center;
        }

            .appluydisbtn:hover[b-gc9s93r88h] {
                background-color: #030303;
            }

        .finalist[b-gc9s93r88h] {
            padding: 10px 20px;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            bottom: 12vh;
            position: fixed;
            width: 30%;
            right: 1%;
            font-size: 16px;
        }
        .appluydisbtn[b-gc9s93r88h] {
            font-size: 16px;
        }

        .add-discount[b-gc9s93r88h] {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .charge-btn[b-gc9s93r88h] {
            border: none;
            background-color: #000;
            color: #FFFFFF;
            width: 29vw;
            height: 8vh;
            position: absolute;
            bottom: 4vh;
            right: 1vw;
            font-size: 16px;
        }

        .up-down[b-gc9s93r88h] {
            height: 35vh;
            max-height: 40vh;
            overflow-y: scroll;
            overflow-x: hidden;
            border: 1px solid none;
            background-color: transparent;
            margin-top: 4%;
            padding: 0 10px;
        }

        .apos-table thead[b-gc9s93r88h] {
            position: sticky;
            top: 0;
            background-color: #f8f8f8;
            font-weight: 500;
        }

        .apos-table tbody tr td[b-gc9s93r88h] {
            padding: 10px 5px;
        }

        .form-radios[b-gc9s93r88h] {
            display: flex;
            margin: 0 0 2% 0 !important;
            padding: 0;
        }

        .discount-section[b-gc9s93r88h] {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 5%;
        }

        /*================ Modal Content ==========================*/
        .modal-content[b-gc9s93r88h] {
            background-color: #F8F8F8;
            border-radius: 0;
            text-align: center;
            position: fixed;
            height: 100vh;
            left: 0;
            top: 0;
            width: 100%;
        }

        .modal-title[b-gc9s93r88h] {
            font-size: 22px;
        }

        .modal-content-small[b-gc9s93r88h] {
            background-color: #F8F8F8;
            border-radius: 0;
            text-align: center;
            position: fixed;
            height: auto;
            left: 25%;
            width: 50%;
            top: 5%;
            max-width: 50%;
        }

        .custom-input[b-gc9s93r88h] {
            margin-bottom: 5%;
        }


        .modal-header[b-gc9s93r88h], .modal-header-small[b-gc9s93r88h] {
            display: flex;
            justify-content: space-between;
            padding: 1rem 2rem;
        }

            .modal-header h4[b-gc9s93r88h] {
                margin: 0%;
            }

        .modal-body[b-gc9s93r88h] {
            max-height: 80vh;
            overflow-y: scroll;
        }

        .modal-header-advance[b-gc9s93r88h] {
            padding: 0 0 0 20px;
        }

        .remarks-section[b-gc9s93r88h] {
            margin-top: 2%;
            text-align: start;
        }

        .update-quantity-modal-header[b-gc9s93r88h] {
            display: flex;
            justify-content: space-between;
            padding: 0;
        }

        .update-quantity-modal-footer[b-gc9s93r88h] {
            justify-content: center;
        }

        .update-quantity-save-btn[b-gc9s93r88h] {
            background-color: #000;
            color: #fff;
            padding: 10px 20px;
            border-radius: 0;
        }

        .cross-save[b-gc9s93r88h] {
            display: grid;
            grid-template-columns: repeat(2,1fr);
        }

        .save-btn[b-gc9s93r88h] {
            justify-content: end;
            text-align: end;
        }

            .save-btn button[b-gc9s93r88h] {
                border: none;
                background-color: #000;
                color: #FFFFFF;
                padding: 5px 20px;
                position: absolute;
                top: 1%;
                right: 4px;
            }
        /*=====================================================*/



        .title-quality[b-gc9s93r88h] {
            margin: 1% 2%;
        }

        .add-sub[b-gc9s93r88h] {
            margin: 4% 0%;
        }

        .counter-container[b-gc9s93r88h] {
            display: flex;
            justify-content: start;
            justify-content: space-evenly;
        }



        .number[b-gc9s93r88h] {
            font-size: 24px;
            font-weight: bold;
            align-content: center;
            color: #000;
            width: 15vw;
        }


        .minus[b-gc9s93r88h], .plus[b-gc9s93r88h] {
            padding: 1% 2%;
            background-color: #000;
            color: #ffff;
            border: none;
            border-radius: 10%;
        }



        /*============= kush =====================*/
        /* kush */
        .notes[b-gc9s93r88h] {
            margin: 0% 4%;
        }

        .note-title[b-gc9s93r88h] {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
        }


        .login-box .user-box[b-gc9s93r88h] {
            position: relative;
            margin-top: 3%;
            margin-bottom: 3%;
            background-color: none;
        }

            .login-box .user-box input[b-gc9s93r88h] {
                width: 100%;
                margin: 10px 0px;
                padding: 1% 0%;
                font-size: 16px;
                border: none;
                border-bottom: 1px solid #000;
                outline: none;
            }

            .login-box .user-box label[b-gc9s93r88h] {
                position: absolute;
                top: 0;
                left: 0;
                padding: 10px 0;
                font-size: 16px;
                color: #000;
                pointer-events: none;
                transition: .5s;
            }

            .login-box .user-box input:focus ~ label[b-gc9s93r88h],
            .login-box .user-box input:valid ~ label[b-gc9s93r88h] {
                top: -18px;
                left: 0;
                color: silver;
                font-size: 14px;
            }

        .login-box .user-discount input[b-gc9s93r88h] {
            border: none;
            border-top: 1px solid#000;
            border-bottom: 1px solid#000;
            outline: none;
            margin: 2% 0%;
            padding: 1.5% 0%;
            width: 50%;
        }

            .login-box .user-discount input:focus ~ label[b-gc9s93r88h],
            .login-box .user-discount input:valid ~ label[b-gc9s93r88h] {
                border: none;
            }



        /*.form-check{
    color:#000;
    margin:2% 0%;
}*/


        .list-group[b-gc9s93r88h] {
            padding: 5% 15%;
        }

        .quantity-footer-btn[b-gc9s93r88h] {
            justify-content: center;
            background-color: #000;
            color: #fff;
            padding: 10px;
            width: 50%;
        }

        .totalamt[b-gc9s93r88h] {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5%;
        }

        .product-container[b-gc9s93r88h] {
            height: 55vh;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .image[b-gc9s93r88h] {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 20px;
            padding: 10px;
        }

        /*add-servic-modal*/
        .addservice-modal-content[b-gc9s93r88h] {
            height: auto;
            width: 50%;
            top: 5%;
            left: 25%;
        }

        .addservice-modal-header[b-gc9s93r88h] {
            display: flex;
            padding: 0;
            justify-content: space-between;
        }

        .addservice-btn-close[b-gc9s93r88h] {
            margin: 0;
        }

        .addservice-save-btn[b-gc9s93r88h] {
            border-radius: 0;
            padding: 10px 20px;
        }

        .addservice-modal-footer[b-gc9s93r88h] {
            display: flex;
            justify-content: center;
        }

        .addservice-cancel[b-gc9s93r88h] {
            width: 50%;
            background-color: #030303;
            color: #fff;
        }

        .add-label[b-gc9s93r88h] {
            text-align: start;
            display: flex;
            justify-content: start;
            width: 100%;
        }

        .apos-table[b-gc9s93r88h] {
            font-size: 14px;
        }

        .current-title[b-gc9s93r88h] {
            font-size: 16px;
        }

        .list-name[b-gc9s93r88h] {
            font-size: 16px;
        }
    }


    @media only screen and (max-width:1200px) {
        .charge-btn[b-9v70p8z9px][b-gc9s93r88h] {
            width: 27vw;
            height: 8vh;
            position: absolute;
            bottom: 4vh;
            right: 2vw;
        }
        .appluydisbtn[b-gc9s93r88h] {
            font-size: 15px;
        }

        .image-side[b-gc9s93r88h] {
            grid-template-columns: repeat(4, 1fr);
        }

        .apos-table[b-gc9s93r88h] {
            font-size: 14px;
        }

        .finalist[b-gc9s93r88h] {
            font-size: 14px;
        }

        .current-title[b-gc9s93r88h] {
            font-size: 16px;
        }

        .list-name[b-gc9s93r88h] {
            font-size: 14px;
        }

        .imgishere[b-gc9s93r88h] {
            height: 14vh;
        }

        .up-down[b-gc9s93r88h] {
            height: 33vh;
            max-height: 35vh;
            overflow-y: scroll;
            overflow-x: hidden;
            border: 1px solid none;
            background-color: transparent;
            margin-top: 4%;
            padding: 0 10px;
        }
        .search-input[b-gc9s93r88h]{
            font-size:16px !important;
        }
    }

    @media only screen and (max-width:1080px) {
        .current-title[b-gc9s93r88h] {
            font-size: 14px;
        }

        .search-input[b-gc9s93r88h] {
            font-size: 12px !important;
        }

        .up-down[b-gc9s93r88h] {
            height: 30vh;
        }

        .finalist[b-gc9s93r88h] {
            gap: 0.3rem;
        }

        .add-discount[b-gc9s93r88h] {
            gap: 0.3rem;
        }

        .charge-btn[b-gc9s93r88h] {
            width: 25vw;
            height: 8vh;
            position: absolute;
            bottom: 4vh;
            right: 3vw;
        }

        .nav-btn button[b-gc9s93r88h] {
            font-size: 15px;
        }

        .charge-btn[b-gc9s93r88h] {
            font-size: 14px;
        }
        .appluydisbtn[b-gc9s93r88h] {
            font-size: 14px;
        }

    }
/* /Pages/Appointment.razor.rz.scp.css */
.appointmentpage[b-3okpnw1nfz] {
    background-color: #fff;
    color: #000;
    height: 88vh;
    border-radius: 0 0 0 50px;
}


.artist-top[b-3okpnw1nfz] {
    display: flex;
  gap:2%;
}

.artist-heading h3[b-3okpnw1nfz] {
    margin-bottom: 0;
}

.artist-heading[b-3okpnw1nfz] {
    display: flex;
    gap: 5%;
}

.addartistbtn[b-3okpnw1nfz] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}

/*===========================modal===================================*/
.modal-dialog[b-3okpnw1nfz]{
    display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin:0;
}
.modal[b-3okpnw1nfz] {
    display: block;
    background-color: rgba(10,10,10,.8);
    width: 100%;
}
.add-appointment-modal[b-3okpnw1nfz] {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
    height: 80vh;
    overflow-y: scroll;
    background-color: #F7F9FC;
/*    margin-bottom:5%;*/
}

.modal-title[b-3okpnw1nfz] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-content[b-3okpnw1nfz] {
    background-color: #F7F9FC;
    width: 100vw;
    height: 100vh;
    margin-left: 0px;
    left: 0%;
    position: absolute;
}
.footer-close[b-3okpnw1nfz]{
    background-color:#000;
    color:#fff;
    padding:5px 15px;
}



.text-end[b-3okpnw1nfz]{
    display:flex;
    justify-content:end;
    align-items:center;
}
.top-top[b-3okpnw1nfz] {
    display: grid;
    grid-template-columns:80% 20%;
    padding:5px 15px;
}

.topcontainer[b-3okpnw1nfz] {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

.appointment-top[b-3okpnw1nfz]{
    display:flex;
    gap:5%;
}

[b-3okpnw1nfz]::-webkit-scrollbar {
    width: 5px;
    border: none;
}

[b-3okpnw1nfz]::-webkit-scrollbar-track {
    background: grey;
    border: none;
}

[b-3okpnw1nfz]::-webkit-scrollbar-thumb {
    background-color: black;
    border: none;
    border-radius: 5px !important;
}

.buttondiv[b-3okpnw1nfz] {
    display: flex;
    justify-content: end;
}

.addappointmentbtn[b-3okpnw1nfz] {
    background-color: #000;
    color: #fff;
}


.closeicon[b-3okpnw1nfz] {
    font-size: 24px;
    margin-left: 65%;
    cursor: pointer;
}

.advace-one[b-3okpnw1nfz]{
    text-align:center;
}



.cusnameinput[b-3okpnw1nfz], .remarksinput[b-3okpnw1nfz], .bookedbyinput[b-3okpnw1nfz], .companyidinput[b-3okpnw1nfz], .priceinput[b-3okpnw1nfz], .appointtimeinput[b-3okpnw1nfz], .appointdateinput[b-3okpnw1nfz], .artistnameinput[b-3okpnw1nfz] {
    border-radius: 5px;
    width: 100%;
    height: 4.5vh;
    background-color: #bec4c1;
    padding-left: 10px;
}

.amountreceivedinput[b-3okpnw1nfz] {
    border-radius: 5px;
    width: 100%;
    height: 4.5vh;
    background-color: #fff;
    padding-left: 10px;
}

.remarksinput[b-3okpnw1nfz] {
    height: 10vh !important;
}

.addproductbtnmodal[b-3okpnw1nfz] {
    border: none;
    width: 5vw;
    height: 4vh;
    background-color: #b8e3cd;
}

/*table*/

.table-container[b-3okpnw1nfz] {
    max-height: 70vh;
    overflow-y: auto;
    width: 100%;
    /* border: 1px solid #ccc;*/
}

    .table-container table[b-3okpnw1nfz] {
        width: 100%;
        border-collapse: collapse;
    }

table tbody tr:hover[b-3okpnw1nfz] {
    background-color: #d9d9d9;
    color: #111;
}

.table-container th[b-3okpnw1nfz],
.table-container td[b-3okpnw1nfz] {
    padding: 15px 5px;
    text-align: center;
    /*  border-bottom: 1px solid #ddd;*/
}

.table-container .center-td[b-3okpnw1nfz] {
    text-align: center;
}

.table-container thead[b-3okpnw1nfz] {
    background-color: #fff;
    color: #111 !important;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #000;
    text-align:center;
}


.table[b-3okpnw1nfz] {
    margin-bottom: 0 !important;
}





/*.email-cell, .PhNo-cell {
    max-width: 20%;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}*/

/* Switch Styles */

.switch[b-3okpnw1nfz] {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input[b-3okpnw1nfz] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider[b-3okpnw1nfz] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider[b-3okpnw1nfz]:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider[b-3okpnw1nfz] {
    background-color: #2196F3;
}

input:focus + .slider[b-3okpnw1nfz] {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider[b-3okpnw1nfz]:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */

.slider.round[b-3okpnw1nfz] {
    border-radius: 34px;
}

    .slider.round[b-3okpnw1nfz]:before {
        border-radius: 50%;
    }


/*viewdatachange-modal*/
.update-quantity-save-btn[b-3okpnw1nfz] {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 0;
}

.update-quantity-modal-header[b-3okpnw1nfz] {
    display: grid;
    grid-template-columns: 20% 90%;
    padding: 0;
    border-bottom: 1px solid #dee2e6;
}


.modal-content-small[b-3okpnw1nfz] {
    background-color: #F8F8F8;
    border-radius: 0;
    text-align: center;
    position: fixed;
    height: 89vh;
    left: 25%;
    width: 50%;
    top: 5%;
    max-width: 50%;
}

.update-title[b-3okpnw1nfz] {
    line-height: 1.5;
    color: #000;
    font-weight: 500;
    margin:0%;
}

.update-close[b-3okpnw1nfz] {
    display: flex;
    justify-content: start;
    padding: 8%;
}

.update-header[b-3okpnw1nfz] {
    display: flex;
    align-items: center;
    align-content: center;
}

.time-range-day ul[b-3okpnw1nfz]{
    list-style:none;
}

.modal-body[b-3okpnw1nfz] {
    max-height: 80vh;
    overflow-y: scroll;
}

.upper-bottom[b-3okpnw1nfz] {
    border: 1px solid rgba(0, 0, 0, .125);
}

.appoint-sidebyside[b-3okpnw1nfz]{
    display:grid;
    grid-template-columns:30% 70%;
    gap:10%;
    align-items:center;
}

.right-appoint[b-3okpnw1nfz] {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}






/*---------------------------------*/
.paginationnnav[b-3okpnw1nfz] {
    display: flex;
    padding: 10px 25px;
    position: absolute;
    bottom: 2vh;
    width: 90%;
}

.pagination[b-3okpnw1nfz] {
    display: flex;
    padding-left: 0;
    list-style: none;
    justify-content: flex-end;
}

.datarange-btn[b-3okpnw1nfz] {
    padding: 5px;
    background-color: #EBF9F1;
    color: #1F9254;
    border: 1px solid #1F9254;
    font-size: 14px;
}

.page-item.active .page-link[b-3okpnw1nfz] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}

.confirm-booking[b-3okpnw1nfz] {

    padding: 10px;
    background-color: #2ecc71;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}



    .confirm-booking:hover:not(:disabled)[b-3okpnw1nfz] {
        background-color: #27ae60;
    }

    .confirm-booking:disabled[b-3okpnw1nfz] {
        background-color: #95a5a6;
        cursor: not-allowed;
    }


.back-top[b-3okpnw1nfz]{
    display:flex;
    justify-content:space-between;
    width:100%;
    margin-bottom:2%;
}
.modal-header[b-3okpnw1nfz]{
    display:flex;
    flex-direction:column;
    border:none;
}
.modal-title[b-3okpnw1nfz] {
    font-size: 32px;
    font-weight: 600;
    color: #170F49;
}
.gobackbtn i[b-3okpnw1nfz]{
    font-size: 28px;
    color: #170F49;
}
.input-btn[b-3okpnw1nfz]{
    display:flex;
    gap:2%;
}

.advance-all[b-3okpnw1nfz] {
    height: 45vh;
    align-content: center;
    margin: 5% 0%;
}


.form-row[b-3okpnw1nfz] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.form-label[b-3okpnw1nfz] {
    color: #170F49;
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}
.form-hov[b-3okpnw1nfz]::placeholder {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
}

.form-hov[b-3okpnw1nfz],.advance-all[b-3okpnw1nfz] {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
    padding: 0.9rem;
    border: none;
    border-radius:10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .form-hov:hover[b-3okpnw1nfz] {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    }
.add-btn-form[b-3okpnw1nfz] {
    padding: 0.9rem;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    background-color: #383838;
    color:#fff;
}
    .add-btn-form:hover[b-3okpnw1nfz] {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
        background-color: #000000;
    }



.customer-info[b-3okpnw1nfz] {
    padding: 0%;
    overflow-y: scroll;
    height: 75vh;
}












    /* Media Queries */
    @media only screen and (max-width:1720px) {
        .table-container[b-3okpnw1nfz] {
        height: 70vh;
    }

    .paginationpara[b-3okpnw1nfz], .pagination-last[b-3okpnw1nfz], .appoint-heading[b-3okpnw1nfz], .addappointmentbtn[b-3okpnw1nfz], .table-container[b-3okpnw1nfz], .table tbody[b-3okpnw1nfz] {
        font-size: 18px;
    }
    .paginationnnav[b-3okpnw1nfz] {
        display: flex;
        position: absolute;
        width: 90%;
    }
}
@media only screen and (max-width:1440px) {
    .paginationpara[b-3okpnw1nfz], .pagination-last[b-3okpnw1nfz], .appoint-heading[b-3okpnw1nfz], .addappointmentbtn[b-3okpnw1nfz], .table-container[b-3okpnw1nfz], .table tbody[b-3okpnw1nfz] {
        font-size: 16px;
    }
    .table-container[b-3okpnw1nfz]{
        height:68vh;
    }
    .switch[b-3okpnw1nfz] {
        width: 60px;
        height: 34px;
    }

        .slider[b-3okpnw1nfz]:before {
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
        }
    input:checked + .slider[b-3okpnw1nfz]:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
}
@media only screen and (max-width:1200px) {
    .paginationpara[b-3okpnw1nfz], .pagination-last[b-3okpnw1nfz], .appoint-heading[b-3okpnw1nfz], .addappointmentbtn[b-3okpnw1nfz], .table-container[b-3okpnw1nfz], .table tbody[b-3okpnw1nfz] {
        font-size: 15px;
    }

    .table-container[b-3okpnw1nfz] {
        height: 56vh;
    }
    .switch[b-3okpnw1nfz] {
        width: 50px;
        height: 28px;
    }

    .slider[b-3okpnw1nfz]:before {
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
    }
    input:checked + .slider[b-3okpnw1nfz]:before {
        -webkit-transform: translateX(22px);
        -ms-transform: translateX(22px);
        transform: translateX(22px);
    }
}
@media only screen and (max-width:1024px) {
    .paginationpara[b-3okpnw1nfz], .pagination-last[b-3okpnw1nfz], .appoint-heading[b-3okpnw1nfz], .addappointmentbtn[b-3okpnw1nfz], .table-container[b-3okpnw1nfz], .table tbody[b-3okpnw1nfz] {
        font-size: 14px;
    }

    .table-container[b-3okpnw1nfz] {
        height: 56vh;
    }

    .switch[b-3okpnw1nfz] {
        width: 50px;
        height: 28px;
    }

    .slider[b-3okpnw1nfz]:before {
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
    }

    input:checked + .slider[b-3okpnw1nfz]:before {
        -webkit-transform: translateX(22px);
        -ms-transform: translateX(22px);
        transform: translateX(22px);
    }
}
@media only screen and (max-width:876px){
    .paginationpara[b-3okpnw1nfz], .pagination-last[b-3okpnw1nfz], .appoint-heading[b-3okpnw1nfz], .addappointmentbtn[b-3okpnw1nfz], .table-container[b-3okpnw1nfz], .table tbody[b-3okpnw1nfz] {
        font-size: 12px;
    }
}






@media (max-width: 768px) {
    .pagination .page-item[b-3okpnw1nfz] {
        display: none; /* Hide all by default */
    }

        /* Always show Previous and Next buttons */
        .pagination .page-item:first-child[b-3okpnw1nfz],
        .pagination .page-item:last-child[b-3okpnw1nfz] {
            display: inline-block;
        }

        /* Show the current (active) page */
        .pagination .page-item.active[b-3okpnw1nfz] {
            display: inline-block;
        }

            /* Show the next page after the active one */
            .pagination .page-item.active + .page-item[b-3okpnw1nfz] {
                display: inline-block;
            }

            /* Optionally, show the page before the current one */
            .pagination .page-item.active ~ .page-item[b-3okpnw1nfz],
            .pagination .page-item.active:has(+ .page-item)[b-3okpnw1nfz] {
                /* Optional extra styles if needed */
            }

    .appointmentpage[b-3okpnw1nfz] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0 0 0 0px;
        padding:5px 15px;
    }

    .artist-top[b-3okpnw1nfz] {
        font-weight: 500;
    }

    .product-page[b-3okpnw1nfz] {
        background-color: #fff;
        color: #000;
        height: 86vh;
        border-radius: 0px 0 0 0px;
    }

    .artist-heading[b-3okpnw1nfz] {
        font-size: 20px;
    }

    .nav-section[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 15px 5px 15px;
    }

    .addbtn[b-3okpnw1nfz] {
        display: flex;
        justify-content: end;
        align-items: end;
        /*        padding: 0 15px;*/
    }

    .darkadd[b-3okpnw1nfz] {
        width: 55%;
    }

    .title-top[b-3okpnw1nfz] {
        text-align: center;
    }

    .prev-button[b-3okpnw1nfz] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }



    .title-top[b-3okpnw1nfz] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-3okpnw1nfz] {
        font-size: 19px;
    }

    .filter-section[b-3okpnw1nfz] {
        padding: 5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .filter-text[b-3okpnw1nfz] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left[b-3okpnw1nfz] {
        font-size: 15px;
    }

    .prev-two[b-3okpnw1nfz] {
        border: none;
        font-weight: 600;
        font-size: 15px;
        background-color: #FFFF;
    }

    .btn-previous-two[b-3okpnw1nfz] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-3okpnw1nfz] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

    .dropdown[b-3okpnw1nfz] {
        display: flex;
        justify-content: end;
        position: relative;
        padding: 0 15px;
    }


    .dropdown-menu[b-3okpnw1nfz]{
        width: 96.1vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }

    .you[b-3okpnw1nfz] {
        display: flex;
        width: 100%;
        justify-content: end;
    }

    Input styling
    input[type="date"][b-3okpnw1nfz],
    input[type="text"][b-3okpnw1nfz],
    select[b-3okpnw1nfz] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 13px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-3okpnw1nfz],
        input[type="text"]:focus[b-3okpnw1nfz],
        select:focus[b-3okpnw1nfz] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

    Placeholder styling
    input[b-3okpnw1nfz]::placeholder {
        color: #999;
        font-size: 12px;
    }

    Filter button styling
    .filter-button[b-3okpnw1nfz] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .filter-button:hover[b-3okpnw1nfz] {
        background-color: #5a4cbc;
    }

    Dropdown toggle button styling
    .prev-two[b-3okpnw1nfz] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

    .prev-two:hover[b-3okpnw1nfz] {
        color: #6a5acd;
    }

    /*     Animation for dropdown */
    @keyframes fadeIn-b-3okpnw1nfz {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-3okpnw1nfz] {
        animation: fadeIn-b-3okpnw1nfz 0.2s ease-out forwards;
    }

    .start[b-3okpnw1nfz], .end[b-3okpnw1nfz], .transaction[b-3okpnw1nfz], .bill[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .bill input[type=text][b-3okpnw1nfz] {
            width: 60%;
            font-size: 12px;
        }

        .bill input[b-3okpnw1nfz]::placeholder {
            text-align: center;
        }

        .transaction select[b-3okpnw1nfz] {
            width: 60%;
            display: flex;
            margin-left: 25%;
        }


    .top-body[b-3okpnw1nfz] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-3okpnw1nfz] {
        font-size: 12px;
    }

    .appoint-count[b-3okpnw1nfz] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-3okpnw1nfz] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10%;
    }

        .right-detail img[b-3okpnw1nfz] {
            width: 12%;
            height: 30%;
        }

    .name[b-3okpnw1nfz] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-3okpnw1nfz], .address[b-3okpnw1nfz] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-3okpnw1nfz] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-3okpnw1nfz] {
        height: 53vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .body-main[b-3okpnw1nfz] {
        max-height: 60vh;
    }

    .filter-left[b-3okpnw1nfz], .filter-title[b-3okpnw1nfz] {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .searchisbutton[b-3okpnw1nfz] {
        display: flex;
        justify-content: end;
        margin-bottom: 5px;
    }

    .darksearch[b-3okpnw1nfz] {
        width: 30%;
    }

    .darkadd[b-3okpnw1nfz] {
        font-size: 16px;
    }

    .bill[b-3okpnw1nfz] {
        margin-bottom: 5px;
    }


    .two-spans-groups[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }




    .dropdown-item[b-3okpnw1nfz] {
        display: block;
        width: 100%;
        padding: .45rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 15px;
    }

    a:hover[b-3okpnw1nfz] {
        color: #0a58ca;
    }


    .dropdown-item:focus[b-3okpnw1nfz], .dropdown-item:hover[b-3okpnw1nfz] {
        color: #1e2125;
        background-color: #e9ecef;
    }
}



@media (max-width: 645px) {

    .darkadd[b-3okpnw1nfz] {
        width: 52%;
        font-size: 14px;
    }

    .artist-heading[b-3okpnw1nfz] {
        font-size: 18px;
    }

    .dropdown-menu[b-3okpnw1nfz] {
        width: 95.7vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }

    .nav-section[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 12px 5px 12px;
    }
}

@media (max-width:620px){
    .dropdown-menu[b-3okpnw1nfz] {
        width: 95.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width: 590px) {
    .darkadd[b-3okpnw1nfz] {
        width: 53%;
        font-size: 12px;
    }

    .artist-heading[b-3okpnw1nfz] {
        font-size: 17px;
    }

    .two-spans-groups[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: 45% 55%;
    }

    .dropdown-menu[b-3okpnw1nfz] {
        width: 95.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }
}

@media (max-width:530px){
    .dropdown-menu[b-3okpnw1nfz]{
        width: 94.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }

    .nav-section[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 9px 5px 9px;
    }
}

@media (max-width: 500px) {
    .customer-appoint[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-3okpnw1nfz] {
        gap: 1%;
        justify-content: end;
    }


    .paginationpara[b-3okpnw1nfz], .pagination-last[b-3okpnw1nfz], .inquiry-heading[b-3okpnw1nfz], .addinquirybtn[b-3okpnw1nfz], .table-container[b-3okpnw1nfz], .table tbody[b-3okpnw1nfz] {
        font-size: 12px;
    }

    .dropdown-item[b-3okpnw1nfz] {
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 14px;
    }

    .bill input[type=text][b-3okpnw1nfz] {
        width: 65%;
        font-size: 11px;
    }

    .darksearch[b-3okpnw1nfz] {
        width: 32%;
        font-size: 12px;
    }

    .dropdown-menu[b-3okpnw1nfz]{
        width: 94.3vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }

    .nav-section[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 9px 5px 9px;
    }
}

@media (max-width: 478px) {

    .filter-left i[b-3okpnw1nfz] {
        font-size: 13px;
    }

    .prev-two[b-3okpnw1nfz] {
        border: none;
        font-weight: 600;
        font-size: 16px;
        background-color: #FFFF;
    }

    .filter-text[b-3okpnw1nfz] {
        font-size: 13px;
        font-weight: 400;
    }

    .darkadd[b-3okpnw1nfz] {
        width: 60%;
    }

    .darkadd[b-3okpnw1nfz] {
        width: 55%;
        font-size: 10px;
    }

    .artist-heading[b-3okpnw1nfz] {
        font-size: 16px;
    }

    .name[b-3okpnw1nfz] {
        font-weight: 600;
        font-size: 13px;
        line-height: 19.49px;
    }

    .time[b-3okpnw1nfz], .address[b-3okpnw1nfz] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-3okpnw1nfz] {
        font-size: 11px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .paginationpara[b-3okpnw1nfz], .pagination-last[b-3okpnw1nfz], .inquiry-heading[b-3okpnw1nfz], .addinquirybtn[b-3okpnw1nfz], .table-container[b-3okpnw1nfz], .table tbody[b-3okpnw1nfz] {
        font-size: 11px;
    }


    .bill input[type=text][b-3okpnw1nfz] {
        width: 71%;
        font-size: 11px;
    }

    .darksearch[b-3okpnw1nfz] {
        width: 36%;
        font-size: 12px;
    }

    .nav-section[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 5px 5px 5px;
    }

    .pagination-last[b-3okpnw1nfz], .paginationpara[b-3okpnw1nfz] {
        font-size: 10px;
    }

    .dropdown-menu[b-3okpnw1nfz] {
        width: 94vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 32px;
    }
}

@media (max-width:445px){
    .dropdown-menu[b-3okpnw1nfz] {
        width: 93.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 32px;
    }
}

@media (max-width:420px){
    .dropdown-menu[b-3okpnw1nfz]{
        width: 93.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 32px;
    }

    .nav-section[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 0px 5px 0px;
    }

    .darkadd[b-3okpnw1nfz]{
        width: 60%;
        font-size: 10px;
    }
}


@media (max-width:390px) {
    .pagination-last[b-3okpnw1nfz], .paginationpara[b-3okpnw1nfz] {
        font-size: 9px;
    }

    .paginationnnav[b-3okpnw1nfz] {
        display: flex;
        padding: 10px 10px;
        position: absolute;
        bottom: 2vh;
        width: 85%;
    }

    .name[b-3okpnw1nfz] {
        font-weight: 600;
        font-size: 12px;
        line-height: 19.49px;
    }

    .time[b-3okpnw1nfz], .address[b-3okpnw1nfz] {
        font-size: 10px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-3okpnw1nfz] {
        font-size: 10px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }


    .appoint-count[b-3okpnw1nfz] {
        font-size: 11px;
        font-weight: 600;
    }

    .day[b-3okpnw1nfz] {
        font-size: 11px;
    }

    .filter-text[b-3okpnw1nfz] {
        font-size: 13px;
        font-weight: 400;
    }

    .filter-left i[b-3okpnw1nfz] {
        font-size: 11px;
    }

    .prev-two[b-3okpnw1nfz] {
        border: none;
        font-weight: 600;
        font-size: 15px;
        background-color: #FFFF;
    }


    .darkadd[b-3okpnw1nfz] {
        width: 60%;
        font-size: 9px;
    }

    .artist-heading[b-3okpnw1nfz] {
        font-size: 14px;
    }




    .two-spans-groups[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: revert;
    }


    .dropdown-item[b-3okpnw1nfz] {
        display: block;
        width: 100%;
        padding: .40rem 0.2rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 12px;
    }

    .bill input[type=text][b-3okpnw1nfz] {
        width: 72%;
        font-size: 10px;
    }

    .darksearch[b-3okpnw1nfz] {
        width: 36%;
        font-size: 10px;
    }

    .dropdown-menu[b-3okpnw1nfz]{
        width: 92.7vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 31px;
    }
}

@media (max-width:360px) {

    .pagination-last[b-3okpnw1nfz], .paginationpara[b-3okpnw1nfz] {
        font-size: 8px;
    }

    .you[b-3okpnw1nfz] {
        display: flex;
        width: 100%;
        justify-content: center;
    }



    .bill input[type=text][b-3okpnw1nfz] {
        width: 90%;
        font-size: 10px;
    }

    .darksearch[b-3okpnw1nfz] {
        width: 48%;
        font-size: 10px;
    }

    .darkadd[b-3okpnw1nfz] {
        width: 62%;
        font-size: 8px;
    }

    .artist-heading[b-3okpnw1nfz] {
        font-size: 13px;
    }

    .dropdown-menu[b-3okpnw1nfz] {
        width: 92.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}

@media (max-wudth:345px){
    .dropdown-menu[b-3okpnw1nfz] {
        width: 91.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }

    .nav-section[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 0px 5px 0px;
    }
}


@media (max-width:320px) {
    .bill input[type=text][b-3okpnw1nfz] {
        width: 90%;
        font-size: 9px;
    }


    .pagination-last[b-3okpnw1nfz], .paginationpara[b-3okpnw1nfz] {
        font-size: 8px;
    }



    .filter-text[b-3okpnw1nfz] {
        font-size: 11px;
        font-weight: 400;
    }

    .filter-left i[b-3okpnw1nfz] {
        font-size: 10px;
    }

    .appoint-count[b-3okpnw1nfz] {
        font-size: 10px;
        font-weight: 600;
    }

    .day[b-3okpnw1nfz] {
        font-size: 10px;
    }

    .nav-section[b-3okpnw1nfz] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 0px 8px 0px;
    }

    

    .paginationnnav[b-3okpnw1nfz] {
        display: flex;
        padding: 10px 3px;
        position: absolute;
        bottom: 2vh;
        width: 84%;
    }

    .dropdown-menu[b-3okpnw1nfz] {
        width: 91vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }

    .darkadd[b-3okpnw1nfz] {
        width: 68%;
        font-size: 8px;
    }

    .modal-overlay[b-3okpnw1nfz] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5); /* dimmed background */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1050; /* high enough to float above everything */
    }

    .modal-content[b-3okpnw1nfz] {
     /*   background: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 90%;
        max-width: 800px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        position: relative;*/
    }

        /* Optional close button styles if needed */
        .modal-content .close-btn[b-3okpnw1nfz] {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5rem;
            color: #333;
            cursor: pointer;
            background: none;
            border: none;
        }

}
/* /Pages/AppointmentCalendar.razor.rz.scp.css */
html[b-o9ha28fedi] {
    margin: 0px;
    padding: 0px;
    font-family: 'Proxima Nova Condensed', sans-serif !important;
    background-color: #000;
}

.calender-main[b-o9ha28fedi] {
    background-color: #F8F8F8;
    position: absolute;
    width: 80%;
    height: 119%;
    right: 0px;
    margin-top: 2%;
    margin-right: 5%;
    border-radius: 20px 0px 0px 20px;
}

.top-calender[b-o9ha28fedi] {
    width: 100%;
    height: 12%;
    border-radius: 20px 0px 0px 0px;
    margin-bottom: 7px;
}

.right-top[b-o9ha28fedi] {
    align-content: center;
    margin-left: 5%;
}

.title-calender[b-o9ha28fedi] {
    font-weight: 600;
    font-size: 27px;
}

.calender-outerlayer[b-o9ha28fedi] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.left-top[b-o9ha28fedi] {
    display: flex;
    gap: 5%;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    padding: 1%;
}

    .left-top i[b-o9ha28fedi] {
        cursor: pointer;
    }

.thi-display[b-o9ha28fedi] {
    display: flex;
    align-items: flex-end;
    border-style: solid;
    border-color: #D9D9D9;
    border-radius: 10px;
    width: 150%;
}

.thi-icon[b-o9ha28fedi] {
    padding: 1.5% 7%;
}

.logo-outer[b-o9ha28fedi] {
    padding: 5% 13%;
    margin: 0% 0%;
}

.text-outer[b-o9ha28fedi] {
    padding-top: 5%;
    padding-bottom: 15%;
}


.content-outerlayer[b-o9ha28fedi] {
    background-color: #FFFFFF;
    height: 83%;
}

.date-top[b-o9ha28fedi] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 2% 1% 0% 0%;
    gap: 5%;
}


.level-up[b-o9ha28fedi] {
    font-weight: 600;
}


.left-date[b-o9ha28fedi] {
    display: flex;
    justify-content: end;
    gap: 1%;
}

.right-date[b-o9ha28fedi] {
    margin-left: 5%;
}

#miss[b-o9ha28fedi] {
    border-color: #000;
    background-color: #F6F7F9;
}

#inside[b-o9ha28fedi] {
    padding: 1%;
}


.col[b-o9ha28fedi] {
    border-style: solid;
    border-width: 1px;
    border-color: #DCE0E5;
}

#second-number[b-o9ha28fedi] {
    padding-bottom: 6%;
}

.color-days[b-o9ha28fedi] {
    color: #6F7C8E;
    font-size: 13px;
    font-weight: 600;
}


.month[b-o9ha28fedi] {
    border: none;
    padding: 1% 5%;
    font-weight: 600;
    border-radius: 5px;
    font-size: 13px;
}

    .month:hover[b-o9ha28fedi] {
        opacity: 0.8;
    }

    .month:active[b-o9ha28fedi] {
        opacity: 0.9;
    }

.week[b-o9ha28fedi] {
    border: none;
    padding: 1% 5%;
    font-weight: 600;
    border-radius: 5px;
    font-size: 13px;
}

    .week:hover[b-o9ha28fedi] {
        opacity: 0.8;
    }

    .week:active[b-o9ha28fedi] {
        opacity: 0.9;
    }

.day[b-o9ha28fedi] {
    border: none;
    padding: 1% 5%;
    font-weight: 600;
    border-radius: 5px;
    font-size: 13px;
}

    .day:hover[b-o9ha28fedi] {
        opacity: 0.8;
    }

    .day:active[b-o9ha28fedi] {
        opacity: 0.9;
    }


/* inside-button */
.btn-money button[b-o9ha28fedi] {
    border: none;
    background-color: #DB6E00;
    font-size: 12px;
    color: #FFFFFF;
    border-radius: 5px;
}




.sidenav[b-o9ha28fedi] {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    transition: 0.5s;
}

    .sidenav a[b-o9ha28fedi] {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover[b-o9ha28fedi] {
            color: #f1f1f1;
        }

    .sidenav .closebtn[b-o9ha28fedi] {
        position: absolute;
        top: 0;
        right: 0px;
        font-size: 36px;
        margin-top: -4%;
    }

.detail-appoint[b-o9ha28fedi] {
    display: flex;
    justify-content: center;
    background-color: #DCE0E5;
    padding: 5%;
}

.btn-green button[b-o9ha28fedi] {
    border: none;
    background-color: #00A81C;
    font-size: 12px;
    color: #FFFFFF;
    border-radius: 5px;
    padding: 0% 10%;
}

.btn-gray button[b-o9ha28fedi] {
    border: none;
    background-color: #B6C1CA;
    font-size: 12px;
    color: #FFFFFF;
    border-radius: 5px;
    padding: 0% 10%;
}
/* /Pages/Artist.razor.rz.scp.css */
.artistpage[b-46ava9x3xy] {
    background-color: #fff;
    color: #000;
    height: 88vh;
    border-radius: 0 0 0 50px;
}


.artist-top[b-46ava9x3xy]{
    display:flex;
    justify-content:space-between;
    padding:10px 25px;
}
.artist-heading h3[b-46ava9x3xy]{
    margin-bottom:0;
}
.artist-heading[b-46ava9x3xy]{
    display:flex;
    gap:5%;

}

.addartistbtn[b-46ava9x3xy] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}


.artist-heading h3[b-46ava9x3xy]{
    font-size:24px;
}


/* Table styles */
.table-container[b-46ava9x3xy] {
    max-height: 67vh;
    overflow-y: auto;
    width: 100%;

}
.table tbody[b-46ava9x3xy]{
}

.table-container table[b-46ava9x3xy] {
    width: 100%;
    border-collapse: collapse;
}

table tbody tr:hover[b-46ava9x3xy] {
    background-color: #d9d9d9;
    color: #111;
}

.table-container th[b-46ava9x3xy],
.table-container td[b-46ava9x3xy] {
    padding:15px 10px;
    text-align: center;
  /*  border-bottom: 1px solid #ddd;*/
}
.table-container .center-td[b-46ava9x3xy] {
    text-align: center;
}
.table-container thead[b-46ava9x3xy] {
    background-color: #fff;
    color: #111 !important;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom:1px solid #000;
}

.table[b-46ava9x3xy] {
    margin-bottom: 0 !important;
}

.eyeicon[b-46ava9x3xy], .editicon[b-46ava9x3xy], .deleticon[b-46ava9x3xy], .page-link[b-46ava9x3xy] {
    cursor: pointer;
}


/*Pagination*/
.pagination[b-46ava9x3xy] {
    justify-content: end;
}

.page-item.active .page-link[b-46ava9x3xy] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}


.pagination[b-46ava9x3xy]{
    margin-bottom:0;
}
.paginationnnav[b-46ava9x3xy]{
    display: flex;
    padding: 10px 30px;
    position: absolute;
    bottom: 4vh;
    width: 90%;
}
/* Scrollbar styles */
[b-46ava9x3xy]::-webkit-scrollbar {
    width: 5px;
    border: none;
}

[b-46ava9x3xy]::-webkit-scrollbar-track {
    background: grey;
    border: none;
}

[b-46ava9x3xy]::-webkit-scrollbar-thumb {
    background-color: black;
    border: none;
    border-radius: 5px !important;
}

/* Modal styles */
.modal-dialog[b-46ava9x3xy] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}

.modal[b-46ava9x3xy] {
    display: block;
    background-color: rgba(10,10,10,.8);
    width: 100%;
}

.modal-content[b-46ava9x3xy] {
    background-color: #F7F9FC;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 1.5rem;
    box-sizing: border-box;
    z-index: 1050;
    overflow-y: auto;
}


.back-top[b-46ava9x3xy] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2%;
}

.modal-header[b-46ava9x3xy] {
    display: flex;
    flex-direction: column;
    border: none;
}

.modal-title[b-46ava9x3xy] {
    font-size: 32px;
    font-weight: 600;
    color: #170F49;
}

.gobackbtn i[b-46ava9x3xy] {
    font-size: 28px;
    color: #170F49;
}

.save-button[b-46ava9x3xy] {
    background-color: #000;
    color: #fff;
    width: 20%;
}



.closeicon[b-46ava9x3xy] {
    font-size: 24px;
    cursor: pointer;
}


.save[b-46ava9x3xy]{
    padding: 10px;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}



    .save:hover:not(:disabled)[b-46ava9x3xy] {
        opacity:0.6;
    }

    .save:disabled[b-46ava9x3xy] {
        opacity:0.8;
        cursor: not-allowed;
    }


.form-label[b-46ava9x3xy] {
    color: #170F49;
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}

.form-hov[b-46ava9x3xy]::placeholder {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
}

.form-hov[b-46ava9x3xy] {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .form-hov:hover[b-46ava9x3xy] {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    }


.cusnameinput[b-46ava9x3xy], .remarksinput[b-46ava9x3xy], .bookedbyinput[b-46ava9x3xy], .companyidinput[b-46ava9x3xy],
.priceinput[b-46ava9x3xy], .appointtimeinput[b-46ava9x3xy], .appointdateinput[b-46ava9x3xy], .artistnameinput[b-46ava9x3xy] {
    border-radius: 5px;
    width: 100%;
    height: 4.5vh;
    background-color: #bec4c1;
    padding-left: 10px;
}

.remarksinput[b-46ava9x3xy] {
    height: 10vh !important;
}

.scrolldown[b-46ava9x3xy] {
    background-color: #ffffff;
    border-radius: 10px;
}

.scrolldown[b-46ava9x3xy] {
    height: 42vh;
}

    .scrolldown .table tbody tr:hover[b-46ava9x3xy] {
        background-color: var(--our-modal-color);
        color: #ffffff;
    }

.scrolldown[b-46ava9x3xy] {
    overflow-y: scroll;
}



.table thead[b-46ava9x3xy] {
    border-bottom: 1px solid #000000;
}

.scrolldown .table thead[b-46ava9x3xy] {
    background-color: #ffffff;
    color: #000000;
    position: sticky;
    top: 0;
    z-index: 1;
}

.modal-footer[b-46ava9x3xy]{
    padding:1% 1%;
}



.pagination-last[b-46ava9x3xy] {
    display: flex;
    justify-content: end;
    align-items: center;
    }
.paginationpara[b-46ava9x3xy]{
    font-size:16px;
    margin-bottom:0;
}


/*content-modal */
.modal-detail[b-46ava9x3xy] {
    background-color: var(--our-modal-color);
    background-color: #ffffff;
    color: #000;
    position:fixed;
    width:100vw;
    padding:1%;
}

.modal-content-full[b-46ava9x3xy] {
    background-color: #F7F9FC;
    color: #000;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050; /* Ensures it's on top of other content */
    overflow-y: auto;
    padding: 1.5rem;
    box-sizing: border-box;
}


.modal-body-full[b-46ava9x3xy] {
    padding: 1rem;
    overflow-y: hidden;
    margin-bottom: 4%;
}



.modal-top[b-46ava9x3xy] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding:5px 0px;
}

.modal-part p[b-46ava9x3xy]{
    margin-bottom:10px;
}

.close[b-46ava9x3xy] {
    font-size: 32px;
    cursor: pointer;
    border:none;
    background:none;
    position:fixed;
    right:2%;
}

close-btn[b-46ava9x3xy]{
    margin:0% 5%;
}

/*.pay{
    padding:6px 25px;
}*/

.modal-part[b-46ava9x3xy]{
    padding:0% 0%;
}

.end-btn[b-46ava9x3xy] {
    text-align: end;
    justify-content: end;
    align-items: end;
    margin:3% 0%;
}

.total[b-46ava9x3xy]{
    margin:10px 0px;
}




/* Responsive styles */
@media only screen and (max-width: 1700px) {
    .table-container[b-46ava9x3xy]{
            height:70vh;
    }
    .table-container[b-46ava9x3xy]{
        font-size:18px;
    }
    .addartistbtn[b-46ava9x3xy]{
        font-size:18px;
    }
    .artist-heading[b-46ava9x3xy]{
        font-size:18px;
    }
    .paginationpara[b-46ava9x3xy], .pagination-last[b-46ava9x3xy]{
        font-size:18px;
    }

    .modal-content[b-46ava9x3xy] {
        background-color: #F7F9FC;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        padding: 1.5rem;
        box-sizing: border-box;
        z-index: 1050; /* ensures it overlays other content */
    }

    
}


@media (max-width: 1440px) {
    .modal-content[b-46ava9x3xy] {
        width: 100vw;
        height: 100vh;
    }

    .modal-dialog[b-46ava9x3xy] {
        margin-left: 15%;
    }
    .table-container[b-46ava9x3xy]{
        height:70vh;
    }
   

    .paginationpara[b-46ava9x3xy], .pagination-last[b-46ava9x3xy], .artist-heading[b-46ava9x3xy], .addartistbtn[b-46ava9x3xy], .table-container[b-46ava9x3xy] {
        font-size: 16px;
    }

    .modal-content[b-46ava9x3xy] {
        background-color: #F7F9FC;
        width: 100vw;
        height: 100vh;
        margin: 0 auto;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        padding: 1rem;
        box-sizing: border-box;
    }

    
}



@media (max-width: 1200px) {
    .paginationpara[b-46ava9x3xy], .pagination-last[b-46ava9x3xy], .artist-heading[b-46ava9x3xy], .addartistbtn[b-46ava9x3xy], .table-container[b-46ava9x3xy] {
        font-size: 15px;
    }

}

@media (max-width: 1024px) {
    .paginationpara[b-46ava9x3xy], .pagination-last[b-46ava9x3xy], .artist-heading[b-46ava9x3xy], .addartistbtn[b-46ava9x3xy], .table-container[b-46ava9x3xy] {
        font-size: 14px;
    }
    .artistpage[b-46ava9x3xy]{
        padding:5px 15px ;
    }
}
@media (max-width: 900px) {
    .paginationpara[b-46ava9x3xy], .pagination-last[b-46ava9x3xy], .artist-heading[b-46ava9x3xy], .addartistbtn[b-46ava9x3xy], .table-container[b-46ava9x3xy] {
        font-size: 13px;
    }

    .artistpage[b-46ava9x3xy] {
        padding: 5px 15px;
    }

    .form-control[b-46ava9x3xy] {
        transition: none;
        font-size: 13px;
    }


}



/*

@media (max-width: 768px) {
    .table thead {
        font-size: 14px;
    }

    .table tbody {
        font-size: 12px;
    }

    .modal-content {
        width: 50vw;
        height: 50vh;
    }

    .modal-dialog {
        margin-left: 1%;
        margin-top: 5%;
    }

    .closeicon {
        margin-left: 70%;
    }

    .addartistbtn {
        width: 30%;
        font-size: 12px;
    }

    .table-container {
        max-width: 100%;
    }

    .text-end {
        max-width: 100%;
    }

    .paginationnnav {
        max-width: 100%;
        font-size: 12px;
        margin-bottom: 30px;
    }
}

@media (max-width: 600px) {

    .closeicon {
        margin-left: 60%;
    }

    .addartistbtn {
        width: 40%;
    }
}

@media (max-width: 480px) {
    .modal-dialog {
        margin-top: 3%;
    }

    .closeicon {
        margin-left: 50%;
    }

    .addartistbtn {
        width: 50%;
    }
}

@media (max-width: 360px) {


    .closeicon {
        margin-left: 40%;
    }

    .addartistbtn {
        width: 60%;
    }
}


*/



@media (max-width: 768px) {
    .mobile-only[b-46ava9x3xy] {
        display: block;
    }

    .desktop-only[b-46ava9x3xy] {
        display: none;
    }
}

@media (max-width: 768px) {
    .pagination .page-item[b-46ava9x3xy] {
        display: none; /* Hide all by default */
    }

        /* Always show Previous and Next buttons */
        .pagination .page-item:first-child[b-46ava9x3xy],
        .pagination .page-item:last-child[b-46ava9x3xy] {
            display: inline-block;
        }

        /* Show the current (active) page */
        .pagination .page-item.active[b-46ava9x3xy] {
            display: inline-block;
        }

            /* Show the next page after the active one */
            .pagination .page-item.active + .page-item[b-46ava9x3xy] {
                display: inline-block;
            }

            /* Optionally, show the page before the current one */
            .pagination .page-item.active ~ .page-item[b-46ava9x3xy],
            .pagination .page-item.active:has(+ .page-item)[b-46ava9x3xy] {
                /* Optional extra styles if needed */
            }

.artistpage[b-46ava9x3xy]{
    background-color: #fff;
    color: #000;
    height: 90vh;
    border-radius: 0px 0 0 0px;
}


.artist-top[b-46ava9x3xy]{
    padding:5px 0 0 5px ;
    padding:5px;
    font-weight:500;
}
.artist-heading[b-46ava9x3xy]{
    font-size:20px;
}

    .nav-section[b-46ava9x3xy] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding:0px 15px 5px 15px;
    }
    .addbtn[b-46ava9x3xy] {
        display: flex;
        justify-content: end;
        align-items: end;
/*        padding: 0 15px;*/
    }
    .darkadd[b-46ava9x3xy] {
        width: 40%;
    }
    .title-top[b-46ava9x3xy] {
        text-align: center;
    }

    .prev-button[b-46ava9x3xy] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }

 

    .title-top[b-46ava9x3xy] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-46ava9x3xy] {
        font-size: 19px;
    }

    .filter-section[b-46ava9x3xy] {
        padding:5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
                border-top:1px solid #ccc;
        border-bottom:1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        
    }

    .filter-text[b-46ava9x3xy] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left i[b-46ava9x3xy] {
        font-size: 15px;
    }

    .btn-previous-two[b-46ava9x3xy] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-46ava9x3xy] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

        .dropdown[b-46ava9x3xy] {
        display: flex;
        justify-content: end;
        position: relative;
        padding:0 15px;
    }


    .dropdown-menu[b-46ava9x3xy] {
        width: 96.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }


    
    .you[b-46ava9x3xy] {
        display: flex;
        width: 100%;
        justify-content:end;
    }

     Input styling 
    input[type="date"][b-46ava9x3xy],
    input[type="text"][b-46ava9x3xy],
    select[b-46ava9x3xy] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 13px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-46ava9x3xy],
        input[type="text"]:focus[b-46ava9x3xy],
        select:focus[b-46ava9x3xy] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

     Placeholder styling 
    input[b-46ava9x3xy]::placeholder {
        color: #999;
        font-size: 12px;
    }

     Filter button styling 
    .filter-button[b-46ava9x3xy] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .filter-button:hover[b-46ava9x3xy] {
            background-color: #5a4cbc;
        }

     Dropdown toggle button styling 
    .prev-two[b-46ava9x3xy] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

        .prev-two:hover[b-46ava9x3xy] {
            color: #6a5acd;
        }

/*     Animation for dropdown */
    @keyframes fadeIn-b-46ava9x3xy {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-46ava9x3xy] {
        animation: fadeIn-b-46ava9x3xy 0.2s ease-out forwards;
    }

    .start[b-46ava9x3xy], .end[b-46ava9x3xy], .transaction[b-46ava9x3xy], .bill[b-46ava9x3xy] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    .bill input[type=text][b-46ava9x3xy] {
        width: 60%;
        font-size: 12px;
    }

    .bill input[b-46ava9x3xy]::placeholder {
        text-align: center;
    }

    .transaction select[b-46ava9x3xy] {
        width: 60%;
        display: flex;
        margin-left: 25%;
    }


    .top-body[b-46ava9x3xy] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-46ava9x3xy] {
        font-size: 12px;
    }

    .appoint-count[b-46ava9x3xy] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-46ava9x3xy] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap:10%;
    }

        .right-detail img[b-46ava9x3xy] {
            width: 12%;
            height: 30%;
        }

    .name[b-46ava9x3xy] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-46ava9x3xy], .address[b-46ava9x3xy] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-46ava9x3xy] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-46ava9x3xy] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-46ava9x3xy] {
        height:53vh;
        overflow-y: scroll; 
        margin-top: 1%;
        padding-right: 5px; 
    }
    .body-main[b-46ava9x3xy]{
        max-height:60vh;
    }

    .filter-left[b-46ava9x3xy], .filter-title[b-46ava9x3xy]{
        display:flex;
        align-items:center;
        padding:0 15px;
    }
    .searchisbutton[b-46ava9x3xy]{
        display:flex;
        justify-content:end;
        margin-bottom:5px;
    }
    .darksearch[b-46ava9x3xy] {
        width: 30%;
    }
    .darkadd[b-46ava9x3xy]{
        font-size:16px;
     }
    .bill[b-46ava9x3xy]{
        margin-bottom:5px;
    }


    .two-spans-groups[b-46ava9x3xy]{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
    }
    .paginationnnav[b-46ava9x3xy]{
        margin-bottom:0;
    }

    .right-detail i[b-46ava9x3xy] {
        font-size: 16px;
    }


    .modal-dialog[b-46ava9x3xy] {
        margin-left: 0%;
    }

    .modal-content[b-46ava9x3xy] {
        background-color: #F7F9FC;
        width: 100vw;
        height: 100vh;
        margin-left: 0px;
        /* top: 5%; */
        left: -0%;
        position: absolute;
    }
}


@media (max-width:720px){
    .dropdown-menu[b-46ava9x3xy] {
        width: 96.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width:650px){
    .customer-appoint-wrapper[b-46ava9x3xy] {
        height: 52vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }
}


@media (max-width: 645px) {


    .darkadd[b-46ava9x3xy] {
        width: 52%;
        font-size: 13px;
    }

    .artist-heading[b-46ava9x3xy] {
        font-size: 18px;
    }

    .dropdown-menu[b-46ava9x3xy] {
        width: 95.9vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width:630px){
    .dropdown-menu[b-46ava9x3xy] {
        width: 95.4vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }
}


@media (max-width: 590px) {
    .darkadd[b-46ava9x3xy]{
        width:52%;
        font-size:14px;
    }

    .two-spans-groups[b-46ava9x3xy] {
        display: grid;
        grid-template-columns: 45% 55%;
    }


    .dropdown-menu[b-46ava9x3xy] {
        width: 95.1vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }

    .filter-text[b-46ava9x3xy]{
        font-size: 13px;
        font-weight: 400;
    }

    .filter-left i[b-46ava9x3xy]{
        font-size: 14px;
    }

    .customer-appoint-wrapper[b-46ava9x3xy]{
        height: 51vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

}

@media (max-width:550px){
    .dropdown-menu[b-46ava9x3xy] {
        width: 94.7vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .customer-appoint-wrapper[b-46ava9x3xy]{
        height: 50vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }
}


@media (max-width: 500px) {
    .customer-appoint[b-46ava9x3xy]{
        display:grid;
        grid-template-columns:80% 15%;
    }
    .right-detail[b-46ava9x3xy]{
        gap:1%;
        justify-content:end;
    }

    .dropdown-menu[b-46ava9x3xy] {
        width: 94.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .darkadd[b-46ava9x3xy] {
        width: 55%;
        font-size: 12px;
    }

    .bill input[type=text][b-46ava9x3xy] {
        width: 65%;
        font-size: 11px;
    }

    .darksearch[b-46ava9x3xy] {
        width: 32%;
        font-size: 12px;
    }

    .paginationpara[b-46ava9x3xy], .pagination-last[b-46ava9x3xy], .inquiry-heading[b-46ava9x3xy], .addinquirybtn[b-46ava9x3xy], .table-container[b-46ava9x3xy], .table tbody[b-46ava9x3xy] {
        font-size: 12px;
    }

    .customer-appoint[b-46ava9x3xy] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-46ava9x3xy] {
        gap: 1%;
        justify-content: end;
    }

    .customer-appoint-wrapper[b-46ava9x3xy] {
        height: 49vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .two-spans-groups[b-46ava9x3xy] {
        display: grid;
        grid-template-columns: 45% 55%;
    }


}




@media (max-width: 478px) {
    .darkadd[b-46ava9x3xy]{
        width:60%;
    }

    .dropdown-menu[b-46ava9x3xy] {
        width: 93.9vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .two-spans-groups[b-46ava9x3xy] {
        display: grid;
        grid-template-columns: 40% 60%;
    }
}

@media (max-width:455px) {
    .dropdown-menu[b-46ava9x3xy] {
        width: 93.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .name[b-46ava9x3xy] {
        font-weight: 600;
        font-size: 13px;
        line-height: 19.49px;
    }

    .appoint-count[b-46ava9x3xy], .day[b-46ava9x3xy] {
        font-size: 11px;
        font-weight: 600;
    }

    .filter-left i[b-46ava9x3xy] {
        font-size: 13px;
    }

    .paginationnnav[b-46ava9x3xy] {
        display: flex;
        padding: 10px 30px;
        position: absolute;
        bottom: 5vh;
        width: 95%;
    }
}


@media (max-width:430px){
    .dropdown-menu[b-46ava9x3xy] {
        width: 93.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .customer-appoint[b-46ava9x3xy]{
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .two-spans-groups[b-46ava9x3xy] {
        display: grid;
        grid-template-columns: 100%;
    }

    .paginationpara[b-46ava9x3xy], .pagination-last[b-46ava9x3xy], .inquiry-heading[b-46ava9x3xy], .addinquirybtn[b-46ava9x3xy], .table-container[b-46ava9x3xy], .table tbody[b-46ava9x3xy] {
        font-size: 11px;
    }

    .paginationnnav[b-46ava9x3xy] {
        display: flex;
        padding: 10px 30px;
        position: absolute;
        bottom: 5vh;
        width: 98%;
    }
}

@media (max-width:390px){
    .dropdown-menu[b-46ava9x3xy]{
        width: 92.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 32px;
    }

    .paginationnnav[b-46ava9x3xy]{
        display: flex;
        padding: 10px 7px;
        position: absolute;
        bottom: 5vh;
        width: 93%;
    }

    .filter-text[b-46ava9x3xy] {
        font-size: 12px;
        font-weight: 400;
    }

    .prev-two[b-46ava9x3xy] {
        border: none;
        font-weight: 600;
        font-size: 16px;
        background-color: #FFFF;
    }

    .time[b-46ava9x3xy], .address[b-46ava9x3xy] {
        font-size: 11px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .right-detail i[b-46ava9x3xy]{
        font-size:14px;
    }
}

@media (max-width:375px){
    .dropdown-menu[b-46ava9x3xy]{
        width: 92.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .filter-left i[b-46ava9x3xy] {
        font-size: 12px;
    }

}


@media (max-width:360px){
    .dropdown-menu[b-46ava9x3xy]{
        width: 92vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .paginationpara[b-46ava9x3xy], .pagination-last[b-46ava9x3xy], .inquiry-heading[b-46ava9x3xy], .addinquirybtn[b-46ava9x3xy], .table-container[b-46ava9x3xy], .table tbody[b-46ava9x3xy] {
        font-size: 10px;
    }
}

@media (max-width:355px){
    .dropdown-menu[b-46ava9x3xy] {
        width: 91.7vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }
}

@media (max-width:325px){
    .dropdown-menu[b-46ava9x3xy] {
        width: 91.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .paginationnnav[b-46ava9x3xy] {
        display: flex;
        padding: 10px 0px;
        position: absolute;
        bottom: 5vh;
        width: 92%;
    }

    .darkadd[b-46ava9x3xy] {
        width: 60%;
        font-size: 11px;
    }

    .artist-heading[b-46ava9x3xy] {
        font-size: 16px;
    }

    .name[b-46ava9x3xy] {
        font-weight: 600;
        font-size: 12px;
        line-height: 19.49px;
    }

    .paginationpara[b-46ava9x3xy], .pagination-last[b-46ava9x3xy], .inquiry-heading[b-46ava9x3xy], .addinquirybtn[b-46ava9x3xy], .table-container[b-46ava9x3xy], .table tbody[b-46ava9x3xy] {
        font-size: 9px;
    }
}

@media (max-width:315px){
    .dropdown-menu[b-46ava9x3xy]{
        width: 90.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .appoint-count[b-46ava9x3xy], .day[b-46ava9x3xy]{
        font-size: 9px;
        font-weight: 600;
    }

    .darkadd[b-46ava9x3xy] {
        width: 60%;
        font-size: 10px;
    }

    .artist-heading[b-46ava9x3xy] {
        font-size: 15px;
    }

    .filter-left i[b-46ava9x3xy] {
        font-size: 11px;
    }
}
/* /Pages/ArtistCommissionDetails.razor.rz.scp.css */
.commissions-page[b-ovtjcqs4y6] {
    background-color: #fff;
    color: #000;
    height: 88vh;
    border-radius: 0 0 0 50px;
}


.artist-top[b-ovtjcqs4y6] {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

.artist-heading h3[b-ovtjcqs4y6] {
    margin-bottom: 0;
}

.artist-heading[b-ovtjcqs4y6] {
    display: flex;
    gap: 5%;
}

.addartistbtn[b-ovtjcqs4y6] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}


/* Table styles */
.table-container[b-ovtjcqs4y6] {
    max-height: 67vh;
    overflow-y: auto;
    width: 100%;
}

.table tbody[b-ovtjcqs4y6] {
}

.table-container table[b-ovtjcqs4y6] {
    width: 100%;
    border-collapse: collapse;
}

table tbody tr:hover[b-ovtjcqs4y6] {
    background-color: #d9d9d9;
    color: #111;
}

.table-container th[b-ovtjcqs4y6],
.table-container td[b-ovtjcqs4y6] {
    padding: 15px 10px;
    text-align: center;
    /*  border-bottom: 1px solid #ddd;*/
}

.table-container .center-td[b-ovtjcqs4y6] {
    text-align: center;
}

.table-container thead[b-ovtjcqs4y6] {
    background-color: #fff;
    color: #111 !important;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #000;
}

.table[b-ovtjcqs4y6] {
    margin-bottom: 0 !important;
}

/*modal-css*/
h5[b-ovtjcqs4y6] {
    color: #000;
}

.modal[b-ovtjcqs4y6] {
    display: block;
    background-color: rgba(10, 10, 10, .8);
}

.modal-content[b-ovtjcqs4y6] {
    width: 60vw;
    position: fixed;
    left: 24%;
    top: 10%;
}

/*Pagination*/
.pagination[b-ovtjcqs4y6] {
    justify-content: end;
}

.page-item.active .page-link[b-ovtjcqs4y6] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}


.pagination[b-ovtjcqs4y6] {
    margin-bottom: 0;
}

.paginationnnav[b-ovtjcqs4y6] {
    display: flex;
    padding: 10px 30px;
    position: absolute;
    bottom: 2vh;
    width: 90%;
}


@media (max-width:900px){
    .commissions-page[b-ovtjcqs4y6] {
        padding: 5px 15px;
    }
}

@media (max-width: 768px) {
    .pagination .page-item[b-ovtjcqs4y6] {
        display: none; /* Hide all by default */
    }

        /* Always show Previous and Next buttons */
        .pagination .page-item:first-child[b-ovtjcqs4y6],
        .pagination .page-item:last-child[b-ovtjcqs4y6] {
            display: inline-block;
        }

        /* Show the current (active) page */
        .pagination .page-item.active[b-ovtjcqs4y6] {
            display: inline-block;
        }

            /* Show the next page after the active one */
            .pagination .page-item.active + .page-item[b-ovtjcqs4y6] {
                display: inline-block;
            }

            /* Optionally, show the page before the current one */
            .pagination .page-item.active ~ .page-item[b-ovtjcqs4y6],
            .pagination .page-item.active:has(+ .page-item)[b-ovtjcqs4y6] {
                /* Optional extra styles if needed */
            }

    .commissions-page[b-ovtjcqs4y6] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
        padding:5px 15px
    }




    .artist-top[b-ovtjcqs4y6] {
        padding: 5px 0 0 5px;
        padding: 5px;
        font-weight: 500;
    }

    .artist-heading[b-ovtjcqs4y6] {
        font-size: 20px;
    }

    .nav-section[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 15px 5px 15px;
    }

    .addbtn[b-ovtjcqs4y6] {
        display: flex;
        justify-content: end;
        align-items: end;
        /*        padding: 0 15px;*/
    }

    .darkadd[b-ovtjcqs4y6] {
        width: 40%;
    }

    .title-top[b-ovtjcqs4y6] {
        text-align: center;
    }

    .prev-button[b-ovtjcqs4y6] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }



    .title-top[b-ovtjcqs4y6] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-ovtjcqs4y6] {
        font-size: 19px;
    }

    .filter-section[b-ovtjcqs4y6] {
        padding: 5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .filter-text[b-ovtjcqs4y6] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left i[b-ovtjcqs4y6] {
        font-size: 15px;
    }

    .btn-previous-two[b-ovtjcqs4y6] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-ovtjcqs4y6] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

    .dropdown[b-ovtjcqs4y6] {
        display: flex;
        justify-content: end;
        position: relative;
        padding: 0 15px;
    }


    .dropdown-menu[b-ovtjcqs4y6] {
        width: 96.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }



    .you[b-ovtjcqs4y6] {
        display: flex;
        width: 100%;
        justify-content: end;
    }

    Input styling
    input[type="date"][b-ovtjcqs4y6],
    input[type="text"][b-ovtjcqs4y6],
    select[b-ovtjcqs4y6] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 13px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-ovtjcqs4y6],
        input[type="text"]:focus[b-ovtjcqs4y6],
        select:focus[b-ovtjcqs4y6] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

    Placeholder styling
    input[b-ovtjcqs4y6]::placeholder {
        color: #999;
        font-size: 12px;
    }

    Filter button styling
    .filter-button[b-ovtjcqs4y6] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .filter-button:hover[b-ovtjcqs4y6] {
        background-color: #5a4cbc;
    }

    Dropdown toggle button styling
    .prev-two[b-ovtjcqs4y6] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

    .prev-two:hover[b-ovtjcqs4y6] {
        color: #6a5acd;
    }

    /*     Animation for dropdown */
    @keyframes fadeIn-b-ovtjcqs4y6 {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-ovtjcqs4y6] {
        animation: fadeIn-b-ovtjcqs4y6 0.2s ease-out forwards;
    }

    .start[b-ovtjcqs4y6], .end[b-ovtjcqs4y6], .transaction[b-ovtjcqs4y6], .bill[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .bill input[type=text][b-ovtjcqs4y6] {
            width: 60%;
            font-size: 12px;
        }

        .bill input[b-ovtjcqs4y6]::placeholder {
            text-align: center;
        }

        .transaction select[b-ovtjcqs4y6] {
            width: 60%;
            display: flex;
            margin-left: 25%;
        }


    .top-body[b-ovtjcqs4y6] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-ovtjcqs4y6] {
        font-size: 12px;
    }

    .appoint-count[b-ovtjcqs4y6] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-ovtjcqs4y6] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10%;
    }

        .right-detail img[b-ovtjcqs4y6] {
            width: 12%;
            height: 30%;
        }

    .name[b-ovtjcqs4y6] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-ovtjcqs4y6], .address[b-ovtjcqs4y6] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-ovtjcqs4y6] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-ovtjcqs4y6] {
        height: 53vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .body-main[b-ovtjcqs4y6] {
        max-height: 60vh;
    }

    .filter-left[b-ovtjcqs4y6], .filter-title[b-ovtjcqs4y6] {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .searchisbutton[b-ovtjcqs4y6] {
        display: flex;
        justify-content: end;
        margin-bottom: 5px;
    }

    .darksearch[b-ovtjcqs4y6] {
        width: 30%;
    }

    .darkadd[b-ovtjcqs4y6] {
        font-size: 16px;
    }

    .bill[b-ovtjcqs4y6] {
        margin-bottom: 5px;
    }


    .two-spans-groups[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .paginationnnav[b-ovtjcqs4y6] {
        margin-bottom: 0;
    }

    .right-detail i[b-ovtjcqs4y6] {
        font-size: 16px;
    }
}




@media (max-width: 768px) {
    .pagination .page-item[b-ovtjcqs4y6] {
        display: none; /* Hide all by default */
    }

        /* Always show Previous and Next buttons */
        .pagination .page-item:first-child[b-ovtjcqs4y6],
        .pagination .page-item:last-child[b-ovtjcqs4y6] {
            display: inline-block;
        }

        /* Show the current (active) page */
        .pagination .page-item.active[b-ovtjcqs4y6] {
            display: inline-block;
        }

            /* Show the next page after the active one */
            .pagination .page-item.active + .page-item[b-ovtjcqs4y6] {
                display: inline-block;
            }

            /* Optionally, show the page before the current one */
            .pagination .page-item.active ~ .page-item[b-ovtjcqs4y6],
            .pagination .page-item.active:has(+ .page-item)[b-ovtjcqs4y6] {
                /* Optional extra styles if needed */
            }

    .artistpage[b-ovtjcqs4y6] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
        padding: 5px 15px;
    }


    .artist-top[b-ovtjcqs4y6] {
        padding: 5px 0 0 5px;
        padding: 5px;
        font-weight: 500;
    }

    .artist-heading[b-ovtjcqs4y6] {
        font-size: 20px;
    }

    .nav-section[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 15px 5px 15px;
    }

    .addbtn[b-ovtjcqs4y6] {
        display: flex;
        justify-content: end;
        align-items: end;
        /*        padding: 0 15px;*/
    }

    .darkadd[b-ovtjcqs4y6] {
        width: 40%;
    }

    .title-top[b-ovtjcqs4y6] {
        text-align: center;
    }

    .prev-button[b-ovtjcqs4y6] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }



    .title-top[b-ovtjcqs4y6] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-ovtjcqs4y6] {
        font-size: 19px;
    }

    .filter-section[b-ovtjcqs4y6] {
        padding: 5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .filter-text[b-ovtjcqs4y6] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left i[b-ovtjcqs4y6] {
        font-size: 15px;
    }

    .btn-previous-two[b-ovtjcqs4y6] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-ovtjcqs4y6] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

    .dropdown[b-ovtjcqs4y6] {
        display: flex;
        justify-content: end;
        position: relative;
        padding: 0 15px;
    }


    .dropdown-menu[b-ovtjcqs4y6] {
        width: 96.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }



    .you[b-ovtjcqs4y6] {
        display: flex;
        width: 100%;
        justify-content: end;
    }

    Input styling
    input[type="date"][b-ovtjcqs4y6],
    input[type="text"][b-ovtjcqs4y6],
    select[b-ovtjcqs4y6] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 13px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-ovtjcqs4y6],
        input[type="text"]:focus[b-ovtjcqs4y6],
        select:focus[b-ovtjcqs4y6] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

    Placeholder styling
    input[b-ovtjcqs4y6]::placeholder {
        color: #999;
        font-size: 12px;
    }

    Filter button styling
    .filter-button[b-ovtjcqs4y6] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .filter-button:hover[b-ovtjcqs4y6] {
        background-color: #5a4cbc;
    }

    Dropdown toggle button styling
    .prev-two[b-ovtjcqs4y6] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

    .prev-two:hover[b-ovtjcqs4y6] {
        color: #6a5acd;
    }

    /*     Animation for dropdown */
    @keyframes fadeIn-b-ovtjcqs4y6 {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-ovtjcqs4y6] {
        animation: fadeIn-b-ovtjcqs4y6 0.2s ease-out forwards;
    }

    .start[b-ovtjcqs4y6], .end[b-ovtjcqs4y6], .transaction[b-ovtjcqs4y6], .bill[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .bill input[type=text][b-ovtjcqs4y6] {
            width: 60%;
            font-size: 12px;
        }

        .bill input[b-ovtjcqs4y6]::placeholder {
            text-align: center;
        }

        .transaction select[b-ovtjcqs4y6] {
            width: 60%;
            display: flex;
            margin-left: 25%;
        }


    .top-body[b-ovtjcqs4y6] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-ovtjcqs4y6] {
        font-size: 12px;
    }

    .appoint-count[b-ovtjcqs4y6] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-ovtjcqs4y6] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10%;
    }

        .right-detail img[b-ovtjcqs4y6] {
            width: 12%;
            height: 30%;
        }

    .name[b-ovtjcqs4y6] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-ovtjcqs4y6], .address[b-ovtjcqs4y6] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-ovtjcqs4y6] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-ovtjcqs4y6] {
        height: 53vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .body-main[b-ovtjcqs4y6] {
        max-height: 60vh;
    }

    .filter-left[b-ovtjcqs4y6], .filter-title[b-ovtjcqs4y6] {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .searchisbutton[b-ovtjcqs4y6] {
        display: flex;
        justify-content: end;
        margin-bottom: 5px;
    }

    .darksearch[b-ovtjcqs4y6] {
        width: 30%;
    }

    .darkadd[b-ovtjcqs4y6] {
        font-size: 16px;
    }

    .bill[b-ovtjcqs4y6] {
        margin-bottom: 5px;
    }


    .two-spans-groups[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .paginationnnav[b-ovtjcqs4y6] {
        margin-bottom: 0;
    }

    .right-detail i[b-ovtjcqs4y6] {
        font-size: 16px;
    }
}


@media (max-width:720px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 96.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width:650px) {
    .customer-appoint-wrapper[b-ovtjcqs4y6] {
        height: 52vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }
}


@media (max-width: 645px) {


    .darkadd[b-ovtjcqs4y6] {
        width: 52%;
        font-size: 13px;
    }

    .artist-heading[b-ovtjcqs4y6] {
        font-size: 18px;
    }

    .dropdown-menu[b-ovtjcqs4y6] {
        width: 95.9vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width:630px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 95.4vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }
}


@media (max-width: 590px) {
    .darkadd[b-ovtjcqs4y6] {
        width: 52%;
        font-size: 14px;
    }

    .two-spans-groups[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: 45% 55%;
    }


    .dropdown-menu[b-ovtjcqs4y6] {
        width: 95.1vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }

    .filter-text[b-ovtjcqs4y6] {
        font-size: 13px;
        font-weight: 400;
    }

    .filter-left i[b-ovtjcqs4y6] {
        font-size: 14px;
    }

    .customer-appoint-wrapper[b-ovtjcqs4y6] {
        height: 51vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }
}

@media (max-width:550px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 94.7vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .customer-appoint-wrapper[b-ovtjcqs4y6] {
        height: 50vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }
}


@media (max-width: 500px) {
    .customer-appoint[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-ovtjcqs4y6] {
        gap: 1%;
        justify-content: end;
    }

    .dropdown-menu[b-ovtjcqs4y6] {
        width: 94.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .darkadd[b-ovtjcqs4y6] {
        width: 55%;
        font-size: 12px;
    }

    .bill input[type=text][b-ovtjcqs4y6] {
        width: 65%;
        font-size: 11px;
    }

    .darksearch[b-ovtjcqs4y6] {
        width: 32%;
        font-size: 12px;
    }

    .paginationpara[b-ovtjcqs4y6], .pagination-last[b-ovtjcqs4y6], .inquiry-heading[b-ovtjcqs4y6], .addinquirybtn[b-ovtjcqs4y6], .table-container[b-ovtjcqs4y6], .table tbody[b-ovtjcqs4y6] {
        font-size: 12px;
    }

    .customer-appoint[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-ovtjcqs4y6] {
        gap: 1%;
        justify-content: end;
    }

    .customer-appoint-wrapper[b-ovtjcqs4y6] {
        height: 49vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .two-spans-groups[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: 45% 55%;
    }
}




@media (max-width: 478px) {
    .darkadd[b-ovtjcqs4y6] {
        width: 60%;
    }

    .dropdown-menu[b-ovtjcqs4y6] {
        width: 93.9vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .two-spans-groups[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: 40% 60%;
    }
}

@media (max-width:455px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 93.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .name[b-ovtjcqs4y6] {
        font-weight: 600;
        font-size: 13px;
        line-height: 19.49px;
    }

    .appoint-count[b-ovtjcqs4y6], .day[b-ovtjcqs4y6] {
        font-size: 11px;
        font-weight: 600;
    }

    .filter-left i[b-ovtjcqs4y6] {
        font-size: 13px;
    }

    .paginationnnav[b-ovtjcqs4y6] {
        display: flex;
        padding: 10px 30px;
        position: absolute;
        bottom: 5vh;
        width: 95%;
    }
}


@media (max-width:430px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 93.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .customer-appoint[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .two-spans-groups[b-ovtjcqs4y6] {
        display: grid;
        grid-template-columns: 100%;
    }

    .paginationpara[b-ovtjcqs4y6], .pagination-last[b-ovtjcqs4y6], .inquiry-heading[b-ovtjcqs4y6], .addinquirybtn[b-ovtjcqs4y6], .table-container[b-ovtjcqs4y6], .table tbody[b-ovtjcqs4y6] {
        font-size: 11px;
    }

    .paginationnnav[b-ovtjcqs4y6] {
        display: flex;
        padding: 10px 30px;
        position: absolute;
        bottom: 5vh;
        width: 98%;
    }
}

@media (max-width:390px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 92.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 32px;
    }

    .paginationnnav[b-ovtjcqs4y6] {
        display: flex;
        padding: 10px 7px;
        position: absolute;
        bottom: 5vh;
        width: 93%;
    }

    .filter-text[b-ovtjcqs4y6] {
        font-size: 12px;
        font-weight: 400;
    }

    .prev-two[b-ovtjcqs4y6] {
        border: none;
        font-weight: 600;
        font-size: 16px;
        background-color: #FFFF;
    }

    .time[b-ovtjcqs4y6], .address[b-ovtjcqs4y6] {
        font-size: 11px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .right-detail i[b-ovtjcqs4y6] {
        font-size: 14px;
    }
}

@media (max-width:375px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 92.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .filter-left i[b-ovtjcqs4y6] {
        font-size: 12px;
    }
}


@media (max-width:360px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 92vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .paginationpara[b-ovtjcqs4y6], .pagination-last[b-ovtjcqs4y6], .inquiry-heading[b-ovtjcqs4y6], .addinquirybtn[b-ovtjcqs4y6], .table-container[b-ovtjcqs4y6], .table tbody[b-ovtjcqs4y6] {
        font-size: 10px;
    }
}

@media (max-width:355px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 91.7vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }
}

@media (max-width:325px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 91.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .paginationnnav[b-ovtjcqs4y6] {
        display: flex;
        padding: 10px 0px;
        position: absolute;
        bottom: 5vh;
        width: 92%;
    }

    .darkadd[b-ovtjcqs4y6] {
        width: 60%;
        font-size: 11px;
    }

    .artist-heading[b-ovtjcqs4y6] {
        font-size: 16px;
    }

    .name[b-ovtjcqs4y6] {
        font-weight: 600;
        font-size: 12px;
        line-height: 19.49px;
    }

    .paginationpara[b-ovtjcqs4y6], .pagination-last[b-ovtjcqs4y6], .inquiry-heading[b-ovtjcqs4y6], .addinquirybtn[b-ovtjcqs4y6], .table-container[b-ovtjcqs4y6], .table tbody[b-ovtjcqs4y6] {
        font-size: 9px;
    }
}

@media (max-width:315px) {
    .dropdown-menu[b-ovtjcqs4y6] {
        width: 90.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .appoint-count[b-ovtjcqs4y6], .day[b-ovtjcqs4y6] {
        font-size: 9px;
        font-weight: 600;
    }

    .darkadd[b-ovtjcqs4y6] {
        width: 60%;
        font-size: 10px;
    }

    .artist-heading[b-ovtjcqs4y6] {
        font-size: 15px;
    }

    .filter-left i[b-ovtjcqs4y6] {
        font-size: 11px;
    }
}
/* /Pages/Calendar.razor.rz.scp.css */
.white-bg[b-cdp709pvwb] {
    background-color: white;
    height: 75vh;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1rem;
}

.calenderpage[b-cdp709pvwb] {
    background-color: #fff;
    color: #000;
    height: 88vh;
    padding-top: 2%;
    border-radius: 0 0 0 50px;
}

.calendardiv[b-cdp709pvwb] {
    border-radius: 20px;
    width: 100%;
}

/* Calendar Customization */
:deep(.fc)[b-cdp709pvwb] {
    font-family: inherit;
}

:deep(.fc .fc-toolbar-title)[b-cdp709pvwb] {
    font-size: 1.5em;
    font-weight: 600;
    color: #333;
}

:deep(.fc .fc-button)[b-cdp709pvwb] {
    background-color: #DB6E00;
    border-color: #DB6E00;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

:deep(.fc .fc-button:hover)[b-cdp709pvwb] {
    background-color: #c45e00;
    border-color: #c45e00;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:deep(.fc .fc-button-primary:not(:disabled).fc-button-active)[b-cdp709pvwb] {
    background-color: #c45e00;
    border-color: #c45e00;
}

:deep(.fc .fc-daygrid-day)[b-cdp709pvwb] {
    transition: background-color 0.2s ease;
}

:deep(.fc .fc-daygrid-day:hover)[b-cdp709pvwb] {
    background-color: rgba(219, 110, 0, 0.05);
}

:deep(.fc .fc-day-today)[b-cdp709pvwb] {
    background-color: rgba(219, 110, 0, 0.1) !important;
}

:deep(.fc .fc-event)[b-cdp709pvwb] {
    border-radius: 4px;
    padding: 2px 4px;
    margin: 1px 0;
    font-size: 0.9em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

:deep(.fc .fc-event:hover)[b-cdp709pvwb] {
    transform: scale(1.02);
}

:deep(.fc .fc-daygrid-day-number)[b-cdp709pvwb] {
    padding: 8px;
    color: #666;
    font-weight: 500;
}

:deep(.fc .fc-col-header-cell)[b-cdp709pvwb] {
    padding: 10px 0;
    background-color: #f8f9fa;
    font-weight: 600;
}

:deep(.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number)[b-cdp709pvwb] {
    background-color: #DB6E00;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
}

:deep(.fc .fc-daygrid-more-link)[b-cdp709pvwb] {
    background-color: rgba(219, 110, 0, 0.1);
    color: #DB6E00;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.85em;
}

:deep(.fc .fc-daygrid-more-link:hover)[b-cdp709pvwb] {
    background-color: rgba(219, 110, 0, 0.2);
}

/* Modal Styles */
.modal[b-cdp709pvwb] {
    background-color: rgba(10, 10, 10, .8);
    width: 100%;
}

.modal-dialog[b-cdp709pvwb] {
    margin-top: 6.8%;
    margin-left: 17%;
}

.modal-content[b-cdp709pvwb] {
    background-color: var(--our-modal-color);
    width: 60vw;
    height: auto;
    max-height: 80vh;
    background-color: #ffffff;
    color: #000;
    margin: 10% 0 0 10%;
    border-radius: 10px;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header[b-cdp709pvwb] {
    padding: 1rem 2rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-cdp709pvwb] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 500;
}

.closeicon[b-cdp709pvwb] {
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease;
}

.closeicon:hover[b-cdp709pvwb] {
    color: #000;
}

/* Form Styles */
.form-hov[b-cdp709pvwb] {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width: 100%;
    transition: all 0.3s ease;
}

.form-hov:hover[b-cdp709pvwb] {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.form-hov:focus[b-cdp709pvwb] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(219, 110, 0, 0.2);
}

.form-label[b-cdp709pvwb] {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

.input-btn[b-cdp709pvwb] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-btn-form[b-cdp709pvwb] {
    background: none;
    border: none;
    color: #624DE3;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.add-btn-form:hover[b-cdp709pvwb] {
    background-color: rgba(98, 77, 227, 0.1);
    transform: scale(1.1);
}

/* Scrollbar Styles */
[b-cdp709pvwb]::-webkit-scrollbar {
    width: 5px;
}

[b-cdp709pvwb]::-webkit-scrollbar-track {
    background: #ecebeb;
    border-radius: 10px;
}

[b-cdp709pvwb]::-webkit-scrollbar-thumb {
    background: #030303;
    border-radius: 15px;
}

[b-cdp709pvwb]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .calenderpage[b-cdp709pvwb] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
    }

    .modal-dialog[b-cdp709pvwb] {
        margin: 10% auto;
        width: 90%;
    }

    .modal-content[b-cdp709pvwb] {
        width: 100%;
        margin: 0;
    }

    .form-row[b-cdp709pvwb] {
        margin-bottom: 1rem;
    }

    .input-btn[b-cdp709pvwb] {
        flex-direction: column;
        align-items: stretch;
    }

    .add-btn-form[b-cdp709pvwb] {
        align-self: flex-end;
    }

    :deep(.fc .fc-toolbar)[b-cdp709pvwb] {
        flex-direction: column;
        gap: 1rem;
    }

    :deep(.fc .fc-toolbar-title)[b-cdp709pvwb] {
        font-size: 1.2em;
    }
}

/* Appointment Details Styles */
.appointment-details[b-cdp709pvwb] {
    padding: 1rem;
}

.detail-row[b-cdp709pvwb] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.detail-row .label[b-cdp709pvwb] {
    font-weight: bold;
    width: 100px;
    color: #666;
}

.detail-row .value[b-cdp709pvwb] {
    flex: 1;
}

/* Today's Plan Styles */
.todays-plan[b-cdp709pvwb] {
    padding: 1rem;
}

.appointment-card[b-cdp709pvwb] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid #DB6E00;
}

.appointment-card:hover[b-cdp709pvwb] {
    background-color: #f0f0f0;
    transform: translateX(5px);
}

.time-slot[b-cdp709pvwb] {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.appointment-info[b-cdp709pvwb] {
    display: flex;
    justify-content: space-between;
}

.appointment-info .customer[b-cdp709pvwb] {
    font-weight: bold;
}

.appointment-info .artist[b-cdp709pvwb] {
    color: #666;
}

.no-appointments[b-cdp709pvwb] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

@media (max-width: 768px) {
    .modal-dialog[b-cdp709pvwb] {
        margin: 10% auto;
        width: 90%;
    }

    .modal-content[b-cdp709pvwb] {
        width: 100%;
        margin: 0;
    }
}

.modal-content[b-cdp709pvwb] {
    background-color: var(--our-modal-color);
    width: 60vw;
    height: auto;
    max-height: 80vh;
    background-color: #ffffff;
    color: #000;
    margin: 10% 0 0 10%;
    border-radius: 10px;
    overflow-y: auto;
}

.modal-header[b-cdp709pvwb] {
    padding: 1rem 2rem;
    border-bottom: 1px solid #dee2e6;
}

.modal-title[b-cdp709pvwb] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 500;
}

.closeicon[b-cdp709pvwb] {
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.closeicon:hover[b-cdp709pvwb] {
    color: #000;
}

/* Form Styles */
.form-hov[b-cdp709pvwb] {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width: 100%;
}

.form-hov:hover[b-cdp709pvwb] {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.form-hov[b-cdp709pvwb]::placeholder {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
}

.form-label[b-cdp709pvwb] {
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
}

.input-btn[b-cdp709pvwb] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-btn-form[b-cdp709pvwb] {
    background: none;
    border: none;
    color: #624DE3;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.add-btn-form:hover[b-cdp709pvwb] {
    background-color: rgba(98, 77, 227, 0.1);
}

/* Scrollbar Styles */
[b-cdp709pvwb]::-webkit-scrollbar {
    width: 5px;
}

[b-cdp709pvwb]::-webkit-scrollbar-track {
    background: #ecebeb;
    border-radius: 10px;
}

[b-cdp709pvwb]::-webkit-scrollbar-thumb {
    background: #030303;
    border-radius: 15px;
}

[b-cdp709pvwb]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .calenderpage[b-cdp709pvwb] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
    }

    .modal-dialog[b-cdp709pvwb] {
        margin: 10% auto;
        width: 90%;
    }

    .modal-content[b-cdp709pvwb] {
        width: 100%;
        margin: 0;
    }

    .form-row[b-cdp709pvwb] {
        margin-bottom: 1rem;
    }

    .input-btn[b-cdp709pvwb] {
        flex-direction: column;
        align-items: stretch;
    }

    .add-btn-form[b-cdp709pvwb] {
        align-self: flex-end;
    }
}


/* /Pages/Category.razor.rz.scp.css */
.category-page[b-prdhc2fwgb] {
    background-color: #fff;
    color: #000;
    height: 86vh;
    border-radius: 0px 0 0 50px;
}


.quantity-footer-btn[b-prdhc2fwgb] {
    justify-content: center;
    background-color: #000;
    color: #fff;
    padding: 10px;
    width: 10%;
}
.save-btn-small[b-prdhc2fwgb] {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 0;
}
.artist-top[b-prdhc2fwgb] {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

.artist-heading h3[b-prdhc2fwgb] {
    margin-bottom: 0;
}

.artist-heading[b-prdhc2fwgb] {
    display: flex;
    gap: 5%;
}

.addartistbtn[b-prdhc2fwgb] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}


/*modal-addcustomer*/
/* Modal styles */
.modal-dialog[b-prdhc2fwgb] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}

.modal[b-prdhc2fwgb] {
    display: block;
    background-color: rgba(10,10,10,.8);
    width: 100%;
}

.modal-content[b-prdhc2fwgb] {
    background-color: #F7F9FC;
    width: 100vw;
    height: 100vh;
    margin-left: 0px;
    /* top: 5%; */
    left: 0%;
    position: absolute;
}

.back-top[b-prdhc2fwgb] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2%;
}

.modal-header[b-prdhc2fwgb] {
    display: flex;
    flex-direction: column;
    border: none;
}

.modal-title[b-prdhc2fwgb] {
    font-size: 32px;
    font-weight: 600;
    color: #170F49;
}

.gobackbtn i[b-prdhc2fwgb] {
    font-size: 28px;
    color: #170F49;
}

.-button[b-prdhc2fwgb] {
    background-color: #000;
    color: #fff;
    width: 20%;
}



.closeicon[b-prdhc2fwgb] {
    font-size: 24px;
    cursor: pointer;
}


.save[b-prdhc2fwgb] {
    padding: 10px;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}



    .save:hover:not(:disabled)[b-prdhc2fwgb] {
        opacity: 0.6;
    }

    .save:disabled[b-prdhc2fwgb] {
        opacity: 0.8;
        cursor: not-allowed;
    }


.form-label[b-prdhc2fwgb] {
    color: #170F49;
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}

.form-hov[b-prdhc2fwgb]::placeholder {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
}

.form-hov[b-prdhc2fwgb] {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .form-hov:hover[b-prdhc2fwgb] {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    }




/* Table styles */
.table-container[b-prdhc2fwgb] {
    max-height: 67vh;
    overflow-y: auto;
    width: 100%;
    /* border: 1px solid #ccc;*/
}

    .table-container table[b-prdhc2fwgb] {
        width: 100%;
        border-collapse: collapse;
    }

table tbody tr:hover[b-prdhc2fwgb] {
    background-color: #d9d9d9;
    color: #111;
}

.table-container th[b-prdhc2fwgb],
.table-container td[b-prdhc2fwgb] {
    padding: 15px 10px;
    text-align: left;
    text-align:center;
    /*  border-bottom: 1px solid #ddd;*/
}

.table-container .center-td[b-prdhc2fwgb] {
    text-align: center;
}

.table-container thead[b-prdhc2fwgb] {
    background-color: #fff;
    color: #111 !important;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #000;
}

.table[b-prdhc2fwgb] {
    margin-bottom: 0 !important;
}



/*Pagination*/


.page-item.active .page-link[b-prdhc2fwgb] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}


.pagination[b-prdhc2fwgb] {
    margin-bottom: 0;
    display:flex;
    justify-content:end;
}

.paginationnnav[b-prdhc2fwgb] {
    display: flex;
    padding: 10px 30px;
    position: absolute;
    bottom: 4vh;
    width: 90%;
}



.page-item.active .page-link[b-prdhc2fwgb] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}
.addcategorytbtn[b-prdhc2fwgb] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}



/* Scrollbar styles */
[b-prdhc2fwgb]::-webkit-scrollbar {
    width: 5px;
    border: none;
}

[b-prdhc2fwgb]::-webkit-scrollbar-track {
    background: grey;
    border: none;
}

[b-prdhc2fwgb]::-webkit-scrollbar-thumb {
    background-color: black;
    border: none;
    border-radius: 5px !important;
}

/*for checkbox*/
.checkbox[b-prdhc2fwgb]{
    color:#000;
}
.checkbox-wrapper-30[b-prdhc2fwgb]{
    display:flex;
    justify-content:start;
    gap:1.5rem;
}
.checkbox-wrapper-30 .checkbox[b-prdhc2fwgb] {
    --bg: #fff;
    --brdr: #d1d6ee;
    --brdr-actv: #1e2235;
    --brdr-hovr: #bbc1e1;
    --dur: calc((var(--size, 2)/2) * 0.6s);
    display: inline-block;
    width: calc(var(--size, 1) * 22px);
    position: relative;
}

    .checkbox-wrapper-30 .checkbox[b-prdhc2fwgb]:after {
        content: "";
        width: 100%;
        padding-top: 100%;
        display: block;
    }

    .checkbox-wrapper-30 .checkbox > *[b-prdhc2fwgb] {
        position: absolute;
    }

    .checkbox-wrapper-30 .checkbox input[b-prdhc2fwgb] {
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        background-color: var(--bg);
        border-radius: calc(var(--size, 1) * 4px);
        border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
        color: var(--newBrdrClr, var(--brdr));
        outline: none;
        margin: 0;
        padding: 0;
        transition: all calc(var(--dur) / 3) linear;
    }

        .checkbox-wrapper-30 .checkbox input:hover[b-prdhc2fwgb],
        .checkbox-wrapper-30 .checkbox input:checked[b-prdhc2fwgb] {
            --newBrdr: calc(var(--size, 1) * 2);
        }

        .checkbox-wrapper-30 .checkbox input:hover[b-prdhc2fwgb] {
            --newBrdrClr: var(--brdr-hovr);
        }

        .checkbox-wrapper-30 .checkbox input:checked[b-prdhc2fwgb] {
            --newBrdrClr: var(--brdr-actv);
            transition-delay: calc(var(--dur) /1.3);
        }

            .checkbox-wrapper-30 .checkbox input:checked + svg[b-prdhc2fwgb] {
                --dashArray: 16 93;
                --dashOffset: 109;
            }

    .checkbox-wrapper-30 .checkbox svg[b-prdhc2fwgb] {
        fill: none;
        left: 0;
        pointer-events: none;
        stroke: var(--stroke, var(--border-active));
        stroke-dasharray: var(--dashArray, 93);
        stroke-dashoffset: var(--dashOffset, 94);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
        top: 0;
        transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
    }

    .checkbox-wrapper-30 .checkbox svg[b-prdhc2fwgb],
    .checkbox-wrapper-30 .checkbox input[b-prdhc2fwgb] {
        display: block;
        height: 70%;
        width: 105%;
    }

/*Responsive-part*/


@media only screen and (max-width:1700px) {
    .table-container[b-prdhc2fwgb] {
        height: 70vh;
    }

    .paginationpara[b-prdhc2fwgb], .pagination-last[b-prdhc2fwgb], .inquiry-heading[b-prdhc2fwgb], .addinquirybtn[b-prdhc2fwgb], .table-container[b-prdhc2fwgb], .table tbody[b-prdhc2fwgb] {
        font-size: 18px;
    }
}

@media only screen and (max-width:1440px) {
    .table-container[b-prdhc2fwgb] {
        height: 65vh;
    }

    .paginationpara[b-prdhc2fwgb], .pagination-last[b-prdhc2fwgb], .inquiry-heading[b-prdhc2fwgb], .addinquirybtn[b-prdhc2fwgb], .table-container[b-prdhc2fwgb], .table tbody[b-prdhc2fwgb] {
        font-size: 16px;
    }
}

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

    .paginationpara[b-prdhc2fwgb], .pagination-last[b-prdhc2fwgb], .inquiry-heading[b-prdhc2fwgb], .addinquirybtn[b-prdhc2fwgb], .table-container[b-prdhc2fwgb], .table tbody[b-prdhc2fwgb] {
        font-size: 15px;
    }
}

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

    .paginationpara[b-prdhc2fwgb], .pagination-last[b-prdhc2fwgb], .inquiry-heading[b-prdhc2fwgb], .addinquirybtn[b-prdhc2fwgb], .table-container[b-prdhc2fwgb], .table tbody[b-prdhc2fwgb] {
        font-size: 14px;
    }
}


@media (max-width: 900px) {
    .paginationpara[b-prdhc2fwgb], .pagination-last[b-prdhc2fwgb], .artist-heading[b-prdhc2fwgb], .addartistbtn[b-prdhc2fwgb], .table-container[b-prdhc2fwgb] {
        font-size: 12px;
    }

    .inquirypage[b-prdhc2fwgb] {
        padding: 5px 15px;
    }

    .btn[b-prdhc2fwgb] {
        transition: none;
        font-size: 12px;
    }

    .form-control[b-prdhc2fwgb] {
        transition: none;
        font-size: 12px;
    }
}


@media (max-width:805px) {
    .table-container thead[b-prdhc2fwgb] {
        background-color: #fff;
        color: #111 !important;
        position: sticky;
        top: 0;
        z-index: 1;
        border-bottom: 1px solid #000;
        font-size: 13px;
    }


        .category-page[b-prdhc2fwgb]{
            padding: 5px 15px;
        }

}




@media (max-width: 768px) {
    .pagination .page-item[b-prdhc2fwgb] {
        display: none; /* Hide all by default */
    }

        /* Always show Previous and Next buttons */
        .pagination .page-item:first-child[b-prdhc2fwgb],
        .pagination .page-item:last-child[b-prdhc2fwgb] {
            display: inline-block;
        }

        /* Show the current (active) page */
        .pagination .page-item.active[b-prdhc2fwgb] {
            display: inline-block;
        }

            /* Show the next page after the active one */
            .pagination .page-item.active + .page-item[b-prdhc2fwgb] {
                display: inline-block;
            }

            /* Optionally, show the page before the current one */
            .pagination .page-item.active ~ .page-item[b-prdhc2fwgb],
            .pagination .page-item.active:has(+ .page-item)[b-prdhc2fwgb] {
                /* Optional extra styles if needed */
            }

    .top-body[b-prdhc2fwgb] {
        display: flex;
        justify-content: space-between;
        margin: 1% 1%;
    }

    .category-page[b-prdhc2fwgb] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
    }



    .artist-top[b-prdhc2fwgb] {
        padding: 5px 0 0 5px;
        padding: 5px;
        font-weight: 500;
    }

    .artist-heading[b-prdhc2fwgb] {
        font-size: 20px;
    }

    .nav-section[b-prdhc2fwgb] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 15px 5px 15px;
    }

    .addbtn[b-prdhc2fwgb] {
        display: flex;
        justify-content: end;
        align-items: end;
        /*        padding: 0 15px;*/
    }

    .filter-left i[b-prdhc2fwgb] {
        font-size: 15px;
    }

    .darkadd[b-prdhc2fwgb] {
        width: 45%;
    }

    .title-top[b-prdhc2fwgb] {
        text-align: center;
    }

    .prev-button[b-prdhc2fwgb] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }



    .title-top[b-prdhc2fwgb] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-prdhc2fwgb] {
        font-size: 19px;
    }

    .filter-section[b-prdhc2fwgb] {
        padding: 5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .filter-text[b-prdhc2fwgb] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left i[b-prdhc2fwgb] {
        font-size: 15px;
    }

    .btn-previous-two[b-prdhc2fwgb] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-prdhc2fwgb] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

    .dropdown[b-prdhc2fwgb] {
        display: flex;
        justify-content: end;
        position: relative;
        padding: 0 15px;
    }


    .dropdown-menu[b-prdhc2fwgb] {
        width: 87vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }

    .you[b-prdhc2fwgb] {
        display: flex;
        width: 100%;
        justify-content: end;
    }

    Input styling
    input[type="date"][b-prdhc2fwgb],
    input[type="text"][b-prdhc2fwgb],
    select[b-prdhc2fwgb] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 12px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-prdhc2fwgb],
        input[type="text"]:focus[b-prdhc2fwgb],
        select:focus[b-prdhc2fwgb] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

    Placeholder styling
    input[b-prdhc2fwgb]::placeholder {
        color: #999;
        font-size: 12px;
    }

    Filter button styling
    .filter-button[b-prdhc2fwgb] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .filter-button:hover[b-prdhc2fwgb] {
        background-color: #5a4cbc;
    }

    Dropdown toggle button styling
    .prev-two[b-prdhc2fwgb] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

    .prev-two:hover[b-prdhc2fwgb] {
        color: #6a5acd;
    }

    /*     Animation for dropdown */
    @keyframes fadeIn-b-prdhc2fwgb {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-prdhc2fwgb] {
        animation: fadeIn-b-prdhc2fwgb 0.2s ease-out forwards;
    }

    .start[b-prdhc2fwgb], .end[b-prdhc2fwgb], .transaction[b-prdhc2fwgb], .bill[b-prdhc2fwgb] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .bill input[type=text][b-prdhc2fwgb] {
            width: 60%;
            font-size: 12px;
        }

        .bill input[b-prdhc2fwgb]::placeholder {
            text-align: center;
        }

        .transaction select[b-prdhc2fwgb] {
            width: 60%;
            display: flex;
            margin-left: 25%;
        }


    .top-body[b-prdhc2fwgb] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-prdhc2fwgb] {
        font-size: 12px;
    }

    .appoint-count[b-prdhc2fwgb] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-prdhc2fwgb] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10%;
    }

        .right-detail img[b-prdhc2fwgb] {
            width: 12%;
            height: 30%;
        }

    .name[b-prdhc2fwgb] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-prdhc2fwgb], .address[b-prdhc2fwgb] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-prdhc2fwgb] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-prdhc2fwgb] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-prdhc2fwgb] {
        height: 53vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .body-main[b-prdhc2fwgb] {
        max-height: 60vh;
    }

    .filter-left[b-prdhc2fwgb], .filter-title[b-prdhc2fwgb] {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .searchisbutton[b-prdhc2fwgb] {
        display: flex;
        justify-content: end;
        margin-bottom: 5px;
    }

    .darksearch[b-prdhc2fwgb] {
        width: 30%;
    }

    .darkadd[b-prdhc2fwgb] {
        font-size: 14px;
    }

    .artist-heading[b-prdhc2fwgb] {
        font-size: 19px;
    }

    .bill[b-prdhc2fwgb] {
        margin-bottom: 5px;
    }


    .two-spans-groups[b-prdhc2fwgb] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .paginationnnav[b-prdhc2fwgb] {
        display: flex;
        padding: 10px 25px;
        position: absolute;
        bottom: 2vh;
        width: 90%;
    }

    .paginationnnav[b-prdhc2fwgb] {
        margin-bottom: 0;
    }

    /*    search-modal*/

    .bill[b-prdhc2fwgb] {
        margin-bottom: 10px;
    }

    .dropdown-item[b-prdhc2fwgb] {
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 15px;
    }


        .dropdown-item:focus[b-prdhc2fwgb], .dropdown-item:hover[b-prdhc2fwgb] {
            color: #1e2125;
            background-color: #e9ecef;
        }

    a:hover[b-prdhc2fwgb] {
        color: #0a58ca;
    }

    .darksearch[b-prdhc2fwgb] {
        width: 30%;
        font-size: 15px;
    }

    .darksearch[b-prdhc2fwgb] {
        width: 30%;
        font-size: 13px;
    }
}




@media (max-width: 645px) {

    .darkadd[b-prdhc2fwgb] {
        width: 52%;
        font-size: 13px;
    }

    .artist-heading[b-prdhc2fwgb] {
        font-size: 18px;
    }

    .dropdown-menu[b-prdhc2fwgb] {
        width: 86.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width: 590px) {
    .darkadd[b-prdhc2fwgb] {
        width: 55%;
        font-size: 13px;
    }

    .artist-heading[b-prdhc2fwgb] {
        font-size: 17px;
    }

    .two-spans-groups[b-prdhc2fwgb] {
        display: grid;
        grid-template-columns: 35% 65%;
    }

    .dropdown-menu[b-prdhc2fwgb] {
        width: 86vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }
}

@media (max-width: 500px) {
    .customer-appoint[b-prdhc2fwgb] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-prdhc2fwgb] {
        gap: 1%;
        justify-content: end;
    }


    .paginationpara[b-prdhc2fwgb], .pagination-last[b-prdhc2fwgb], .inquiry-heading[b-prdhc2fwgb], .addinquirybtn[b-prdhc2fwgb], .table-container[b-prdhc2fwgb], .table tbody[b-prdhc2fwgb] {
        font-size: 12px;
    }

    .dropdown-item[b-prdhc2fwgb] {
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 14px;
    }

    .bill input[type=text][b-prdhc2fwgb] {
        width: 65%;
        font-size: 11px;
    }

    .darksearch[b-prdhc2fwgb] {
        width: 32%;
        font-size: 12px;
    }

    .dropdown-menu[b-prdhc2fwgb] {
        width: 85vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }

    .darkadd[b-prdhc2fwgb] {
        width: 55%;
        font-size: 12px;
    }
}

@media (max-width: 478px) {


    .darkadd[b-prdhc2fwgb] {
        width: 57%;
        font-size: 10px;
    }

    .artist-heading[b-prdhc2fwgb] {
        font-size: 16px;
    }

    .name[b-prdhc2fwgb] {
        font-weight: 600;
        font-size: 13px;
        line-height: 19.49px;
    }

    .time[b-prdhc2fwgb], .address[b-prdhc2fwgb] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-prdhc2fwgb] {
        font-size: 11px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .paginationpara[b-prdhc2fwgb], .pagination-last[b-prdhc2fwgb], .inquiry-heading[b-prdhc2fwgb], .addinquirybtn[b-prdhc2fwgb], .table-container[b-prdhc2fwgb], .table tbody[b-prdhc2fwgb] {
        font-size: 11px;
    }


    .bill input[type=text][b-prdhc2fwgb] {
        width: 71%;
        font-size: 11px;
    }

    .darksearch[b-prdhc2fwgb] {
        width: 36%;
        font-size: 12px;
    }

    .nav-section[b-prdhc2fwgb]{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 5px 5px 5px;
    }

    .filter-left i[b-prdhc2fwgb]{
        font-size: 13px;
    }
}

@media (max-width:390px) {
    .name[b-prdhc2fwgb] {
        font-weight: 600;
        font-size: 12px;
        line-height: 19.49px;
    }

    .time[b-prdhc2fwgb], .address[b-prdhc2fwgb] {
        font-size: 10px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-prdhc2fwgb] {
        font-size: 10px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .body-main[b-prdhc2fwgb] {
        max-height: 60vh;
        padding: 10px 10px;
    }

    .appoint-count[b-prdhc2fwgb] {
        font-size: 11px;
        font-weight: 600;
    }

    .day[b-prdhc2fwgb] {
        font-size: 11px;
    }

    .filter-text[b-prdhc2fwgb] {
        font-size: 13px;
        font-weight: 400;
    }

    .filter-left i[b-prdhc2fwgb] {
        font-size: 11px;
    }

    .prev-two[b-prdhc2fwgb] {
        border: none;
        font-weight: 600;
        font-size: 15px;
        background-color: #FFFF;
    }


    .darkadd[b-prdhc2fwgb] {
        width: 60%;
        font-size: 9px;
    }

    .artist-heading[b-prdhc2fwgb] {
        font-size: 14px;
    }


    .col-3[b-prdhc2fwgb] {
        flex: 0 0 auto;
        width: 30%;
    }

    .paginationnnav[b-prdhc2fwgb] {
        display: flex;
        padding: 10px 10px;
        position: absolute;
        bottom: 2vh;
        width: 90%;
    }

    .two-spans-groups[b-prdhc2fwgb] {
        display: grid;
        grid-template-columns: revert;
    }


    .dropdown-item[b-prdhc2fwgb] {
        display: block;
        width: 100%;
        padding: .40rem 0.2rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 12px;
    }

    .bill input[type=text][b-prdhc2fwgb] {
        width: 72%;
        font-size: 10px;
    }

    .darksearch[b-prdhc2fwgb] {
        width: 36%;
        font-size: 10px;
    }

    .dropdown-menu[b-prdhc2fwgb] {
        width: 83.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}

@media (max-width:360px) {
    .you[b-prdhc2fwgb] {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .bill input[type=text][b-prdhc2fwgb] {
        width: 90%;
        font-size: 10px;
    }

    .darksearch[b-prdhc2fwgb] {
        width: 48%;
        font-size: 10px;
    }

    .darkadd[b-prdhc2fwgb] {
        width: 60%;
        font-size: 8px;
    }

    .artist-heading[b-prdhc2fwgb] {
        font-size: 13px;
    }

    .dropdown-menu[b-prdhc2fwgb] {
        width: 83vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}


@media (max-width:320px) {
    .bill input[type=text][b-prdhc2fwgb] {
        width: 90%;
        font-size: 9px;
    }

    .filter-text[b-prdhc2fwgb] {
        font-size: 11px;
        font-weight: 400;
    }

    .filter-left i[b-prdhc2fwgb] {
        font-size: 11px;
    }

    .appoint-count[b-prdhc2fwgb] {
        font-size: 10px;
        font-weight: 600;
    }

    .day[b-prdhc2fwgb] {
        font-size: 10px;
    }

    .nav-section[b-prdhc2fwgb] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 0px 8px 0px;
    }

    .dropdown-menu[b-prdhc2fwgb] {
        width: 82vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }

    .darkadd[b-prdhc2fwgb]{
        width: 63%;
        font-size: 8px;
    }
}




/* /Pages/Components/AppointmentPicker.razor.rz.scp.css */
/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #f5f5f5;
    color: #333;
}*/

.container[b-809faaoqwn] {
 /*   max-width: 800px;
    margin: 2rem auto;
    padding: 1%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);*/
}

/*h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 2rem;
}*/
.body-main[b-809faaoqwn] {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    border-radius:10px;
}

.booking-heading[b-809faaoqwn] {
    color: #34495e;
    margin-bottom: 1rem;
}

.booking-step[b-809faaoqwn] {
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}
/*
.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    margin-bottom: 1rem;
}*/

.form-control:disabled[b-809faaoqwn] {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.date-range[b-809faaoqwn] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.date-input[b-809faaoqwn] {
    flex: 1;
    min-width: 200px;
}



.choose-time[b-809faaoqwn] {
    padding: 5px 10px;
    background-color: #383838;
    color: #fff;
    border-radius:10px;
}
    .choose-time:hover[b-809faaoqwn] {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    }
.slot-btn[b-809faaoqwn]{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:1rem;
}

#dateNavigation[b-809faaoqwn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

#dateNavigation button[b-809faaoqwn] {
    padding: 0.5rem 1rem;
    border: none;
    background-color: #3498db;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#dateNavigation button:hover:not(:disabled)[b-809faaoqwn] {
    background-color: #2980b9;
}

#dateNavigation button:disabled[b-809faaoqwn] {
    background-color: #95a5a6;
    cursor: not-allowed;
}

#currentDate[b-809faaoqwn] {
    font-weight: bold;
    min-width: 150px;
    text-align: center;
}

.time-selection-instructions[b-809faaoqwn] {
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: #e9ecef;
    border-radius: 4px;
    font-size:14px;
}

.selection-status[b-809faaoqwn] {
    margin-top: 0.5rem;
    font-weight: bold;
    color: #2c3e50;
}

.time-slot-grid[b-809faaoqwn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.time-slot[b-809faaoqwn] {
    padding: 0.8rem;
    text-align: center;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.time-slot:hover[b-809faaoqwn] {
    background-color: #dee2e6;
}

.time-slot.selected-start[b-809faaoqwn] {
    background-color: #3498db;
    color: white;
    border-color: #2980b9;
}

.time-slot.selected-end[b-809faaoqwn] {
    background-color: #2ecc71;
    color: white;
    border-color: #27ae60;
}

.time-slot.in-range[b-809faaoqwn] {
    background-color: #3498db;
    color: white;
    border-color: #2980b9;
    opacity: 0.3;
}

.time-slot.unavailable[b-809faaoqwn] {
    background-color: #dc3545;
    color: white;
    cursor: not-allowed;
}

.time-slot.selected-start[b-809faaoqwn]::after,
.time-slot.selected-end[b-809faaoqwn]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.3;
}

.time-setup label[b-809faaoqwn]{
    font-size:14px;
}

.time-apply[b-809faaoqwn]{
    padding:1% 3%;
}


.booking-summary[b-809faaoqwn] {
/*    margin-top: 2rem;*/
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}
.booking-heading[b-809faaoqwn]{
    margin-bottom:1rem;
}

    .booking-summary p[b-809faaoqwn] {
        margin-bottom:0.5rem;
      /*  color: #9E9E9E;*/
      font-weight:600;
      font-size:16px;
    }

#summaryContent[b-809faaoqwn] {
    margin: 1rem 0;
}

#summaryContent p[b-809faaoqwn] {
    margin-bottom: 0.5rem;
}

.btn-primary[b-809faaoqwn] {
    width: 100%;
    padding: 1rem;
    background-color: #2ecc71;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.confirm-booking[b-809faaoqwn]{
    padding:3%;
}

.btn-primary:hover:not(:disabled)[b-809faaoqwn] {
    background-color: #27ae60;
}

.btn-primary:disabled[b-809faaoqwn] {
    background-color: #95a5a6;
    cursor: not-allowed;
}

.booked-slot[b-809faaoqwn] {
    background-color: #ccc;
    pointer-events: none;
    color: #777;
}

.form-label[b-809faaoqwn] {
    color: #170F49;
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}
.booking-ps[b-809faaoqwn] {
    padding: 5px;
}


@media (max-width: 600px) {
    .container[b-809faaoqwn] {
        margin: 1rem;
        padding: 1rem;
    }

    .date-range[b-809faaoqwn] {
        flex-direction: column;
    }

    .time-slot-grid[b-809faaoqwn] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

.booked-slot[b-809faaoqwn] {
    background-color: #f8d7da; /* light red */
    border: 1px solid #dc3545;
}

.saved-slot[b-809faaoqwn] {
    background-color: #d1ecf1; /* light blue */
    border: 1px solid #17a2b8;
}

.selected-start[b-809faaoqwn] {
    background-color: #c3e6cb;
    border: 2px solid #28a745;
}

.selected-end[b-809faaoqwn] {
    background-color: #c3e6cb;
    border: 2px solid #28a745;
}

.in-range[b-809faaoqwn] {
    background-color: #e2e3e5;
}
/* /Pages/Components/FormComponents/Dropdown.razor.rz.scp.css */


.form-group[b-vepvrlduw0] {
    position: relative;
    margin-bottom: 25px;
}

.select-wrapper[b-vepvrlduw0] {
    position: relative;
}

.form-select[b-vepvrlduw0] {
    width: 100%;
    height: 50px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s ease;
    background-color: white;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

    .form-select:focus[b-vepvrlduw0] {
        border-color: #4a90e2;
        outline: none;
    }

.form-label[b-vepvrlduw0] {
    position: absolute;
    left: 10px;
    top: 15px;
    font-size: 16px;
    color: #999;
    transition: all 0.3s ease;
    pointer-events: none;
    background-color: transparent;
}

.form-select:focus ~ .form-label[b-vepvrlduw0],
.form-select:valid ~ .form-label[b-vepvrlduw0] {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #4a90e2;
    background-color: white;
    padding: 0 5px;
}


/* /Pages/Components/FormComponents/FloatingLabel.razor.rz.scp.css */

.form-group[b-wikms3i159] {
    position: relative;
    margin-bottom: 25px;
}

.form-control[b-wikms3i159] {
    width: 100%;
    height: 50px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

    .form-control:focus[b-wikms3i159] {
        border-color: #4a90e2;
        outline: none;
    }

.form-label[b-wikms3i159] {
    position: absolute;
    left: 10px;
    top: 15px;
    font-size: 16px;
    color: #999;
    transition: all 0.3s ease;
    pointer-events: none;
    background-color: transparent;
}

.form-control:focus ~ .form-label[b-wikms3i159],
.form-control:not(:placeholder-shown) ~ .form-label[b-wikms3i159] {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #4a90e2;
    background-color: white;
    padding: 0 5px;
}

/* Improved select styling with floating label */
.form-select[b-wikms3i159] {
    width: 100%;
    height: 50px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s ease;
    background-color: white;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

    .form-select:focus[b-wikms3i159] {
        border-color: #4a90e2;
        outline: none;
    }
/* /Pages/Components/ModalComponents/ProductModal.razor.rz.scp.css */


body[b-86pjknxi45] {
    background-color: #f5f7fa;
    color: #333;
    padding: 20px;
}

.container[b-86pjknxi45] {
    max-width: 800px;
    margin: 0 auto;
    background-color: #f5f7fa;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}

.header[b-86pjknxi45] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.close-btn[b-86pjknxi45] {
    width: 30px;
    height: 30px;
    background-color: #1a2b4e;
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.save-btn[b-86pjknxi45] {
    background-color: transparent;
    color: #1a2b4e;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

.title-section[b-86pjknxi45] {
    margin-bottom: 30px;
}

h1[b-86pjknxi45] {
    font-size: 24px;
    color: #1a2b4e;
    margin-bottom: 5px;
}

.subtitle[b-86pjknxi45] {
    color: #666;
    font-size: 14px;
}

.form-row[b-86pjknxi45] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-86pjknxi45] {
    flex: 1;
}

    .form-group label[b-86pjknxi45] {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        color: #333;
    }

.form-control[b-86pjknxi45] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: white;
    font-size: 14px;
}

    .form-control[b-86pjknxi45]::placeholder {
        color: #aaa;
    }

.select-wrapper[b-86pjknxi45] {
    position: relative;
}

    .select-wrapper[b-86pjknxi45]::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a2b4e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }

textarea.form-control[b-86pjknxi45] {
    min-height: 100px;
    resize: vertical;
}

.toggle-group[b-86pjknxi45] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.toggle-switch[b-86pjknxi45] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

    .toggle-switch input[b-86pjknxi45] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-86pjknxi45] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0;
    transition: .4s;
    border-radius: 24px;
}

    .toggle-slider[b-86pjknxi45]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .toggle-slider[b-86pjknxi45] {
    background-color: #4a90e2;
}

    input:checked + .toggle-slider[b-86pjknxi45]:before {
        transform: translateX(26px);
    }

.table[b-86pjknxi45] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

    .table th[b-86pjknxi45] {
        text-align: left;
        padding: 10px;
        font-size: 14px;
        color: #333;
        font-weight: 600;
    }

    .table td[b-86pjknxi45] {
        padding: 10px;
        font-size: 14px;
        background-color: white;
        border-bottom: 5px solid #f5f7fa;
    }

    .table tr:last-child td[b-86pjknxi45] {
        border-bottom: none;
    }

.delete-btn[b-86pjknxi45] {
    width: 30px;
    height: 30px;
    border: 1px solid #e74c3c;
    background-color: white;
    color: #e74c3c;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.calendar-icon[b-86pjknxi45] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.price-input[b-86pjknxi45] {
    position: relative;
}
/* /Pages/Components/TimePicker.razor.rz.scp.css */
.input-group[b-urtvczbdd9] {
    margin-bottom: 15px;
}

.input-group-addon[b-urtvczbdd9] {
    background: #f8f8f8;
}

    .input-group-addon:last-child[b-urtvczbdd9] {
        border-radius: 0 3px 3px 0;
    }

.form-control[b-urtvczbdd9] {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: none;
}

    .form-control:hover[b-urtvczbdd9],
    .form-control:focus[b-urtvczbdd9],
    .form-control:active[b-urtvczbdd9] {
        box-shadow: none;
    }

    .form-control:focus[b-urtvczbdd9] {
        border: 1px solid #34495e;
    }

/* Include the rest of your DateTimePicker styles here */
/* /Pages/Customer.razor.rz.scp.css */
.customer-page[b-uj3egzwggk] {
    background-color: #fff;
    color: #000;
    height: 88vh;
    border-radius: 0 0 0 50px;
}


.artist-top[b-uj3egzwggk] {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

.artist-heading h3[b-uj3egzwggk] {
    margin-bottom: 0;
}

.artist-heading[b-uj3egzwggk]{
    display:flex;
    gap:3%;
}

.addartistbtn[b-uj3egzwggk] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}


/* Table styles */
.table-container[b-uj3egzwggk] {
    max-height: 67vh;
    overflow-y: auto;
    width: 100%;
}

.table tbody[b-uj3egzwggk] {
}

.table-container table[b-uj3egzwggk] {
    width: 100%;
    border-collapse: collapse;
}

table tbody tr:hover[b-uj3egzwggk] {
    background-color: #d9d9d9;
    color: #111;
}

.table-container th[b-uj3egzwggk],
.table-container td[b-uj3egzwggk] {
    padding: 15px 10px;
    text-align: center;
    /*  border-bottom: 1px solid #ddd;*/
}

.table-container .center-td[b-uj3egzwggk] {
    text-align: center;
}

.table-container thead[b-uj3egzwggk] {
    background-color: #fff;
    color: #111 !important;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #000;
}

.table[b-uj3egzwggk] {
    margin-bottom: 0 !important;
}

/*modal-css*/
.modal-dialog[b-uj3egzwggk] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}

.modal[b-uj3egzwggk] {
    display: block;
    background-color: rgba(10,10,10,.8);
    width: 100%;
}

.modal-content[b-uj3egzwggk] {
    background-color: #F7F9FC;
    width: 100vw;
    height: 100vh;
    margin-left: 0px;
/*     top: 5%;*/
    left: 0%;
    position: absolute;
}

.back-top[b-uj3egzwggk] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2%;
}

.modal-header[b-uj3egzwggk] {
    display: flex;
    flex-direction: column;
    border: none;
}

.modal-title[b-uj3egzwggk] {
    font-size: 32px;
    font-weight: 600;
    color: #170F49;
}

.gobackbtn i[b-uj3egzwggk] {
    font-size: 28px;
    color: #170F49;
}

.save-button[b-uj3egzwggk] {
    background-color: #000;
    color: #fff;
    width: 20%;
}



.closeicon[b-uj3egzwggk] {
    font-size: 24px;
    cursor: pointer;
}


.save[b-uj3egzwggk] {
    padding: 10px;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}



    .save:hover:not(:disabled)[b-uj3egzwggk] {
        opacity: 0.6;
    }

    .save:disabled[b-uj3egzwggk] {
        opacity: 0.8;
        cursor: not-allowed;
    }


.form-label[b-uj3egzwggk] {
    color: #170F49;
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}

.form-hov[b-uj3egzwggk]::placeholder {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
}

.form-hov[b-uj3egzwggk] {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .form-hov:hover[b-uj3egzwggk] {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    }

/*Pagination*/


.page-item.active .page-link[b-uj3egzwggk] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}


.pagination[b-uj3egzwggk] {
    margin-bottom: 0;
    display: flex;
    justify-content: end;
}

.paginationnnav[b-uj3egzwggk] {
    display: flex;
    padding: 10px 30px;
    position: absolute;
    bottom: 2vh;
    width: 90%;
}



.page-item.active .page-link[b-uj3egzwggk] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}

.addcategorytbtn[b-uj3egzwggk] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}


@media (max-width: 768px) {
    .mobile-only[b-uj3egzwggk] {
        display: block;
    }

    .desktop-only[b-uj3egzwggk] {
        display: none;
    }
}

@media (max-width: 768px) {
    .pagination .page-item[b-uj3egzwggk] {
        display: none; /* Hide all by default */
    }

        /* Always show Previous and Next buttons */
        .pagination .page-item:first-child[b-uj3egzwggk],
        .pagination .page-item:last-child[b-uj3egzwggk] {
            display: inline-block;
        }

        /* Show the current (active) page */
        .pagination .page-item.active[b-uj3egzwggk] {
            display: inline-block;
        }

            /* Show the next page after the active one */
            .pagination .page-item.active + .page-item[b-uj3egzwggk] {
                display: inline-block;
            }

            /* Optionally, show the page before the current one */
            .pagination .page-item.active ~ .page-item[b-uj3egzwggk],
            .pagination .page-item.active:has(+ .page-item)[b-uj3egzwggk] {
                /* Optional extra styles if needed */
            }

    .customer-page[b-uj3egzwggk] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
        padding:5px 15px;
    }


    .artist-top[b-uj3egzwggk] {
        padding: 5px 0 0 5px;
        padding: 5px;
        font-weight: 500;
    }

    .artist-heading[b-uj3egzwggk] {
        font-size: 20px;
    }

    .nav-section[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 15px 5px 15px;
    }

    .addbtn[b-uj3egzwggk] {
        display: flex;
        justify-content: end;
        align-items: end;
        /*        padding: 0 15px;*/
    }

    .darkadd[b-uj3egzwggk] {
        width: 40%;
    }

    .title-top[b-uj3egzwggk] {
        text-align: center;
    }

    .prev-button[b-uj3egzwggk] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }



    .title-top[b-uj3egzwggk] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-uj3egzwggk] {
        font-size: 19px;
    }

    .filter-section[b-uj3egzwggk] {
        padding: 5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .filter-text[b-uj3egzwggk] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left i[b-uj3egzwggk] {
        font-size: 15px;
    }

    .btn-previous-two[b-uj3egzwggk] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-uj3egzwggk] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

    .dropdown[b-uj3egzwggk] {
        display: flex;
        justify-content: end;
        position: relative;
        padding: 0 15px;
    }


    .dropdown-menu[b-uj3egzwggk] {
        width: 96.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }



    .you[b-uj3egzwggk] {
        display: flex;
        width: 100%;
        justify-content: end;
    }

    Input styling
    input[type="date"][b-uj3egzwggk],
    input[type="text"][b-uj3egzwggk],
    select[b-uj3egzwggk] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 13px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-uj3egzwggk],
        input[type="text"]:focus[b-uj3egzwggk],
        select:focus[b-uj3egzwggk] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

    Placeholder styling
    input[b-uj3egzwggk]::placeholder {
        color: #999;
        font-size: 12px;
    }

    Filter button styling
    .filter-button[b-uj3egzwggk] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .filter-button:hover[b-uj3egzwggk] {
        background-color: #5a4cbc;
    }

    Dropdown toggle button styling
    .prev-two[b-uj3egzwggk] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

    .prev-two:hover[b-uj3egzwggk] {
        color: #6a5acd;
    }

    /*     Animation for dropdown */
    @keyframes fadeIn-b-uj3egzwggk {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-uj3egzwggk] {
        animation: fadeIn-b-uj3egzwggk 0.2s ease-out forwards;
    }

    .start[b-uj3egzwggk], .end[b-uj3egzwggk], .transaction[b-uj3egzwggk], .bill[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .bill input[type=text][b-uj3egzwggk] {
            width: 60%;
            font-size: 12px;
        }

        .bill input[b-uj3egzwggk]::placeholder {
            text-align: center;
        }

        .transaction select[b-uj3egzwggk] {
            width: 60%;
            display: flex;
            margin-left: 25%;
        }


    .top-body[b-uj3egzwggk] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-uj3egzwggk] {
        font-size: 12px;
    }

    .appoint-count[b-uj3egzwggk] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-uj3egzwggk] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10%;
    }

        .right-detail img[b-uj3egzwggk] {
            width: 12%;
            height: 30%;
        }

    .name[b-uj3egzwggk] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-uj3egzwggk], .address[b-uj3egzwggk] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-uj3egzwggk] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-uj3egzwggk] {
        height: 53vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .body-main[b-uj3egzwggk] {
        max-height: 60vh;
    }

    .filter-left[b-uj3egzwggk], .filter-title[b-uj3egzwggk] {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .searchisbutton[b-uj3egzwggk] {
        display: flex;
        justify-content: end;
        margin-bottom: 5px;
    }

    .darksearch[b-uj3egzwggk] {
        width: 30%;
    }

    .darkadd[b-uj3egzwggk] {
        font-size: 16px;
    }

    .bill[b-uj3egzwggk] {
        margin-bottom: 5px;
    }


    .two-spans-groups[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .paginationnnav[b-uj3egzwggk] {
        margin-bottom: 0;
    }

    .right-detail i[b-uj3egzwggk] {
        font-size: 16px;
    }
}


@media (max-width:720px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 96.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width:650px) {
    .customer-appoint-wrapper[b-uj3egzwggk] {
        height: 52vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }
}


@media (max-width: 645px) {


    .darkadd[b-uj3egzwggk] {
        width: 52%;
        font-size: 13px;
    }

    .artist-heading[b-uj3egzwggk] {
        font-size: 18px;
    }

    .dropdown-menu[b-uj3egzwggk] {
        width: 95.9vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width:630px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 95.4vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }
}


@media (max-width: 590px) {
    .darkadd[b-uj3egzwggk] {
        width: 52%;
        font-size: 14px;
    }

    .two-spans-groups[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: 45% 55%;
    }


    .dropdown-menu[b-uj3egzwggk] {
        width: 95.1vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }

    .filter-text[b-uj3egzwggk] {
        font-size: 13px;
        font-weight: 400;
    }

    .filter-left i[b-uj3egzwggk] {
        font-size: 14px;
    }

    .customer-appoint-wrapper[b-uj3egzwggk] {
        height: 51vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }
}

@media (max-width:550px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 94.7vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .customer-appoint-wrapper[b-uj3egzwggk] {
        height: 50vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }
}


@media (max-width: 500px) {
    .customer-appoint[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-uj3egzwggk] {
        gap: 1%;
        justify-content: end;
    }

    .dropdown-menu[b-uj3egzwggk] {
        width: 94.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .darkadd[b-uj3egzwggk] {
        width: 55%;
        font-size: 12px;
    }

    .bill input[type=text][b-uj3egzwggk] {
        width: 65%;
        font-size: 11px;
    }

    .darksearch[b-uj3egzwggk] {
        width: 32%;
        font-size: 12px;
    }

    .paginationpara[b-uj3egzwggk], .pagination-last[b-uj3egzwggk], .inquiry-heading[b-uj3egzwggk], .addinquirybtn[b-uj3egzwggk], .table-container[b-uj3egzwggk], .table tbody[b-uj3egzwggk] {
        font-size: 12px;
    }

    .customer-appoint[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-uj3egzwggk] {
        gap: 1%;
        justify-content: end;
    }

    .customer-appoint-wrapper[b-uj3egzwggk] {
        height: 49vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .two-spans-groups[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: 45% 55%;
    }
}




@media (max-width: 478px) {
    .darkadd[b-uj3egzwggk] {
        width: 60%;
    }

    .dropdown-menu[b-uj3egzwggk] {
        width: 93.9vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .two-spans-groups[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: 40% 60%;
    }
}

@media (max-width:455px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 93.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .name[b-uj3egzwggk] {
        font-weight: 600;
        font-size: 13px;
        line-height: 19.49px;
    }

    .appoint-count[b-uj3egzwggk], .day[b-uj3egzwggk] {
        font-size: 11px;
        font-weight: 600;
    }

    .filter-left i[b-uj3egzwggk] {
        font-size: 13px;
    }

    .paginationnnav[b-uj3egzwggk] {
        display: flex;
        padding: 10px 30px;
        position: absolute;
        bottom: 5vh;
        width: 95%;
    }
}


@media (max-width:430px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 93.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .customer-appoint[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .two-spans-groups[b-uj3egzwggk] {
        display: grid;
        grid-template-columns: 100%;
    }

    .paginationpara[b-uj3egzwggk], .pagination-last[b-uj3egzwggk], .inquiry-heading[b-uj3egzwggk], .addinquirybtn[b-uj3egzwggk], .table-container[b-uj3egzwggk], .table tbody[b-uj3egzwggk] {
        font-size: 11px;
    }

    .paginationnnav[b-uj3egzwggk] {
        display: flex;
        padding: 10px 30px;
        position: absolute;
        bottom: 5vh;
        width: 98%;
    }
}

@media (max-width:390px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 92.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 32px;
    }

    .paginationnnav[b-uj3egzwggk] {
        display: flex;
        padding: 10px 7px;
        position: absolute;
        bottom: 5vh;
        width: 93%;
    }

    .filter-text[b-uj3egzwggk] {
        font-size: 12px;
        font-weight: 400;
    }

    .prev-two[b-uj3egzwggk] {
        border: none;
        font-weight: 600;
        font-size: 16px;
        background-color: #FFFF;
    }

    .time[b-uj3egzwggk], .address[b-uj3egzwggk] {
        font-size: 11px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .right-detail i[b-uj3egzwggk] {
        font-size: 14px;
    }
}

@media (max-width:375px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 92.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .filter-left i[b-uj3egzwggk] {
        font-size: 12px;
    }
}


@media (max-width:360px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 92vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .paginationpara[b-uj3egzwggk], .pagination-last[b-uj3egzwggk], .inquiry-heading[b-uj3egzwggk], .addinquirybtn[b-uj3egzwggk], .table-container[b-uj3egzwggk], .table tbody[b-uj3egzwggk] {
        font-size: 10px;
    }
}

@media (max-width:355px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 91.7vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }
}

@media (max-width:325px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 91.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .paginationnnav[b-uj3egzwggk] {
        display: flex;
        padding: 10px 0px;
        position: absolute;
        bottom: 5vh;
        width: 92%;
    }

    .darkadd[b-uj3egzwggk] {
        width: 60%;
        font-size: 11px;
    }

    .artist-heading[b-uj3egzwggk] {
        font-size: 16px;
    }

    .name[b-uj3egzwggk] {
        font-weight: 600;
        font-size: 12px;
        line-height: 19.49px;
    }

    .paginationpara[b-uj3egzwggk], .pagination-last[b-uj3egzwggk], .inquiry-heading[b-uj3egzwggk], .addinquirybtn[b-uj3egzwggk], .table-container[b-uj3egzwggk], .table tbody[b-uj3egzwggk] {
        font-size: 9px;
    }
}

@media (max-width:315px) {
    .dropdown-menu[b-uj3egzwggk] {
        width: 90.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -1px;
        margin-top: 38px;
    }

    .appoint-count[b-uj3egzwggk], .day[b-uj3egzwggk] {
        font-size: 9px;
        font-weight: 600;
    }

    .darkadd[b-uj3egzwggk] {
        width: 60%;
        font-size: 10px;
    }

    .artist-heading[b-uj3egzwggk] {
        font-size: 15px;
    }

    .filter-left i[b-uj3egzwggk] {
        font-size: 11px;
    }
}
/* /Pages/Dashboard.razor.rz.scp.css */


.dashboardpage[b-fcil29o90g] {
    background-color: #F7F9FC;
    color: #000;
    /* margin-top: 7vh; */
    padding: 30px 30px;
    border-radius: 0 0 0 50px;
}




.texticon[b-fcil29o90g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.headersection[b-fcil29o90g] {
    background-color: #111;
    width: 105.4%;
    height: 7.6% !important;
    margin-left: -3% !important;
}

.logopart img[b-fcil29o90g] {
    width: 80px;
    height: 80px;
    border-radius: 10px;
}

.container[b-fcil29o90g] {
    display: flex;
    height: 97vh;
    overflow: hidden;
}

/*.main-content {
    padding: 20px;
    height: 135%;
    overflow-y: hidden;
}
*/




.thick[b-fcil29o90g] {
    font-weight: 600;
}


.over-todo[b-fcil29o90g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}


.total-content[b-fcil29o90g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0%;
    color: #000;
    border-radius: 5%;
}

.left-background[b-fcil29o90g]{
    background-color:#000;
    padding:3%;
    border-radius:10px;
}


.overviewpart[b-fcil29o90g] {
    margin-bottom: 10%;
}


.overview-only[b-fcil29o90g] {
    background-color: #FFFF;
    border-radius: 10px;
    margin:3% 3%;
}


.overview-down[b-fcil29o90g] {
    background-color: #FFFF;
    border-radius: 10px;
    margin: 3% 3%;
}

.lower[b-fcil29o90g] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:5%;
    margin-bottom: 2%;
}

.right-btn[b-fcil29o90g]{
    align-content:center;
    text-align:center;
}

.left-view[b-fcil29o90g]{
    align-content:center;
    height:13vh;
}

.overviewmore[b-fcil29o90g]{
    font-size:14px;
    text-align:center;
}

.overview-only button[b-fcil29o90g] {
    border: 3px solid #1AA053;
    font-size:25px;
    width: 55%;
    height: 60%;
    color: #1AA053;
    background-color: #FFFF;
    border-radius: 5px;
}

.overview-down button[b-fcil29o90g] {
    border: 3px solid #F2D6D3;
    font-size: 25px;
    width: 55%;
    height: 60%;
    color: #AD2D1E;
    background-color: #FFFF;
    border-radius: 5px;
}



.overviewdivhead[b-fcil29o90g] {
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 1px;
    margin-top: 8%;
    text-align: center;
    color: #8A92A6;
}

.overviewdivnum[b-fcil29o90g] {
    font-size: 32px;
    font-weight: 600;
    text-align:center;
    margin:4% 0%;
}

.table-outerlayer[b-fcil29o90g] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 5%;
    padding: 3%;
}

.appointmentstable-outerlayer[b-fcil29o90g] {
    width: 100%;
    margin-bottom: 2%;
    background-color: #FFFFFF;
    padding:4%;
    border-radius:8px;
    box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
}

.appointmenttable tbody[b-fcil29o90g] {
    height: 23vh;
    display: block;
    overflow-y: scroll;
}

    .appointmenttable thead[b-fcil29o90g],
    .appointmenttable tbody tr[b-fcil29o90g] {
        table-layout: fixed;
        display: table;
        width: 100%;
    }

[b-fcil29o90g]::-webkit-scrollbar {
    width: 10px;
    background-color: var(--our--scrollbar-color);
}

[b-fcil29o90g]::-webkit-scrollbar-thumb {
    background-color: #111;
    border-radius: 5px;
}

.appointmentstablediv .appointmenttable[b-fcil29o90g] {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
}


.appointmentstablediv th[b-fcil29o90g],
.appointmentstablediv td[b-fcil29o90g] {
    padding: 10px;
}

.appointmenttable tbody tr:hover[b-fcil29o90g] {
    background-color: #676363;
    color:#FFFF;
}

.appointmenttable thead[b-fcil29o90g] {
    border-bottom: 1px solid #fff;
}

.appointmenttable tbody[b-fcil29o90g] {
    color: #8A92A6;
}


.artist[b-fcil29o90g]{
    font-weight:600;
}

.amount-slogan[b-fcil29o90g] {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    text-align: start;
    color: #8A92A6;
}

.payment-outerlayer[b-fcil29o90g] {
    width: 100%;
    margin-bottom: 2%;
    background-color: #FFFFFF;
    padding: 4%;
    border-radius: 8px;
    box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
}

.color-div[b-fcil29o90g]{
    display: flex;
    height: 10vh;
    justify-content: center;
    margin: 5% 0%;

}

.black[b-fcil29o90g]{
    background-color:#000;
    width:20%;
}

.gray[b-fcil29o90g] {
    background-color: #464343;
    width: 20%;
}

.silver[b-fcil29o90g] {
    background-color: #9b9797;
    width: 20%;
}

.index[b-fcil29o90g] {
    display: grid;
    grid-template-columns: 20% 80%;
    color: #8A92A6;
}

.left-box[b-fcil29o90g] {
    display: flex;
    gap: 5%;
    margin-bottom: 11%;
    align-items: center;
}





.index-black[b-fcil29o90g] {
    background-color: #000;
    padding: 9%;
    height: 9%;
    width: 20%;
}

.index-gray[b-fcil29o90g] {
    background-color: #464343;
    padding: 9%;
    height: 9%;
    width: 20%;
}

.index-silver[b-fcil29o90g] {
    background-color: #9b9797;
    padding: 9%;
    height: 9%;
    width: 20%;
}

.index-name[b-fcil29o90g]{
    font-size:20px;
}


.right-index[b-fcil29o90g] {
    text-align: end;
    align-items: center;
    padding-right: 20%;
    font-size:20px;
}

.right-index p[b-fcil29o90g]{
    margin-bottom:3%;
}

.left-index[b-fcil29o90g] {
    text-align: end;
    align-items: center;
    padding-left: 20%;
}

.statistics[b-fcil29o90g] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.topartisttext[b-fcil29o90g]{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    margin-left: 1%;
    margin-top: 3%;
    width: 100%; /* Occupy full width on smaller screens */
}

.top-artists[b-fcil29o90g],
.occupancy-today[b-fcil29o90g] {
    background-color: #FFF;
    border: 3px solid #8A92A6;
    padding: 10px;
    border-radius: 4px;
    flex: 1;
    margin: 10px 30px; /* Adjust margins for better spacing */
    border-radius: 20px;
    min-width: 200px; /* Ensure a minimum width for the boxes */
}

.occupancy-today[b-fcil29o90g] {
}

    .occupancy-today .chart[b-fcil29o90g] {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.circular-chart[b-fcil29o90g] {
    width: 80px;
    height: 80px;
}

.circle-bg[b-fcil29o90g] {
    fill: none;
    stroke: #eee;
    stroke-width: 4px;
}

.circle[b-fcil29o90g] {
    fill: none;
    stroke-width: 3px;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

.artistamttable[b-fcil29o90g] {
    width: 100%;
    margin-left: 3vw;
}

    .artistamttable td[b-fcil29o90g] {
        height: 2vh;
    }

.topartiststxt[b-fcil29o90g],
.occupancytxt[b-fcil29o90g] {
    font-size: 24px;
    font-weight:600;
    /*   margin-left: 14% !important;*/
    margin: 0 10%;
}

.ellipsicon[b-fcil29o90g] {
    margin-left: 30%;
}

.ellipsiconartist[b-fcil29o90g] {
    margin-left: 55%;
}

.circle[b-fcil29o90g] {
    stroke: #4caf50;
}



/*sidebarappointmentpart*/
.sidebarappointmentxt[b-fcil29o90g] {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
}

.sidebarellipsicon[b-fcil29o90g] {
    font-size: 28px;
    line-height: 0;
    margin-left: 15%;
}

.sidebarplussicon[b-fcil29o90g] {
    font-size: 28px;
    margin-left: 3%;
    cursor: pointer;
}

/*appointmentdetailpart*/
.appointmentprofilepart[b-fcil29o90g] {
    padding-left: 20px;
    margin-top: 10%;
}

.appointmentprofileimg[b-fcil29o90g] {
    width: 35px;
    border-radius: 50%;
}

.appointmentprofiletexts[b-fcil29o90g] {
    line-height: 5px;
    margin-left: 10px;
    margin-top: 7px;
}

    .appointmentprofiletexts .appointmentmainname[b-fcil29o90g] {
        font-size: 16px;
        font-weight: 500;
    }

    .appointmentprofiletexts .appointmentbelowname[b-fcil29o90g] {
        font-size: 12px;
    }

.dropdownicon[b-fcil29o90g] {
    font-size: 22px;
    margin-top: 3px;
    margin-left: 1%;
    cursor: pointer;
}


/*todopart*/

.right-todo[b-fcil29o90g] {
    box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
    background-color: #FFFF;
    border-radius: 5px;
    padding:1% 0%;
}

.todotxt[b-fcil29o90g] {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    display:flex;
    padding-left:5%;
}

.tododiv[b-fcil29o90g] {
    max-height: 48vh;
    overflow-y: scroll;
}



.main-data[b-fcil29o90g]{
    display:grid;
    grid-template-columns:10% 90%;
    padding:0% 5%;
}



.input-todo[b-fcil29o90g] {
    text-align: start;
    align-content: center;
    font-size: 23px;
}

.about-todo[b-fcil29o90g] {
    font-size: 17px;
    color: #8A92A6;
    width:100%;
    line-height: 1.6;
}

.todo-container[b-fcil29o90g]{
    display:grid;
    grid-template-columns:10% 90%;
}



.tododiv ul[b-fcil29o90g] {
    list-style-type: none;
    line-height: 2;
    font-size: 12px;
    padding:0%;
}

    .tododiv li[b-fcil29o90g] {
        width: 530px;
    }

    .tododiv[b-fcil29o90g]::-webkit-scrollbar {
        display: none;
    }

.todolinkicon[b-fcil29o90g] {
    margin-left: 15%;
    flex-direction: column;
    flex: 1;
}

.todoplussicon[b-fcil29o90g] {
    font-size: 28px;
    padding-left: 1em;
    cursor: pointer;
    padding-top: 1.5%;
}

/*calender*/
.calender-outerlayer[b-fcil29o90g] {
    background-color: #FFFFFF;
    padding: 2%;
    border-radius: 8px;
    box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
}


[b-fcil29o90g]::-webkit-scrollbar {
    width: 5px; /* vertical scrollbar width */
}

/* Track (background) */
[b-fcil29o90g]::-webkit-scrollbar-track {
    background: #ecebeb;
    border-radius: 10px;
}

/* Thumb (scroll indicator) */
[b-fcil29o90g]::-webkit-scrollbar-thumb {
    background: #030303;
    border-radius: 15px;
}

    /* Thumb on hover */
[b-fcil29o90g]::-webkit-scrollbar-thumb:hover {
      background: #555;
}




/* Media Query for Larger Screens */
@media (min-width:2304px){
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 32px;
        letter-spacing: 1px;
        margin-top: 5%;
        text-align: center;
        color: #8A92A6;
    }

    .overview-only button[b-fcil29o90g] {
        border: 5px solid #1AA053;
        font-size: 55px;
        width: 48%;
        height: 80%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 55px;
        width: 48%;
        height: 80%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 13px;
    }


    .overviewdivnum[b-fcil29o90g] {
        font-size: 50px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .overviewmore[b-fcil29o90g] {
        font-size: 23px;
        text-align: center;
    }

    .todotxt[b-fcil29o90g] {
        font-size: 50px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .todoplussicon[b-fcil29o90g] {
        font-size: 45px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.5%;
    }

    .main-data[b-fcil29o90g]{
        display: grid;
        grid-template-columns: 10% 90%;
        padding: 0% 4%;
        gap: 6%;
    }

    .about-todo[b-fcil29o90g] {
        font-size: 26px;
        color: #8A92A6;
        width: 200%;
        line-height: 1.6;
    }

    .artist[b-fcil29o90g] {
        font-weight: 600;
        font-size: 50px;
    }

    .amount-slogan[b-fcil29o90g]{
        font-weight: 400;
        font-size: 25px;
        letter-spacing: 1px;
        text-align: start;
        color: #8A92A6;
    }

    .appointmenttable thead[b-fcil29o90g]{
        border-bottom: 1px solid #fff;
        font-size: 28px;
    }

    .index-name[b-fcil29o90g] {
        font-size: 28px;
    }

    .right-index[b-fcil29o90g] {
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 28px;
    }

    .overviewpart[b-fcil29o90g] {
        margin-bottom: 3%;
    }
}

@media (max-width:2303px){
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 32px;
        letter-spacing: 1px;
        margin-top: 5%;
        text-align: center;
        color: #8A92A6;
    }

    .overview-only button[b-fcil29o90g] {
        border: 5px solid #1AA053;
        font-size: 55px;
        width: 48%;
        height: 80%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 55px;
        width: 48%;
        height: 80%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 13px;
    }


    .overviewdivnum[b-fcil29o90g] {
        font-size: 50px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .overviewmore[b-fcil29o90g] {
        font-size: 23px;
        text-align: center;
    }

    .todotxt[b-fcil29o90g] {
        font-size: 50px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .todoplussicon[b-fcil29o90g] {
        font-size: 45px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.5%;
    }

    .main-data[b-fcil29o90g] {
        display: grid;
        grid-template-columns: 10% 90%;
        padding: 0% 4%;
        gap: 6%;
    }

    .about-todo[b-fcil29o90g] {
        font-size: 26px;
        color: #8A92A6;
        width: 200%;
        line-height: 1.6;
    }

    .artist[b-fcil29o90g] {
        font-weight: 600;
        font-size: 50px;
    }

    .amount-slogan[b-fcil29o90g] {
        font-weight: 400;
        font-size: 25px;
        letter-spacing: 1px;
        text-align: start;
        color: #8A92A6;
    }

    .appointmenttable thead[b-fcil29o90g] {
        border-bottom: 1px solid #fff;
        font-size: 28px;
    }

    .index-name[b-fcil29o90g] {
        font-size: 28px;
    }

    .right-index[b-fcil29o90g] {
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 28px;
    }

    .overviewpart[b-fcil29o90g] {
        margin-bottom: 3%;
    }
}

@media (max-width:2185px){
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 30px;
        letter-spacing: 1px;
        margin-top: 5%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g] {
        font-size: 45px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .todotxt[b-fcil29o90g]{
        font-size: 45px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .todoplussicon[b-fcil29o90g]{
        font-size: 40px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.5%;
    }

    .about-todo[b-fcil29o90g] {
        font-size: 26px;
        color: #8A92A6;
        width: 170%;
        line-height: 1.6;
    }

    .input-todo[b-fcil29o90g] {
        text-align: start;
        align-content: center;
        font-size: 23px;
    }

    .main-data[b-fcil29o90g] {
        display: grid;
        grid-template-columns: 10% 90%;
        padding: 0% 4%;
        gap: 2%;
    }

    .artist[b-fcil29o90g]{
        font-weight: 600;
        font-size: 45px;
    }

    .index-name[b-fcil29o90g]{
        font-size: 27px;
    }

    .right-index[b-fcil29o90g]{
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 27px;
    }
}

@media (max-width:1960px){
    .overviewdivhead[b-fcil29o90g]{
        font-weight: 400;
        font-size: 27px;
        letter-spacing: 1px;
        margin-top: 4%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g] {
        font-size: 40px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .overviewmore[b-fcil29o90g]{
        font-size: 20px;
        text-align: center;
    }

    .overview-only button[b-fcil29o90g]{
        border: 5px solid #1AA053;
        font-size: 45px;
        width: 48%;
        height: 76%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 45px;
        width: 48%;
        height: 76%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .todotxt[b-fcil29o90g]{
        font-size: 42px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .todoplussicon[b-fcil29o90g] {
        font-size: 37px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.5%;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 24px;
        color: #8A92A6;
        width: 160%;
        line-height: 1.6;
    }

    .main-data[b-fcil29o90g] {
        display: grid;
        grid-template-columns: 10% 90%;
         padding: 0% 4%; 
         gap: 0%; 
    }

    .input-todo[b-fcil29o90g] {
         text-align: start; 
        align-content: start;
        font-size: 28px;
    }

    .tododiv[b-fcil29o90g] {
        max-height: 49vh;
        overflow-y: scroll;
    }

    .artist[b-fcil29o90g]{
        font-weight: 600;
        font-size: 42px;
    }

    .amount-slogan[b-fcil29o90g]{
        font-weight: 400;
        font-size: 23px;
        letter-spacing: 1px;
        text-align: start;
        color: #8A92A6;
    }

    .appointmenttable thead[b-fcil29o90g]{
        border-bottom: 1px solid #fff;
        font-size: 26px;
    }

    .index-name[b-fcil29o90g]{
        font-size: 24px;
    }

    .right-index[b-fcil29o90g]{
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 24px;
    }
}


@media (max-width:1820px){
    .overviewdivhead[b-fcil29o90g]{
        font-weight: 400;
        font-size: 25px;
        letter-spacing: 1px;
        margin-top: 4%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g]{
        font-size: 38px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .overviewmore[b-fcil29o90g] {
        font-size: 18px;
        text-align: center;
    }

    .overview-only button[b-fcil29o90g]{
        border: 4px solid #1AA053;
        font-size: 43px;
        width: 48%;
        height: 74%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 4px solid #F2D6D3;
        font-size: 43px;
        width: 48%;
        height: 74%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .todotxt[b-fcil29o90g] {
        font-size: 40px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .tododiv[b-fcil29o90g] {
        max-height: 46vh;
        overflow-y: scroll;
    }

    .todoplussicon[b-fcil29o90g] {
        font-size: 35px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.5%;
    }

    .about-todo[b-fcil29o90g] {
        font-size: 23px;
        color: #8A92A6;
        width: 150%;
        line-height: 1.2;
    }

       .about-todo[b-fcil29o90g]{
        font-size: 24px;
        color: #8A92A6;
        width: 150%;
        line-height: 1.2;
    }

    .artist[b-fcil29o90g]{
        font-weight: 600;
        font-size: 40px;
    }

    .amount-slogan[b-fcil29o90g]{
        font-weight: 400;
        font-size: 20px;
        letter-spacing: 1px;
        text-align: start;
        color: #8A92A6;
    }

    .appointmenttable thead[b-fcil29o90g]{
        border-bottom: 1px solid #fff;
        font-size: 23px;
    }

    .index-name[b-fcil29o90g]{
        font-size: 22px;
    }

    .right-index[b-fcil29o90g]{
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 22px;
    }
}

@media (max-width:1720px){
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 22px;
        letter-spacing: 1px;
        margin-top: 4%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g]{
        font-size: 38px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .overviewmore[b-fcil29o90g]{
        font-size: 17px;
        text-align: center;
    }

    .overview-only button[b-fcil29o90g]{
        border: 4px solid #1AA053;
        font-size: 43px;
        width: 48%;
        height: 70%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 43px;
        width: 48%;
        height: 70%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .todotxt[b-fcil29o90g]{
        font-size: 35px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    
    .todoplussicon[b-fcil29o90g] {
        font-size: 30px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.5%;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 20px;
        color: #8A92A6;
        width: 135%;
        line-height: 1.2;
    }

    .artist[b-fcil29o90g]{
        font-weight: 600;
        font-size: 35px;
    }

    .amount-slogan[b-fcil29o90g]{
        font-weight: 400;
        font-size: 18px;
        letter-spacing: 1px;
        text-align: start;
        color: #8A92A6;
    }

    .appointmenttable thead[b-fcil29o90g] {
        border-bottom: 1px solid #fff;
        font-size: 21px;
    }

    .index-name[b-fcil29o90g]{
        font-size: 20px;
    }

    .right-index[b-fcil29o90g]{
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 20px;
    }

    .tododiv[b-fcil29o90g]{
        max-height: 48vh;
        overflow-y: scroll;
    }
}

@media (max-width:1620px){
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 20px;
        letter-spacing: 1px;
        margin-top: 4%;
        text-align: center;
        color: #8A92A6;
    }
}

@media (max-width:1560px){
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 19px;
        letter-spacing: 1px;
        margin-top: 4%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g]{
        font-size: 32px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .overviewmore[b-fcil29o90g]{
        font-size: 15px;
        text-align: center;
    }

    .overview-only button[b-fcil29o90g]{
        border: 4px solid #1AA053;
        font-size: 35px;
        width: 48%;
        height: 70%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 35px;
        width: 48%;
        height: 70%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .todotxt[b-fcil29o90g]{
        font-size: 30px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .todoplussicon[b-fcil29o90g]{
        font-size: 25px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.5%;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 18px;
        color: #8A92A6;
        width: 115%;
        line-height: 1.2;
    }

    .input-todo[b-fcil29o90g]{
        text-align: start;
        align-content: start;
        font-size: 25px;
    }

    .artist[b-fcil29o90g]{
        font-weight: 600;
        font-size: 30px;
    }

    .appointmenttable thead[b-fcil29o90g]{
        border-bottom: 1px solid #fff;
        font-size: 19px;
    }

    .index-name[b-fcil29o90g] {
        font-size: 18px;
    }

    .right-index[b-fcil29o90g]{
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 18px;
    }
}

@media (max-width:1400px){
    .overviewdivhead[b-fcil29o90g]{
        font-weight: 400;
        font-size: 19px;
        letter-spacing: 1px;
        margin-top: 4%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g] {
        font-size: 28px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .overviewmore[b-fcil29o90g]{
        font-size: 14px;
        text-align: center;
    }

    .overview-only button[b-fcil29o90g]{
        border: 4px solid #1AA053;
        font-size: 25px;
        width: 48%;
        height: 70%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 4px solid #F2D6D3;
        font-size: 25px;
        width: 48%;
        height: 70%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .tododiv[b-fcil29o90g]{
        max-height: 47vh;
        overflow-y: scroll;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 17px;
        color: #8A92A6;
        width: 100%;
        line-height: 1.2;
    }

    .input-todo[b-fcil29o90g]{
        text-align: start;
        align-content: start;
        font-size: 23px;
    }
}

@media (max-width:1200px){
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 1px;
        margin-top: 4%;
        text-align: center;
        color: #8A92A6;
    }

    .lower[b-fcil29o90g]{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* gap: 5%; */
        margin-bottom: 4%;
    }

    .overviewdivnum[b-fcil29o90g] {
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        margin: 6% 0%;
    }

    .overviewmore[b-fcil29o90g]{
        font-size: 12px;
        text-align: center;
    }

    .overview-only button[b-fcil29o90g] {
        border: 3px solid #1AA053;
        font-size: 30px;
        width: 55%;
        height: 70%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 30px;
        width: 55%;
        height: 70%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .todotxt[b-fcil29o90g]{
        font-size: 27px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .tododiv[b-fcil29o90g] {
        max-height: 48vh;
        overflow-y: scroll;
    }

    .todoplussicon[b-fcil29o90g]{
        font-size: 23px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.5%;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 15px;
        color: #8A92A6;
        width: 91%;
        line-height: 1.2;
    }

    .input-todo[b-fcil29o90g]{
        text-align: start;
        align-content: start;
        font-size: 18px;
    }
}


@media (max-width:1140px){
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 15px;
        letter-spacing: 1px;
        margin-top: 4%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g]{
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        margin: 6% 0%;
    }

    .overview-only button[b-fcil29o90g]{
        border: 3px solid #1AA053;
        font-size: 30px;
        width: 60%;
        height: 70%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 30px;
        width: 60%;
        height: 70%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 13px;
    }

    .overviewmore[b-fcil29o90g]{
        font-size: 11px;
        text-align: center;
    }

    .todotxt[b-fcil29o90g]{
        font-size: 25px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .todoplussicon[b-fcil29o90g]{
        font-size: 20px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.9%;
    }

    .right-todo[b-fcil29o90g]{
        box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
        background-color: #FFFF;
        border-radius: 5px;
         padding:0%; 
    }

    .input-todo[b-fcil29o90g]{
        text-align: center;
        align-content: start;
        font-size: 18px;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 14px;
        color: #8A92A6;
        width: 91%;
        line-height: 1.2;
    }

    .artist[b-fcil29o90g]{
        font-weight: 600;
        font-size: 25px;
    }

    .amount-slogan[b-fcil29o90g]{
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 1px;
        text-align: start;
        color: #8A92A6;
    }

    .appointmenttable thead[b-fcil29o90g]{
        border-bottom: 1px solid #fff;
        font-size: 13px;
    }

    .index-name[b-fcil29o90g]{
        font-size: 15px;
    }

    .right-index[b-fcil29o90g]{
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 15px;
    }

}


@media (max-width:1056px){

    .over-todo[b-fcil29o90g] {
        display: grid;
        grid-template-columns: 40% 55%;
        gap: 50px;
    }

    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 12px;
        letter-spacing: 1px;
        margin: 6% 0%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g]{
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        margin: 6% 0%;
    }

    .overviewmore[b-fcil29o90g]{
        font-size: 10px;
        text-align: center;
    }

    .overview-only button[b-fcil29o90g]{
        border: 2px solid #1AA053;
        font-size: 26px;
        width: 60%;
        height: 70%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 7px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 26px;
        width: 60%;
        height: 70%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 7px;
    }

    .todotxt[b-fcil29o90g]{
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .tododiv li[b-fcil29o90g] {
        width: 440px;
    }

    .todoplussicon[b-fcil29o90g]{
        font-size: 15px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.9%;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 13px;
        color: #8A92A6;
        width: 91%;
        line-height: 1.2;
    }

    .left-outerlayer[b-fcil29o90g]{
        align-content:center;
    }

    .artist[b-fcil29o90g]{
        font-weight: 600;
        font-size: 22px;
    }

    .color-div[b-fcil29o90g]{
        display: flex;
        height: 8vh;
        justify-content: center;
        margin: 5% 0%;
    }

    .index-name[b-fcil29o90g], .right-index[b-fcil29o90g]{
        font-size: 13px;
    }


}


@media (max-width:996px){
    .over-todo[b-fcil29o90g] {
        display: grid;
        grid-template-columns: 45% 45%;
        gap: 50px;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 12px;
        color: #8A92A6;
        width: 80%;
        line-height: 1.2;
    }

    .tododiv[b-fcil29o90g]{
        max-height: 40vh;
        overflow-y: scroll;
    }

    .tododiv li[b-fcil29o90g] {
        width: 378px;
    }

    .tododiv[b-fcil29o90g] {
        max-height: 46vh;
        overflow-y: scroll;
    }

    .overview-only button[b-fcil29o90g] {
        border: 2px solid #1AA053;
        font-size: 26px;
        width: 60%;
        height: 64%;
        background-color: #FFFF;
        border-radius: 7px;
    }

    .overviewdivhead[b-fcil29o90g]{
        font-weight: 400;
        font-size: 13px;
        letter-spacing: 1px;
        margin: 6% 0%;
        text-align: center;
        color: #8A92A6;
    }
}


@media (max-width:860px){
    .tododiv li[b-fcil29o90g]{
        width: 440px;
    }
}
















/*media screen form mobile device*/
@media (max-width:768px){

    .dashboardpage[b-fcil29o90g]{
        border-radius:0;
    }
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 17px;
        letter-spacing: 1px;
        margin: 6% 0%;
        text-align: center;
        color: #8A92A6;
    }


    .overviewdivnum[b-fcil29o90g]{
        font-size: 26px;
        font-weight: 600;
        text-align: center;
        margin: 6% 0%;
    }

    .overviewmore[b-fcil29o90g] {
        font-size: 13px;
        text-align: center;
    }

    .over-todo[b-fcil29o90g]{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* gap: 50px; */
    }

    .overview-only button[b-fcil29o90g] {
        border: 3px solid #1AA053;
        font-size: 33px;
        width: 35%;
        height: 75%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 7px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 33px;
        width: 35%;
        height: 75%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 7px;
    }

    .lower[b-fcil29o90g] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
         gap: 0%; 
        margin-bottom: 2%;
        height:16vh;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 15px;
        color: #8A92A6;
        width: 100%;
        line-height: 1.1;
    }

    .appointmenttable thead[b-fcil29o90g]{
        border-bottom: 1px solid #fff;
        font-size: 15px;
    }




    .form-check-input[b-fcil29o90g] {
        margin: 0%;
    }

    .tododiv[b-fcil29o90g] {
        max-height: 55vh;
        overflow-y: scroll;
    }


    .index-name[b-fcil29o90g] {
        font-size: 16px;
    }

    .tododiv li[b-fcil29o90g] {
        width: 550px;
    }

    .todotxt[b-fcil29o90g] {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding: 1% 9%;
    }

    .right-index[b-fcil29o90g]{
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 16px;
    }

}

@media (max-width:660px){



    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 15px;
        letter-spacing: 1px;
        margin-top: 0%;
        text-align: center;
        color: #8A92A6;
    }

    .todoplussicon[b-fcil29o90g]{
        font-size: 25px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.2%;
    }

    .todotxt[b-fcil29o90g] {
        font-size: 25px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .about-todo[b-fcil29o90g] {
        font-size: 15px;
        color: #8A92A6;
        width: 100%;
        line-height: 1.6;
    }

    .tododiv[b-fcil29o90g] {
        max-height: 50vh;
        overflow-y: scroll;
    }

        .tododiv[b-fcil29o90g] {
            max-height: 50vh;
            overflow-y: scroll;
            padding: 0% 5%;
        }


    .todo-part[b-fcil29o90g]{
        padding:4%;
    }

    .main-data[b-fcil29o90g] {
        display: grid;
        grid-template-columns: 10% 90%;
    }

    .tododiv li[b-fcil29o90g] {
        width:100%;
    }



    .payment-outerlayer[b-fcil29o90g] {
        background-color: #FFFFFF;
        padding: 4%;
        border-radius: 8px;
        box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
        margin-bottom:8%;
    }


    .left-box[b-fcil29o90g]{
        display: flex;
        gap: 5%;
        margin-bottom: 11%;
        align-items: center;
    }

    .appointmenttable thead[b-fcil29o90g] {
        border-bottom: 1px solid #fff;
        font-size: 13px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 33px;
        width: 40%;
        height: 65%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 7px;
    }

    .overview-only button[b-fcil29o90g] {
        border: 3px solid #1AA053;
        font-size: 33px;
        width: 40%;
        height: 65%;
        color: #1AA053;
        background-color: #FFFF;
        border-radius: 7px;
    }

    .input-todo[b-fcil29o90g] {
        text-align: center;
        align-content: center;
        font-size: 18px;
    }



}

@media (max-width:530px){
    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 17px;
        letter-spacing: 1px;
        margin-top: 2%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g] {
        font-size: 25px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }



    .overviewmore[b-fcil29o90g] {
        font-size: 12px;
        text-align: center;
    }

    .overview-only button[b-fcil29o90g] {
        border: 3px solid #1AA053;
        font-size: 25px;
        width: 45%;
        height: 60%;
        border-radius: 5px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 25px;
        width: 45%;
        height: 60%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 5px;
    }

    .todotxt[b-fcil29o90g] {
        font-size: 23px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .todoplussicon[b-fcil29o90g]{
        font-size: 23px;
        padding-left: 1em;
        cursor: pointer;
        padding-top: 1.2%;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 13px;
        color: #8A92A6;
        width: 100%;
        line-height: 1.6;
    }
}

@media(max-width:478px){


    .amount-slogan[b-fcil29o90g] {
        font-weight: 400;
        font-size: 13px;
        letter-spacing: 1px;
        text-align: start;
        color: #8A92A6;
    }

    .main-data[b-fcil29o90g] {
        display: grid;
        grid-template-columns: 10% 90%;
        gap: 4%;
    }

    .index-name[b-fcil29o90g]{
        font-size: 13px;
    }

    .right-index[b-fcil29o90g] {
        text-align: end;
        align-items: center;
        padding-right: 20%;
        font-size: 13px;
    }

    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 15px;
        letter-spacing: 1px;
        margin-top: 1%;
        text-align: center;
        color: #8A92A6;
    }

    .overviewdivnum[b-fcil29o90g]{
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .overviewmore[b-fcil29o90g] {
        font-size: 10px;
        text-align: center;
    }

    .overview-only button[b-fcil29o90g] {
        border: 3px solid #1AA053;
        font-size: 25px;
        width: 45%;
        height: 55%;
        border-radius: 9px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 25px;
        width: 45%;
        height: 55%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 9px;
    }


}

@media (max-width:430px){
    .overviewdivhead[b-fcil29o90g]{
        font-weight: 400;
        font-size: 13px;
        letter-spacing: 1px;
        margin-top: 1%;
        text-align: center;
        color: #8A92A6;
    }

    .overview-only button[b-fcil29o90g]{
        border: 3px solid #1AA053;
        font-size: 25px;
        width: 50%;
        height: 55%;
        border-radius: 9px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 25px;
        width: 50%;
        height: 55%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 9px;
    }
}


@media (max-width:360px) {

    .dashboardpage[b-fcil29o90g] {
        background-color: #F7F9FC;
        color: #000;
        /* margin-top: 7vh; */
        padding: 30px 10px;
        border-radius: 0 0 0 50px;
    }

    .overviewdivhead[b-fcil29o90g] {
        font-weight: 400;
        font-size: 12px;
        letter-spacing: 1px;
        margin: 4% 0%;
        text-align: center;
        color: #8A92A6;
    }

    .overview-only button[b-fcil29o90g] {
        border: 3px solid #1AA053;
        font-size: 25px;
        width: 57%;
        height: 55%;
        border-radius: 12px;
    }

    .overview-down button[b-fcil29o90g] {
        border: 3px solid #F2D6D3;
        font-size: 25px;
        width: 57%;
        height: 55%;
        color: #AD2D1E;
        background-color: #FFFF;
        border-radius: 12px;
    }

    .overviewdivnum[b-fcil29o90g] {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        margin: 4% 0%;
    }

    .tododiv[b-fcil29o90g] {
        max-height: 50vh;
        overflow-y: scroll;
        padding: 0% 2%;
    }

    .about-todo[b-fcil29o90g]{
        font-size: 11px;
        color: #8A92A6;
        width: 100%;
        line-height: 1.6;
    }


.color-div[b-fcil29o90g]{
    display: flex;
    height: 7vh;
    justify-content: center;
    margin: 5% 0%;
   }

    .todotxt[b-fcil29o90g] {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 1px;
        display: flex;
        padding-left: 5%;
    }

    .todoplussicon[b-fcil29o90g] {
        font-size: 20px;
        padding-left: 10px;
        cursor: pointer;
        padding-top: 2%;
    }

    .input-todo[b-fcil29o90g] {
        text-align: start;
        align-content: center;
        font-size: 20px;
    }

    .artist[b-fcil29o90g] {
        font-weight: 600;
        font-size: 18px;
    }

    .appointmenttable thead[b-fcil29o90g] {
        border-bottom: 1px solid #fff;
        font-size: 12px;
    }



    .index-name[b-fcil29o90g] {
        font-size: 12px;
    }

        .right-index[b-fcil29o90g] {
            text-align: end;
            align-items: center;
            padding-right: 20%;
            font-size: 12px;
        }
    }


.modal-overlay[b-fcil29o90g] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.modal-content[b-fcil29o90g] {
    background-color: #fff;
    border-radius: 8px;
    padding: 24px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: fadeIn-b-fcil29o90g 0.3s ease-in-out;
}

    .modal-content h5[b-fcil29o90g] {
        margin-top: 0;
        margin-bottom: 16px;
        font-size: 20px;
        font-weight: bold;
    }

    .modal-content textarea[b-fcil29o90g] {
        width: 100%;
        height: 100px;
        resize: vertical;
        margin-bottom: 16px;
        padding: 8px;
        font-size: 14px;
    }

.modal-buttons[b-fcil29o90g] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

    .modal-buttons .btn[b-fcil29o90g] {
        padding: 8px 16px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        border-radius: 4px;
    }

    .modal-buttons .btn-success[b-fcil29o90g] {
        background-color: #28a745;
        color: white;
    }

    .modal-buttons .btn-secondary[b-fcil29o90g] {
        background-color: #6c757d;
        color: white;
    }

@keyframes fadeIn-b-fcil29o90g {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/DayBook.razor.rz.scp.css */
.daybookpage[b-sj6pl6tvit] {
    background-color: #fff;
    color: #000;
    /*    margin-top: 7vh;*/
    height: 88vh;
    border-radius: 0 0 0 50px;
}





.monthinputlabel[b-sj6pl6tvit] {
    font-size: 18px;
}

.selectedmonth[b-sj6pl6tvit] {
    margin-left: 60%;
}


.addartistbtn[b-sj6pl6tvit] {
    width: fit-content;
    background-color: #000;
    color: #fff;
}



.daybookbtn[b-sj6pl6tvit] {
    
    background-color: black;
    color: white;
}



.monthinput[b-sj6pl6tvit] {
    width: 100%;
    border-radius: 5px;
    border: 5px;
    height: 5vh;
    border: 1px solid black;
}

.transactioninput[b-sj6pl6tvit] {
    width: 100%;
    border-radius: 5px;
    border: 5px;
    height: 5vh;
    border: 1px solid black;
}

.transactiontypelabel[b-sj6pl6tvit] {
    font-size: 18px;
}

.page-item.active .page-link[b-sj6pl6tvit] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}

/* Modal styles */
/*===========================modal===================================*/
.modal-dialog[b-sj6pl6tvit] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}

.modal[b-sj6pl6tvit] {
    display: block;
    background-color: rgba(10,10,10,.8);
    width: 100%;
}

.add-appointment-modal[b-sj6pl6tvit] {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
    height: 80vh;
    overflow-y: scroll;
    background-color: #F7F9FC;
    /*    margin-bottom:5%;*/
}

.modal-title[b-sj6pl6tvit] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-content[b-sj6pl6tvit] {
    background-color: #F7F9FC;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 1.5rem;
    box-sizing: border-box;
    z-index: 1050;
    overflow-y: auto;
}

.back-top[b-sj6pl6tvit] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2%;
}

.modal-header[b-sj6pl6tvit] {
    display: flex;
    flex-direction: column;
    border: none;
}

.modal-title[b-sj6pl6tvit] {
    font-size: 32px;
    font-weight: 600;
    color: #170F49;
}

.gobackbtn i[b-sj6pl6tvit] {
    font-size: 28px;
    color: #170F49;
}


.form-hov[b-sj6pl6tvit]::placeholder {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
}

.form-hov[b-sj6pl6tvit] {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .form-hov:hover[b-sj6pl6tvit] {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    }


.save[b-sj6pl6tvit] {
    padding: 10px;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}



    .save:hover:not(:disabled)[b-sj6pl6tvit] {
        opacity: 0.6;
    }

    .save:disabled[b-sj6pl6tvit] {
        opacity: 0.8;
        cursor: not-allowed;
    }

.form-label[b-sj6pl6tvit] {
    color: #170F49;
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}




/* Table styles */
.table-container[b-sj6pl6tvit] {
    max-height: 70vh;
    overflow-y: auto;
    width: 100%;
    /* border: 1px solid #ccc;*/
}

    .table-container table[b-sj6pl6tvit] {
        width: 100%;
        border-collapse: collapse;
    }

table tbody tr:hover[b-sj6pl6tvit] {
    background-color: #d9d9d9;
    color: #111;
}

.table-container th[b-sj6pl6tvit],
.table-container td[b-sj6pl6tvit] {
    padding: 15px 10px;
    text-align: center;
    /*  border-bottom: 1px solid #ddd;*/
}

.table-container .center-td[b-sj6pl6tvit] {
    text-align: center;
}

.table-container thead[b-sj6pl6tvit] {
    background-color: #fff;
    color: #111 !important;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #000;
}

.table[b-sj6pl6tvit] {
    margin-bottom: 0 !important;
}



[b-sj6pl6tvit]::-webkit-scrollbar {
    width: 5px;
    border: none;
}

[b-sj6pl6tvit]::-webkit-scrollbar-track {
    background: grey;
    border: none;
}

[b-sj6pl6tvit]::-webkit-scrollbar-thumb {
    background-color: black;
    border: none;
    border-radius: 5px !important;
}

/*Pagination*/
.paginationnnav[b-sj6pl6tvit] {
    display: flex;
    padding: 0px 25px;
    position: absolute;
    bottom: 5px;
    width: 90%;
}

.pagination[b-sj6pl6tvit] {
    display: flex;
    padding-left: 0;
    list-style: none;
    justify-content: flex-end;
    margin:0%;
}

/*Search part*/
.searchpart[b-sj6pl6tvit] {
    display: grid;
    grid-template-columns: 80% 20%;
    margin-bottom: 1%;
}

.searchbuttonpart[b-sj6pl6tvit] {
    display: flex;
    align-items: end;
    justify-content: center;
    gap:5%;
}

.entrypart[b-sj6pl6tvit] {
    display: flex;
    gap: 1%;
    margin-left:5%;
    margin-top:2%;
}

.labelselect[b-sj6pl6tvit] {
    width: 100%;
}
.table thead[b-sj6pl6tvit], .table tbody[b-sj6pl6tvit] {
    font-size: 18px;
}




/*Responsive-part*/


@media only screen and (max-width:1700px) {
    .table-container[b-sj6pl6tvit] {
        height: 70vh;
    }

    .table-container[b-sj6pl6tvit] {
        max-height: 67vh;
        overflow: hidden;
        overflow-y: scroll;
        border: 1px solid #ccc;
    }

    .paginationpara[b-sj6pl6tvit], .pagination-last[b-sj6pl6tvit], .inquiry-heading[b-sj6pl6tvit], .addinquirybtn[b-sj6pl6tvit], .table-container[b-sj6pl6tvit], .table tbody[b-sj6pl6tvit] {
        font-size: 18px;
    }
}

@media only screen and (max-width:1440px) {
    .table-container[b-sj6pl6tvit] {
        height: 65vh;
    }

    .paginationpara[b-sj6pl6tvit], .pagination-last[b-sj6pl6tvit], .inquiry-heading[b-sj6pl6tvit], .addinquirybtn[b-sj6pl6tvit], .table-container[b-sj6pl6tvit], .table tbody[b-sj6pl6tvit] {
        font-size: 16px;
    }

    .filterdiv[b-2cccpqozpp][b-sj6pl6tvit] {
        align-content: end;
        padding: 0%;
    }




}



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

    .paginationpara[b-sj6pl6tvit], .pagination-last[b-sj6pl6tvit], .inquiry-heading[b-sj6pl6tvit], .addinquirybtn[b-sj6pl6tvit], .table-container[b-sj6pl6tvit], .table tbody[b-sj6pl6tvit] {
        font-size: 15px;
    }

    .searchbuttonpart button[b-sj6pl6tvit] {
        font-size: 12px;
    }

    .form-label[b-sj6pl6tvit] {
        margin-bottom: .5rem;
        font-size: 14px;
    }



    .filter-transaction[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        padding: 10px 10px;
    }

    .btn[b-sj6pl6tvit]{
        font-size:14px;
    }

    .table thead[b-sj6pl6tvit], .table tbody[b-sj6pl6tvit] {
        font-size: 15px;
    }
}

@media (max-width:1194px) {
    .form-label[b-sj6pl6tvit] {
        margin-bottom: .5rem;
        font-size: 15px;
    }

    .searchbuttonpart button[b-sj6pl6tvit] {
        font-size: 13px;
    }


    .table-container[b-sj6pl6tvit] {
        font-size: 14px;
    }

    .transactioninput[b-sj6pl6tvit] {
        width: 90%;
    }

    .monthinput[b-sj6pl6tvit]{
        width: 90%;
    }
}

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

    .paginationpara[b-sj6pl6tvit], .pagination-last[b-sj6pl6tvit], .inquiry-heading[b-sj6pl6tvit], .addinquirybtn[b-sj6pl6tvit], .table-container[b-sj6pl6tvit], .table tbody[b-sj6pl6tvit] {
        font-size: 14px;
    }

    .searchbuttonpart[b-sj6pl6tvit] {
        display: flex;
        align-items: end;
        justify-content: end;
        gap: 3%;
    }

    .entrypart[b-sj6pl6tvit] {
        display: flex;
        gap: 1%;
        margin-left: 2%;
        margin-top: 2%;
    }

    .searchpart[b-sj6pl6tvit] {
        grid-template-columns: 75% 25%;
        gap: 2%;
    }

    .searchbuttonpart[b-sj6pl6tvit] {
        display: flex;
        align-items: end;
        justify-content: start;
        gap: 3%;
    }
}


@media (max-width: 992px) {
    .paginationpara[b-sj6pl6tvit], .pagination-last[b-sj6pl6tvit], .artist-heading[b-sj6pl6tvit], .addartistbtn[b-sj6pl6tvit], .table-container[b-sj6pl6tvit] {
        font-size: 12px;
    }

    .paginationnnav[b-sj6pl6tvit] {
        display: flex;
        padding: 10px 10px;
        position: absolute;
        bottom: 4vh;
        width: 90%;
    }



    .btn[b-sj6pl6tvit] {
        transition: none;
        font-size: 12px;
    }

    .form-control[b-sj6pl6tvit] {
        transition: none;
        font-size: 12px;
    }

    .searchpart[b-sj6pl6tvit] {
        display:grid;
        grid-template-columns: 75% 20%;
        gap: 3%;
    }

    .searchbuttonpart[b-sj6pl6tvit]{
        display: grid;
        align-items: end;
        justify-content: start;
        gap: 3%;
        grid-template-columns: 45% 55%;
    }

        .searchbuttonpart button[b-sj6pl6tvit] {
            font-size: 11px;
        }
}


@media (max-width:930px) {


    .searchbuttonpart button[b-sj6pl6tvit] {
        font-size: 12px;
    }

    .form-label[b-sj6pl6tvit] {
        margin-bottom: .5rem;
        font-size: 14px;
    }

    .searchpart[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: 75% 23%;
        gap: 2%;
    }
}


@media (max-width:890px) {
    .table-container thead[b-sj6pl6tvit] {
        background-color: #fff;
        color: #111 !important;
        position: sticky;
        top: 0;
        z-index: 1;
        border-bottom: 1px solid #000;
        font-size: 13px;
    }

    .paginationnnav[b-sj6pl6tvit] {
        display: flex;
        padding: 5px 10px;
        position: absolute;
        bottom: 4vh;
        width: 90%;
    }


    .form-label[b-sj6pl6tvit] {
        margin-bottom: .5rem;
        font-size: 12px;
    }

    .filter-transaction[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: 20% 25% 30% 25%;
        padding: 10px 10px;
    }

    .searchbuttonpart button[b-sj6pl6tvit] {
        font-size: 11px;
    }

    .searchpart[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: 72% 25%;
        gap: 3%;
    }
}

@media (max-width:780px) {
    .searchbuttonpart button[b-sj6pl6tvit] {
        font-size: 10px;
    }
}















/*
moblie devices*/

@media (max-width: 768px) {
    .pagination .page-item[b-sj6pl6tvit] {
        display: none; /* Hide all by default */
    }

        /* Always show Previous and Next buttons */
        .pagination .page-item:first-child[b-sj6pl6tvit],
        .pagination .page-item:last-child[b-sj6pl6tvit] {
            display: inline-block;
        }

        /* Show the current (active) page */
        .pagination .page-item.active[b-sj6pl6tvit] {
            display: inline-block;
        }

            /* Show the next page after the active one */
            .pagination .page-item.active + .page-item[b-sj6pl6tvit] {
                display: inline-block;
            }

            /* Optionally, show the page before the current one */
            .pagination .page-item.active ~ .page-item[b-sj6pl6tvit],
            .pagination .page-item.active:has(+ .page-item)[b-sj6pl6tvit] {
                /* Optional extra styles if needed */
            }

    .top-body[b-sj6pl6tvit] {
        display: flex;
        justify-content: space-between;
        margin: 1% 1%;
    }

    .daybookpage[b-sj6pl6tvit] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
        padding: 5px 15px;
    }

    .transaction select[b-sj6pl6tvit] {
        width: 60%;
        display: flex;
        margin-left: 25%;
        padding: 0%;
    }



    .artist-top[b-sj6pl6tvit] {
        padding: 5px 0 0 5px;
        padding: 5px;
        font-weight: 500;
    }

    .artist-heading[b-sj6pl6tvit] {
        font-size: 20px;
    }

    .nav-section[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 15px 5px 15px;
    }

    .addbtn[b-sj6pl6tvit] {
        display: flex;
        justify-content: end;
        align-items: end;
        /*        padding: 0 15px;*/
    }

    .filter-left i[b-sj6pl6tvit] {
        font-size: 15px;
    }

    .darkadd[b-sj6pl6tvit] {
        width: 45%;
    }

    .title-top[b-sj6pl6tvit] {
        text-align: center;
    }

    .prev-button[b-sj6pl6tvit] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }



    .title-top[b-sj6pl6tvit] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-sj6pl6tvit] {
        font-size: 19px;
    }

    .filter-section[b-sj6pl6tvit] {
        padding: 5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .filter-text[b-sj6pl6tvit] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left i[b-sj6pl6tvit] {
        font-size: 15px;
    }

    .btn-previous-two[b-sj6pl6tvit] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-sj6pl6tvit] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

    .dropdown[b-sj6pl6tvit] {
        display: flex;
        justify-content: end;
        position: relative;
        padding: 0 15px;
    }


    .dropdown-menu[b-sj6pl6tvit] {
        width: 96.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }





    .right[b-sj6pl6tvit] {
        display: flex;
        width: 100%;
        justify-content: end;
        margin-bottom:2%;
    }

    Input styling
    input[type="date"][b-sj6pl6tvit],
    input[type="text"][b-sj6pl6tvit],
    select[b-sj6pl6tvit] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 12px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-sj6pl6tvit],
        input[type="text"]:focus[b-sj6pl6tvit],
        select:focus[b-sj6pl6tvit] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

    Placeholder styling
    input[b-sj6pl6tvit]::placeholder {
        color: #999;
        font-size: 12px;
    }

    Filter button styling
    .filter-button[b-sj6pl6tvit] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .filter-button:hover[b-sj6pl6tvit] {
        background-color: #5a4cbc;
    }

    Dropdown toggle button styling
    .prev-two[b-sj6pl6tvit] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

    .prev-two:hover[b-sj6pl6tvit] {
        color: #6a5acd;
    }

    /*     Animation for dropdown */
    @keyframes fadeIn-b-sj6pl6tvit {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-sj6pl6tvit] {
        animation: fadeIn-b-sj6pl6tvit 0.2s ease-out forwards;
    }

    .start[b-sj6pl6tvit], .end[b-sj6pl6tvit], .transaction[b-sj6pl6tvit], .bill[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .bill input[type=text][b-sj6pl6tvit] {
            width: 60%;
            font-size: 12px;
        }

        .bill input[b-sj6pl6tvit]::placeholder {
            text-align: center;
        }

        .transaction select[b-sj6pl6tvit] {
            width: 60%;
            display: flex;
            margin-left: 25%;
        }


    .top-body[b-sj6pl6tvit] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-sj6pl6tvit] {
        font-size: 12px;
    }

    .appoint-count[b-sj6pl6tvit] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-sj6pl6tvit] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10%;
    }

        .right-detail img[b-sj6pl6tvit] {
            width: 12%;
            height: 30%;
        }

    .name[b-sj6pl6tvit] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-sj6pl6tvit], .address[b-sj6pl6tvit] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-sj6pl6tvit] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-sj6pl6tvit] {
        height: 53vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .body-main[b-sj6pl6tvit] {
        max-height: 60vh;
    }

    .filter-left[b-sj6pl6tvit], .filter-title[b-sj6pl6tvit] {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .searchisbutton[b-sj6pl6tvit] {
        display: flex;
        justify-content: end;
        margin-bottom: 5px;
    }

    .darksearch[b-sj6pl6tvit] {
        width: 30%;
    }

    .darkadd[b-sj6pl6tvit] {
        font-size: 14px;
    }

    .artist-heading[b-sj6pl6tvit] {
        font-size: 19px;
    }

    .bill[b-sj6pl6tvit] {
        margin-bottom: 5px;
    }


    .two-spans-groups[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .paginationnnav[b-2cccpqozpp][b-sj6pl6tvit] {
        display: flex;
        padding: 10px 25px;
        position: absolute;
        bottom: 4vh;
        width: 98%;
    }

    .paginationnnav[b-sj6pl6tvit] {
        margin-bottom: 0;
    }

    /*    search-modal*/

    .bill[b-sj6pl6tvit] {
        margin-bottom: 10px;
    }

    .dropdown-item[b-sj6pl6tvit] {
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 15px;
    }


        .dropdown-item:focus[b-sj6pl6tvit], .dropdown-item:hover[b-sj6pl6tvit] {
            color: #1e2125;
            background-color: #e9ecef;
        }

    a:hover[b-sj6pl6tvit] {
        color: #0a58ca;
    }

    .darksearch[b-sj6pl6tvit] {
        width: 30%;
        font-size: 15px;
    }

    .darksearch[b-sj6pl6tvit] {
        width: 30%;
        font-size: 13px;
    }




}




@media (max-width: 645px) {

    .darkadd[b-sj6pl6tvit] {
        width: 52%;
        font-size: 13px;
    }

    .artist-heading[b-sj6pl6tvit] {
        font-size: 18px;
    }

    .dropdown-menu[b-sj6pl6tvit] {
        width: 95.9vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width: 590px) {
    .darkadd[b-sj6pl6tvit] {
        width: 55%;
        font-size: 13px;
    }

    .artist-heading[b-sj6pl6tvit] {
        font-size: 17px;
    }

    .two-spans-groups[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: 35% 65%;
    }

    .dropdown-menu[b-sj6pl6tvit] {
        width: 95.4vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width: 500px) {
    .customer-appoint[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-sj6pl6tvit] {
        gap: 1%;
        justify-content: end;
    }


    .paginationpara[b-sj6pl6tvit], .pagination-last[b-sj6pl6tvit], .inquiry-heading[b-sj6pl6tvit], .addinquirybtn[b-sj6pl6tvit], .table-container[b-sj6pl6tvit], .table tbody[b-sj6pl6tvit] {
        font-size: 12px;
    }

    .dropdown-item[b-sj6pl6tvit] {
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 14px;
    }

    .bill input[type=text][b-sj6pl6tvit] {
        width: 65%;
        font-size: 11px;
    }

    .darksearch[b-sj6pl6tvit] {
        width: 32%;
        font-size: 12px;
    }

    .dropdown-menu[b-sj6pl6tvit] {
        width: 94.4vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }

    .darkadd[b-sj6pl6tvit] {
        width: 55%;
        font-size: 12px;
    }
}

@media (max-width: 478px) {


    .darkadd[b-sj6pl6tvit] {
        width: 57%;
        font-size: 10px;
    }

    .artist-heading[b-sj6pl6tvit] {
        font-size: 16px;
    }

    .name[b-sj6pl6tvit] {
        font-weight: 600;
        font-size: 13px;
        line-height: 19.49px;
    }

    .time[b-sj6pl6tvit], .address[b-sj6pl6tvit] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-sj6pl6tvit] {
        font-size: 11px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .paginationpara[b-sj6pl6tvit], .pagination-last[b-sj6pl6tvit], .inquiry-heading[b-sj6pl6tvit], .addinquirybtn[b-sj6pl6tvit], .table-container[b-sj6pl6tvit], .table tbody[b-sj6pl6tvit] {
        font-size: 11px;
    }


    .bill input[type=text][b-sj6pl6tvit] {
        width: 71%;
        font-size: 11px;
    }

    .darksearch[b-sj6pl6tvit] {
        width: 36%;
        font-size: 12px;
    }

    .nav-section[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 5px 5px 5px;
    }

    .filter-left i[b-sj6pl6tvit] {
        font-size: 13px;
    }

    .dropdown-menu[b-sj6pl6tvit] {
        width: 94.3vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width:390px) {
    .name[b-sj6pl6tvit] {
        font-weight: 600;
        font-size: 12px;
        line-height: 19.49px;
    }

    .time[b-sj6pl6tvit], .address[b-sj6pl6tvit] {
        font-size: 10px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-sj6pl6tvit] {
        font-size: 10px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .body-main[b-sj6pl6tvit] {
        max-height: 60vh;
        padding: 10px 10px;
    }

    .appoint-count[b-sj6pl6tvit] {
        font-size: 11px;
        font-weight: 600;
    }

    .day[b-sj6pl6tvit] {
        font-size: 11px;
    }

    .filter-text[b-sj6pl6tvit] {
        font-size: 13px;
        font-weight: 400;
    }

    .filter-left i[b-sj6pl6tvit] {
        font-size: 11px;
    }

    .prev-two[b-sj6pl6tvit] {
        border: none;
        font-weight: 600;
        font-size: 15px;
        background-color: #FFFF;
    }


    .darkadd[b-sj6pl6tvit] {
        width: 60%;
        font-size: 9px;
    }

    .artist-heading[b-sj6pl6tvit] {
        font-size: 14px;
    }


    .col-3[b-sj6pl6tvit] {
        flex: 0 0 auto;
        width: 30%;
    }

    .paginationnnav[b-sj6pl6tvit] {
        display: flex;
        padding: 10px 10px;
        position: absolute;
        bottom: 2vh;
        width: 90%;
    }

    .two-spans-groups[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: revert;
    }


    .dropdown-item[b-sj6pl6tvit] {
        display: block;
        width: 100%;
        padding: .40rem 0.2rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 12px;
    }

    .bill input[type=text][b-sj6pl6tvit] {
        width: 72%;
        font-size: 10px;
    }

    .darksearch[b-sj6pl6tvit] {
        width: 36%;
        font-size: 10px;
    }

    .dropdown-menu[b-sj6pl6tvit] {
        width: 92.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}

@media (max-width:360px) {
    .you[b-sj6pl6tvit] {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .bill input[type=text][b-sj6pl6tvit] {
        width: 90%;
        font-size: 10px;
    }

    .darksearch[b-sj6pl6tvit] {
        width: 48%;
        font-size: 10px;
    }

    .darkadd[b-sj6pl6tvit] {
        width: 60%;
        font-size: 8px;
    }

    .artist-heading[b-sj6pl6tvit] {
        font-size: 13px;
    }

    .dropdown-menu[b-sj6pl6tvit] {
        width: 92vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}


@media (max-width:320px) {
    .bill input[type=text][b-sj6pl6tvit] {
        width: 90%;
        font-size: 9px;
    }

    .filter-text[b-sj6pl6tvit] {
        font-size: 11px;
        font-weight: 400;
    }

    .filter-left i[b-sj6pl6tvit] {
        font-size: 11px;
    }

    .appoint-count[b-sj6pl6tvit] {
        font-size: 10px;
        font-weight: 600;
    }

    .day[b-sj6pl6tvit] {
        font-size: 10px;
    }

    .nav-section[b-sj6pl6tvit] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 0px 8px 0px;
    }

    .dropdown-menu[b-sj6pl6tvit] {
        width: 91.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }

    .darkadd[b-sj6pl6tvit] {
        width: 63%;
        font-size: 8px;
    }
}
/* /Pages/GeneralRecords.razor.rz.scp.css */
.generalrecordpage[b-f8p4k1aeug] {

    margin-top:6%;
}
    .generalrecordpage p[b-f8p4k1aeug] {
        font-size: 18px;
    }
    .generalrecordpage p strong[b-f8p4k1aeug] {
        color: green;
       
    }
    
.table-container[b-f8p4k1aeug] {
    max-height: 66vh; 
    overflow-y: scroll;
    border: 1px solid #ccc; 
    
}

    .table-container table[b-f8p4k1aeug] {
        width: 100%;
        border-collapse: collapse;
    }

    .table-container th[b-f8p4k1aeug],
    .table-container td[b-f8p4k1aeug] {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd; 
    }

    .table-container thead[b-f8p4k1aeug] {
        background-color: #d9d9d9;
        color: #111 !important;
        position: sticky;
        top: 0; 

        z-index: 1;
    }
        .table-container thead th[b-f8p4k1aeug] {
            color: #111;
        }
.topdata[b-f8p4k1aeug]{
    margin-bottom:0.5%;
}

[b-f8p4k1aeug]::-webkit-scrollbar {
    width: 10px;
    border: none;
}

[b-f8p4k1aeug]::-webkit-scrollbar-track {
    background: grey;
    border: none;
}

[b-f8p4k1aeug]::-webkit-scrollbar-thumb {
    background-color: black;
    border: none;
    border-radius: 5px !important;
}
.styled-table[b-f8p4k1aeug] {
    width: 100%;
   
    border-collapse: collapse;
    table-layout: fixed;
}
    .styled-table thead th[b-f8p4k1aeug]{
        height:8vh;
        background-color:#d9d9d9;
        color:#111;
        border:2px solid #111;
    }
    .styled-table th[b-f8p4k1aeug], .styled-table td[b-f8p4k1aeug] {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

   
  

.closing-balance td[b-f8p4k1aeug] {
    text-align: left;
    font-weight: bold;
    border: none;
    padding-top: 0;
}




/*==============================================================================================================================================================*/
/* ----------------------------------------------------- All Media Queries for appointment page ---------------------------------------------------------------*/
/*==============================================================================================================================================================*/



/*Macbook pro 15.3 inch | 1440 * 900 vp */

@media (max-width: 1440px) {
   
}


@media (max-width: 1200px) {
    .table-container[b-f8p4k1aeug]{
        height:63vh;
    }
}


@media (max-width: 992px) {
    .generalrecordpage[b-f8p4k1aeug]{
        margin-top:8%;
    }
}

@media (max-width: 480px) {
 .topdata p[b-f8p4k1aeug]{
     font-size:10px;
 } 
 .styled-table thead[b-f8p4k1aeug]{
     font-size:12px;
 }
 .styled-table tbody[b-f8p4k1aeug]{
     font-size:10px;
 }
}



/*

All Screen Sizes we design :::



     Large Desktops and Laptops :
@media (max-width: 1440px) {
  
    }


 Desktops and Laptops :
@media (max-width: 1200px) {
  
}



 Small Desktops and Large Tablets :
@media (max-width: 992px) {
 
}



 Tablets and Large Smartphones :
@media (max-width: 768px) {

}



 Portrait Tablets and Small Smartphones :
@media (max-width: 600px) {

}



 Smartphones :
@media (max-width: 480px) {
  
}



 Small Smartphones :
@media (max-width: 360px) {
    
}

*/
/* /Pages/Index.razor.rz.scp.css */

.logindiv[b-tr7vatm7g7] {
    height: 450px;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    padding: 20px 35px;
    margin: 8% auto; 
}

.logintext[b-tr7vatm7g7] {
    text-align: center;
    font-size: 38px;
    margin-bottom: 10%;
}

.pwlabel[b-tr7vatm7g7],
.usernamelabel[b-tr7vatm7g7] {
    font-size: 20px;
}

.loginbtn[b-tr7vatm7g7] {
    border: none;
    width: 100%;
    height: 6vh;
    border-radius: 5px;
    background-color: var(--our--button--color);
    margin-top: 1vh;
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
    .logindiv[b-tr7vatm7g7] {
        width: 90%; /* Adjust width for smaller screens */
        max-width: 400px; /* Limit maximum width */
    }

    .loginbtn[b-tr7vatm7g7] {
        background-color: red; /* Apply red background on smaller screens */
    }
}

/* Media Query for Larger Screens */
@media (min-width: 1200px) {
    .logindiv[b-tr7vatm7g7] {
        width: 350px; /* Adjust width for larger screens */
        padding: 30px 45px; /* Increase padding */
    }

    .logintext[b-tr7vatm7g7] {
        font-size: 42px; /* Increase font size */
    }

    .pwlabel[b-tr7vatm7g7],
    .usernamelabel[b-tr7vatm7g7] {
        font-size: 22px; /* Increase font size */
    }

    .loginbtn[b-tr7vatm7g7] {
        height: 7vh; /* Increase button height */
    }
}
/* /Pages/Inquiry.razor.rz.scp.css */
.inquirypage[b-b35jdqsdqh] {
    background-color: #fff;
    color: #000;
    height: 86vh;
    border-radius: 0px 0 0 50px;
}


.artist-top[b-b35jdqsdqh] {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}


.inquiry-search[b-b35jdqsdqh]{
    display:flex;
    gap:5%;
    align-content:center;
    align-items:center;
}

.artist-heading h3[b-b35jdqsdqh] {
    margin-bottom: 0;
}

.artist-heading[b-b35jdqsdqh] {
    display: flex;
    gap: 5%;
}

.addartistbtn[b-b35jdqsdqh] {
    width: fit-content;
    background-color: #000;
    color: #fff;
}

.filterdiv[b-b35jdqsdqh], .text-end[b-b35jdqsdqh]{
    align-content:end;
}

.time-set[b-b35jdqsdqh]{
    padding:7% 0%;
}

.modal[b-b35jdqsdqh] {
    display: block;
    background-color: rgba(10,10,10,.8);
}


/*table*/

/* Table styles */
.table-container[b-b35jdqsdqh] {
    max-height: 67vh;
    overflow-y: auto;
    width: 100%;
    /* border: 1px solid #ccc;*/
}

    .table-container table[b-b35jdqsdqh] {
        width: 100%;
        border-collapse: collapse;
    }

table tbody tr:hover[b-b35jdqsdqh] {
    background-color: #d9d9d9;
    color: #111;
}

.table-container th[b-b35jdqsdqh],
.table-container td[b-b35jdqsdqh] {
    padding: 15px 10px;
    text-align: center;
    /*  border-bottom: 1px solid #ddd;*/
}

.table-container .center-td[b-b35jdqsdqh] {
    text-align: center;
}

.table-container thead[b-b35jdqsdqh] {
    background-color: #fff;
    color: #111 !important;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #000;
}

.table[b-b35jdqsdqh] {
    margin-bottom: 0 !important;
}






.pagination[b-b35jdqsdqh] {
    margin-bottom: 0;
}

.paginationnnav[b-b35jdqsdqh] {
    display: flex;
    padding: 10px 25px;
    position: absolute;
    bottom: 2vh;
    width: 90%;
}

.pagination[b-b35jdqsdqh] {
    justify-content: end;
}




[b-b35jdqsdqh]::-webkit-scrollbar {
    width: 5px;
    border: none;
}

[b-b35jdqsdqh]::-webkit-scrollbar-track {
    background: grey;
    border: none;
}

.page-item.active .page-link[b-b35jdqsdqh] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}

[b-b35jdqsdqh]::-webkit-scrollbar-thumb {
    background: grey;
    border: none;
    border-radius: 5px !important;
}


.closeicon[b-b35jdqsdqh] {
    font-size: 24px;
    margin-left: 84%;
    cursor: pointer;
}







label[b-b35jdqsdqh] {
    margin-bottom: 3px;
    padding-left: 5px;
}

.cusnameinput[b-b35jdqsdqh], .remarksinput[b-b35jdqsdqh], .bookedbyinput[b-b35jdqsdqh], .companyidinput[b-b35jdqsdqh], .priceinput[b-b35jdqsdqh], .appointtimeinput[b-b35jdqsdqh], .appointdateinput[b-b35jdqsdqh], .artistnameinput[b-b35jdqsdqh] {
    border-radius: 5px;
    width: 100%;
    height: 4.5vh;
    background-color: #bec4c1;
    padding-left: 10px;
}



.remarksinput[b-b35jdqsdqh] {
    height: 10vh !important;
}

.addinquirybtnmodal[b-b35jdqsdqh] {
    border: none;
    width: 5vw;
    height: 4vh;
    background-color: #b8e3cd;
}

/*===========================modal===================================*/
.modal-dialog[b-b35jdqsdqh] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}

.modal[b-b35jdqsdqh] {
    display: block;
    background-color: rgba(10,10,10,.8);
    width: 100%;
}

.add-appointment-modal[b-b35jdqsdqh] {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
    height: 80vh;
    overflow-y: scroll;
    background-color: #F7F9FC;
    /*    margin-bottom:5%;*/
}

.modal-title[b-b35jdqsdqh] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-content[b-b35jdqsdqh] {
    background-color: #F7F9FC;
    width: 100vw;
    height: 100vh;
    margin-left: 0px;
    /*top: 5%;*/
    left: 0%;
    position: absolute;
}

.back-top[b-b35jdqsdqh] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2%;
}

.modal-header[b-b35jdqsdqh] {
    display: flex;
    flex-direction: column;
    border: none;
}

.modal-title[b-b35jdqsdqh] {
    font-size: 32px;
    font-weight: 600;
    color: #170F49;
}

.gobackbtn i[b-b35jdqsdqh] {
    font-size: 28px;
    color: #170F49;
}


.form-hov[b-b35jdqsdqh]::placeholder {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
}

.form-hov[b-b35jdqsdqh] {
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .form-hov:hover[b-b35jdqsdqh] {
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    }


.save[b-b35jdqsdqh] {
    padding: 10px;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}



    .save:hover:not(:disabled)[b-b35jdqsdqh] {
        opacity: 0.6;
    }

    .save:disabled[b-b35jdqsdqh] {
        opacity: 0.8;
        cursor: not-allowed;
    }

.form-label[b-b35jdqsdqh] {
    color: #170F49;
    font-size: 18px;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}


/*modal-filter*/
.modal-filter[b-b35jdqsdqh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    /* semi-transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.inside-modal[b-b35jdqsdqh] {
    position: fixed;
    top: 17%;
    left: 28%;
    width: 23%;
    height: 50%;
    border-radius:10px;
    background-color: #FFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.filterdiv[b-b35jdqsdqh] {
    font-weight: 600;
    margin-bottom: 4px;
}





/*Responsive-part*/
@media only screen and (max-width:1700px) {
    .table-container[b-b35jdqsdqh] {
        height: 70vh;
    }

    .paginationpara[b-b35jdqsdqh], .pagination-last[b-b35jdqsdqh], .inquiry-heading[b-b35jdqsdqh], .addinquirybtn[b-b35jdqsdqh], .table-container[b-b35jdqsdqh], .table tbody[b-b35jdqsdqh] {
        font-size: 18px;
    }
}
@media only screen and (max-width:1440px){
    .table-container[b-b35jdqsdqh]{
        height:62vh;
    }
    .paginationpara[b-b35jdqsdqh], .pagination-last[b-b35jdqsdqh], .inquiry-heading[b-b35jdqsdqh], .addinquirybtn[b-b35jdqsdqh], .table-container[b-b35jdqsdqh], .table tbody[b-b35jdqsdqh] {
        font-size: 16px;
    }
}
@media only screen and (max-width:1200px) {

    .paginationpara[b-b35jdqsdqh], .pagination-last[b-b35jdqsdqh], .inquiry-heading[b-b35jdqsdqh], .addinquirybtn[b-b35jdqsdqh], .table-container[b-b35jdqsdqh], .table tbody[b-b35jdqsdqh] {
        font-size: 15px;
    }
}
@media only screen and (max-width:1024px) {

    .paginationpara[b-b35jdqsdqh], .pagination-last[b-b35jdqsdqh], .inquiry-heading[b-b35jdqsdqh], .addinquirybtn[b-b35jdqsdqh], .table-container[b-b35jdqsdqh], .table tbody[b-b35jdqsdqh] {
        font-size: 14px;
    }
}


@media (max-width: 900px) {
    .paginationpara[b-b35jdqsdqh], .pagination-last[b-b35jdqsdqh], .artist-heading[b-b35jdqsdqh], .addartistbtn[b-b35jdqsdqh], .table-container[b-b35jdqsdqh] {
        font-size: 12px;
    }

    .inquirypage[b-b35jdqsdqh] {
        padding: 5px 15px;
    }

    .btn[b-b35jdqsdqh] {
        transition: none;
        font-size: 12px;
    }

    .form-control[b-b35jdqsdqh] {
        transition: none;
        font-size: 12px;
    }
}


@media (max-width:805px){
    .table-container thead[b-b35jdqsdqh]{
        background-color: #fff;
        color: #111 !important;
        position: sticky;
        top: 0;
        z-index: 1;
        border-bottom: 1px solid #000;
        font-size: 13px;
    }
}




@media (max-width: 768px) {
    .pagination .page-item[b-b35jdqsdqh] {
        display: none; /* Hide all by default */
    }

        /* Always show Previous and Next buttons */
        .pagination .page-item:first-child[b-b35jdqsdqh],
        .pagination .page-item:last-child[b-b35jdqsdqh] {
            display: inline-block;
        }

        /* Show the current (active) page */
        .pagination .page-item.active[b-b35jdqsdqh] {
            display: inline-block;
        }

            /* Show the next page after the active one */
            .pagination .page-item.active + .page-item[b-b35jdqsdqh] {
                display: inline-block;
            }

            /* Optionally, show the page before the current one */
            .pagination .page-item.active ~ .page-item[b-b35jdqsdqh],
            .pagination .page-item.active:has(+ .page-item)[b-b35jdqsdqh] {
                /* Optional extra styles if needed */
            }

    .top-body[b-b35jdqsdqh]{
        display: flex;
        justify-content: space-between;
        margin: 1% 1%;
    }

    .inquirypage[b-b35jdqsdqh] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
    }



    .artist-top[b-b35jdqsdqh] {
        padding: 5px 0 0 5px;
        padding: 5px;
        font-weight: 500;
    }

    .artist-heading[b-b35jdqsdqh] {
        font-size: 20px;
    }

    .nav-section[b-b35jdqsdqh] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 15px 5px 15px;
    }

    .addbtn[b-b35jdqsdqh] {
        display: flex;
        justify-content: end;
        align-items: end;
        /*        padding: 0 15px;*/
    }

    .filter-left i[b-b35jdqsdqh]{
        font-size:15px;
    }

    .darkadd[b-b35jdqsdqh] {
        width: 40%;
    }

    .title-top[b-b35jdqsdqh] {
        text-align: center;
    }

    .prev-button[b-b35jdqsdqh] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }



    .title-top[b-b35jdqsdqh] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-b35jdqsdqh] {
        font-size: 19px;
    }

    .filter-section[b-b35jdqsdqh] {
        padding: 5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .filter-text[b-b35jdqsdqh] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left i[b-b35jdqsdqh]{
        font-size:15px;
    }

    .btn-previous-two[b-b35jdqsdqh] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-b35jdqsdqh] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

    .dropdown[b-b35jdqsdqh] {
        display: flex;
        justify-content: end;
        position: relative;
        padding: 0 15px;
    }


    .dropdown-menu[b-b35jdqsdqh] {
        width: 87vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }

    .you[b-b35jdqsdqh] {
        display: flex;
        width: 100%;
        justify-content: end;
    }

    Input styling
    input[type="date"][b-b35jdqsdqh],
    input[type="text"][b-b35jdqsdqh],
    select[b-b35jdqsdqh] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 12px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-b35jdqsdqh],
        input[type="text"]:focus[b-b35jdqsdqh],
        select:focus[b-b35jdqsdqh] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

    Placeholder styling
    input[b-b35jdqsdqh]::placeholder {
        color: #999;
        font-size: 12px;
    }

    Filter button styling
    .filter-button[b-b35jdqsdqh] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .filter-button:hover[b-b35jdqsdqh] {
        background-color: #5a4cbc;
    }

    Dropdown toggle button styling
    .prev-two[b-b35jdqsdqh] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

    .prev-two:hover[b-b35jdqsdqh] {
        color: #6a5acd;
    }

    /*     Animation for dropdown */
    @keyframes fadeIn-b-b35jdqsdqh {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-b35jdqsdqh] {
        animation: fadeIn-b-b35jdqsdqh 0.2s ease-out forwards;
    }

    .start[b-b35jdqsdqh], .end[b-b35jdqsdqh], .transaction[b-b35jdqsdqh], .bill[b-b35jdqsdqh] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .bill input[type=text][b-b35jdqsdqh] {
            width: 60%;
            font-size: 12px;
        }

        .bill input[b-b35jdqsdqh]::placeholder {
            text-align: center;
        }

        .transaction select[b-b35jdqsdqh] {
            width: 60%;
            display: flex;
            margin-left: 25%;
        }


    .top-body[b-b35jdqsdqh] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-b35jdqsdqh] {
        font-size: 12px;
    }

    .appoint-count[b-b35jdqsdqh] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-b35jdqsdqh] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10%;
    }

        .right-detail img[b-b35jdqsdqh] {
            width: 12%;
            height: 30%;
        }

    .name[b-b35jdqsdqh] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-b35jdqsdqh], .address[b-b35jdqsdqh] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-b35jdqsdqh] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-b35jdqsdqh] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-b35jdqsdqh] {
        height: 53vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .body-main[b-b35jdqsdqh] {
        max-height: 60vh;
    }

    .filter-left[b-b35jdqsdqh], .filter-title[b-b35jdqsdqh] {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .searchisbutton[b-b35jdqsdqh] {
        display: flex;
        justify-content: end;
        margin-bottom: 5px;
    }

    .darksearch[b-b35jdqsdqh] {
        width: 30%;
    }

    .darkadd[b-b35jdqsdqh] {
        font-size: 14px;
    }

    .artist-heading[b-b35jdqsdqh]{
        font-size:19px;
    }

    .bill[b-b35jdqsdqh] {
        margin-bottom: 5px;
    }


    .two-spans-groups[b-b35jdqsdqh] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .paginationnnav[b-b35jdqsdqh] {
        display: flex;
        padding: 10px 25px;
        position: absolute;
        bottom: 2vh;
        width: 90%;
    }

    .paginationnnav[b-b35jdqsdqh] {
        margin-bottom: 0;
    }

/*    search-modal*/

    .bill[b-b35jdqsdqh]{
        margin-bottom: 10px;
    }

    .dropdown-item[b-b35jdqsdqh] {
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 15px;
    }


    .dropdown-item:focus[b-b35jdqsdqh], .dropdown-item:hover[b-b35jdqsdqh] {
        color: #1e2125;
        background-color: #e9ecef;
    }

    a:hover[b-b35jdqsdqh]{
        color: #0a58ca;
    }

    .darksearch[b-b35jdqsdqh]{
        width: 30%;
        font-size: 15px;
    }

     .darksearch[b-b35jdqsdqh]{
        width: 30%;
        font-size: 13px;
    }
}




@media (max-width: 645px) {

    .darkadd[b-b35jdqsdqh] {
        width: 52%;
        font-size: 14px;
    }

    .artist-heading[b-b35jdqsdqh]{
        font-size:18px;
    }

    .dropdown-menu[b-b35jdqsdqh]{
        width: 86.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width: 590px) {
    .darkadd[b-b35jdqsdqh] {
        width: 52%;
        font-size: 13px;
    }

    .artist-heading[b-b35jdqsdqh] {
        font-size: 17px;
    }

    .two-spans-groups[b-b35jdqsdqh] {
        display: grid;
        grid-template-columns: 35% 65%;
    }

    .dropdown-menu[b-b35jdqsdqh]{
        width: 86vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }
}

@media (max-width: 500px) {
    .customer-appoint[b-b35jdqsdqh] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-b35jdqsdqh] {
        gap: 1%;
        justify-content: end;
    }


    .paginationpara[b-b35jdqsdqh], .pagination-last[b-b35jdqsdqh], .inquiry-heading[b-b35jdqsdqh], .addinquirybtn[b-b35jdqsdqh], .table-container[b-b35jdqsdqh], .table tbody[b-b35jdqsdqh]{
        font-size: 12px;
    }

    .dropdown-item[b-b35jdqsdqh]{
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 14px;
    }

    .bill input[type=text][b-b35jdqsdqh]{
        width: 65%;
        font-size: 11px;
    }

    .darksearch[b-b35jdqsdqh]{
        width: 32%;
        font-size: 12px;
    }

    .dropdown-menu[b-b35jdqsdqh] {
        width: 85vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }
}

@media (max-width: 478px) {
    .darkadd[b-b35jdqsdqh] {
        width: 60%;
    }

    .darkadd[b-b35jdqsdqh]{
       width: 53%;
       font-size: 10px;
    }

    .artist-heading[b-b35jdqsdqh]{
        font-size: 16px;
    }

    .name[b-b35jdqsdqh]{
        font-weight: 600;
        font-size: 13px;
        line-height: 19.49px;
    }

    .time[b-b35jdqsdqh], .address[b-b35jdqsdqh] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-b35jdqsdqh]{
        font-size: 11px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .paginationpara[b-b35jdqsdqh], .pagination-last[b-b35jdqsdqh], .inquiry-heading[b-b35jdqsdqh], .addinquirybtn[b-b35jdqsdqh], .table-container[b-b35jdqsdqh], .table tbody[b-b35jdqsdqh] {
        font-size: 11px;
    }


    .bill input[type=text][b-b35jdqsdqh] {
        width: 71%;
        font-size: 11px;
    }

    .darksearch[b-b35jdqsdqh]{
        width: 36%;
        font-size: 12px;
    }
}

@media (max-width:390px){
    .name[b-b35jdqsdqh] {
        font-weight: 600;
        font-size: 12px;
        line-height: 19.49px;
    }

    .time[b-b35jdqsdqh], .address[b-b35jdqsdqh]{
        font-size: 10px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-b35jdqsdqh]{
        font-size: 10px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .body-main[b-b35jdqsdqh]{
        max-height: 60vh;
        padding: 10px 10px;
    }

    .appoint-count[b-b35jdqsdqh]{
        font-size: 11px;
        font-weight: 600;
    }

    .day[b-b35jdqsdqh]{
        font-size: 11px;
    }

    .filter-text[b-b35jdqsdqh]{
        font-size: 13px;
        font-weight: 400;
    }

    .filter-left i[b-b35jdqsdqh]{
        font-size: 11px;
    }

    .prev-two[b-b35jdqsdqh]{
        border: none;
        font-weight: 600;
        font-size: 15px;
        background-color: #FFFF;
    }


    .darkadd[b-b35jdqsdqh] {
        width: 60%;
        font-size: 9px;
    }

    .artist-heading[b-b35jdqsdqh]{
        font-size: 14px;
    }


    .col-3[b-b35jdqsdqh] {
        flex: 0 0 auto;
        width: 30%;
    }

    .paginationnnav[b-b35jdqsdqh] {
        display: flex;
        padding: 10px 10px;
        position: absolute;
        bottom: 2vh;
        width: 90%;
    }

    .two-spans-groups[b-b35jdqsdqh]{
        display: grid;
        grid-template-columns: revert;
    }


    .dropdown-item[b-b35jdqsdqh]{
        display: block;
        width: 100%;
        padding: .40rem 0.2rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 12px;
    }

    .bill input[type=text][b-b35jdqsdqh]{
        width: 72%;
        font-size: 10px;
    }

    .darksearch[b-b35jdqsdqh]{
        width: 36%;
        font-size: 10px;
    }

    .dropdown-menu[b-b35jdqsdqh]{
        width: 83.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }


}

@media (max-width:360px){
    .you[b-b35jdqsdqh] {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .bill input[type=text][b-b35jdqsdqh]{
        width: 90%;
        font-size: 10px;
    }

    .darksearch[b-b35jdqsdqh]{
        width: 48%;
        font-size: 10px;
    }

    .darkadd[b-b35jdqsdqh] {
        width: 60%;
        font-size: 8px;
    }

    .artist-heading[b-b35jdqsdqh]{
        font-size: 13px;
    }

    .dropdown-menu[b-b35jdqsdqh]{
        width: 83vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}


@media (max-width:320px){
    .bill input[type=text][b-b35jdqsdqh] {
        width: 90%;
        font-size: 9px;
    }

    .filter-text[b-b35jdqsdqh]{
        font-size: 11px;
        font-weight: 400;
    }

    .filter-left i[b-b35jdqsdqh]{
        font-size: 11px;
    }

    .appoint-count[b-b35jdqsdqh] {
        font-size: 10px;
        font-weight: 600;
    }

    .day[b-b35jdqsdqh]{
        font-size: 10px;
    }

    .nav-section[b-b35jdqsdqh]{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 0px 8px 0px;
    }

    .dropdown-menu[b-b35jdqsdqh] {
        width: 82vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}
/* /Pages/Permissions.razor.rz.scp.css */
.permission-page[b-t4tp3pknin] {
    background-color: #fff;
    color: #000;
    height: 86vh;
    border-radius: 0px 0 0 50px;
    overflow: auto;
}



/* Label styling */
.top-head[b-t4tp3pknin] {
    font-weight: 600;
    display: block;
    /* color: #333; */
    font-size: 18px;
    margin-top: 2%;
}

label[b-t4tp3pknin] {
    font-weight: 600;
    display: block;
    /* color: #333; */
    font-size: 15px;
    margin-top: 2%;
}

/* Select dropdown styling */
select[b-t4tp3pknin] {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    transition: border-color 0.3s;
}

    select:focus[b-t4tp3pknin] {
        outline: none;
        border-color: #007bff;
    }

    /* Style the select box */
    select.inside-select[b-t4tp3pknin] {
        width: 100%;
        max-width: 300px;
        padding: 8px 12px;
        font-size: 14px;
        color: #333;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px 14px;
        transition: border-color 0.3s ease;
    }

        /* Focus state */
        select.inside-select:focus[b-t4tp3pknin] {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }

        /* Option styling */
        select.inside-select option[b-t4tp3pknin] {
            padding: 8px;
            font-size: 14px;
            color: #333;
            background-color: #fff;
        }







/* Module list: display modules in grid (5 per row) */
.module-list[b-t4tp3pknin] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding:0% 0%;
}

    /* Module item styling */
    .module-list > div[b-t4tp3pknin] {
        width: calc(20% - 12px);
        display: flex;
        align-items: center;
        padding: 8px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        background-color: #f9f9f9;
        transition: background-color 0.2s;
    }

        .module-list > div:hover[b-t4tp3pknin] {
            background-color: #f1f1f1;
        }

/* Checkbox spacing */
input[type="checkbox"][b-t4tp3pknin] {
    margin-right: 8px;
}

/* Save button styling */
.save-btn[b-t4tp3pknin] {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 2% 0%;
}



/* Success message */
.text-success[b-t4tp3pknin] {
    margin-top: 12px;
    color: #28a745;
    font-weight: 500;
}










/* Responsive adjustments from 1700px down to 300px */
@media (max-width: 1700px) {
    .module-list > div[b-t4tp3pknin] {
        width: calc(25% - 12px); /* 4 per row */
    }


}

@media (max-width: 1200px) {
    .module-list > div[b-t4tp3pknin] {
        width: calc(33.33% - 12px); /* 3 per row */
    }
}

@media (max-width: 992px) {
    .module-list > div[b-t4tp3pknin] {
        width: calc(50% - 12px); /* 2 per row */
    }
}

@media (max-width: 768px) {
    .permission-page[b-t4tp3pknin] {
        background-color: #fff;
        color: #000;
        height: 86vh;
        border-radius: 0px 0 0 0px;
        overflow: auto;
    }

    .module-list > div[b-t4tp3pknin] {
        width: 100%; /* 1 per row */
    }

    select[b-t4tp3pknin] {
        max-width: 100%;
    }

    .save-btn[b-t4tp3pknin] {
        width: 100%;
        margin: 2% 0%;
    }

    select.inside-select[b-t4tp3pknin] {
        width: 100%;
        max-width: 100%;
        padding: 8px 12px;
        font-size: 14px;
        color: #333;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px 14px;
        transition: border-color 0.3s ease;
    }
}

@media (max-width: 480px) {
    .top-head[b-t4tp3pknin], label[b-t4tp3pknin] {
        font-size: 16px;
    }

    select[b-t4tp3pknin] {
        font-size: 13px;
        padding: 6px 10px;
    }

    .save-btn[b-t4tp3pknin] {
        padding: 10px;
        font-size: 14px;
    }
}

@media (max-width: 300px) {
    .top-head[b-t4tp3pknin], label[b-t4tp3pknin] {
        font-size: 14px;
    }

    .save-btn[b-t4tp3pknin] {
        padding: 8px;
        font-size: 13px;
    }
}

/* /Pages/Product.razor.rz.scp.css */
.product-page[b-y8xd36k9pc] {
    background-color: #fff;
    color: #000;
    height: 86vh;
    border-radius: 0px 0 0 50px;
}

.form-label-form[b-y8xd36k9pc] {
    color: #170F49 !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    margin-bottom: 0.5rem !important;
}
.artist-top[b-y8xd36k9pc] {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

.artist-heading h3[b-y8xd36k9pc] {
    margin-bottom: 0;
}

.artist-heading[b-y8xd36k9pc] {
    display: flex;
    gap: 5%;
}

.addartistbtn[b-y8xd36k9pc] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}


.table-container[b-y8xd36k9pc] {
    max-height: 70vh;
    overflow-y: auto;
    width: 100%;
}

    .table-container table[b-y8xd36k9pc] {
        width: 100%;
        border-collapse: collapse;
    }

table tbody tr:hover[b-y8xd36k9pc] {
    background-color: #d9d9d9;
    color: #111;
}

.table-container th[b-y8xd36k9pc],
.table-container td[b-y8xd36k9pc] {
    padding: 8px;
    text-align: center;
 /*   border-bottom: 1px solid #ddd;*/
}

.table-container thead[b-y8xd36k9pc] {
    background-color:#fff;
    position: sticky;
    top: 0;
    z-index: 1;
}
.modal-title[b-y8xd36k9pc]{
    color:#000;
}

.table[b-y8xd36k9pc] {
    margin-bottom: 0 !important;
}

.paginationnnav[b-y8xd36k9pc]{
    display: flex;
    padding: 10px 30px;
    position: absolute;
    bottom: 4vh;
    width: 90%;
}


.pagination-last[b-y8xd36k9pc]{
    display: flex;
    justify-content: end;
    align-items: center;
}


.page-item.active .page-link[b-y8xd36k9pc] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}
.addproductbtn[b-y8xd36k9pc] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}



/* Scrollbar styles */
[b-y8xd36k9pc]::-webkit-scrollbar {
    width: 5px;
    border: none;
}

[b-y8xd36k9pc]::-webkit-scrollbar-track {
    background: grey;
    border: none;
}

[b-y8xd36k9pc]::-webkit-scrollbar-thumb {
    background-color: black;
    border: none;
    border-radius: 5px !important;
}


.modal-content[b-y8xd36k9pc]{
    background-color: #F8F8F8;
   /* border-radius: 50px 0 0 50px;*/
/*    text-align: center;*/
    position: fixed;
    height: 100vh;
    left: 0%;
    top: 0;
    width: 100%;
}

/*modal*/
.modal-body[b-y8xd36k9pc]{
    color:#000;
}
/*.modal-body label{
    padding-bottom:5px;
}*/
.toggle-group[b-y8xd36k9pc] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.toggle-switch[b-y8xd36k9pc] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    display:flex;
    align-items:center;
}

    .toggle-switch input[b-y8xd36k9pc] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-y8xd36k9pc] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0;
    transition: .4s;
    border-radius: 24px;
}

    .toggle-slider[b-y8xd36k9pc]:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .toggle-slider[b-y8xd36k9pc] {
    background-color: #4a90e2;
}

    input:checked + .toggle-slider[b-y8xd36k9pc]:before {
        transform: translateX(26px);
    }
.icat[b-y8xd36k9pc]{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1.5rem;
    margin:1.5rem 0;
}
.split-toggle[b-y8xd36k9pc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}
.three-toggle[b-y8xd36k9pc]{
/*    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:5%;*/
display:flex;
gap:2.5rem;
}
.toggle-label[b-y8xd36k9pc]{
    display:flex;
    align-items:center;
}
.cost-clustor[b-y8xd36k9pc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0;
}
.shadow-input:hover[b-y8xd36k9pc] {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
.shadow-input[b-y8xd36k9pc] {
    /* border: 1px solid #EFF0F6;
    background-color: #fff;
    padding: 10px;*/
    color: #8A92A6;
    font-weight: 400;
    font-size: 16px;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.table-input[b-y8xd36k9pc]{
    background-color:#fff;
}
.modal-body-full[b-y8xd36k9pc]{
    padding:1rem;
    overflow-y:hidden;
    margin-bottom:5%;
}
.modal-content-full[b-y8xd36k9pc] {
    background-color: #F7F9FC;
    width: 100vw;
    height: 100vh;
    margin-left: 0px;
    left: 0%;
    position: absolute;
}


.back-top[b-y8xd36k9pc] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2%;
}

.modal-header[b-y8xd36k9pc] {
    display: flex;
    flex-direction: column;
    border: none;
}

.modal-title[b-y8xd36k9pc] {
    font-size: 32px;
    font-weight: 600;
    color: #170F49;
}
.gobackbtn[b-y8xd36k9pc]{
    border:none;
    background-color:transparent;
}
.gobackbtn i[b-y8xd36k9pc] {
    font-size: 28px;
    color: #170F49;
}
.save-btn[b-y8xd36k9pc] {
    padding: 10px;
    background-color: #030303;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

/*.select-wrapper {
    position: relative;
}

    .select-wrapper::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a2b4e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: white;
    font-size: 14px;
}
 .form-group {
            flex: 1;
        }






/*=========for toggle==========*/

.checkbox-wrapper-22 .switch[b-y8xd36k9pc] {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

    .checkbox-wrapper-22 .switch input[b-y8xd36k9pc] {
        display: none;
    }

.checkbox-wrapper-22 .slider[b-y8xd36k9pc] {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

    .checkbox-wrapper-22 .slider[b-y8xd36k9pc]:before {
        background-color: #fff;
        bottom: 4px;
        content: "";
        height: 26px;
        left: 4px;
        position: absolute;
        transition: .4s;
        width: 26px;
    }

.checkbox-wrapper-22 input:checked + .slider[b-y8xd36k9pc] {
    background-color: #66bb6a;
}

    .checkbox-wrapper-22 input:checked + .slider[b-y8xd36k9pc]:before {
        transform: translateX(26px);
    }

.checkbox-wrapper-22 .slider.round[b-y8xd36k9pc] {
    border-radius: 34px;
}

    .checkbox-wrapper-22 .slider.round[b-y8xd36k9pc]:before {
        border-radius: 50%;
    }
/*----*/
.checkbox-wrapper-23 .switch[b-y8xd36k9pc] {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

    .checkbox-wrapper-23 .switch input[b-y8xd36k9pc] {
        display: none;
    }

.checkbox-wrapper-23 .slider[b-y8xd36k9pc] {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

    .checkbox-wrapper-23 .slider[b-y8xd36k9pc]:before {
        background-color: #fff;
        bottom: 4px;
        content: "";
        height: 26px;
        left: 4px;
        position: absolute;
        transition: .4s;
        width: 26px;
    }

.checkbox-wrapper-23 input:checked + .slider[b-y8xd36k9pc] {
    background-color: #66bb6a;
}

    .checkbox-wrapper-23 input:checked + .slider[b-y8xd36k9pc]:before {
        transform: translateX(26px);
    }

.checkbox-wrapper-23 .slider.round[b-y8xd36k9pc] {
    border-radius: 34px;
}

    .checkbox-wrapper-23 .slider.round[b-y8xd36k9pc]:before {
        border-radius: 50%;
    }
/*=========for toggle END ==========*/

/*for Radio btn*/

.radio-wrapper-27[b-y8xd36k9pc] {
    display: flex;
    align-items: center;
    --bc: 27.8078% .029596 256.847952;
}

    .radio-wrapper-27 label[b-y8xd36k9pc] {
        padding-left: .6em;
        font-size: .875rem;
        line-height: 1.25rem;
        --tw-text-opacity: 1;
        color: oklch(var(--bc)/var(--tw-text-opacity));
    }

    .radio-wrapper-27 input[type="radio"][b-y8xd36k9pc] {
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 1.5rem;
        width: 1.5rem;
        cursor: pointer;
        border-radius: 9999px;
        border-width: 1px;
        border-style: solid;
        border-color: oklch(var(--bc) / var(--tw-border-opacity));
        --tw-border-opacity: .2;
        --chkbg: var(--bc);
        --b1: 100% 0 0;
    }

        .radio-wrapper-27 input[type="radio"]:checked[b-y8xd36k9pc],
        .radio-wrapper-27 input[type="radio"][aria-checked=true][b-y8xd36k9pc] {
            --tw-bg-opacity: 1;
            background-color: oklch(var(--bc) / var(--tw-bg-opacity));
            background-image: none;
            animation: radiomark-27-b-y8xd36k9pc var(--animation-input, .2s) ease-out;
            box-shadow: 0 0 0 4px oklch(var(--b1) / 1) inset, 0 0 0 4px oklch(var(--b1) / 1) inset;
        }

@keyframes radiomark-27-b-y8xd36k9pc {
    0% {
        box-shadow: 0 0 0 12px oklch(var(--b1) /1) inset, 0 0 0 12px oklch(var(--b1) /1) inset;
    }

    50% {
        box-shadow: 0 0 0 3px oklch(var(--b1) /1) inset, 0 0 0 3px oklch(var(--b1) /1) inset;
    }

    100% {
        box-shadow: 0 0 0 4px oklch(var(--b1) /1) inset, 0 0 0 4px oklch(var(--b1) /1) inset;
    }
}

.two-radios[b-y8xd36k9pc] {
    display: flex;
    gap: 2rem;
    padding: 1rem 0;
    flex-direction: column;
}
/*Responsive-part*/
@media (max-width:1920px) {
    .table-container[b-y8xd36k9pc] {
        height: 65vh;
    }

    .table-container[b-y8xd36k9pc] {
        font-size: 18px;
    }

    .form-control[b-y8xd36k9pc] {
        transition: none;
        font-size: 23px;
    }

    .addartistbtn[b-y8xd36k9pc] {
        width: fit-content;
        margin-bottom: 2%;
        background-color: #000;
        color: #fff;
        font-size: 23px;
    }

    .table thead[b-y8xd36k9pc], .table tbody[b-y8xd36k9pc] {
        font-size: 20px;
    }

    .paginationnnav[b-y8xd36k9pc] {
        display: flex;
        padding: 10px 25px;
        position: absolute;
        bottom: 2vh;
        width: 90%;
    }

    .paginationpara[b-y8xd36k9pc] {
        font-size: 19px;
    }
}



@media only screen and (max-width:1440px) {
    .table-container[b-y8xd36k9pc] {
        height: 65vh;
    }

    .form-control[b-y8xd36k9pc] {
        transition: none;
        font-size: 16px;
    }

    .table-container thead[b-y8xd36k9pc] {
        background-color: #fff;
        color: #111 !important;
        position: sticky;
        top: 0;
        z-index: 1;
        border-bottom: 1px solid #000;
        font-size: 18px;
    }


    .paginationpara[b-y8xd36k9pc] {
        font-size: 16px;
    }

    .darkadd[b-y8xd36k9pc] {
        font-size: 16px;
    }

    .table thead[b-y8xd36k9pc], .table tbody[b-y8xd36k9pc] {
        font-size: 16px;
    }

    .addartistbtn[b-y8xd36k9pc] {
        font-size: 16px;
    }
}

@media (max-width: 900px) {
    .paginationpara[b-y8xd36k9pc], .pagination-last[b-y8xd36k9pc], .artist-heading[b-y8xd36k9pc], .addartistbtn[b-y8xd36k9pc], .table-container[b-y8xd36k9pc] {
        font-size: 12px;
    }

    .product-page[b-y8xd36k9pc] {
        padding: 5px 15px;
    }

    .btn[b-y8xd36k9pc] {
        transition: none;
        font-size: 12px;
    }

    .form-control[b-y8xd36k9pc] {
        transition: none;
        font-size: 12px;
    }
}



@media (max-width: 767px) {
    .mobile-only[b-y8xd36k9pc] {
        display: block;
    }

    .desktop-only[b-y8xd36k9pc] {
        display: none;
    }
}

@media (max-width: 768px) {
    .pagination .page-item[b-y8xd36k9pc] {
            display: none; /* Hide all by default */
        }

        /* Always show Previous and Next buttons */
         .pagination .page-item:first-child[b-y8xd36k9pc],
         .pagination .page-item:last-child[b-y8xd36k9pc] {
            display: inline-block;
         }

          /* Show the current (active) page */
          .pagination .page-item.active[b-y8xd36k9pc] {
             display: inline-block;
          }

           /* Show the next page after the active one */
           .pagination .page-item.active + .page-item[b-y8xd36k9pc] {
               display: inline-block;
            }

           /* Optionally, show the page before the current one */
           .pagination .page-item.active ~ .page-item[b-y8xd36k9pc],
           .pagination .page-item.active:has(+ .page-item)[b-y8xd36k9pc] {
           /* Optional extra styles if needed */
           }


    .artist-top[b-y8xd36k9pc] {
        padding: 5px 0 0 5px;
        padding: 5px;
        font-weight: 500;
    }

    .product-page[b-y8xd36k9pc] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
    }

    .artist-heading[b-y8xd36k9pc] {
        font-size: 20px;
    }

    .nav-section[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 15px 5px 15px;
    }

    .addbtn[b-y8xd36k9pc] {
        display: flex;
        justify-content: end;
        align-items: end;
        /*        padding: 0 15px;*/
    }

    .darkadd[b-y8xd36k9pc] {
        width: 55%;
    }

    .title-top[b-y8xd36k9pc] {
        text-align: center;
    }

    .prev-button[b-y8xd36k9pc] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }



    .title-top[b-y8xd36k9pc] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-y8xd36k9pc] {
        font-size: 19px;
    }

    .filter-section[b-y8xd36k9pc] {
        padding: 5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .filter-text[b-y8xd36k9pc] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left[b-y8xd36k9pc] {
        font-size: 15px;
    }

    .prev-two[b-y8xd36k9pc] {
        border: none;
        font-weight: 600;
        font-size: 15px;
        background-color: #FFFF;
    }

    .btn-previous-two[b-y8xd36k9pc] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-y8xd36k9pc] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

    .dropdown[b-y8xd36k9pc] {
        display: flex;
        justify-content: end;
        position: relative;
        padding: 0 15px;
    }


    .dropdown-menu[b-y8xd36k9pc] {
        width: 87vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }

    .you[b-y8xd36k9pc] {
        display: flex;
        width: 100%;
        justify-content: end;
    }

    Input styling
    input[type="date"][b-y8xd36k9pc],
    input[type="text"][b-y8xd36k9pc],
    select[b-y8xd36k9pc] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 13px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-y8xd36k9pc],
        input[type="text"]:focus[b-y8xd36k9pc],
        select:focus[b-y8xd36k9pc] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

    Placeholder styling
    input[b-y8xd36k9pc]::placeholder {
        color: #999;
        font-size: 12px;
    }

    Filter button styling
    .filter-button[b-y8xd36k9pc] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .filter-button:hover[b-y8xd36k9pc] {
        background-color: #5a4cbc;
    }

    Dropdown toggle button styling
    .prev-two[b-y8xd36k9pc] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

    .prev-two:hover[b-y8xd36k9pc] {
        color: #6a5acd;
    }

    /*     Animation for dropdown */
    @keyframes fadeIn-b-y8xd36k9pc {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-y8xd36k9pc] {
        animation: fadeIn-b-y8xd36k9pc 0.2s ease-out forwards;
    }

    .start[b-y8xd36k9pc], .end[b-y8xd36k9pc], .transaction[b-y8xd36k9pc], .bill[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .bill input[type=text][b-y8xd36k9pc] {
            width: 60%;
            font-size: 12px;
        }

        .bill input[b-y8xd36k9pc]::placeholder {
            text-align: center;
        }

        .transaction select[b-y8xd36k9pc] {
            width: 60%;
            display: flex;
            margin-left: 25%;
        }


    .top-body[b-y8xd36k9pc] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-y8xd36k9pc] {
        font-size: 12px;
    }

    .appoint-count[b-y8xd36k9pc] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-y8xd36k9pc] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10%;
    }

        .right-detail img[b-y8xd36k9pc] {
            width: 12%;
            height: 30%;
        }

    .name[b-y8xd36k9pc] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-y8xd36k9pc], .address[b-y8xd36k9pc] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-y8xd36k9pc] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-y8xd36k9pc] {
        height: 53vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .body-main[b-y8xd36k9pc] {
        max-height: 60vh;
    }

    .filter-left[b-y8xd36k9pc], .filter-title[b-y8xd36k9pc] {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .searchisbutton[b-y8xd36k9pc] {
        display: flex;
        justify-content: end;
        margin-bottom: 5px;
    }

    .darksearch[b-y8xd36k9pc] {
        width: 30%;
    }

    .darkadd[b-y8xd36k9pc] {
        font-size: 16px;
    }

    .bill[b-y8xd36k9pc] {
        margin-bottom: 5px;
    }


    .two-spans-groups[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }




    .dropdown-item[b-y8xd36k9pc] {
        display: block;
        width: 100%;
        padding: .45rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 15px;
    }

    a:hover[b-y8xd36k9pc] {
        color: #0a58ca;
    }


    .dropdown-item:focus[b-y8xd36k9pc], .dropdown-item:hover[b-y8xd36k9pc] {
        color: #1e2125;
        background-color: #e9ecef;
    }
}



@media (max-width: 645px) {

    .darkadd[b-y8xd36k9pc] {
        width: 52%;
        font-size: 14px;
    }

    .artist-heading[b-y8xd36k9pc] {
        font-size: 18px;
    }

    .dropdown-menu[b-y8xd36k9pc] {
        width: 86.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }

    .nav-section[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 12px 5px 12px;
    }
}

@media (max-width: 590px) {
    .darkadd[b-y8xd36k9pc] {
        width: 53%;
        font-size: 12px;
    }

    .artist-heading[b-y8xd36k9pc] {
        font-size: 17px;
    }

    .two-spans-groups[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: 35% 65%;
    }

    .dropdown-menu[b-y8xd36k9pc] {
        width: 86vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }
}

@media (max-width: 500px) {
    .customer-appoint[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-y8xd36k9pc] {
        gap: 1%;
        justify-content: end;
    }


    .paginationpara[b-y8xd36k9pc], .pagination-last[b-y8xd36k9pc], .inquiry-heading[b-y8xd36k9pc], .addinquirybtn[b-y8xd36k9pc], .table-container[b-y8xd36k9pc], .table tbody[b-y8xd36k9pc] {
        font-size: 12px;
    }

    .dropdown-item[b-y8xd36k9pc] {
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 14px;
    }

    .bill input[type=text][b-y8xd36k9pc] {
        width: 65%;
        font-size: 11px;
    }

    .darksearch[b-y8xd36k9pc] {
        width: 32%;
        font-size: 12px;
    }

    .dropdown-menu[b-y8xd36k9pc] {
        width: 85vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 38px;
    }

    .nav-section[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 9px 5px 9px;
    }
}

@media (max-width: 478px) {

    .filter-left i[b-y8xd36k9pc]{
        font-size:13px;
    }

    .prev-two[b-y8xd36k9pc]{
        border: none;
        font-weight: 600;
        font-size: 16px;
        background-color: #FFFF;
    }

    .filter-text[b-y8xd36k9pc]{
        font-size: 13px;
        font-weight: 400;
    }

    .darkadd[b-y8xd36k9pc] {
        width: 60%;
    }

    .darkadd[b-y8xd36k9pc] {
        width: 55%;
        font-size: 10px;
    }

    .artist-heading[b-y8xd36k9pc] {
        font-size: 16px;
    }

    .name[b-y8xd36k9pc] {
        font-weight: 600;
        font-size: 13px;
        line-height: 19.49px;
    }

    .time[b-y8xd36k9pc], .address[b-y8xd36k9pc] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-y8xd36k9pc] {
        font-size: 11px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .paginationpara[b-y8xd36k9pc], .pagination-last[b-y8xd36k9pc], .inquiry-heading[b-y8xd36k9pc], .addinquirybtn[b-y8xd36k9pc], .table-container[b-y8xd36k9pc], .table tbody[b-y8xd36k9pc] {
        font-size: 11px;
    }


    .bill input[type=text][b-y8xd36k9pc] {
        width: 71%;
        font-size: 11px;
    }

    .darksearch[b-y8xd36k9pc] {
        width: 36%;
        font-size: 12px;
    }

    .nav-section[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 5px 5px 5px;
    }

    .pagination-last[b-y8xd36k9pc], .paginationpara[b-y8xd36k9pc] {
        font-size: 10px;
    }
}

@media (max-width:390px) {
    .pagination-last[b-y8xd36k9pc], .paginationpara[b-y8xd36k9pc]{
        font-size:9px;
    }

    .paginationnnav[b-y8xd36k9pc]{
        display: flex;
        padding: 10px 10px;
        position: absolute;
        bottom: 2vh;
        width: 85%;
    }

    .name[b-y8xd36k9pc] {
        font-weight: 600;
        font-size: 12px;
        line-height: 19.49px;
    }

    .time[b-y8xd36k9pc], .address[b-y8xd36k9pc] {
        font-size: 10px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-y8xd36k9pc] {
        font-size: 10px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }


    .appoint-count[b-y8xd36k9pc] {
        font-size: 11px;
        font-weight: 600;
    }

    .day[b-y8xd36k9pc] {
        font-size: 11px;
    }

    .filter-text[b-y8xd36k9pc] {
        font-size: 13px;
        font-weight: 400;
    }

    .filter-left i[b-y8xd36k9pc] {
        font-size: 11px;
    }

    .prev-two[b-y8xd36k9pc] {
        border: none;
        font-weight: 600;
        font-size: 15px;
        background-color: #FFFF;
    }


    .darkadd[b-y8xd36k9pc] {
        width: 60%;
        font-size: 9px;
    }

    .artist-heading[b-y8xd36k9pc] {
        font-size: 14px;
    }




    .two-spans-groups[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: revert;
    }


    .dropdown-item[b-y8xd36k9pc] {
        display: block;
        width: 100%;
        padding: .40rem 0.2rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 12px;
    }

    .bill input[type=text][b-y8xd36k9pc] {
        width: 72%;
        font-size: 10px;
    }

    .darksearch[b-y8xd36k9pc] {
        width: 36%;
        font-size: 10px;
    }

    .dropdown-menu[b-y8xd36k9pc] {
        width: 83.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}

@media (max-width:360px) {

    .pagination-last[b-y8xd36k9pc], .paginationpara[b-y8xd36k9pc]{
        font-size: 8px;
    }

    .you[b-y8xd36k9pc] {
        display: flex;
        width: 100%;
        justify-content: center;
    }



    .bill input[type=text][b-y8xd36k9pc] {
        width: 90%;
        font-size: 10px;
    }

    .darksearch[b-y8xd36k9pc] {
        width: 48%;
        font-size: 10px;
    }

    .darkadd[b-y8xd36k9pc] {
        width: 62%;
        font-size: 8px;
    }

    .artist-heading[b-y8xd36k9pc] {
        font-size: 13px;
    }

    .dropdown-menu[b-y8xd36k9pc] {
        width: 83vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}


@media (max-width:320px) {
    .bill input[type=text][b-y8xd36k9pc] {
        width: 90%;
        font-size: 9px;
    }


    .pagination-last[b-y8xd36k9pc], .paginationpara[b-y8xd36k9pc] {
        font-size: 8px;
    }



    .filter-text[b-y8xd36k9pc] {
        font-size: 11px;
        font-weight: 400;
    }

    .filter-left i[b-y8xd36k9pc] {
        font-size: 11px;
    }

    .appoint-count[b-y8xd36k9pc] {
        font-size: 10px;
        font-weight: 600;
    }

    .day[b-y8xd36k9pc] {
        font-size: 10px;
    }

    .nav-section[b-y8xd36k9pc] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 0px 8px 0px;
    }

    .dropdown-menu[b-y8xd36k9pc] {
        width: 82vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }

    .paginationnnav[b-y8xd36k9pc] {
        display: flex;
        padding: 10px 3px;
        position: absolute;
        bottom: 2vh;
        width: 84%;
    }
}




/* /Pages/Report.razor.rz.scp.css */
.report-page[b-k1qjkmrr3b] {
    background-color: #fff;
    color: #000;
    height: 86vh;
    border-radius: 0px 0 0 50px;
    overflow: auto;
}


.artist-top[b-k1qjkmrr3b] {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

.artist-heading h3[b-k1qjkmrr3b] { 
    margin-bottom: 0;
}

.artist-heading[b-k1qjkmrr3b] {
    display: flex;
    gap: 5%;
}

.addartistbtn[b-k1qjkmrr3b] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}

.form-label[b-k1qjkmrr3b] {
    margin-bottom: .5rem;
    font-size: 18px;
}

.form-control[b-k1qjkmrr3b] {
    width: 100%;
    border-radius: 5px;
    border: 5px;
    height: 5vh;
    border: 1px solid black;
}

.customerform[b-k1qjkmrr3b]{
    width:100%
}

.timeform[b-k1qjkmrr3b]{
    width:100%
}
.modal-content[b-k1qjkmrr3b]{
    color:#000;
}
.modal-content-small[b-k1qjkmrr3b] {
    background-color: #F8F8F8;
    border-radius: 0;
    text-align: center;
    position: fixed;
    height: auto;
    left: 25%;
    width: 50%;
    top: 5%;
    max-width: 50%;
}
.update-quantity-modal-header[b-k1qjkmrr3b] {
    display: flex;
    /*justify-content: space-between;
    padding: 0;*/
    justify-content:start;
    gap:30%;
}

.update-quantity-modal-footer[b-k1qjkmrr3b] {
    justify-content: center;
}

.update-quantity-save-btn[b-k1qjkmrr3b] {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 0;
}
.modal-body-small[b-k1qjkmrr3b] {
    max-height: 80vh;
    overflow-y: scroll;
}

.quantity-footer-btn[b-k1qjkmrr3b] {
    justify-content: center;
    background-color: #000;
    color: #fff;
    padding: 10px;
    width: 50%;
}
.modal-footer[b-k1qjkmrr3b]{
    padding:0;
}

.filter-transaction[b-k1qjkmrr3b] {
    display: flex;
    align-content: center;
    align-items: center;
    padding:1% 3%;
}


.filter-date[b-k1qjkmrr3b]{
    display:flex;
    gap:2%;

}

.searchbuttonpart[b-k1qjkmrr3b] {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5%;
}

.searchbuttonpart button[b-k1qjkmrr3b]{
    font-size:15px;
}

.filterdiv[b-k1qjkmrr3b]{
    align-content:end;
    padding:0% 5%;
}







.table-container[b-k1qjkmrr3b] {
    max-height: 60vh;
    overflow: hidden;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

table thead[b-k1qjkmrr3b] {
    position: sticky;
    top: 0%;
    background-color: #FFFF;
}


.table-container th[b-k1qjkmrr3b],
.table-container td[b-k1qjkmrr3b] {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.appoint-table[b-k1qjkmrr3b]{
    padding-left: 4%;
}



/*Pagination*/
.pagination .page-item[b-k1qjkmrr3b] {
    display: none; /* Hide all by default */
}

/* Always show Previous and Next buttons */
.pagination .page-item:first-child[b-k1qjkmrr3b],
.pagination .page-item:last-child[b-k1qjkmrr3b] {
    display: inline-block;
}

/* Show the current (active) page */
.pagination .page-item.active[b-k1qjkmrr3b] {
   display: inline-block;
}

/* Show the next page after the active one */
.pagination .page-item.active + .page-item[b-k1qjkmrr3b] {
     display: inline-block;
}

/* Optionally, show the page before the current one */
.pagination .page-item.active ~ .page-item[b-k1qjkmrr3b],
.pagination .page-item.active:has(+ .page-item)[b-k1qjkmrr3b] {
/* Optional extra styles if needed */
}

.pagination[b-k1qjkmrr3b] {
    justify-content: end;
}

.page-item.active .page-link[b-k1qjkmrr3b] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}


.pagination[b-k1qjkmrr3b] {
    margin-bottom: 0;
}

.paginationnnav[b-k1qjkmrr3b] {
    display: flex;
    padding: 10px 30px;
/*    position: absolute;*/
    bottom: 4vh;
}

/*------------------*/
.custom-appointment-pagination[b-k1qjkmrr3b] {
    padding: 10px 30px;
    /*    position: absolute;*/
}





/*-------------*/
/* Scrollbar styles */
[b-k1qjkmrr3b]::-webkit-scrollbar {
    width: 5px;
    border: none;
}

[b-k1qjkmrr3b]::-webkit-scrollbar-track {
    background: grey;
    border: none;
}

[b-k1qjkmrr3b]::-webkit-scrollbar-thumb {
    background-color: black;
    border: none;
    border-radius: 5px !important;
}


/*modal-filter*/
.modal-filter[b-k1qjkmrr3b] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    /* semi-transparent black */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.inside-modal[b-k1qjkmrr3b] {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    width: 28%;
    max-width: 500px;
    z-index: 10000;
    position: fixed;
    top: 17%;
    left: 49%;
}

/* Individual filter fields */
.filter[b-k1qjkmrr3b] {
    margin-bottom: 16px;
}

    .filter label[b-k1qjkmrr3b] {
        font-weight: 600;
        margin-bottom: 4px;
        display: inline-block;
    }

select[b-k1qjkmrr3b],
input[type="date"][b-k1qjkmrr3b] {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
}






/*Responsive-part*/


@media only screen and (max-width:1700px) {
    .table-container[b-k1qjkmrr3b] {
        height: 70vh;
    }

    .table-container[b-k1qjkmrr3b] {
    max-height: 58vh;
    overflow: hidden;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

    .paginationpara[b-k1qjkmrr3b], .pagination-last[b-k1qjkmrr3b], .inquiry-heading[b-k1qjkmrr3b], .addinquirybtn[b-k1qjkmrr3b], .table-container[b-k1qjkmrr3b], .table tbody[b-k1qjkmrr3b] {
        font-size: 18px;
    }
}

@media only screen and (max-width:1440px) {
    .table-container[b-k1qjkmrr3b] {
        height: 65vh;
    }

    .paginationpara[b-k1qjkmrr3b], .pagination-last[b-k1qjkmrr3b], .inquiry-heading[b-k1qjkmrr3b], .addinquirybtn[b-k1qjkmrr3b], .table-container[b-k1qjkmrr3b], .table tbody[b-k1qjkmrr3b] {
        font-size: 16px;
    }

    .filterdiv[b-2cccpqozpp][b-k1qjkmrr3b] {
        align-content: end;
         padding: 0%; 
    }

    .form-control[b-k1qjkmrr3b]{
        width: 90%;
        border-radius: 5px;
        border: 5px;
        height: 5vh;
        border: 1px solid black;
        padding:1% 3%;
    }

    .timeform[b-k1qjkmrr3b]{
        width: 90%;
    }
}



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

    .paginationpara[b-k1qjkmrr3b], .pagination-last[b-k1qjkmrr3b], .inquiry-heading[b-k1qjkmrr3b], .addinquirybtn[b-k1qjkmrr3b], .table-container[b-k1qjkmrr3b], .table tbody[b-k1qjkmrr3b] {
        font-size: 15px;
    }

    .searchbuttonpart button[b-k1qjkmrr3b]{
        font-size: 12px;
    }

    .form-label[b-k1qjkmrr3b]{
        margin-bottom: .5rem;
        font-size: 14px;
    }

    .timeform[b-k1qjkmrr3b]{
        width: 90%;
        font-size: 13px;
    }

    .customerform[b-k1qjkmrr3b] {
        width: 90%;
    }


}

@media (max-width:1194px){
    .form-label[b-k1qjkmrr3b] {
        margin-bottom: .5rem;
        font-size: 15px;
    }

    .searchbuttonpart button[b-k1qjkmrr3b]{
        font-size: 13px;
    }

    .timeform[b-k1qjkmrr3b]{
        width: 100%;
        font-size: 13px;
    }

    .table-container[b-k1qjkmrr3b]{
        font-size:14px;
    }
}

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

    .paginationpara[b-k1qjkmrr3b], .pagination-last[b-k1qjkmrr3b], .inquiry-heading[b-k1qjkmrr3b], .addinquirybtn[b-k1qjkmrr3b], .table-container[b-k1qjkmrr3b], .table tbody[b-k1qjkmrr3b] {
        font-size: 14px;
    }

    .searchbuttonpart[b-k1qjkmrr3b] {
        display: flex;
        align-items: end;
        justify-content: end;
        gap: 3%;
    }
}


@media (max-width: 968px) {
    .paginationpara[b-k1qjkmrr3b], .pagination-last[b-k1qjkmrr3b], .artist-heading[b-k1qjkmrr3b], .addartistbtn[b-k1qjkmrr3b], .table-container[b-k1qjkmrr3b] {
        font-size: 12px;
    }

    .paginationnnav[b-k1qjkmrr3b]{
        display: flex;
        padding: 10px 10px;
        position: absolute;
        bottom: 4vh;
        width: 90%;
    }

    .inquirypage[b-k1qjkmrr3b] {
        padding: 5px 15px;
    }

    .btn[b-k1qjkmrr3b] {
        transition: none;
        font-size: 12px;
    }

    .form-control[b-k1qjkmrr3b] {
        transition: none;
        font-size: 12px;
    }
}


@media (max-width:920px){
    .timeform[b-k1qjkmrr3b] {
        width: 85%;
        font-size: 13px;
    }

    .searchbuttonpart button[b-k1qjkmrr3b]{
        font-size: 12px;
    }

    .form-label[b-k1qjkmrr3b] {
        margin-bottom: .5rem;
        font-size: 14px;
    }
}


@media (max-width:890px) {
    .table-container thead[b-k1qjkmrr3b] {
        background-color: #fff;
        color: #111 !important;
        position: sticky;
        top: 0;
        z-index: 1;
        border-bottom: 1px solid #000;
        font-size: 13px;
    }

    .paginationnnav[b-k1qjkmrr3b]{
        display: flex;
        padding: 5px 10px;
        position: absolute;
        bottom: 4vh;
        width: 90%;
    }

    .customerform[b-k1qjkmrr3b] {
        width: 80%;
    }

    .form-label[b-k1qjkmrr3b]{
        margin-bottom: .5rem;
        font-size: 12px;
    }



    .searchbuttonpart button[b-k1qjkmrr3b]{
        font-size: 11px;
    }
}

@media (max-width:780px){
    .searchbuttonpart button[b-k1qjkmrr3b] {
        font-size: 10px;
    }
}




@media (max-width: 768px) {
        .pagination .page-item[b-k1qjkmrr3b] {
            display: none; /* Hide all by default */
        }

        /* Always show Previous and Next buttons */
         .pagination .page-item:first-child[b-k1qjkmrr3b],
         .pagination .page-item:last-child[b-k1qjkmrr3b] {
            display: inline-block;
         }

          /* Show the current (active) page */
          .pagination .page-item.active[b-k1qjkmrr3b] {
             display: inline-block;
          }

           /* Show the next page after the active one */
           .pagination .page-item.active + .page-item[b-k1qjkmrr3b] {
               display: inline-block;
            }

           /* Optionally, show the page before the current one */
           .pagination .page-item.active ~ .page-item[b-k1qjkmrr3b],
           .pagination .page-item.active:has(+ .page-item)[b-k1qjkmrr3b] {
           /* Optional extra styles if needed */
           }


    .top-body[b-k1qjkmrr3b] {
        display: flex;
        justify-content: space-between;
        margin: 1% 1%;
    }

    .report-page[b-k1qjkmrr3b] {
        background-color: #fff;
        color: #000;
        height: 90vh;
        border-radius: 0px 0 0 0px;
        padding: 5px 15px;
        overflow: auto;
    }



    .artist-top[b-k1qjkmrr3b] {
        padding: 5px 0 0 5px;
        padding: 5px;
        font-weight: 500;
    }

    .artist-heading[b-k1qjkmrr3b] {
        font-size: 20px;
    }

    .nav-section[b-k1qjkmrr3b] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 15px 5px 15px;
    }

    .addbtn[b-k1qjkmrr3b] {
        display: flex;
        justify-content: end;
        align-items: end;
        /*        padding: 0 15px;*/
    }

    .filter-left i[b-k1qjkmrr3b] {
        font-size: 15px;
    }

    .darkadd[b-k1qjkmrr3b] {
        width: 45%;
    }

    .title-top[b-k1qjkmrr3b] {
        text-align: center;
    }

    .prev-button[b-k1qjkmrr3b] {
        border: none;
        background-color: #FFFF;
        font-weight: 600;
        font-size: 20px;
    }



    .title-top[b-k1qjkmrr3b] {
        align-items: center;
        align-content: center;
    }

    .appoint-heading[b-k1qjkmrr3b] {
        font-size: 19px;
    }

    .filter-section[b-k1qjkmrr3b] {
        padding: 5px 0;
        display: grid;
        grid-template-columns: 6% 64% 30%;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .filter-text[b-k1qjkmrr3b] {
        font-size: 14px;
        font-weight: 400;
    }

    .filter-left i[b-k1qjkmrr3b] {
        font-size: 15px;
    }

    .btn-previous-two[b-k1qjkmrr3b] {
        display: flex;
        justify-content: end;
    }


    .prev-two[b-k1qjkmrr3b] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: #FFFF;
    }

    .dropdown[b-k1qjkmrr3b] {
        display: flex;
        justify-content: end;
        position: relative;
        padding: 0 15px;
    }


    .dropdown-menu[b-k1qjkmrr3b] {
        width: 96.5vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }



    .you[b-k1qjkmrr3b] {
        display: flex;
        width: 100%;
        justify-content: end;
    }

    Input styling
    input[type="date"][b-k1qjkmrr3b],
    input[type="text"][b-k1qjkmrr3b],
    select[b-k1qjkmrr3b] {
        width: 100%;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 12px;
        background-color: #f9f9f9;
    }

        input[type="date"]:focus[b-k1qjkmrr3b],
        input[type="text"]:focus[b-k1qjkmrr3b],
        select:focus[b-k1qjkmrr3b] {
            outline: none;
            border-color: #6a5acd;
            box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
        }

    Placeholder styling
    input[b-k1qjkmrr3b]::placeholder {
        color: #999;
        font-size: 12px;
    }

    Filter button styling
    .filter-button[b-k1qjkmrr3b] {
        background-color: #6a5acd;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px;
        font-weight: 600;
        width: 100%;
        margin-top: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .filter-button:hover[b-k1qjkmrr3b] {
        background-color: #5a4cbc;
    }

    Dropdown toggle button styling
    .prev-two[b-k1qjkmrr3b] {
        border: none;
        font-weight: 600;
        font-size: 20px;
        background-color: transparent;
        color: #333;
        padding: 5px 10px;
        transition: color 0.2s ease;
    }

    .prev-two:hover[b-k1qjkmrr3b] {
        color: #6a5acd;
    }

    /*     Animation for dropdown */
    @keyframes fadeIn-b-k1qjkmrr3b {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-menu.show[b-k1qjkmrr3b] {
        animation: fadeIn-b-k1qjkmrr3b 0.2s ease-out forwards;
    }

    .start[b-k1qjkmrr3b], .end[b-k1qjkmrr3b], .transaction[b-k1qjkmrr3b], .bill[b-k1qjkmrr3b] {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

        .bill input[type=text][b-k1qjkmrr3b] {
            width: 60%;
            font-size: 12px;
        }

        .bill input[b-k1qjkmrr3b]::placeholder {
            text-align: center;
        }

        .transaction select[b-k1qjkmrr3b] {
            width: 60%;
            display: flex;
            margin-left: 25%;
        }


    .top-body[b-k1qjkmrr3b] {
        display: flex;
        justify-content: space-between;
        margin: 1% 0;
    }

    .day[b-k1qjkmrr3b] {
        font-size: 12px;
    }

    .appoint-count[b-k1qjkmrr3b] {
        font-size: 12px;
        font-weight: 600;
    }


    .right-detail[b-k1qjkmrr3b] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10%;
    }

        .right-detail img[b-k1qjkmrr3b] {
            width: 12%;
            height: 30%;
        }

    .name[b-k1qjkmrr3b] {
        font-weight: 600;
        font-size: 16px;
        line-height: 19.49px;
    }

    .time[b-k1qjkmrr3b], .address[b-k1qjkmrr3b] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-k1qjkmrr3b] {
        font-size: 12px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .customer-appoint[b-k1qjkmrr3b] {
        display: grid;
        grid-template-columns: 75% 20%;
        background-color: #F7F6FE;
        border-radius: 20px;
        gap: 5%;
        padding: 1% 2%;
        margin-top: 1%;
        /*border-bottom: 1px solid #ccc;*/
    }

    .customer-appoint-wrapper[b-k1qjkmrr3b] {
        height: 53vh;
        overflow-y: scroll;
        margin-top: 1%;
        padding-right: 5px;
    }

    .body-main[b-k1qjkmrr3b] {
        max-height: 60vh;
    }

    .filter-left[b-k1qjkmrr3b], .filter-title[b-k1qjkmrr3b] {
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .searchisbutton[b-k1qjkmrr3b] {
        display: flex;
        justify-content: end;
        margin-bottom: 5px;
    }

    .darksearch[b-k1qjkmrr3b] {
        width: 30%;
    }

    .darkadd[b-k1qjkmrr3b] {
        font-size: 14px;
    }

    .artist-heading[b-k1qjkmrr3b] {
        font-size: 19px;
    }

    .bill[b-k1qjkmrr3b] {
        margin-bottom: 5px;
    }


    .two-spans-groups[b-k1qjkmrr3b] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .paginationnnav[b-2cccpqozpp][b-k1qjkmrr3b] {
        display: flex;
        padding: 10px 25px;
        position: absolute;
        bottom: 4vh;
        width: 98%;
    }

    .paginationnnav[b-k1qjkmrr3b] {
        margin-bottom: 0;
    }

    /*    search-modal*/

    .bill[b-k1qjkmrr3b] {
        margin-bottom: 10px;
    }

    .dropdown-item[b-k1qjkmrr3b] {
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 15px;
    }


        .dropdown-item:focus[b-k1qjkmrr3b], .dropdown-item:hover[b-k1qjkmrr3b] {
            color: #1e2125;
            background-color: #e9ecef;
        }

    a:hover[b-k1qjkmrr3b] {
        color: #0a58ca;
    }

    .darksearch[b-k1qjkmrr3b] {
        width: 30%;
        font-size: 15px;
    }

    .darksearch[b-k1qjkmrr3b] {
        width: 30%;
        font-size: 13px;
    }
}




@media (max-width: 645px) {

    .darkadd[b-k1qjkmrr3b] {
        width: 52%;
        font-size: 13px;
    }

    .artist-heading[b-k1qjkmrr3b] {
        font-size: 18px;
    }

    .dropdown-menu[b-k1qjkmrr3b] {
        width: 95.9vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width: 590px) {
    .darkadd[b-k1qjkmrr3b] {
        width: 55%;
        font-size: 13px;
    }

    .artist-heading[b-k1qjkmrr3b] {
        font-size: 17px;
    }

    .two-spans-groups[b-k1qjkmrr3b] {
        display: grid;
        grid-template-columns: 35% 65%;
    }

    .dropdown-menu[b-k1qjkmrr3b]{
        width: 95.4vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width: 500px) {
    .customer-appoint[b-k1qjkmrr3b] {
        display: grid;
        grid-template-columns: 80% 15%;
    }

    .right-detail[b-k1qjkmrr3b] {
        gap: 1%;
        justify-content: end;
    }


    .paginationpara[b-k1qjkmrr3b], .pagination-last[b-k1qjkmrr3b], .inquiry-heading[b-k1qjkmrr3b], .addinquirybtn[b-k1qjkmrr3b], .table-container[b-k1qjkmrr3b], .table tbody[b-k1qjkmrr3b] {
        font-size: 12px;
    }

    .dropdown-item[b-k1qjkmrr3b] {
        display: block;
        width: 100%;
        padding: .40rem 1rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 14px;
    }

    .bill input[type=text][b-k1qjkmrr3b] {
        width: 65%;
        font-size: 11px;
    }

    .darksearch[b-k1qjkmrr3b] {
        width: 32%;
        font-size: 12px;
    }

    .dropdown-menu[b-k1qjkmrr3b]{
        width: 94.4vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }

    .darkadd[b-k1qjkmrr3b] {
        width: 55%;
        font-size: 12px;
    }
}

@media (max-width: 478px) {


    .darkadd[b-k1qjkmrr3b] {
        width: 57%;
        font-size: 10px;
    }

    .artist-heading[b-k1qjkmrr3b] {
        font-size: 16px;
    }

    .name[b-k1qjkmrr3b] {
        font-weight: 600;
        font-size: 13px;
        line-height: 19.49px;
    }

    .time[b-k1qjkmrr3b], .address[b-k1qjkmrr3b] {
        font-size: 12px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-k1qjkmrr3b] {
        font-size: 11px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .paginationpara[b-k1qjkmrr3b], .pagination-last[b-k1qjkmrr3b], .inquiry-heading[b-k1qjkmrr3b], .addinquirybtn[b-k1qjkmrr3b], .table-container[b-k1qjkmrr3b], .table tbody[b-k1qjkmrr3b] {
        font-size: 11px;
    }


    .bill input[type=text][b-k1qjkmrr3b] {
        width: 71%;
        font-size: 11px;
    }

    .darksearch[b-k1qjkmrr3b] {
        width: 36%;
        font-size: 12px;
    }

    .nav-section[b-k1qjkmrr3b] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 5px 5px 5px;
    }

    .filter-left i[b-k1qjkmrr3b] {
        font-size: 13px;
    }

    .dropdown-menu[b-k1qjkmrr3b] {
        width: 94.3vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -3px;
        margin-top: 38px;
    }
}

@media (max-width:390px) {
    .name[b-k1qjkmrr3b] {
        font-weight: 600;
        font-size: 12px;
        line-height: 19.49px;
    }

    .time[b-k1qjkmrr3b], .address[b-k1qjkmrr3b] {
        font-size: 10px;
        font-weight: 400;
        line-height: 14.62px;
    }

    .amount[b-k1qjkmrr3b] {
        font-size: 10px;
        font-weight: 700;
        color: #14AD5A;
        line-height: 14.62px;
    }

    .body-main[b-k1qjkmrr3b] {
        max-height: 60vh;
        padding: 10px 10px;
    }

    .appoint-count[b-k1qjkmrr3b] {
        font-size: 11px;
        font-weight: 600;
    }

    .day[b-k1qjkmrr3b] {
        font-size: 11px;
    }

    .filter-text[b-k1qjkmrr3b] {
        font-size: 13px;
        font-weight: 400;
    }

    .filter-left i[b-k1qjkmrr3b] {
        font-size: 11px;
    }

    .prev-two[b-k1qjkmrr3b] {
        border: none;
        font-weight: 600;
        font-size: 15px;
        background-color: #FFFF;
    }


    .darkadd[b-k1qjkmrr3b] {
        width: 60%;
        font-size: 9px;
    }

    .artist-heading[b-k1qjkmrr3b] {
        font-size: 14px;
    }


    .col-3[b-k1qjkmrr3b] {
        flex: 0 0 auto;
        width: 30%;
    }

    .paginationnnav[b-k1qjkmrr3b] {
        display: flex;
        padding: 10px 10px;
        position: absolute;
        bottom: 2vh;
        width: 90%;
    }

    .two-spans-groups[b-k1qjkmrr3b] {
        display: grid;
        grid-template-columns: revert;
    }


    .dropdown-item[b-k1qjkmrr3b] {
        display: block;
        width: 100%;
        padding: .40rem 0.2rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        font-size: 12px;
    }

    .bill input[type=text][b-k1qjkmrr3b] {
        width: 72%;
        font-size: 10px;
    }

    .darksearch[b-k1qjkmrr3b] {
        width: 36%;
        font-size: 10px;
    }

    .dropdown-menu[b-k1qjkmrr3b] {
        width: 92.6vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}

@media (max-width:360px) {
    .you[b-k1qjkmrr3b] {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .bill input[type=text][b-k1qjkmrr3b] {
        width: 90%;
        font-size: 10px;
    }

    .darksearch[b-k1qjkmrr3b] {
        width: 48%;
        font-size: 10px;
    }

    .darkadd[b-k1qjkmrr3b] {
        width: 60%;
        font-size: 8px;
    }

    .artist-heading[b-k1qjkmrr3b] {
        font-size: 13px;
    }

    .dropdown-menu[b-k1qjkmrr3b] {
        width: 92vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }
}


@media (max-width:320px) {
    .bill input[type=text][b-k1qjkmrr3b] {
        width: 90%;
        font-size: 9px;
    }

    .filter-text[b-k1qjkmrr3b] {
        font-size: 11px;
        font-weight: 400;
    }

    .filter-left i[b-k1qjkmrr3b] {
        font-size: 11px;
    }

    .appoint-count[b-k1qjkmrr3b] {
        font-size: 10px;
        font-weight: 600;
    }

    .day[b-k1qjkmrr3b] {
        font-size: 10px;
    }

    .nav-section[b-k1qjkmrr3b] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0px 0px 8px 0px;
    }

    .dropdown-menu[b-k1qjkmrr3b] {
        width: 91.2vw;
        padding: 15px;
        border: 1px solid #eaeaea;
        right: -2px;
        margin-top: 30px;
    }

    .darkadd[b-k1qjkmrr3b] {
        width: 63%;
        font-size: 8px;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
.settings-container[b-97uixqvl59] {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
}

.settings-title[b-97uixqvl59] {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--our-border-color);
    color: var(--our-text-primary);
}

.settings-card[b-97uixqvl59] {
    background-color: var(--our-card-background);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px var(--shadow-color, rgba(0, 0, 0, 0.1));
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.settings-section[b-97uixqvl59] {
    margin-bottom: 30px;
}

.settings-section h3[b-97uixqvl59] {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    color: var(--our-text-primary);
}

.settings-section h4[b-97uixqvl59] {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 500;
    color: var(--our-text-secondary);
}

/* Theme option styles */
.theme-options[b-97uixqvl59], .mode-options[b-97uixqvl59] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.theme-option[b-97uixqvl59] {
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 180px;
    background-color: var(--our-element-background);
}

.theme-option:hover[b-97uixqvl59] {
    transform: translateY(-3px);
    border-color: var(--accent-color-light);
}

.theme-option.active[b-97uixqvl59] {
    border-color: var(--accent-color);
}

.theme-preview[b-97uixqvl59] {
    height: 100px;
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-preview[b-97uixqvl59] {
    background-color: #1a1a1a;
}

.light-preview[b-97uixqvl59] {
    background-color: #f1f1f1;
}

.theme-preview-inner[b-97uixqvl59] {
    width: 80%;
    height: 60%;
    border-radius: 3px;
}

.dark-preview .theme-preview-inner[b-97uixqvl59] {
    background-color: #333;
    border: 1px solid #444;
}

.light-preview .theme-preview-inner[b-97uixqvl59] {
    background-color: #fff;
    border: 1px solid #ddd;
}

.theme-label[b-97uixqvl59] {
    text-align: center;
    font-weight: 500;
    margin-top: 5px;
    color: var(--our-text-primary);
}

.theme-label i[b-97uixqvl59] {
    margin-right: 5px;
}

/* Color option styles */
.color-options[b-97uixqvl59] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.color-option[b-97uixqvl59] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
    background-color: var(--our-element-background);
}

.color-option.active[b-97uixqvl59] {
    background-color: var(--accent-color-transparent);
}

.color-preview[b-97uixqvl59] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
    border: 2px solid transparent;
}

.color-option.active .color-preview[b-97uixqvl59] {
    border-color: var(--our-text-primary);
}

.color-option span[b-97uixqvl59] {
    font-size: 14px;
    color: var(--our-text-primary);
}

/* Setting rows */
.setting-row[b-97uixqvl59] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--our-border-color);
}

.setting-label[b-97uixqvl59] {
    display: flex;
    flex-direction: column;
}

.setting-label span:first-child[b-97uixqvl59] {
    color: var(--our-text-primary);
}

.setting-description[b-97uixqvl59] {
    font-size: 12px;
    color: var(--our-text-secondary);
    margin-top: 5px;
}

/* Toggle switch */
.toggle-switch[b-97uixqvl59] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input[b-97uixqvl59] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-97uixqvl59] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--our-element-background);
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider[b-97uixqvl59]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--our-text-primary);
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-97uixqvl59] {
    background-color: var(--accent-color);
}

input:checked + .toggle-slider[b-97uixqvl59]:before {
    transform: translateX(26px);
}

/* Action buttons */
.settings-actions[b-97uixqvl59] {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

/* Button styles if needed */
.btn[b-97uixqvl59] {
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary[b-97uixqvl59] {
    background-color: var(--accent-color);
    color: white;
    border: none;
}

.btn-secondary[b-97uixqvl59] {
    background-color: transparent;
    color: var(--our-text-primary);
    border: 1px solid var(--our-border-color);
}

.btn:hover[b-97uixqvl59] {
    opacity: 0.9;
    transform: translateY(-2px);
} 
/* /Pages/WalkIns.razor.rz.scp.css */
.walkinpage[b-7j1mi8qmqv] {
    background-color: #fff;
    color: #000;
    /*    margin-top: 7vh;*/
    height: 88vh;
    /*    padding: 0px 30px 10px 30px;*/
    border-radius: 0 0 0 50px;
}




.artist-top[b-7j1mi8qmqv] {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
}

.artist-heading h3[b-7j1mi8qmqv] {
    margin-bottom: 0;
}

.artist-heading[b-7j1mi8qmqv] {
    display: flex;
    gap: 5%;
}

.addartistbtn[b-7j1mi8qmqv] {
    width: fit-content;
    margin-bottom: 2%;
    background-color: #000;
    color: #fff;
}


.modal[b-7j1mi8qmqv] {
    display: block;
    background-color: rgba(10,10,10,.8);
}



/* Table styles */
.table-container[b-7j1mi8qmqv] {
    max-height: 75vh;
    overflow-y: auto;
    width: 100%;
    /* border: 1px solid #ccc;*/
}

    .table-container table[b-7j1mi8qmqv] {
        width: 100%;
        border-collapse: collapse;
    }

table tbody tr:hover[b-7j1mi8qmqv] {
    background-color: #d9d9d9;
    color: #111;
}

.table-container th[b-7j1mi8qmqv],
.table-container td[b-7j1mi8qmqv] {
    padding: 15px 10px;
    text-align: center;
    /*  border-bottom: 1px solid #ddd;*/
}

.table-container .center-td[b-7j1mi8qmqv] {
    text-align: center;
}

.table-container thead[b-7j1mi8qmqv] {
    background-color: #fff;
    color: #111 !important;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #000;
}

.table[b-7j1mi8qmqv] {
    margin-bottom: 0 !important;
}





/*Pagination*/
.pagination[b-7j1mi8qmqv] {
    justify-content: end;
}

.page-item.active .page-link[b-7j1mi8qmqv] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}


.pagination[b-7j1mi8qmqv] {
    margin-bottom: 0;
}

.paginationnnav[b-7j1mi8qmqv] {
    display: flex;
    padding: 10px 25px;
    position: absolute;
    bottom: 2vh;
    width: 90%;
}




[b-7j1mi8qmqv]::-webkit-scrollbar {
    width: 10px;
    border: none;
}

[b-7j1mi8qmqv]::-webkit-scrollbar-track {
    background: grey;
    border: none;
}

[b-7j1mi8qmqv]::-webkit-scrollbar-thumb {
    background-color: black;
    border: none;
    border-radius: 5px !important;
}

.modal-title[b-7j1mi8qmqv] {
    width: 100%;
}

.closeicon[b-7j1mi8qmqv] {
    font-size: 24px;
    margin-left: 80%;
    cursor: pointer;
}

.modal-dialog[b-7j1mi8qmqv] {
    margin-top: 8%;
    margin-left: 25%;
}

.modal-content[b-7j1mi8qmqv] {
    background-color: var(--our-modal-color);
    width: 800px;
    background-color: #fff;
    color: #000;
}

label[b-7j1mi8qmqv] {
    margin-bottom: 3px;
    padding-left: 5px;
}

.cusnameinput[b-7j1mi8qmqv], .remarksinput[b-7j1mi8qmqv], .bookedbyinput[b-7j1mi8qmqv], .companyidinput[b-7j1mi8qmqv], .priceinput[b-7j1mi8qmqv], .appointtimeinput[b-7j1mi8qmqv], .appointdateinput[b-7j1mi8qmqv], .artistnameinput[b-7j1mi8qmqv] {
    border-radius: 5px;
    width: 100%;
    height: 4.5vh;
    background-color: #bec4c1;
    padding-left: 10px;
}

.remarksinput[b-7j1mi8qmqv] {
    height: 10vh !important;
}

.addproductbtnmodal[b-7j1mi8qmqv] {
    border: none;
    width: 5vw;
    height: 4vh;
    background-color: #b8e3cd;
}

.page-item.active .page-link[b-7j1mi8qmqv] {
    background-color: #000;
    color: #fff;
    border: 1px solid black;
}

.styled-table[b-7j1mi8qmqv] {
    width: 100%;
    border-collapse: collapse;
    background-color: #d3d3d3;
}

    .styled-table th[b-7j1mi8qmqv], .styled-table td[b-7j1mi8qmqv] {
        border: 1px solid #000;
        padding: 8px;
        text-align: center;
    }

    .styled-table th[b-7j1mi8qmqv] {
        background-color: #d3d3d3;
    }

.closing-balance td[b-7j1mi8qmqv] {
    border: none;
    text-align: right;
    padding-right: 20px;
    background-color: #d3d3d3;
}

.paginationnnav[b-7j1mi8qmqv] {
    display: flex;
}







/*==============================================================================================================================================================*/
/* ----------------------------------------------------- All Media Queries for appointment page ---------------------------------------------------------------*/
/*==============================================================================================================================================================*/

@media (max-width: 1700px) {

    .walkinbtn[b-7j1mi8qmqv] {
        font-size: 18px;
    }
    .table-container[b-7j1mi8qmqv] {
        height: 65vh;
    }
    .paginationpara[b-7j1mi8qmqv], .pagination-last[b-7j1mi8qmqv], .walkin-heading[b-7j1mi8qmqv], .addwalkinbtn[b-7j1mi8qmqv], .table-container[b-7j1mi8qmqv], .table tbody[b-7j1mi8qmqv] {
        font-size: 18px;
    }
}

/*Macbook pro 15.3 inch | 1440 * 900 vp */

@media (max-width: 1440px) {
    .table-container[b-7j1mi8qmqv] {
        height: 65vh;
    }
    .paginationpara[b-7j1mi8qmqv], .pagination-last[b-7j1mi8qmqv], .walkin-heading[b-7j1mi8qmqv], .addwalkinbtn[b-7j1mi8qmqv], .table-container[b-7j1mi8qmqv], .table tbody[b-7j1mi8qmqv] {
        font-size: 16px;
    }
}
@media (max-width: 1200px) {
    .table-container[b-7j1mi8qmqv] {
        height: 65vh;
    }

    .paginationpara[b-7j1mi8qmqv], .pagination-last[b-7j1mi8qmqv], .walkin-heading[b-7j1mi8qmqv], .addwalkinbtn[b-7j1mi8qmqv], .table-container[b-7j1mi8qmqv], .table tbody[b-7j1mi8qmqv] {
        font-size: 15px;
    }
}
@media (max-width: 1024px) {
    .table-container[b-7j1mi8qmqv] {
        height: 65vh;
    }

    .paginationpara[b-7j1mi8qmqv], .pagination-last[b-7j1mi8qmqv], .walkin-heading[b-7j1mi8qmqv], .addwalkinbtn[b-7j1mi8qmqv], .table-container[b-7j1mi8qmqv], .table tbody[b-7j1mi8qmqv] {
        font-size: 14px;
    }
}
@media (max-width: 900px) {
.walkinpage[b-7j1mi8qmqv]{
    padding:5px 15px;
}
}



    @media (max-width: 768px) {
        /*    .walkinpage {
        background-color: #fff;
        color: #000;
        margin-top: 7vh;
        height: 86vh;
        padding: 10px 10px 10px 30px;
        border-radius: 50px 0 0 50px;
    }*/
        .artist-top[b-7j1mi8qmqv] {
            padding: 5px 0 0 5px;
            padding: 5px;
            font-weight: 500;
        }

        .artist-heading[b-7j1mi8qmqv] {
            font-size: 20px;
        }

        .nav-section[b-7j1mi8qmqv] {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 0px 15px 5px 15px;
        }

        .addbtn[b-7j1mi8qmqv] {
            display: flex;
            justify-content: end;
            align-items: end;
            /*        padding: 0 15px;*/
        }

        .darkadd[b-7j1mi8qmqv] {
            width: 40%;
        }

        .title-top[b-7j1mi8qmqv] {
            text-align: center;
        }

        .prev-button[b-7j1mi8qmqv] {
            border: none;
            background-color: #FFFF;
            font-weight: 600;
            font-size: 20px;
        }



        .title-top[b-7j1mi8qmqv] {
            align-items: center;
            align-content: center;
        }

        .appoint-heading[b-7j1mi8qmqv] {
            font-size: 19px;
        }

        .filter-section[b-7j1mi8qmqv] {
            padding: 5px 0;
            display: grid;
            grid-template-columns: 6% 64% 30%;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        }

        .filter-text[b-7j1mi8qmqv] {
            font-size: 14px;
            font-weight: 400;
        }

        .btn-previous-two[b-7j1mi8qmqv] {
            display: flex;
            justify-content: end;
        }


        .prev-two[b-7j1mi8qmqv] {
            border: none;
            font-weight: 600;
            font-size: 20px;
            background-color: #FFFF;
        }

        .dropdown[b-7j1mi8qmqv] {
            display: flex;
            justify-content: end;
            position: relative;
            padding: 0 15px;
        }


        .dropdown-menu[b-7j1mi8qmqv] {
            width: 88vw;
            padding: 15px;
            border: 1px solid #eaeaea;
            right: 0;
            margin-top: 38px;
        }

        .you[b-7j1mi8qmqv] {
            display: flex;
            width: 100%;
            justify-content: end;
        }

        Input styling
        input[type="date"][b-7j1mi8qmqv],
        input[type="text"][b-7j1mi8qmqv],
        select[b-7j1mi8qmqv] {
            width: 100%;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 13px;
            background-color: #f9f9f9;
        }

            input[type="date"]:focus[b-7j1mi8qmqv],
            input[type="text"]:focus[b-7j1mi8qmqv],
            select:focus[b-7j1mi8qmqv] {
                outline: none;
                border-color: #6a5acd;
                box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2);
            }

        Placeholder styling
        input[b-7j1mi8qmqv]::placeholder {
            color: #999;
            font-size: 12px;
        }

        Filter button styling
        .filter-button[b-7j1mi8qmqv] {
            background-color: #6a5acd;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px;
            font-weight: 600;
            width: 100%;
            margin-top: 10px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .filter-button:hover[b-7j1mi8qmqv] {
            background-color: #5a4cbc;
        }

        Dropdown toggle button styling
        .prev-two[b-7j1mi8qmqv] {
            border: none;
            font-weight: 600;
            font-size: 20px;
            background-color: transparent;
            color: #333;
            padding: 5px 10px;
            transition: color 0.2s ease;
        }

        .prev-two:hover[b-7j1mi8qmqv] {
            color: #6a5acd;
        }

        /*     Animation for dropdown */
        @keyframes fadeIn-b-7j1mi8qmqv {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dropdown-menu.show[b-7j1mi8qmqv] {
            animation: fadeIn-b-7j1mi8qmqv 0.2s ease-out forwards;
        }

        .start[b-7j1mi8qmqv], .end[b-7j1mi8qmqv], .transaction[b-7j1mi8qmqv], .bill[b-7j1mi8qmqv] {
            display: grid;
            grid-template-columns: repeat(2,1fr);
        }

            .bill input[type=text][b-7j1mi8qmqv] {
                width: 60%;
                font-size: 12px;
            }

            .bill input[b-7j1mi8qmqv]::placeholder {
                text-align: center;
            }

            .transaction select[b-7j1mi8qmqv] {
                width: 60%;
                display: flex;
                margin-left: 25%;
            }


        .top-body[b-7j1mi8qmqv] {
            display: flex;
            justify-content: space-between;
            margin: 1% 0;
        }

        .day[b-7j1mi8qmqv] {
            font-size: 12px;
        }

        .appoint-count[b-7j1mi8qmqv] {
            font-size: 12px;
            font-weight: 600;
        }


        .right-detail[b-7j1mi8qmqv] {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10%;
        }

            .right-detail img[b-7j1mi8qmqv] {
                width: 12%;
                height: 30%;
            }

        .name[b-7j1mi8qmqv] {
            font-weight: 600;
            font-size: 16px;
            line-height: 19.49px;
        }

        .time[b-7j1mi8qmqv], .address[b-7j1mi8qmqv] {
            font-size: 12px;
            font-weight: 400;
            line-height: 14.62px;
        }

        .amount[b-7j1mi8qmqv] {
            font-size: 12px;
            font-weight: 700;
            color: #14AD5A;
            line-height: 14.62px;
        }

        .customer-appoint[b-7j1mi8qmqv] {
            display: grid;
            grid-template-columns: 75% 20%;
            background-color: #F7F6FE;
            border-radius: 20px;
            gap: 5%;
            padding: 1% 2%;
            margin-top: 1%;
            /*border-bottom: 1px solid #ccc;*/
        }

        .customer-appoint-wrapper[b-7j1mi8qmqv] {
            height: 53vh;
            overflow-y: scroll;
            margin-top: 1%;
            padding-right: 5px;
        }

        .body-main[b-7j1mi8qmqv] {
            max-height: 60vh;
        }

        .filter-left[b-7j1mi8qmqv], .filter-title[b-7j1mi8qmqv] {
            display: flex;
            align-items: center;
            padding: 0 15px;
        }

        .searchisbutton[b-7j1mi8qmqv] {
            display: flex;
            justify-content: end;
            margin-bottom: 5px;
        }

        .darksearch[b-7j1mi8qmqv] {
            width: 30%;
        }

        .darkadd[b-7j1mi8qmqv] {
            font-size: 16px;
        }

        .bill[b-7j1mi8qmqv] {
            margin-bottom: 5px;
        }


        .two-spans-groups[b-7j1mi8qmqv] {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .paginationnnav[b-7j1mi8qmqv] {
            margin-bottom: 0;
        }
    }


    @media (max-width: 645px) {

        .dropdown-menu[b-7j1mi8qmqv] {
            width: 87vw;
        }
        .darkadd[b-7j1mi8qmqv]{
            width:50%;
        }
    }

    @media (max-width: 590px) {
        .darkadd[b-7j1mi8qmqv] {
            width: 50%;
            font-size: 15px;
        }

        .two-spans-groups[b-7j1mi8qmqv] {
            display: grid;
            grid-template-columns:  60% 40%;
        }
    }

    @media (max-width: 500px) {
        .customer-appoint[b-7j1mi8qmqv] {
            display: grid;
            grid-template-columns: 80% 15%;
        }

        .right-detail[b-7j1mi8qmqv] {
            gap: 1%;
            justify-content: end;
        }

        .dropdown-menu[b-7j1mi8qmqv] {
            width: 85.5vw;
        }
    }

    @media (max-width: 478px) {
        .darkadd[b-7j1mi8qmqv] {
            width: 60%;
        }
    }

    /*@media (max-width: 768px) {
    .table-container {
        width: 100%;
        max-height: 60vh;
    }

    .text-end {
        width: 100%;
    }

    .paginationnnav {
        width: 100%;
    }

    .walkinbtn {
        width: 20%;
    }
}

@media (max-width: 644px) {
    .walkinbtn {
        width: 30%;
    }
}



*/









    /*

All Screen Sizes we design :::



     Large Desktops and Laptops :
@media (max-width: 1440px) {
  
    }


 Desktops and Laptops :
@media (max-width: 1200px) {
  
}



 Small Desktops and Large Tablets :
@media (max-width: 992px) {
 
}



 Tablets and Large Smartphones :
@media (max-width: 768px) {

}



 Portrait Tablets and Small Smartphones :
@media (max-width: 600px) {

}



 Smartphones :
@media (max-width: 480px) {
  
}



 Small Smartphones :
@media (max-width: 360px) {
    
}

*/
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-z8c63bfjge] {
/*    position: relative;*/
    display: grid;
    overflow: hidden;
    grid-template-columns:9% 90.5%;
    background-color:#000;
/*    flex-direction: column;*/
}
    /*.page{
        display:grid;
        grid-template-columns:10% 90%;
    }
*/
    nav[b-z8c63bfjge] {
        position: sticky;
        top: -14px;
        top:0;
        overflow: hidden;
        /* border-radius: 20px; */
    }

footer[b-z8c63bfjge] {
    position: fixed;
    bottom: 0;
    font-size: 12px;
    right:20px;
}
.sidebar[b-z8c63bfjge]{
    background-color:#000;
}
footer p[b-z8c63bfjge] {
    margin-bottom: 0;
}

.mainofmain[b-z8c63bfjge] {
    background-color: #000;
  /*  width:100vw;*/
}

/*main {
    flex: 1;
}
*/

.flex-end[b-z8c63bfjge]{
    background-color:transparent;
}
.top-row[b-z8c63bfjge] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-z8c63bfjge]  a, .top-row .btn-link[b-z8c63bfjge] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-z8c63bfjge] {
        overflow: hidden;
        text-overflow: ellipsis;
    }


[b-z8c63bfjge]::-webkit-scrollbar {
    width: 5px; /* vertical scrollbar width */
}

/* Track (background) */
[b-z8c63bfjge]::-webkit-scrollbar-track {
    background: #ecebeb;
    border-radius: 10px;
}

/* Thumb (scroll indicator) */
[b-z8c63bfjge]::-webkit-scrollbar-thumb {
    background: #030303;
    border-radius: 15px;
}

    /* Thumb on hover */
    [b-z8c63bfjge]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


   

/* Media Queries for Responsiveness */
@media only screen and (max-width:1440px) {
    footer[b-z8c63bfjge] {
        position: fixed;
        bottom: 0;
        font-size: 10px;
    }
}
@media only screen and (max-width:1200px){
    footer[b-z8c63bfjge] {
        position: fixed;
        bottom: 0;
        font-size: 8px;
    }
}
@media only screen and (max-width:1024px) {
    footer[b-z8c63bfjge] {
        position: fixed;
        bottom: 0;
        font-size: 7px;
    }
}
/*@media only screen and (max-width: 768px) {
    .page {
        flex-direction: column; 
    }

    .sidebar {*/
        /*        width: 100%; */
        /*height: auto;*/ /* Height adjusts to content */
        /*position: static;*/ /* Remove sticky positioning */
    /*}

    .top-row {
        position: relative;*/ /* Remove sticky positioning */
        /*justify-content: space-between;*/ /* Distribute items evenly */
    /*}

        .top-row ::deep a, .top-row .btn-link {
            margin-left: 0.5rem;

        }

    footer {
        position: relative; 
        left: 0; 
        width: 100%; 
        text-align: center;
    }
}*/

/* Media Query for Larger Screens */
/*@media (min-width: 769px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }


}
*/


@media only screen and (max-width:768px){
    .mainofmain[b-z8c63bfjge]{
        width:100vw;
        border-radius:0;
    }
    .sidebar[b-z8c63bfjge]{
        position:absolute;
    }
  

    .overlay-nav-menu[b-z8c63bfjge] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); 
/*        background-color: #94afd778;*/
        z-index: 1000;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

        .overlay-nav-menu.visible[b-z8c63bfjge] {
            transform: translateX(0); /* Slide in */
        }

    .nav-scrollable[b-z8c63bfjge] {
        width: 250px;
        background-color: #fff; 
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        height: 100%; 
        overflow-y: auto;
    }

    .close-button[b-z8c63bfjge] {
        position: absolute;
        top: 1vh;
        right: 5%;
        background: none;
        border: none;
        font-size: 20px;
        color: black;
        cursor: pointer;
        z-index: 1001; 
    }
    .close-button i[b-z8c63bfjge]{
        font-size:26px;
    }
}

@media only screen and (max-width:450px) {
.close-button i[b-z8c63bfjge]{
    font-size:22px;
}
}
/* /Shared/NavMenu.razor.rz.scp.css */
html[b-0uwijr811p] {
    margin: 0px;
    padding: 0px;
    font-family: 'Proxima Nova Condensed', sans-serif !important;
    background-color: #000;
}

.calender-main[b-0uwijr811p] {
    background-color: #F8F8F8;
    position: absolute;
    width: 75%;
    height: 97%;
    right: 0px;
    margin-top: 4px;
    margin-right: 5%;
    border-radius: 20px 0px 0px 20px;
}

.top-calender[b-0uwijr811p] {
    width: 92%;
    padding: 5px;
    right: 0;
    position: absolute;

}

.right-top[b-0uwijr811p] {
    align-content: center;
}

.title-calender[b-0uwijr811p] {
    font-weight: 600;
    font-size: 22px;
    padding:10px;
}

.calender-outerlayer[b-0uwijr811p] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.left-top[b-0uwijr811p] {
    display: flex;
    gap: 5%;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}
.bell-icon i[b-0uwijr811p], .message-icon i[b-0uwijr811p]{
    font-size:22px;
}
.left-top i[b-0uwijr811p] {
    cursor: pointer;
}
.logo-outer i[b-0uwijr811p]{
    font-size:18px;
}

.thi-display[b-0uwijr811p] {
    display: flex;
    align-items: flex-end;
border:1px solid #D9D9D9;
    border-radius: 10px;
padding:5px;
}


/*Old CSS*/

.navbar-toggler[b-0uwijr811p] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-0uwijr811p] {
    height: 3rem;
    background-color: rgba(0,0,0);
    padding: 0;
}

.navbar-brand[b-0uwijr811p] {
    font-size: 1.1rem;
}

.menuhfour[b-0uwijr811p] {
    font-size: 18px;
}

.nav-log[b-0uwijr811p] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-item[b-0uwijr811p] {
   /* font-size: 1rem;*/
    display: flex;
    align-items: center;
    justify-content: center;
}



    .nav-item[b-0uwijr811p]  a {
        color: #d7d7d7;
        border-radius:8px;
        height: 3rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }


        .nav-item[b-0uwijr811p]  a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }
        .nav-item[b-0uwijr811p]  a.active:hover {
           /* background-color: rgba(255,255,255,0.25);*/
           background-color:transparent;
            color: white;
        }

        .nav-item[b-0uwijr811p]  a:hover {
          /*  background-color: rgba(255,255,255,0.1);*/
            color: white;
        }

.imagediv img[b-0uwijr811p] {
    width: 3.5%;
    margin-right: 1%;
    border-radius: 10px;
}

.imagediv a[b-0uwijr811p] {
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    font-size: 24px;
    color: rgba(255,255,255,0.7);
    padding:5px;
}

.iconsflex i[b-0uwijr811p] {
    font-size: 26px;
    padding-top: 15px;
}

.select-wrapper[b-0uwijr811p] {
    position: relative;
}

.dropdown-menu[b-0uwijr811p] {
    position: absolute;
    top: 100%;
    right: 0; /* Instead of left: 83% */
    min-width: 200px; /* Ensure consistent width */
    margin-top: 0.5rem; /* Add some space from the triggering element */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    z-index: 1000;

    transform-origin: top right;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: block;
    visibility: hidden;
}


    .dropdown-menu.show[b-0uwijr811p] {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }
.dropdown-item[b-0uwijr811p] {
    display: block;
    width: 100%;
    color: #111 !important;
    font-weight: 400;
    font-size: 20px !important;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    cursor: pointer;
    
}

.dropdown-item[b-0uwijr811p] {
    padding: 0.6rem 1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 4px; /* Rounded corners for items */
    margin: 0.2rem;
}

    .dropdown-item:hover[b-0uwijr811p] {
        background-color: rgba(0,0,0,0.05);
        transform: translateX(3px); /* Subtle movement on hover */
    }

    .dropdown-item:active[b-0uwijr811p] {
        background-color: rgba(0,0,0,0.1);
    }

    /* Add indicator for selected company */
    .dropdown-item.selected[b-0uwijr811p] {
        font-weight: 600;
        background-color: rgba(0,0,0,0.03);
    }

    /* Add a nice divider between items */
    .dropdown-item:not(:last-child)[b-0uwijr811p] {
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }


.navbar[b-0uwijr811p]{
    height:7vh;
}
.navbardiv[b-0uwijr811p] {
    width: 95%;
}

.profilepart[b-0uwijr811p] {
    width: 100%;

}

.profileimg[b-0uwijr811p] {
    width: 35px !important;
    height: 35px;
    border: 1px solid black;
    border-radius: 50% !important;
}

.dashboardbox[b-0uwijr811p] {
    color: #fff;
}

.select-wrapper[b-0uwijr811p] {
    position: relative;
    display: inline-block;
    margin-top: -2vh;
}

.custom-select[b-0uwijr811p] {
    width: 10.3vw !important;
    font-size: 18px;
}

.select-icon.disabled[b-0uwijr811p] {
    display: none;
}

.select-icon[b-0uwijr811p] {
    position: absolute;
    left: 10px;
    font-size: 28px;
    cursor: pointer !important;
}

.profiletexts[b-0uwijr811p] {
    line-height: 0px;
    margin-top: 15px;
}

    .profiletexts select[b-0uwijr811p] {
        border: none;
        width: 100%;
        height: 5vh;
        color: #fff;
        background-color: transparent;
    }

        .profiletexts select option[b-0uwijr811p] {
            color: #111;
        }

    .profiletexts .mainname[b-0uwijr811p] {
        font-size: 20px;
        font-weight: 600;
    }

    .profiletexts .belowname[b-0uwijr811p] {
        font-size: 14px;
    }

.greendot[b-0uwijr811p] {
    color: #0b7d09;
}



.dropdown-content[b-0uwijr811p] {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content p[b-0uwijr811p] {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content p:hover[b-0uwijr811p] {
            background-color: #f1f1f1;
            cursor: pointer;
        }

.nav-scrollable[b-0uwijr811p] {
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-scrollable[b-0uwijr811p] {
    height: 100vh;
    overflow-y: auto;
    background-color: rgb(0, 0, 0);
}



.flex-column[b-0uwijr811p]{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
    gap:  3%;
    position: fixed;
    overflow-y: scroll;
    width: 8vw;
    margin-top: 8%;
    overflow-x: hidden;
}





.nav-link[b-0uwijr811p] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    text-decoration: none;
}

.company-img[b-0uwijr811p] {
    width: 6.5vw;
    height: 4vh;
    top: 25px;
    position: fixed;
    left: 15px;
    background-color:transparent;
}
    .company-img img[b-0uwijr811p]{
        height:100%;
        width:100%;
    }


.nav-link i[b-0uwijr811p] {
    font-size: 22px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: #d7d7d7;
}

.nav-link .nav-text[b-0uwijr811p] {
    position: absolute;
    opacity: 0;
    transform: translateY(20px);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    margin: auto;
    word-break: break-word;
}
    .nav-link:hover i[b-0uwijr811p] {
            transform: translateY(-25px) scale(0.8);
            opacity: 0;
            background:none;
            background-color:none;
        }

.nav-link:hover .nav-text[b-0uwijr811p] {
    opacity: 1;
    transform: translateY(0);
    color: white;
    background: none;
    background-color: none;
    word-break: break-word;
}


.nav-item-dashboard[b-0uwijr811p]{
    margin-top:46vh;
}



/* Entire scrollbar */
.flex-column[b-0uwijr811p]::-webkit-scrollbar {
    width: 2px; /* vertical scrollbar width */
}

/* Track (background) */
.flex-column[b-0uwijr811p]::-webkit-scrollbar-track {
    background: #ecebeb;
    border-radius: 10px;
}

/* Thumb (scroll indicator) */
.flex-column[b-0uwijr811p]::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 15px;
}

    /* Thumb on hover */
    .flex-column[b-0uwijr811p]::-webkit-scrollbar-thumb:hover {
/*        background: #555;*/
    }










@media (max-width: 1700px) {
    .nav-item-dashboard[b-0uwijr811p] {
        margin-top: 44vh;
    }
}

@media (max-width: 1500px) {
    .nav-item-dashboard[b-0uwijr811p] {
        margin-top: 60vh;
    }
}

@media (max-width: 1440px) {
    .nav-item-dashboard[b-0uwijr811p] {
        margin-top: 60vh;
    }
}


@media (max-width: 1350px) {
    .nav-item-dashboard[b-0uwijr811p] {
        margin-top: 60vh;
    }
}

@media (max-width: 1250px) {
    .nav-item-dashboard[b-0uwijr811p] {
        margin-top: 60vh;
    }

    .flex-column[b-0uwijr811p]{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 74vh;
        gap: 3%;
        position: fixed;
        overflow-y: scroll;
        width: 8vw;
        margin-top: 8%;
        overflow-x: hidden;
    }

}















/* Responsive styles */
/*@media (max-width: 1700px) {
    .nav-item ::deep a {
        height: 2.5rem;
        width: 7rem;
    }
   .flex-column{
       gap:2%;
   }
    .nav-link i{
        font-size:26px;
    }
    .nav-link .nav-text {
        font-size: 16px;
    }
}

@media (max-width: 1440px) {
    .nav-item ::deep a {
        height: 2.3rem;
        width: 6rem;
    }

    .flex-column {
        gap: 2%;
    }

    .nav-link i {
        font-size: 22px;
    }

    .nav-link .nav-text {
        font-size: 14px;
    }
}



@media (max-width: 1024px) {
    .nav-item ::deep a {
        height: 2rem;
        width: 5rem;
    }

    .flex-column {
        gap: 2%;
    }

    .nav-link i {
        font-size: 20px;
    }

    .nav-link .nav-text {
        font-size: 12px;
    }
    .company-img{
        width:8vw;
        height:4.5vh;
        top:3vh;
        left:1vw;
    }
}
@media (max-width:800px){
    .company-img {
        width: 9vw;
        height: 4vh;
        top: 3vh;
        left: 0.5vw;
    }
    .nav-link i{
        font-size:18px;
    }
    .nav-link .nav-text{
        font-size:14px;
    }
}*/


    @media (max-width: 768px) {
        .nav-item[b-0uwijr811p]  a {
            color: #d7d7d7;
            border-radius: 8px;
            height: 5vh;
            width: 22vw;
            display: flex;
            align-items: center;
            justify-content: start;
            padding:10px;
        }

        .flex-column[b-0uwijr811p] {
            gap: 2vh;
            width:25vw;
            align-items:start;
            background-color:#000;
            position:relative;
            height:85vh;
        }


        .nav-link i[b-0uwijr811p] {
            font-size: 22px;
        }

        .nav-link .nav-text[b-0uwijr811p] {
        font-size:14px;
            justify-content: start;
            display: flex;
            align-items: start;
        }

        .company-img[b-0uwijr811p] {
        width:18vw;
        height:5vh;
        top:1vh;
        left:2vw;
        }
      
        .nav-link .nav-text[b-0uwijr811p]{
            font-size:14px;
        }
         .menu-list-mbl i[b-0uwijr811p]{
            font-size:20px;
        }
        .page-name[b-0uwijr811p]{
            font-size:16px;
        }
        .menu-list-mbl[b-0uwijr811p] {
            display: flex;
            gap: 10px;
        }
        .menu-item-mbl[b-0uwijr811p]{
            width:100%;
        }
       .page-name[b-0uwijr811p]{
           padding:5PX;
       }
       .nav-scrollable[b-0uwijr811p]{
           border-radius: 0;
       }
        .menu-item-mbl a[b-0uwijr811p] {
            text-decoration: none;
            color: #fff;
            width: 100%;
            justify-content: start;
            align-items: center;
            padding: 10px;
        }
      
    }

    
    @media (max-width: 600px) {
        
         .company-img[b-0uwijr811p] {
            width: 18vw;
            height: 4vh;
            top: 1vh;
            left: 1vw;
        }
         .page-name[b-0uwijr811p]{
             font-size:14px;
         }
        
         
    }

@media (max-width: 568px) {

    .company-img[b-0uwijr811p] {
        width: 18vw;
        height: 4.5vh;
        top: 1vh;
        left: 1vw;
    }

    .page-name[b-0uwijr811p] {
        font-size: 14px;
    }
    .menu-list-mbl[b-0uwijr811p]{
        gap:5px;
    }
    .menu-item-mbl i[b-0uwijr811p]{
        font-size:18px;
    }
    .nav-item a[b-0uwijr811p]{
        padding:5px;

    }
    .flex-column[b-0uwijr811p]{
        gap:1.5vh;
        width:28vw;
    }
}

@media (max-width: 450px) {

    .company-img[b-0uwijr811p] {
        width: 18vw;
        height: 4vh;
        top: 1vh;
        left: 3vw;
    }

    .page-name[b-0uwijr811p] {
        font-size: 12px;
    }

    .menu-list-mbl[b-0uwijr811p] {
        gap: 5px;
    }

    .menu-item-mbl i[b-0uwijr811p] {
        font-size: 16px;
    }

    .nav-item a[b-0uwijr811p] {
        padding: 0px;
    }

    .flex-column[b-0uwijr811p] {
        gap: 1.5vh;
        width: 30vw;
    }
    .menu-item-mbl a[b-0uwijr811p] {
        text-decoration: none;
        color: #fff;
        width: 100%;
        justify-content: start;
        align-items: center;
        padding:5px;
    }
}

@media (max-width: 380px) {

    .company-img[b-0uwijr811p] {
        width: 18vw;
        height: 4vh;
        top: 1vh;
        left: 3vw;
    }

    .page-name[b-0uwijr811p] {
        font-size: 12px;
    }

    .menu-list-mbl[b-0uwijr811p] {
        gap: 5px;
    }

    .menu-item-mbl i[b-0uwijr811p] {
        font-size: 16px;
    }

    .nav-item a[b-0uwijr811p] {
        padding: 0px;
    }

    .flex-column[b-0uwijr811p] {
        gap: 1.5vh;
        width: 34vw;
    }

    .menu-item-mbl a[b-0uwijr811p] {
        text-decoration: none;
        color: #fff;
        width: 100%;
        justify-content: start;
        align-items: center;
        padding: 5px;
    }
}

@media (max-width: 320px) {

    .company-img[b-0uwijr811p] {
        width: 22vw;
        height: 4vh;
        top: 1vh;
        left: 3vw;
    }

    .page-name[b-0uwijr811p] {
        font-size: 12px;
    }

    .menu-list-mbl[b-0uwijr811p] {
        gap: 5px;
    }

    .menu-item-mbl i[b-0uwijr811p] {
        font-size: 16px;
    }

    .nav-item a[b-0uwijr811p] {
        padding: 0px;
    }

    .flex-column[b-0uwijr811p] {
        gap: 1.5vh;
        width: 38vw;
    }

    .menu-item-mbl a[b-0uwijr811p] {
        text-decoration: none;
        color: #fff;
        width: 100%;
        justify-content: start;
        align-items: center;
        padding: 5px;
    }
}

@media (max-width:290px){
    .flex-column[b-0uwijr811p]{
        width:40vw;
    }
    .company-img[b-0uwijr811p]{
        width:24vw;
    }
    .menu-item-mbl a[b-0uwijr811p] {
        padding: 2px;
    }
}


.company-selector[b-0uwijr811p] {
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    background-color: var(--our-element-background, #f8f9fa);
    margin-bottom: 10px;
}

.company-display[b-0uwijr811p] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-logo[b-0uwijr811p] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--our-card-background, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-logo img[b-0uwijr811p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-logo i[b-0uwijr811p] {
    font-size: 20px;
    color: var(--our-text-secondary, #6c757d);
}

.company-info[b-0uwijr811p] {
    flex: 1;
}

.company-name[b-0uwijr811p] {
    font-weight: 500;
    color: var(--our-text-primary, #212529);
}

.company-location[b-0uwijr811p] {
    font-size: 0.8rem;
    color: var(--our-text-secondary, #6c757d);
}

.company-dropdown[b-0uwijr811p] {
    background-color: var(--our-card-background, #fff);
    border: 1px solid var(--our-border-color, #dee2e6);
    border-radius: 4px;
    margin: 5px 0;
    max-height: 300px;
    overflow-y: auto;
}

.company-option[b-0uwijr811p] {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--our-border-color, #dee2e6);
}

.company-option:last-child[b-0uwijr811p] {
    border-bottom: none;
}

.company-option:hover[b-0uwijr811p] {
    background-color: var(--our-element-background, #f8f9fa);
}

.company-logo-small[b-0uwijr811p] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--our-card-background, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.company-logo-small img[b-0uwijr811p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-logo-small i[b-0uwijr811p] {
    font-size: 16px;
    color: var(--our-text-secondary, #6c757d);
}

.company-details[b-0uwijr811p] {
    flex: 1;
}

.no-companies[b-0uwijr811p] {
    padding: 10px;
    text-align: center;
    color: var(--our-text-secondary, #6c757d);
}
/* /Shared/TopNav.razor.rz.scp.css */
/*html {
    margin: 0px;
    padding: 0px;
    font-family: 'Proxima Nova Condensed', sans-serif !important;
    background-color: #000;
}*/

.calender-main[b-qg8lc7jqxo] {
    background-color: #F8F8F8;
    position: absolute;
    width: 75%;
    height: 97%;
    right: 0px;
    margin-top: 4px;
    margin-right: 5%;
    border-radius: 20px 0px 0px 20px;
}

.navbar[b-qg8lc7jqxo] {
    height: 8vh;
    background-color: #F8F8F8;
    color: #000;
    margin-top: 2vh;
    border-radius: 50px 0 0 0;
    border-bottom: 1px solid #fff;
}

.top-calender[b-qg8lc7jqxo] {
        width: 100%;
        padding:5px 25px;
}

.right-top[b-qg8lc7jqxo] {
    align-items: center;
    color:#000;
    display:flex;
}

.title-calender[b-qg8lc7jqxo] {
    font-weight: 600;
    font-size: 24px;
}

.calender-outerlayer[b-qg8lc7jqxo] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.left-top[b-qg8lc7jqxo] {
    display: flex;
    gap: 5%;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}

.bell-icon i[b-qg8lc7jqxo], .message-icon i[b-qg8lc7jqxo] {
    font-size: 22px;
}

.left-top i[b-qg8lc7jqxo] {
    cursor: pointer;
}

.logo-outer img[b-qg8lc7jqxo]{
    height:30px;
    width:30px;
}

.thi-display[b-qg8lc7jqxo] {
    display: flex;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    padding: 5px;
    justify-content: space-around;
    align-items:center;
    font-weight:600;
    cursor:pointer;
}









.top-row[b-qg8lc7jqxo] {
    padding: 0;
}



.dropdown-menu[b-qg8lc7jqxo] {
  /*  position: absolute;
    top: 100%;
    right: 0; 
    min-width: 200px;
    margin-top: 0.5rem; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1000;
    transform-origin: top right;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: block;
    visibility: hidden;*/
}


    .dropdown-menu.show[b-qg8lc7jqxo] {
     /*   transform: scale(1);
        opacity: 1;
        visibility: visible;*/
    }

.dropdown-item[b-qg8lc7jqxo] {
    /*display: block;
    width: 100%;
    color: #111 !important;
    font-weight: 400;
    font-size: 20px !important;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    cursor: pointer;*/
}

.dropdown-item[b-qg8lc7jqxo] {
   /* padding: 0.6rem 1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 4px; 
    margin: 0.2rem;*/
}

/*    .dropdown-item:hover {
        background-color: rgba(0,0,0,0.05);
        transform: translateX(3px); 
    }

    .dropdown-item:active {
        background-color: rgba(0,0,0,0.1);
    }

    .dropdown-item.selected {
        font-weight: 600;
        background-color: rgba(0,0,0,0.03);
    }

    .dropdown-item:not(:last-child) {
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }*/

.dropdown-content[b-qg8lc7jqxo] {
 /*   display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;*/
}

 /*   .dropdown-content p {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content p:hover {
            background-color: #f1f1f1;
            cursor: pointer;
        }
*/




/*Old CSS*/

/*.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}


.navbar-brand {
    font-size: 1.1rem;
}

.menuhfour {
    font-size: 18px;
}

.nav-log {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-item {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}



    .nav-item ::deep a {
        color: #d7d7d7;
        border-radius: 8px;
        height: 2.5rem;
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }


        .nav-item ::deep a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .nav-item ::deep a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

.imagediv img {
    width: 3.5%;
    margin-right: 1%;
    border-radius: 10px;
}

.imagediv a {
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    font-size: 24px;
    color: rgba(255,255,255,0.7);
    padding: 5px;
}

.iconsflex i {
    font-size: 26px;
    padding-top: 15px;
}

.select-wrapper {
    position: relative;
}



.navbardiv {
    width: 95%;
}

.profilepart {
    width: 100%;
}

.profileimg {
    width: 35px !important;
    height: 35px;
    border: 1px solid black;
    border-radius: 50% !important;
}

.dashboardbox {
    color: #fff;
}

.select-wrapper {
    position: relative;
    display: inline-block;
    margin-top: -2vh;
}

.custom-select {
    width: 10.3vw !important;
    font-size: 18px;
}

.select-icon.disabled {
    display: none;
}

.select-icon {
    position: absolute;
    left: 10px;
    font-size: 28px;
    cursor: pointer !important;
}

.profiletexts {
    line-height: 0px;
    margin-top: 15px;
}

    .profiletexts select {
        border: none;
        width: 100%;
        height: 5vh;
        color: #fff;
        background-color: transparent;
    }

        .profiletexts select option {
            color: #111;
        }

    .profiletexts .mainname {
        font-size: 20px;
        font-weight: 600;
    }

    .profiletexts .belowname {
        font-size: 14px;
    }

.greendot {
    color: #0b7d09;
}






.flex-column {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 86vh;
    gap: 1%;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    text-decoration: none;
}

    .nav-link i {
        font-size: 20px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        color: #d7d7d7;
    }

    .nav-link .nav-text {
        position: absolute;
        width: 100%;
        text-align: center;
        opacity: 0;
        transform: translateY(20px);
        font-size: 15px;
        font-weight: 500;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        white-space: nowrap;
        left: 0;
        right: 0;
        margin: auto;
    }



    .nav-link:hover i {
        transform: translateY(-25px) scale(0.8);
        opacity: 0;
    }

    .nav-link:hover .nav-text {
        opacity: 1;
        transform: translateY(0);
        color: white;
    }
*/




/* Responsive styles */
@media only screen and (max-width:1920px) {
    .title-calender[b-qg8lc7jqxo] {
        font-size: 34px;
    }

    .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
        font-size: 32px;
    }

    .logo-outer img[b-qg8lc7jqxo] {
        height: 50px;
        width: 50px;
    }

    .text-outer[b-qg8lc7jqxo] {
        font-size: 24px;
    }

    .top-calender[b-qg8lc7jqxo] {
        padding: 5px 25px;
    }

    .thi-display[b-qg8lc7jqxo] {
        padding: 5px;
    }
}
@media only screen and (max-width:1800px) {
    .logo-outer img[b-qg8lc7jqxo] {
        height: 45px;
        width: 45px;
    }
    .text-outer[b-qg8lc7jqxo] {
        font-size: 23px;
    }
    .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
        font-size: 30px;
    }
}


    @media only screen and (max-width:1700px) {
        .title-calender[b-qg8lc7jqxo] {
            font-size: 28px;
        }

        .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
            font-size: 26px;
        }

        .logo-outer img[b-qg8lc7jqxo] {
            height: 40px;
            width: 40px;
        }

        .text-outer[b-qg8lc7jqxo] {
            font-size: 20px;
        }

        .top-calender[b-qg8lc7jqxo] {
            padding: 5px 25px;
        }

        .thi-display[b-qg8lc7jqxo] {
            padding: 5px;
        }
    }

    @media only screen and (max-width:1550px) {
        .title-calender[b-qg8lc7jqxo] {
            font-size: 26px;
        }

        .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
            font-size: 24px;
        }

        .logo-outer img[b-qg8lc7jqxo] {
            height: 35px;
            width: 35px;
        }

        .text-outer[b-qg8lc7jqxo] {
            font-size: 18px;
        }

        .top-calender[b-qg8lc7jqxo] {
            padding: 5px 25px;
        }

        .thi-display[b-qg8lc7jqxo] {
            padding: 5px;
        }
    }




    @media only screen and (max-width:1440px) {
        .title-calender[b-qg8lc7jqxo] {
            font-size: 24px;
        }

        .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
            font-size: 22px;
        }

        .logo-outer img[b-qg8lc7jqxo] {
            height: 30px;
            width: 30px;
        }

        .text-outer[b-qg8lc7jqxo] {
            font-size: 16px;
        }

        .top-calender[b-qg8lc7jqxo] {
            padding: 5px 25px;
        }

        .thi-display[b-qg8lc7jqxo] {
            padding: 2px 5px;
        }
    }

    @media only screen and (max-width:1200px) {
        .title-calender[b-qg8lc7jqxo] {
            font-size: 20px;
        }

        .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
            font-size: 18px;
        }

        .logo-outer img[b-qg8lc7jqxo] {
            height: 30px;
            width: 30px;
        }

        .text-outer[b-qg8lc7jqxo] {
            font-size: 15px;
        }

        .top-calender[b-qg8lc7jqxo] {
            padding: 5px 25px;
        }

        .thi-display[b-qg8lc7jqxo] {
            padding: 0 5px;
        }
    }

    @media only screen and (max-width:768px) {
       .navbar[b-qg8lc7jqxo]{
           border-radius:0;
           margin-top:0;
       }
        .text-outer[b-qg8lc7jqxo]{
            display:none;
        }
        .logo-outer img[b-qg8lc7jqxo]{
            width:40px;
            height:30px;
        }
        .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
            font-size: 20px;
        }

     
        .text-outer[b-qg8lc7jqxo] {
            font-size: 16px;
        }

        .top-calender[b-qg8lc7jqxo] {
            padding: 0px 30px 0 10px;
        }

        .thi-display[b-qg8lc7jqxo] {
            padding: 2px 10px;
        }

        .left-top[b-qg8lc7jqxo] {
            gap: 10%;
        }
        .toggle-button[b-qg8lc7jqxo]{
            font-size:20px;
            border:none;
            padding:0 10px;
        }
        .navbar[b-qg8lc7jqxo]{
            height:7vh;
        }

    }


    @media only screen and (max-width:600px) {
        .title-calender[b-qg8lc7jqxo] {
            font-size: 19px;
        }

        .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
            font-size: 18px;
        }

        .logo-outer img[b-qg8lc7jqxo] {
            height: 30px;
            width: 30px;
        }

        .text-outer[b-qg8lc7jqxo] {
            font-size: 14px;
        }

        .top-calender[b-qg8lc7jqxo] {
            padding: 0px 30px 0 10px;
        }

        .thi-display[b-qg8lc7jqxo] {
            padding: 2px 5px;
        }

        .left-top[b-qg8lc7jqxo] {
            gap: 8%;
        }
    }

    @media only screen and (max-width:480px) {
        .title-calender[b-qg8lc7jqxo] {
            font-size: 18px;
        }

        .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
            font-size: 16px;
        }

        .logo-outer img[b-qg8lc7jqxo] {
            height: 25px;
            width: 25px;
        }

        .text-outer[b-qg8lc7jqxo] {
            font-size: 12px;
        }

        .top-calender[b-qg8lc7jqxo] {
            padding: 0px 30px 0 10px;
        }

        .thi-display[b-qg8lc7jqxo] {
            padding: 0px 5px;
        }

        .left-top[b-qg8lc7jqxo] {
            gap: 8%;
        }
    }

    @media only screen and (max-width:380px) {
        .title-calender[b-qg8lc7jqxo] {
            font-size: 17px;
        }

        .message-icon i[b-qg8lc7jqxo], .bell-icon i[b-qg8lc7jqxo] {
            font-size: 15px;
        }

        .logo-outer img[b-qg8lc7jqxo] {
            height: 25px;
            width: 25px;
        }

        .text-outer[b-qg8lc7jqxo] {
            font-size: 11px;
        }

        .top-calender[b-qg8lc7jqxo] {
            padding: 0px 30px 0 10px;
        }

        .thi-display[b-qg8lc7jqxo] {
            padding: 0px 5px;
        }

        .left-top[b-qg8lc7jqxo] {
            gap: 8%;
        }
    }