/*** mu imports***/
@import url("variabels.css");

@import url("sidebar.css");
@import url("header.css");
@import url("footer.css");
@import url("settings.css");
@import url("agenda.css");
@import url("floorplan.css");
@import url("dashboard.css");
@import url("guests.css");
@import url("profile.css");
@import url("reservation-edit.css");
@import url("add-reservation.css");
@import url("update-reservation.css");
@import url("login.css");



:root {
    --main-left-width: 12vw;
    --sidebar-width: 250px;
    --collapsed-width: 72px
}

html,
body {
    height: 95vh;
    overflow-y: hidden;
}

body {
    background: var(--color-bg-primary);
    color: var(--color-font-normal);
}

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
    background-color:#ebebeb;
    border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #891FA9;
    border-radius: 10px;
    transition: all .1 ease;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #70198A;
}

::selection {
  color:#fff;
  background-color: var(--color-font-normal);
}


.page-wrapper {
    display: flex;
    width: 100vw;
    height: 98vh;
    margin-top: 1vh;
}

/* Sidebar */
.sidebar {
    width: 250px;
    transition: width 0.3s;
    flex-shrink: 0;
}

.page-wrapper.sidebar-collapsed .sidebar {
    width: 60px;
}

.main_content {
    display: flex;
    flex: 1;
    max-width: 100vw;
}

.main_middel{
    flex: 1;
    margin-left: 25px;
    margin-bottom: 10px;
    width: 100vw;
}

.floorplan-main {
    flex: 1;
    margin-left: 25px;
    margin-bottom: 10px;
    width: 80vw;
}

body:has(.agenda-scroll-container):has(.main_left) .main_middel {
    max-width: calc(96% - var(--main-left-width) - var(--sidebar-width));
}

body:has(.agenda-scroll-container):has(.main_left):has(.is-collapsed) .main_middel {
    max-width: calc(96% - var(--main-left-width) - var(--collapsed-width));
}

.main_left {
    flex-shrink: 0;
    width: 12vw;
    min-width: 12vw;
    margin-right: 20px;
    margin-left: 20px;
}

/* Hide horizontal scrollbar only */
::-webkit-scrollbar:horizontal {
    display: none;
}

/* Firefox */
* {
    scrollbar-width: thin;
}

@supports (scrollbar-width: none) {
    * {
        scrollbar-width: auto;
        /* keeps vertical */
    }
}