html {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    display: grid;
    grid-template-rows: var(--top-bar-height) 1fr var(--bottom-bar-height);
    grid-template-columns: var(--left-bar-width) 1fr var(--right-bar-width);
    width: 100%;
    height: fit-content;
    left: 0;
    top: 0;
    margin: 0;
    background-color: var(--surface);
    overflow-x: hidden;
    overflow-y: scroll;
    transition: var(--dark-mode-animation-time) background-color, var(--navigation-drawer-extend-time) grid-template-columns;
    --top-bar-height: 0;
    --bottom-bar-height: 0;
    --left-bar-width: 0;
    --right-bar-width: 0;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background-color: var(--surface-dim);
    transition: var(--dark-mode-animation-time) background-color;
}

::-webkit-scrollbar-corner {
    background-color: var(--surface);
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary);
    transition: var(--dark-mode-animation-time) background-color;
}

::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--secondary), var(--on-secondary) var(--state-layer-opacity-hover));
}

#left_side_bar {
    position: fixed;
    height: 100%;
}

#top_bar {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    top: 0;
    height: var(--top-bar-height);
    z-index: 1;
    transition: background-color var(--dark-mode-animation-time);
}

#content_top_spacer {
    position: relative;
    left: 0;
    top: 0;
    min-height: var(--top-bar-height);
}

#content {
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 0;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

#flashed_message_wrapper {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 10%;
    display: flex;
    justify-content: center;
    z-index: 10;
}

#flashed_message {
    width: fit-content;
    height: fit-content;
    margin: 0 auto 0 auto;
    padding: 7px 20px 7px 20px;
    text-align: center;
    background-color: var(--error);
    color: var(--on-error);
    border-radius: 100px;
    transition: var(--dark-mode-animation-time) background-color var(--dark-mode-animation-time) color;
}