/* ------------------------------ */
/* ------------------------------ */
/* SCALE */
:root {
   --scale: 1.0;
}


/* ------------------------------ */
/* ------------------------------ */
/* HEADER */
#Header {
   height: calc((80px * var(--scale)) + 6px);
}

#Header .center {
   grid-template-columns: calc(80px * var(--scale)) calc(80px * var(--scale)) calc(300px * var(--scale)) auto;
   height: calc(80px * var(--scale));
}

#Header .user {
   display: grid;
   grid-template-columns: auto calc(80px * var(--scale)) calc(80px * var(--scale)) calc(80px * var(--scale));
   width: 100%;
   height: 80px;
}

#Header .login {
   height: calc(80px * var(--scale));
}

#Header .button {
   width: calc(80px * var(--scale));
   height: calc(80px * var(--scale));
   font-size: calc(var(--font-size-5) * var(--scale));
}

#Header .material-icons-outlined {
   font-size: calc(var(--font-size-8) * var(--scale));
}

#Header #Website-Sections {
   height: calc(80px * var(--scale));
}

#Header #Website-Sections .section,
#Header #Website-Sections .current-section {
   height: calc(80px * var(--scale));
   padding: calc(25px * var(--scale));
   font-size: calc(var(--font-size-5) * var(--scale));
}

#Header #Website-Sections .sections {
   top: calc(80px * var(--scale));
}

#Header .login .button {
   height: calc(80px * var(--scale));
   font-size: calc(var(--font-size-5) * var(--scale));
}

#Header .user :where(.user-notifications, .user-profile, .user-create) {
   width: calc(80px * var(--scale));
   height: calc(80px * var(--scale));
   font-size: var(--font-size-5);
}

#Header .user .user-notifications .icon {
   width: calc(80px * var(--scale));
   height: calc(80px * var(--scale));
   font-size: calc(var(--font-size-5) * var(--scale));
}

#Header .user .user-notifications .wrapper {
   top: calc(80px * var(--scale));
   width: calc(500px * var(--scale));
   height: calc(500px * var(--scale));
}

#Header .user .user-notifications .wrapper .options {
   height: calc(50px * var(--scale));
   font-size: calc(var(--font-size-3) * var(--scale));
}

#Header .user .user-notifications .wrapper .options .option {
   height: calc(50px * var(--scale));
   padding: calc(15px * var(--scale));
}

#Header .user .user-notifications .wrapper .notifications {
   top: calc(50px * var(--scale));
   height: calc(450px * var(--scale));
}


/* ------------------------------ */
/* ------------------------------ */
/* LAYOUT */
#Website {
   top: calc((80px * var(--scale)) + 6px);
   min-height: calc(100vh - ((80px * var(--scale)) + 6px));
}

#Page {
   width: calc(100% - (350px * var(--scale)));
   left: calc(350px * var(--scale));
}


/* ------------------------------ */
/* ------------------------------ */
/* SIDEBAR */
#Sidebar {
   visibility: visible;
   top: calc((80px * var(--scale)) + 6px);
   left: 0px;
   width: calc(350px * var(--scale));
   height: calc(100vh - (80px * var(--scale)) - 6px);
   z-index: 50;
}

#Sidebar .section .link {
   grid-template-columns: calc(80px * var(--scale)) auto;
}

#Sidebar .section .link .icon {
   width: calc(80px * var(--scale));
   height: calc(80px * var(--scale));
   border-right: 1px solid var(--border-color);
}

#Sidebar .section .link .icon .material-icons-outlined {
   font-size: calc(var(--font-size-8) * var(--scale));
}

#Sidebar .section .link .text {
   display: flex;
   height: calc(79px * var(--scale));
   padding: calc(15px * var(--scale)) calc(20px * var(--scale));
   font-size: calc(var(--font-size-5) * var(--scale));
}


/* ------------------------------ */
/* ------------------------------ */
/* PAGE SECTIONS */
#Page-Sections {
   height: calc(70px * var(--scale));
}

#Page-Sections .section {
   font-size: calc(var(--font-size-4) * var(--scale));
}