
::-webkit-scrollbar{
    width: 15px;
    cursor: pointer;
}
::-webkit-scrollbar-track{
    background-color:#f6f6f679;
}
::-webkit-scrollbar-thumb{
    background-color: #79153b;
}
:root{

    --main-font :'Roboto', sans-serif;



    --background-color: #f3e4ea;

    --background-sidebar:#8a1947;

    --background-light:#fff3e7;



    --border-input-color:#f3e4ea;

    --background-input-color:#f3e4ea;



    --background-btn:#470e25;

    --background-hover-btn:#8b7e55 ;



    --number-of-chair-color:#8a1947;

    

    --main-padding:0px 50px 0 50px;

    --main-transition: .2s ;



}

.removeBtn{
    background-color: #f73c68;
    padding: 12px 30px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 20px;
    transition: .3s;
    color: white;

}
.removeBtn:hover{
    color: white;
    background-color: #f73c6873;
}

.guests-list{

}
*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}



body{font-family: var(--main-font);background-color: #f3e4ea;}

a{

    text-decoration: none;

}

.sidebar{max-width: 140px;z-index: 100;padding: 18px;height:auto;display: flex;justify-content: center;align-content: center;flex-direction: column;background-color: #8a1947;position: fixed;height: 100vh;}

.landing-page .sidebar .link {

display: flex;

margin: 20px 0;

justify-content: center;

align-content: center;

flex-direction: column;

cursor: pointer;

text-align: center;

transition: .3s;
}

.landing-page .sidebar .link a img{

    max-width: 66%;

}

.landing-page .sidebar .link:hover{

    opacity: .5;

}

.landing-page .sidebar .link p{

    font-size: 12px;

    font-family: 'Roboto', sans-serif;

    text-transform: uppercase;

    margin-top: 7px;

    color: #ffffff;

}

/* ----------logo -------------- */

.landing-page .content header {width: 100%;padding: 0px 50px 0 50px;height: 120px;background-color: #79153b;}

.landing-page .content header img{

    width: 150px; 

}

/* ----------logo -------------- */
.closePOP{
    font-size: 20px;
    cursor: pointer;
    transition: var(--main-transition);
}
.closePOP:hover{
    color: rgba(0, 0, 0, 0.541);
}

@media (max-width : 1025px){

    .sidebar {
        height: 100vh;
        min-width: 100px ;

    }

    .sidebar .link a img {

        max-width: 65% !important;

    }



}

@media (max-width : 493px){

    .sidebar {

        min-width: 75px;

    }

    .landing-page .sidebar .link p {

        font-size: 11px;

    }

}