@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=VT323&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Montserrat', sans-serif;
    font-family: 'Ubuntu', sans-serif;
}

body {
    --dot-bg: white;
    --dot-color: red;
    --dot-size: 2.4px;
    --dot-space: 22px;
    background:
        linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
        linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
        var(--dot-color);
    transition: background-color .5s;


}


.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

.container .add-client,
.container .search-section,
.container .user-details {
    height: 33.3333333333%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.container .add-client,.search-section{
    margin-bottom:10px ;
}


.container .add-client .button {
    border: none;
    background-color: transparent;
    margin-top: 0.5rem;
    cursor: pointer;
}

.container .add-client .input-field input {
    background-color: green;
    color: white;
    padding: 20px;
    font-size: 20px;
    width: 500px;
    text-align: center;
}

.input-field input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-size: 20px;
    text-align: center;
}

.add-client .button svg {
    height: 40px;
    /* margin-top: -4rem; */
}

.container .add-client form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* add member */




/* search section */

.search-section .window {
    background-color: white;
    box-shadow: 20px 20px 0px 0px #9896a3;
    position: fixed;

}

.search-section .title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background-color: #f9f4f8;
    border-bottom: solid 0.1rem #dcdcdc;
    height: 100%;
    padding: 1rem 1rem;
}

.search-section .dots {
    display: flex;
    align-items: center;
}

.search-section .dots span {
    height: 1rem;
    width: 1rem;
    margin-right: 0.6rem;
    background-color: #cacaca;
    border-radius: 50%;
}

.search-section .title-bar .title {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #333;
    font-weight: bold;
    margin-right: 20rem;
}

.search-section .window-body {
    padding: 4rem 10rem;
    background-color: rgb(169, 5, 5);
}

.search-section .window-body .member-input-field input {
    background-color: white;
    color: gray;
    padding: 1rem;
    width: 30rem;
    font-family: 'VT323', monospace;
}

.search-section .window .window-body .input-container,
.search-icon,
.arrow-icon {
    display: flex;
    background-color: white;
    justify-content: center;
}

.search-section .window .window-body .input-container .search-icon,
.arrow-icon {
    height: 50px;
}


.member-input-field {
    position: relative;
}

.input-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
}

.search-icon {
    margin-right: 5px;
}

.search-icon i {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    font-size: 2rem;
    /* Adjust the icon size as needed */
    color: yellow;
    /* Set the color to yellow */
    margin-right: 5px;
    /* Add some space between the icon and the input */
}

#member-search-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 5px;
    font-size: 1.4rem;
}

.arrow-icon {
    cursor: pointer;
    padding: 0 20px;
    width: 150px;
}

.arrow-icon img {
    background: #FBB03B;
    width: 100%;
    padding: 0 10px;
}

ul#member-suggestions {
    font-family: 'Montserrat', sans-serif;
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background-color: white;
    z-index: 1;
}

ul#member-suggestions li {
    padding: 5px;
    cursor: pointer;
}

ul#member-suggestions li:hover {
    background-color: #f0f0f0;
}


/* search section */









/* User Details Form */



.user-details form {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 40px;
    justify-content: center;
    align-items: center;
}




.submit-button {
    background-color: red;
    color: white;
    padding: 1rem 2rem;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
}




.input-field input {
    color: white;
    font-size: 1.4rem;
    margin-right: 1rem;
    border: none;
    font-family: 'Arvo', serif;
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;


}

.input-field input::placeholder {
    color: white;
}

.quantity-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-minus,
.quantity-plus {
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quantity-minus i,
.quantity-plus i {
    font-size: 2rem;
}

.quantity-plus {
    margin-right: 1rem;

}


.quantity-minus {
    background-color: red;
    color: white;
}

.quantity-plus {
    background-color: green;
    color: white;
}

#full-name {
    padding: 1rem;
    width: 20rem;
    background-color: grey;
}

#quantity {
    background-color: grey;
    padding: 1rem;
    border: none;
    text-align: center;
    width: 6rem;
}

#total-rs,
#adv {
    padding: 1rem;
    background-color: grey;
    border: none;
    text-align: center;
    width: 6rem;
}


/* Hide the increment and decrement buttons */
#adv::-webkit-inner-spin-button,
#adv::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

#total-rs::-webkit-inner-spin-button,
#total-rs::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

#quantity::-webkit-inner-spin-button,
#quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}


/* User Details Form */




.alert-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #f44336;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    z-index: 9999;
}




/* Add this CSS at the end of your existing stylesheet */

/* Styles for screens smaller than 1250px */
@media (max-width: 1250px) {

    .menu-icon {
        display: block;
        /* Show the hamburger icon */
    }

    .container {
        flex-direction: column;
        /* Stack elements vertically */
        width: 100%;
        /* Occupy the full width of the screen */
        margin-left: 0;
        /* Remove left margin */
    }

    /* Center the elements vertically within the container */
    .container .add-client,
    .container .search-section,
    .container .user-details {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    /* Adjust the width of input fields */
    .container .add-client .input-field input {
        width: 100%;
        padding: 0.5rem;
        /* Occupy the full width of the container */
    }

    .search-section .window .window-body .member-input-field input {
        width: 100%;
        /* Occupy the full width of the container */
    }




    .members-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0;
    }

    .members-content {
        width: 100%;
        max-width: 100%;
    }

    .members-table {
        width: 100%;
        max-width: 100%;
        margin: 0 auto; /* Add this to horizontally center the table */
    }

    .members-table {
        width: 100%;
        /* Make the table occupy the full width of its container */
        max-width: 100%;
        /* Ensure the table doesn't overflow */
    }

    .members-table th,
    .members-table td {
        white-space: nowrap;
        /* Prevent text from wrapping within table cells */
    }

    .members-table th {
        position: static;
        /* Remove sticky headers for smaller screens */
        top: auto;
    }

    .action-button {
        font-size: 14px;
        /* Reduce font size for action buttons on smaller screens */
    }
}