b
/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}


.vendors-container {
    width:100%;
    float: right;
    display: flex;
    box-sizing: border-box;
    padding: 20px 20px;
    flex-direction: column;
}


nav {
    background-color: #23A6F0;
    color: #fff;
    width: calc(100% - 321px);
    float: right;
    display: flex;
    box-sizing: border-box;
    padding: 25px 0px;
    width:100%;
    flex-direction: column;
    border-radius: 10px;
}

.timing-container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

    .timing-container select {
        padding: 5px;
        width: 200px;
        border: 1px solid #ccc;
        border-radius: 3px;
        border-radius: 5px;
        font-size: 18px;
        outline: none;
        color:black;
    }

.dayDropdown {
    margin-right: 10px;
}

.openingTimeDropdown {
    margin-right: 10px;
}

.closingTimeDropdown {
    margin-right: 10px;
}








.switch {
    position: relative;
    display: flex;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #655466;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 27px;
        left: 7px;
        bottom: 5px;
        background-color: white;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #058d16;
}

    input:checked + .slider:before {
        transform: translateX(32px);
    }

.slider.round {
    border-radius: 34px;
    width: 72px;
    height: 37px;
}

    .slider.round:before {
        border-radius: 50%;
    }




.timing-container .s_btns ul {
    display: flex;
    justify-content: center;
    align-items: center;
}


    .timing-container .s_btns ul .submit {
        padding: 10px 24px;
        background: #FFC100;
        border-radius: 6px;
        font-size:18px;
        color: white;
    }

.timing-container .s_btns {
    margin-left: 20px;
}

    .timing-container .s_btns ul {
        list-style-type: none;
        cursor: pointer;
        display: flex;
        gap: 10px;
    }

        .timing-container .s_btns ul .cancel {
            padding: 10px 24px;
            background: red;
            font-size:18px;
            border-radius: 6px;
            color: white;
        }

.vendors-container .search-vendors .search-input {
    border-radius: 8px;
    width: fit-content;
    float: right;
    border: 1px solid rgb(243 231 231);
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: end;
}

    .vendors-container .search-vendors .search-input #filter {
        background: #FFC100;
        padding: 10px 16px;
        font-size: 18px;
        color: white;
        cursor: pointer;
    }


    .vendors-container .search-vendors .search-input input {
        padding: 1px 7px;
        width: 330px;
        border-radius: 6px;
        border: none;
        outline: none;
        font-size: 18px;
        border-radius: 6px 0px 6px 0px;
    }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: none; /* Border ko hatane ke liye */
    text-align: left;
    padding: 8px;
    font-size:18px;
}

    td img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

tr.heading-row {
    height: 10px; /* Heading aur user information ke beech mein gap */
}

tr {
    background-color: #FAFAFA;
}

    tr:hover {
        background-color: #ddd;
    }



.nxt-prv-ch-container ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0px;
    gap: 15px;
    list-style-type: none;
}

    .nxt-prv-ch-container ul li a {
        text-decoration: none;
        color: black;
        margin: 0px 10px;
    }



    .nxt-prv-ch-container ul li {
        border: 1px solid #cdcdcd;
        padding: 10px 10px;
        border-radius: 5px;
        cursor: pointer;
    }

        .nxt-prv-ch-container ul li input {
            padding: 5px 5px;
            border: 1px solid #cdcdcd;
            text-align: center;
            outline: none;
        }



        .nxt-prv-ch-container ul li:nth-child(2) {
            border: none;
        }



tbody td .select-button {
    background: transparent;
    border: none;
    margin-left: 15px;
}

    tbody td .select-button i {
        font-size: 18px;
        padding: 0px 10px;
        cursor: pointer;
    }

tbody .option-main {
    position: absolute;
    background: white;
    display: flex;
    border: 1px solid #b7b4b4;
}

    tbody .option-main ul {
        display: flex;
        flex-direction: column;
        list-style-type: none;
    }

#option-main {
    display: none;
    transition: 0.8s;
}

tbody .option-main ul li {
    padding: 10px 10px;
    cursor: pointer;
    border-bottom: 1px solid;
}

    tbody .option-main ul li a {
        text-decoration: none;
        color: black;
    }





.load {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1000px 104px;
    position: relative;
    overflow: hidden;
    min-height: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 20px 0px;
}