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


/* ------------------------------------------ SCROLLBAR ------------------------------------------*/

::-webkit-scrollbar {
    width: 20px;
    transition: .4s ease-in-out;
}
  
::-webkit-scrollbar-track {
    background-color: transparent;
    transition: .4s ease-in-out;
}
   
::-webkit-scrollbar-thumb {
    background-color: var(--accent2); 
    transition: .4s ease-in-out;
    border-top: solid 18px var(--bg-color);
    border-bottom: solid 18px var(--bg-color);
    border-left: solid 8px var(--bg-color);
    border-right: solid 8px var(--bg-color);
    border-radius: 10px;
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
    background: #856d546b; 
}

/* ------------------------------------------ FONTS ------------------------------------------*/

@font-face {
    font-family: AestheticRegular;
    src: url(fonts/AestheticRegular-8M5dM.ttf);
}
@font-face {
    font-family: Brownhill;
    src: url(fonts/Brownhill\ Script.ttf);
}
@font-face {
    font-family: ClassyVogue;
    src: url(fonts/Classy\ Vogue\ Stylish\ Serif\ Font.otf);
}


/* ------------------------------------------ BODY ------------------------------------------*/

body{
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    font-family: ClassyVogue;
    background-image: url(imgs/batthern.png);
    animation:transitionIn 0.75s;
    transition: .4s ease-in-out;
}
@keyframes transitionIn{
    from{opacity: 0;}
    to{opacity: 1;}
}


/* ------------------------------------------ MAIN ------------------------------------------*/

main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin: 1.5em;
}


/* ------------------------------------------ ACCOUNT ------------------------------------------*/

.account{
    width: 100%;
    height: 5em;
    display: flex;
    align-self: flex-start;
    align-items: center;
    justify-content: end;
}

.account_svg{
    width: 18px;
    height: 18px;
    fill: var(--account-svg-fill);
}

.account_button{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75em;
    border: 2px solid var(--border);
    background-color: var(--bg-color);
    outline: none;
    margin: 1em -1em 1em 1em;
    border-radius: 10px;
    filter: var(--drop-shadow);
    transition: .2s ease-in-out;
    cursor: pointer;
}
.account_button:hover{
    filter: none;
}
.account_button:focus{
    background-color: var(--button-focus-hover);
    filter: none;
}


/* ------------------------------------------ ACCOUNT ------------------------------------------*/

.account_menu{
    opacity: 0;
    position: absolute;
    margin-top: 12.5em;
    margin-right: -0.75em;
    display: none;
    flex-direction: column;
    row-gap: .25em;
    align-items: end;
    padding: 0.7em 0.7em 0.7em 0.7em;
    justify-content: center;
    width: 190px;
    height: max-content;
    border: 1px solid var(--border);
    background-color: var(--bg-color);
    border-radius: 15px;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
    transition: .2s ease-in-out;
    z-index: 5;
}
.divider{
    width: 100%;
    border: 1px solid var(--border);
}
.sales, .logout, .starongit{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 1.25em;
    padding: 0.25em;
    transition: .2s ease-in-out;
    cursor: pointer;
    border-radius: 5px;
    color: var(--black);
}
.sales:hover, .logout:hover{
    background-color: var(--button-focus-hover);
    letter-spacing: 0.15em;
}
.starongit:hover{
    background-color: var(--button-focus-hover);
    letter-spacing: 0.05em;
}
.star{
    width: 16px;
    height: 16px;
    transition: .2s ease-in-out;
}
/* .starongit:hover .star{
    fill: yellow;
    filter: url(#sofGlow);
} */


/* ------------------------------------------ MAIN-TITLE ------------------------------------------*/

.main_title{
    width: 100%;
    margin-bottom: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: .4s ease-in-out;
}

.hotel{
    font-family: AestheticRegular;
    font-size: 3.5em;
    color: var(--black);
}
.management{
    color: var(--heading-color);
    opacity: 0.4;
    font-family: Brownhill;
    font-size: 3.5em;
    transform: translateY(-0.6em) translateX(-0.2em);
}


/* ------------------------------------------ TABLES-DATA ------------------------------------------*/

.tables_data{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
    padding: 0 2em 0.5em 2em;
}


/* ------------------------------------------ LOCATION-BUTTONS ------------------------------------------*/

.location_buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1em;
}

.hall, .garden, .back{
    outline: none;
    padding: 0.75em;
    border: 2px solid var(--border);
    background-color: var(--bg-color);
    transition: .4s ease-in-out;
    cursor: pointer;
    font-size: 1.15em;
    font-family: ClassyVogue;
    border-radius: 10px;
    color: var(--black);
}
.hall:hover, .garden:hover, .back:hover{
    background-color: var(--button-focus-hover);
}
.hall:focus, .garden:focus, .back:focus{
    color: black;
    background-color: var(--button-focus-accent);
}


/* ------------------------------------------ INDICATORS ------------------------------------------*/

.indicators{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 1.75em;
    row-gap: 0.75em;
    flex-wrap: wrap;
}

.empty, .running, .pending{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5em;
    transition: .4s ease-in-out;
    color: var(--black);
}

.empty_color_indicator, .running_color_indicator, .pending_color_indicator{
    width: 1em;
    height: 1em;
    border-radius: 50%;
}

.empty_color_indicator{
    background-color: #808080;
}
.running_color_indicator{
    background-color: #32CD32;
}
.pending_color_indicator{
    background-color: #FFFF00;
}


/* ------------------------------------------ CUSTOM-DROPDOWN ------------------------------------------*/

.reference_dropdown{
    display: none;
    align-items: center;
    justify-content: end;
    flex-direction: row;
    z-index: 99;
}
.custom_dropdown {
    position: relative;
    width: 10em;
    border: 2px solid var(--border);
    background-color: var(--bg-color);
    color: var(--black);
    border-radius: 10px;
    font-size: 0.95em;
    transition: .2s ease-in-out;
}
.custom_dropdown:hover{
    background-color: var(--button-focus-hover);
}
.selected_option {
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}
.options {
    width: 100%;
    opacity: 0;
    display: block;
    visibility: hidden;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0.4em 1em 0 0;
    border: 2px solid var(--border);
    background-color: var(--bottom-bar-bg);
    box-shadow: 0 0.125rem 0.5rem var(--lighter-drop-shadow);
    border-radius: 10px;
    overflow: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
}
.options.active {
    width: 100%;
    opacity: 1;
    display: block;
    visibility: visible;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0.4em 1em 0 0;
    border: 2px solid var(--border);
    background-color: var(--bottom-bar-bg);
    box-shadow: 0 0.125rem 0.5rem var(--lighter-drop-shadow);
    border-radius: 10px;
    overflow: hidden;
    transition: opacity 0.2s ease-in-out;
}
.options_table {
    margin-top: 3.5em;
}
.options li {
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}
.options li:hover {
    margin: 5px;
    border-radius: 5px;
    background-color: var(--button-focus-hover);
}
.custom_arrow {
    position: absolute;
    margin-right: 15px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--accent1);
}


/* ------------------------------------------ TABLES ------------------------------------------*/

.tables{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    outline: 3px solid var(--border);
    border-radius: 20px;
    padding: 1.5em 0em 1.5em 1.5em;
    gap: 1.5em;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 1.5em;
    transition: .4s ease-in-out;
}

.table{
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    flex-grow: 1;
    font-size: 1.5em;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    width: 420px;
    min-height: 220px;
    height: 420px;
    color: var(--black);
    aspect-ratio: 1/1;
    background-color: var(--tables-bg-color);
    border: 3px solid var(--border);
    filter: var(--drop-shadow1);
    border-radius: 15px;
    transition: .2s ease-in-out;
    cursor: pointer;
}
.table:hover{
    filter: none;
    scale: 0.995;
}

.addTable{
    width: 100%;
    height: 3.5em;
    background-color: transparent;
    border: 3px solid var(--border);
    border-radius: 10px;
    outline: none;
    font-family: ClassyVogue;
    color: var(--black);
    font-size: 1.2em;
    transition: .4s ease-in-out;
    cursor: pointer;
}
.addTable:hover{
    color: black;
    background-color: var(--accent2)
}

.switch_state{
    position: relative;
    display: flex;
    width: 100%;
    height: 0.75em;
    justify-content: end;
    padding-right: 0.5em;
    margin-top: -2em;
    z-index: 99;
}
.switch_state_svg{
    fill: var(--black);
    transition: .4s ease-in-out;
}
.switch_state_btn{
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}
.switch_state_btn:hover{
    opacity: 0.5;
}


/* ------------------------------------------ SWITCH-STATE ------------------------------------------*/

.bulb_running{
    fill: rgb(50, 205, 50, 0.8);
    filter: url(#green-glow);
    transition: .4s ease-in-out;
}
.bulb_pending{
    fill: rgb(255, 255, 0);
    filter: url(#yellow-glow);
    transition: .4s ease-in-out;
}
.bulb_off{
    fill: #808080;
    filter: none;
    transition: .4s ease-in-out;
}

.table_top_running{
    filter: url(#inset-shadow-g);
    transition: .4s ease-in-out;
}
.table_top_pending{
    filter: url(#inset-shadow-y);
    transition: .4s ease-in-out;
}
.table_top_off{
    filter: none;
    transition: .4s ease-in-out;
}


/* ------------------------------------------ SVGS ------------------------------------------*/

.svg_container{
    width: 150px;
    height: 150px;
    margin: 2em;
}
svg{
    width: 100%;
    height: 100%;
}
.bulb_g, .bulb_y{
    fill: #808080;
}
/*#table1:hover .bulb_g{
    fill: rgb(50, 205, 50, 0.8);
    filter: url(#green-glow);
}
#table1:hover .table_top_g{
    filter: url(#inset-shadow-g);
}
#table3:hover .bulb_y{
    fill: rgb(255, 255, 0, 0.6);
    filter: url(#yellow-glow);
}
#table3:hover .table_top_y{
    filter: url(#inset-shadow-y);
}
.bulb_off{
    fill: #808080;
}*/


/* ------------------------------------------ SMALL-DEVICE ------------------------------------------*/

.small_device{
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0.5em;
    text-align: center;
    color: var(--black);
}


/* ------------------------------------------ MEDIA-QUERIES ------------------------------------------*/

@media screen and (max-width: 1000px) {
    .main_title{
        margin-bottom: 4em;
    }
    .hall, .garden, .back{
        display: none;
    }
    .reference_dropdown{
        display: flex;
        width: 100%;
    }
    .tables_data{
        padding-bottom: 0;
    }
    .table{
        margin-top: 0.5em;
    }
    .indicators{
        column-gap: 0.75em;
    }
    /*.hall{
        padding: 0.6em;
    }
    .hall:after{
        content: '';
        margin-bottom: 0.15em;
        margin-left: 1em;
        right: 0;
        position: relative;
        border: solid black;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }*/
}
@media screen and (max-width: 570px) {
    .account_button{
        margin: 1em;
        padding: 0.75em;
    }
    /*.hall{
        padding: 0.4em;
        width: 100%;
    }*/
    .tables_data{
        flex-direction: column;
        row-gap: 1.25em;
        margin-bottom: 1.5em;
    }
    .location_buttons, .indicators {
        width: 100%;
    }
    .custom_dropdown {
        width: 100%;
    }
    .table{
        row-gap: 1em;
        padding: 0;
    }
    main, .tables{
        margin: 0;
    }
    .tables{
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .hotel, .management{
        font-size: 2.5em;
    }
    .account_button{
        padding: 0.5em;
        border-radius: 8px;
    }
    .account_svg{
        width: 12px;
        height: 12px;
    }
    .account_menu{
        width: 100px;
        height: 80px;
        margin-top: 7.5em;
        border-radius: 10px;
        margin-right: 0.85em;
        row-gap: 0.1em;
    }
    .sales, .logout, .starongit{
        font-size: 0.75em;
        padding: 0.1em 0.25em 0.1em 0.1em;
        border-radius: 3px;
    }
    .sales:hover, .logout:hover{
        letter-spacing: 0.1em;
    }
    .star{
        width: 12px;
        height: 12px;
        padding-bottom: 0.2em;
    }
    .starongit:hover{
        letter-spacing: 0.05em;
    }
    .starongit:hover .star{
        fill: yellow;
        filter: url(#sofGlow);
    }
}
@media screen and (max-width: 425px) {
    .tables{
        min-height: 82dvh;
    }
}
@media screen and (max-width: 279px) {
    .small_device{
        display: flex;
    }
    main{
        display: none;
    }
}