:root {
    --main-color: #15161b;
    --hover-main-color: #272833;
    --secondary-color: #eff4f8;
    --third-color: #ffffff;
    --aditional-color: #424ae1;

    --print-button-color: #F3C022;
    --excel-button-color: #33C481;

    --excellant-rate-color: #64d53a;
    --normal-rate-color: #efc915;
    --bad-rate-color: #f14f4f;

    --save-dark-color: #248112;
    --danger-dark-color: #e73d3d;

    --selected-option-background-color: #c1e8b8;
    --selected-option-text-color: #34a107;

    --success-background-color: #82c86f;
    --success-text-color: #ffffff;
    --warning-background-color: #f65656;
    --warning-text-color: #ffffff;
    /*--warning-background-color: #c8483f;*/
    /*--warning-text-color: #f17169;*/

    --dark-text-color: #010101;
    --light-text-color: #d4d4d5;
    --small-text-color: #808080;

    --hover-transition-duration: 150ms;
    --transformation-hover-duration: 250ms;

    --border-radius-1: 10px;
    --border-radius-2: 7px;
    --border-radius-3: 5px;

    --padding-value-1: 15px;
    --padding-value-2: 10px;
    --padding-value-3: 20px;
    --padding-value-4: 7px;

    --header-height: 10vh;
    --sidebar-width: 20vw;

    --base-z-index: 1;
    --important-element-z-index: 2;
    --interactive-element-z-index: 3;
    --drop-down-z-index: 4;
    --modal-z-index: 5;
    --extreme-case-z-index: 6;

    --box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.75);

    --notification-animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

@keyframes notificationAnimation {
    0%, 100% {translate: calc(100% + var(--padding-value-2) + 2vw) 0; }
    20%, 80% { translate: 0 0; }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    text-decoration: none;
    z-index: var(--base-z-index);
}
html,
body {
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
}



header {
    width: 100%;
    height: var(--header-height);
    padding: var(--padding-value-1) var(--padding-value-3);

    background-color: var(--main-color);

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--important-element-z-index);
}
.headerTitle {
    font-size: 6vh;
    font-weight: 900;
    color: var(--third-color);
    user-select: none;
}
.versionNumber {
    font-size: 2vh;
    font-weight: 100;
    color: var(--third-color);
}
.userContainer {
    width: 5.5%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    position: relative;
    z-index: var(--interactive-element-z-index);
}
.userButton {
    width: 100%;
    height: 100%;
    padding: var(--padding-value-2);

    background-color: var(--secondary-color);

    border: none;
    border-radius: var(--border-radius-1);

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5vw;

    position: absolute;
    transition-duration: var(--hover-transition-duration);
    z-index: var(--interactive-element-z-index);

    cursor: pointer;
}
.userButton:hover { scale: 1.05; }
.userButton:active { scale: 0.9; }
.userContainer.open .userButton:hover,
.userContainer.open .userButton:active { scale: 1; }
.userContainer.open .dropdownContainer {
    width: 300%;
    height: 200%;
    padding: 0 var(--border-radius-1) var(--border-radius-1) var(--border-radius-1);

    opacity: 1;
}
.userHeaderImageContainer {
    width: auto;
    height: 100%;
    aspect-ratio: 1;

    position: relative;
    border-radius: 50%;
}
#userImage,
.userProfileImage {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    border-radius: 50%;

    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;

    display: none;
}
#userImage.hasImage { display: block; }
.userHeaderImagePlaceholder {
    width: 100%;
    height: 100%;

    border-width: 1px;
    border-style: solid;
    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}
.userName {
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--main-color);
    white-space: nowrap;
}
.chevronIcon {
    height: 10px;
    rotate: 0;
    transition-duration: var(--hover-transition-duration);
}
.dropdownContainer {
    width: 0;
    height: 100%;
    padding: 0;

    opacity: 0;
    background-color: var(--secondary-color);

    border-radius: var(--border-radius-1);
    box-shadow: var(--box-shadow);

    display: grid;
    grid-template-rows: calc(50% + 15px) calc(50% - 15px);
    place-items: center start;

    position: absolute;
    right: 0;
    top: 0;

    z-index: var(--interactive-element-z-index);
    transition-duration: var(--hover-transition-duration);
    overflow: hidden;
}
#logoutButton {
    width: 100%;
    height: calc(var(--header-height) - 45px);
    scale: 1;

    border: none;
    border-radius: var(--border-radius-2);

    background-color: var(--third-color);

    display: grid;
    place-items: center;

    text-decoration: none;
    text-align: center;
    color: var(--main-color);

    transition-duration: var(--hover-transition-duration);
    cursor: pointer;
}
#logoutButton:hover { scale: 1.05; }
#logoutButton:active { scale: 0.9; }
.userContainer.open .chevronIcon { rotate: 180deg; }



nav {
    width: var(--sidebar-width);
    height: calc(100% - var(--header-height));
    padding: 0 var(--padding-value-1) 18px var(--padding-value-1);

    position: fixed;
    left: 0;
    bottom: 0;
    z-index: var(--important-element-z-index);
}
.sidebarList {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    list-style: none;
}
.sidebarSection {
    width: 100%;
    height: 7vh;

    border-bottom: 1px solid var(--hover-main-color);
}
.sidebarSection.setting {
    margin-top: auto;
    border-bottom: none;
}
.sidebarSectionLink {
    width: 100%;
    height: 100%;
    scale: 1;
    padding-inline: var(--padding-value-2);

    border-radius: var(--border-radius-2);

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    color: var(--third-color);
    text-transform: capitalize;

    transition-duration: var(--hover-transition-duration);
    z-index: var(--interactive-element-z-index);
}
.sidebarSectionLink:hover {
    background-color: var(--hover-main-color);
    scale: 1.05;
}
.sidebarSectionLink:active { scale: 0.9; }
.sidebarSectionIcon {
    height: 40%;
    width: 35px;
}


main {
    width: calc(100% - var(--sidebar-width));
    height: calc(100% - var(--header-height));
    padding: 0 var(--padding-value-3) var(--padding-value-2) 0;

    position: fixed;
    right: 0;
    bottom: 0;

    overflow-x: hidden;
    overflow-y: auto;
}
#pageContent {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: var(--padding-value-2);

    background-color: var(--secondary-color);

    border-radius: var(--border-radius-1);
}

.alerterMessageBox {
    width: auto;
    height: calc(var(--header-height) - 2 * var(--padding-value-2));
    padding: var(--padding-value-2) 2vw var(--padding-value-2) var(--padding-value-2);

    border-radius: var(--border-radius-1) 0 0 var(--border-radius-1);

    display: grid;
    place-items: center;

    position: fixed;
    right: var(--padding-value-1);
    bottom: var(--padding-value-1);

    user-select: none;
    animation-name: notificationAnimation;
    animation-duration: 3000ms;
    animation-iteration-count: 1;

    animation-timing-function: var(--notification-animation-timing-function);

    translate: calc(100% + var(--padding-value-2) + 2vw) 0;
}

.alerterMessageBox.warning {
    background-color: var(--warning-background-color);
    color: var(--warning-text-color)
}
.alerterMessageBox.success {
    background-color: var(--success-background-color);
    color: var(--warning-text-color)
}