@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');


/* ------------------------------ */
/* :reset */
/* ------------------------------ */
* {
   margin: 0;
   border: none;
   outline: none;
   color: inherit;
   font: inherit;
   text-decoration: none;
   box-sizing: border-box;
   appearance: none;
}


/* ------------------------------ */
/* :theme:light:default */
/* ------------------------------ */
.light-theme {
   --primary-color: #f94144;
   --border-color: #ced4da;
   --primary-text: #343a40;
   --secondary-text: #f8f9fa;
   --accent-text: #adb5bd;
   --background-primary: #f8f9fa;
   --background-secondary: #e9ecef;
   --background-messages: #f8e4cd;
   --background-transparent: rgba(0, 0, 0, 0.05);
   --background-transparent-plus: rgba(0, 0, 0, 0.1);
}


/* ------------------------------ */
/* :theme:dark */
/* ------------------------------ */
.dark-theme {
   --primary-color: #f94144;
   --border-color: #495057;
   --primary-text: #f8f9fa;
   --secondary-text: #f8f9fa;
   --accent-text: #adb5bd;
   --background-primary: #212529;
   --background-secondary: #343a40;
   --background-messages: #f8e4cd;
   --background-transparent: rgba(255, 255, 255, 0.05);
   --background-transparent-plus: rgba(255, 255, 255, 0.1);
}


/* ------------------------------ */
/* :root */
/* ------------------------------ */
:root {
   --entity-menu: '\21B4';
   --entity-link: '\00BB';
}


/* ------------------------------ */
/* ------------------------------ */
/* SCALE */

/* ------------------------------ */
/* SCALE: MIN */
@media (min-width: 1440px) {

   :root {
      --scale-a: 1.0;
      --scale-b: 1.0;
   }

}

/* ------------------------------ */
/* SCALE: MAX */
@media (max-width: 1440px) {

   :root {
      --scale-a: 1.0;
      --scale-b: 1.0;
   }

}

@media (max-width: 1024px) {

 :root {
      --scale-a: 0.8;
      --scale-b: 0.8;
   }

}

@media (max-width: 800px) {

 :root {
      --scale-a: 1.0;
      --scale-b: 1.0;
   }

}

@media (max-width: 600px) {

   :root {
      --scale-a: 0.8;
      --scale-b: 0.8;
   }

}

@media (max-width: 500px) {

   :root {
      --scale-a: 0.7;
      --scale-b: 0.7;
   }

}

@media (max-width: 400px) {

   :root {
      --scale-a: 0.6;
      --scale-b: 0.6;
   }

}

@media (max-width: 300px) {

   :root {
      --scale-a: 0.5;
      --scale-b: 0.5;
   }

}


/* ------------------------------ */
/* :html */
/* ------------------------------ */
body {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   min-height: 100vh;
   padding-top: calc(76px * var(--scale-b));
   overflow: visible;
   background-color: var(--background-primary);
   color: var(--primary-text);
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   line-height: 1;
}

::placeholder {
   color: var(--accent-text);
}

::-webkit-scrollbar {
   width: 0;
}


/* ------------------------------ */
/* :global */
/* ------------------------------ */
.float-left {
   float: left !important;
}

.float-right {
   float: right !important;
}

.hidden {
   display: none !important;
}

.padding {
   padding: calc(20px * var(--scale-a));
}

.gap {
   gap: calc(20px * var(--scale-a));
}

.underlined,
.underline:hover {
   cursor: pointer !important;
   text-decoration: underline !important;
}

.highlighted,
.highlight:hover {
   cursor: pointer !important;
   color: var(--primary-color) !important;
}

.cover {
   width: 100% !important;
   height: 100% !important;
}

.span-2 {
   grid-column: span 2 !important;
}

.span-3 {
   grid-column: span 3 !important;
}

.span-4 {
   grid-column: span 4 !important;
}

.margin-top {
   margin-top: auto !important;
}

.margin-right {
   margin-right: auto !important;
}

.margin-bottom {
   margin-bottom: auto !important;
}

.margin-left {
   margin-left: auto !important;
}

.scroll-to {
   cursor: pointer;
   position: fixed;
   bottom: calc(25px * var(--scale-b));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(50px * var(--scale-b));
   height: calc(50px * var(--scale-b));
   background-color: var(--primary-color);
   border-radius: calc(50px * var(--scale-b));
   color: #f8f9fa;
   z-index: 10;
}

.scroll-to.to-top {
   right: calc(25px * var(--scale-b));
   bottom: calc(100px * var(--scale-b));
}

.scroll-to.to-bottom {
   right: calc(25px * var(--scale-b));
   bottom: calc(25px * var(--scale-b));
}

/* ------------------------------ */
/* :scroll:icons */
.scroll-to .material-icons-outlined {
   font-size: calc(25px * var(--scale-b));
}

.no-records {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 200;
   text-transform: uppercase;
}

.load-more,
.random-link {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(100px * var(--scale-a));
   padding: calc(40px * var(--scale-a));
   background-color: var(--background-transparent);
   border-radius: calc(100px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 600;
   text-transform: uppercase;
}

.load-more::after,
.random-link::after {
   content: var(--entity-link);
   position: absolute;
   right: calc(40px * var(--scale-a));
   top: calc(38px * var(--scale-a));
   font-size: calc(20px * var(--scale-a));
   font-weight: 800;
}

.load-more:hover,
.random-link:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

#Close {
   position: fixed;
   display: block;
   top: calc(66px * var(--scale-a-a));
   left: 0px;
   width: 100vw;
   height: 100vh;
   background-color: #212529;
   opacity: 0.5;
   visibility: hidden;
   z-index: 5;
   transition: all 500ms;
}


/* ------------------------------ */
/* :header */
/* ------------------------------ */
.header {
   position: fixed;
   display: flex;
   flex-direction: column;
   align-items: center;
   top: 0;
   width: 100%;
   height: calc(76px * var(--scale-b));
   background-color: var(--background-primary);
   border-bottom: calc(1px * var(--scale-b)) solid var(--border-color);
   border-top: calc(5px * var(--scale-b)) solid var(--primary-color);
   z-index: 20;
}

.header .header-container {
   display: flex;
   flex-direction: row;
   width: calc(1200px * var(--scale-b));
   height: calc(70px * var(--scale-b));
   border-left: calc(1px * var(--scale-b)) solid var(--border-color);
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
}

.header .container-main {
   display: flex;
   flex-direction: row;
}

.header .container-log {
   display: flex;
   flex-direction: row;
   justify-content: end;
   width: 100%;
}

#nav-button {
   display: none;
   flex-shrink: 0;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(69px * var(--scale-b));
   height: calc(69px * var(--scale-b));
   padding: calc(5px * var(--scale-b));
   background-color: var(--background-primary);
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
   color: var(--primary-text);
}

.header-button {
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(69px * var(--scale-b));
   height: calc(69px * var(--scale-b));
   padding: calc(5px * var(--scale-b));
   background-color: var(--background-primary);
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
   color: var(--primary-text);
}

.header-nav-logged-out {
   display: flex;
   flex-direction: row;
   justify-content: end;
   width: 100%;
   height: calc((calc(70px * var(--scale-b)) * var(--scale-b)));
}

.header-nav-logged-in {
   display: flex;
   flex-direction: row;
   justify-content: end;
   width: 100%;
   height: calc(70px * var(--scale-b));
}

.header-nav-logged-in:last-child
.header-button:last-child {
   border-right: none;
}

.header-nav-admin {
   display: grid;
   grid-template-columns: 1fr 1fr calc(400px * var(--scale-b));
   width: 100%;
   height: calc(70px * var(--scale-b));
}

.header-link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 25%;
   height: calc(70px * var(--scale-b));
   background-color: var(--background-primary);
   border-bottom: calc(5px * var(--scale-b)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-b));
   font-weight: 800;
   text-transform: uppercase;
}

.header-nav-admin .header-link {
   width: 100%;
}

.header-profile {
   cursor: pointer;
   position: relative;
   display: flex;
   flex-direction: column;
   width: 400px;
   height: calc(70px * var(--scale-b));
   overflow: visible;
}

.header-profile-overview {
   display: grid;
   grid-template-columns: calc(70px * var(--scale-b)) auto;
   width: 100%;
   height: calc(69px * var(--scale-b));
   overflow: visible;
   background-color: var(--background-transparent);
   border-left: calc(1px * var(--scale-b)) solid var(--border-color);
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
}

.header-nav--admin .header-profile-overview {
   border-right: none;
}

.header-profile-overview-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(69px * var(--scale-b));;
   height: calc(69px * var(--scale-b));;
   padding: calc(5px * var(--scale-b));
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
}

.header-profile-overview-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(5px * var(--scale-b));
   width: 100%;
   height: 100%;
   padding: calc(10px * var(--scale-b));
}

.header-profile-overview-info-name {
   display: block;
   width: 100%;
   height: calc(20px * var(--scale-b));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-b));
   font-weight: 600;
   line-height: 1;
   text-align: left;
}

.header-profile-overview-info-balance {
   display: block;
   width: 100%;
   height: calc(12.5px * var(--scale-b));
   color: var(--accent-text);
   font-size: calc(12.5px * var(--scale-b));
   font-weight: 400;
   line-height: 1;
   text-align: left;
}

.header-profile-overview-info-balance--highlight {
   color: var(--primary-color);
}

.header-profile-menu {
   position: absolute;
   display: none;
   flex-direction: column;
   top: calc(69px * var(--scale-b));
   width: 100%;
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-b)) solid var(--border-color);
   z-index: 20;
}

.header-profile-menu-info {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-b));
   width: 100%;
   height: 100%;
   padding: calc(20px * var(--scale-b));
   overflow: visible;
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-b));
   font-weight: 400;
}

.header-profile-menu-option {
   display: grid;
   grid-template-columns: calc(70px * var(--scale-b)) auto;
   justify-content: start;
   align-items: start;
   width: 100%;
   height: calc(70px * var(--scale-b));
   background-color: var(--background-primary);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-b));
   font-weight: 600;
   text-transform: uppercase;
}

.header-profile-menu-option-name {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: 100%;
}

.header-profile-menu-option-icon {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

.header-notifications {
   position: relative;
   flex-shrink: 0;
   width: calc(70px * var(--scale-b));
   height: calc(70px * var(--scale-b));
   overflow: visible;
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
}

.header-notifications-icon {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

.header-notifications-menu {
   position: absolute;
   display: none;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   top: calc(70px * var(--scale-b));
   right: calc(-1px * var(--scale-b));
   width: calc(470px * var(--scale-b));
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-b)) solid var(--border-color);
}

.header-notifications-menu-options {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale-b));
   border-bottom: calc(1px * var(--scale-b)) solid var(--border-color);
}

.header-notifications-menu-options-option {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   overflow: visible;
   border-right: calc(1px * var(--scale-b)) solid var(--border-color);
}

.header-notifications-menu-options-option:last-child {
   border-right: none;
}

.header-notifications-menu-items {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-height: calc(calc(120px * var(--scale-b)) * 3);
   overflow: auto;
}

.header-notifications-menu-item {
   display: grid;
   grid-template-columns: calc(100px * var(--scale-b)) auto;
   gap: calc(10px * var(--scale-b));
   width: 100%;
   height: auto;
   min-height: calc(120px * var(--scale-b));
   padding: calc(10px * var(--scale-b));
   overflow: visible;
   background-color: var(--background-primary);
}

.header-notifications-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: hidden;
   border: calc(1px * var(--scale-b)) solid var(--border-color);
   border-radius: 50%;
   aspect-ratio: 1 / 1;
}

.header-notifications-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   gap: calc(15px * var(--scale-b));
   width: 100%;
   min-height: calc(100px * var(--scale-b));
   overflow: visible;
}

.header-notifications-info-name {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(20px * var(--scale-b));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-b));
   font-weight: 600;
}

.header-notifications-info-notification {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   min-height: calc(15px * var(--scale-b));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-b));
   font-weight: 400;
}

.header-notifications-info-elapsed {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(10px * var(--scale-b));
   color: var(--primary-text);
   font-size: calc(10px * var(--scale-b));
   font-weight: 200;
}

/* ------------------------------ */
/* :header:hover */
.header-link:is(.active,:hover) {
   cursor: pointer;
   border-bottom: calc(5px * var(--scale-b)) solid var(--primary-color);
   color: var(--primary-color);
}

.header-notifications-menu-options-option:hover,
.header-profile-menu-option:is(.active,:hover),
.header-button:is(.active,:hover) {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.header-notifications-menu-item:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
}

.header-notifications-menu-item:hover .header-notifications-menu-item-name {
   color: var(--primary-color);
}

.header-notifications:hover .header-notifications-menu,
.header-profile:hover .header-profile-menu {
   display: flex;
}

/* ------------------------------ */
/* :header:icons */
.header .material-icons-outlined {
   font-size: calc(30px * var(--scale-b));
}

.Ad-Desktop {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 728px;
   height: 90px;
   background-color: var(--background-transparent);
   margin-top: calc(20px * var(--scale-a));
}

.Ad-Mobile {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 320px;
   height: 50px;
   background-color: var(--background-transparent);
   margin-top: calc(20px * var(--scale-a));
}


/* ------------------------------ */
/* :wrapper */
/* ------------------------------ */
.wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: auto;
   overflow: visible;
}

.forms {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   max-width: calc(700px * var(--scale-a));
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
}

.sidebar-content {
   display: grid;
   grid-template-columns: calc(400px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: calc(1200px * var(--scale-a));
   min-height: calc(100vh - calc(76px * var(--scale-a)));
   overflow: visible;
}

.content-sidebar {
   display: grid;
   grid-template-columns: auto calc(400px * var(--scale-a));
   gap: calc(20px * var(--scale-a));
   width: calc(1200px * var(--scale-a));
   min-height: calc(100vh - calc(76px * var(--scale-a)));
   overflow: visible;
}

.page {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   width: 100%;
   min-height: 100%;
   overflow: visible;
}

.content {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a)) 0px;
   overflow: visible;
}

.append {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   overflow: visible;
}

.article {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(50px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
}


/* ------------------------------ */
/* :sidebar */
/* ------------------------------ */
.sidebar {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: 100%;
   padding: calc(20px * var(--scale-a)) 0px;
   overflow: visible;
   background-color: var(--background-primary);
}

.sidebar .sidebar-section {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   overflow: visible;
   border-bottom: calc(1px * var(--scale-b)) solid var(--border-color);
}

.sidebar .section-header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(69px * var(--scale-b));
   padding: calc(15px * var(--scale-b)) calc(20px * var(--scale-b));
   overflow: visible;
   border-left: calc(5px * var(--scale-b)) solid var(--border-color);
   font-size: calc(25px * var(--scale-b));
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
}

.sidebar .section-link {
   position: relative;
   display: grid;
   grid-template-columns: calc(70px * var(--scale-b)) auto;
   width: 100%;
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   color: var(--primary-text);
}

.sidebar .section-link .link-icon {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(70px * var(--scale-b));
   height: calc(70px * var(--scale-b));
   overflow: visible;
   border: calc(1px * var(--scale-b)) solid var(--border-color);
   border-radius: 50%;
}

.sidebar .section-link .link-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(69px * var(--scale-b));
   padding: calc(15px * var(--scale-b)) calc(20px * var(--scale-b));
   overflow: visible;
   font-size: calc(25px * var(--scale-b));
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
}

.sidebar .sidebar-row {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(60px * var(--scale-b));
   padding: calc(20px * var(--scale-b));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-b)) solid var(--border-color);
   color: var(--accent-text);
   font-size: calc(20px * var(--scale-b));
   font-weight: 400;
}

.sidebar .sidebar-row :is(span,a) {
   color: var(--primary-text);
   font-weight: 400;
}

/* :icons */
/* ------------------------------ */
.sidebar .section-link .link-icon .material-icons-outlined {
   font-size: calc(30px * var(--scale-b));
}

/* :hover */
/* ------------------------------ */
.sidebar .section-link.active .link-icon,
.sidebar .section-link:hover .link-icon {
   cursor: pointer;
   color: var(--primary-color);
   background-color: var(--background-transparent);
}

.sidebar .section-link.active .link-text,
.sidebar .section-link:hover .link-text {
   cursor: pointer;
   color: var(--primary-color);
}


/* ------------------------------ */
/* :page:options */
/* ------------------------------ */
.page-options {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(60px * var(--scale-a));
   padding: 0px;
}

.page-options .options-row {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
}

.page-options .option-highlighted {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: 100%;
   padding: calc(20px * var(--scale-a));
   background-color: var(--background-transparent);
   border-radius: calc(60px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(14px * var(--scale-a));
   font-weight: 600;
   text-transform: uppercase;
}

.page-options .options-nav {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   border-radius: calc(60px * var(--scale-a));
}

.page-options .nav-option {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: 100%;
   padding: calc(20px * var(--scale-a));
   border-radius: calc(60px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(14px * var(--scale-a));
   font-weight: 600;
   text-transform: uppercase;
}

.page-options .nav-option:is(:hover, .active) {
   cursor: pointer;
   background-color: var(--background-transparent);
}

.page-options .nav-search {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

.page-options .search-input {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   padding: calc(20px * var(--scale-a));
   background-color: var(--background-transparent);
   border-radius: calc(60px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(16px * var(--scale-a));
   font-weight: 600;
   text-transform: capitalize;
}

.page-options .nav-button {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: 100%;
   padding: calc(20px * var(--scale-a));
   background-color: var(--primary-color);
   color: var(--primary-text);
   font-size: calc(14px * var(--scale-a));
   font-weight: 600;
   text-transform: uppercase;
}


/* ------------------------------ */
/* :posts */
/* ------------------------------ */
.posts {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: auto;
   background-color: var(--background-transparent);
   border-radius: calc(20px * var(--scale-a));
}

.posts .posts-header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: auto;
   padding: calc(40px * var(--scale-a));
   overflow: auto;
   color: var(--primary-text);
   font-size: calc(25px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
}

.posts .posts-image {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: auto;
   z-index: 1;
}

.posts .posts-template {
   position: absolute;
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   bottom: calc(20px * var(--scale-a));
   left: calc(20px * var(--scale-a));
   width: 50%;
   height: auto;
   overflow: auto;
   z-index: 5;
}

.posts .posts-image:hover .posts-template {
   display: flex;
}

.posts .posts-tags {
   display: flex;
   flex-direction: row;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(50px * var(--scale-a));
}

.posts .posts-tags .tags-tag {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(50px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   text-transform: lowercase;
}

.posts .posts-tags .tags-tag:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.posts .posts-info {
   display: flex;
   flex-direction: row;
   justify-content: end;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
}

.posts .posts-info .info-time {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(59px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   text-transform: uppercase;
}

.posts .posts-info .info-option {
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(59px * var(--scale-a));
   height: calc(59px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
}

.posts .posts-info .info-option:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.posts .posts-mod {
   display: flex;
   flex-direction: column;
   grid-template-columns: 1fr;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(0px * var(--scale-a));
   overflow: visible;
   font-size: calc(18px * var(--scale-a));
   font-weight: 600;
}

.posts .posts-mod .mod-options {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
   overflow: visible;
}

.posts .posts-mod .mod-options .mod-option {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(60px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(60px * var(--scale-a));
}

.posts .posts-mod .mod-reason .reason-options .options-option:is(.x,:hover),
.posts .posts-mod .mod-reason .current-reason:is(.x,:hover),
.posts .posts-mod .mod-options .mod-option:is(.x,:hover) {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.posts .posts-ratings {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
   overflow: visible;
}

.posts .posts-ratings .ratings-rating {
   display: grid;
   grid-template-columns: calc(60px * var(--scale-a)) auto;
   width: 100%;
   height: calc(59px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(59px * var(--scale-a));
}

.posts .posts-ratings .ratings-rating img {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(58px * var(--scale-a));
   height: calc(58px * var(--scale-a));
}

.posts .posts-ratings .ratings-rating .rating-count {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: end;
   width: 100%;
   height: 100%;
   padding: 0 calc(20px * var(--scale-a));
   font-size: calc(20px * var(--scale-a));
   font-weight: 600;
}

.posts .posts-ratings .ratings-rating:is(.x,:hover) {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.posts .posts-options {
   display: grid;
   grid-template-columns: calc(60px * var(--scale-a)) calc(60px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   overflow: visible;
   font-size: calc(20px * var(--scale-a));
   font-weight: 600;
}

.posts .posts-campaign-options {
   display: grid;
   grid-template-columns: auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(0px * var(--scale-a));
   overflow: visible;
   font-size: calc(20px * var(--scale-a));
   font-weight: 600;
}

.posts .posts-campaign-options .visit {
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: 0 calc(25px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(60px * var(--scale-a));
   text-transform: uppercase;
}

.posts .posts-campaign-options .visit::after {
   position: absolute;
   content: var(--entity-link);
   top: calc(17.5px * var(--scale-a));
   right: calc(25px * var(--scale-a));
}

.posts .posts-options .options-share {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: 0px calc(25px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(60px * var(--scale-a));
}

.posts .posts-options .options-share .share-count {
   margin-left: auto;
}

.posts .posts-options .options-option {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: calc(60px * var(--scale-a));
   height: calc(60px * var(--scale-a));
   padding: 0 calc(25px * var(--scale-a));
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(60px * var(--scale-a));
}

.posts .posts-options :is(.options-share,.options-option):is(.x,:hover) {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.posts .posts-sections {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: auto;
   overflow: visible;
}

.posts .posts-sections .sections-section {
   display: grid;
   grid-template-columns: calc(200px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(200px * var(--scale-a));
}

.posts .posts-sections .sections-section .section-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(200px * var(--scale-a));
   height: calc(200px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   overflow: hidden;
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
}

.posts .posts-sections .section-image img {
   border-radius: 50%;
}

.posts .posts-sections .section-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
}

.posts .posts-sections .section-name {
   display: flex;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(35px * var(--scale-a));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(35px * var(--scale-a));
   font-weight: 600;
}

.posts .posts-sections .section-row {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(15px * var(--scale-a));
   font-size: calc(15px * var(--scale-a));
}

.posts .posts-banner {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(5px * var(--scale-a));
   width: 100%;
   height: auto;
   min-height: calc(200px * var(--scale-a));
   padding: calc(50px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border-radius: calc(20px * var(--scale-a));
}

.posts .posts-banner .banner-title {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(30px * var(--scale-a));
   font-weight: 800;
   line-height: 1.5;
   text-align: center;
}

.posts .posts-banner .banner-description {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
   text-align: center;
}

.posts .posts-banner:hover .banner-title {
   color: var(--primary-color);
}

/* ------------------------------ */
/* :posts:icons */
.posts .material-icons-outlined {
   font-size: calc(30px * var(--scale-a));
}


/* ------------------------------ */
/* :users */
/* ------------------------------ */
.users {
   display: grid;
   grid-template-columns: calc(250px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   overflow: auto;
   background-color: var(--background-primary);
}

.users .user-image {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: calc(10px * var(--scale-a));
   aspect-ratio: 1 / 1;
   overflow: hidden;
   background-color: var(--background-transparent);
   border: 1px solid var(--border-color);
   border-radius: 50%;
}

.users .user-image img {
   border-radius: 50%;
}

.users .user-info {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: auto;
   overflow: auto;
}

.users .user-name {
   display: flex;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(40px * var(--scale-a));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(40px * var(--scale-a));
   font-weight: 600;
}

.users .user-row {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(20px * var(--scale-a));
   overflow: visible;
   font-size: calc(20px * var(--scale-a));
}


/* ------------------------------ */
/* :tags */
/* ------------------------------ */
.tags {
   display: grid;
   grid-template-columns: calc(250px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   overflow: auto;
   background-color: var(--background-primary);
}

.tags .tag-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   overflow: hidden;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
   aspect-ratio: 1 / 1;
}

.tags .tag-image .material-icons-outlined {
   font-size: calc(100px * var(--scale-a));
}

.tags .tag-info {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: auto;
   overflow: auto;
}

.tags .tag-name {
   display: flex;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(40px * var(--scale-a));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(40px * var(--scale-a));
   font-weight: 600;
}

.tags .tag-row {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(20px * var(--scale-a));
   overflow: visible;
   font-size: calc(20px * var(--scale-a));
}


/* ------------------------------ */
/* :comments */
/* ------------------------------ */
.comments {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
}

.comments .comment {
   display: grid;
   grid-template-columns: calc(200px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
}

.comments .comment-image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: calc(200px * var(--scale-a));
   height: calc(200px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
}

.comments .comment-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
}

.comments .comment-name {
   display: block;
   width: 100%;
   height: calc(25px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   overflow: visible;
   font-size: calc(25px * var(--scale-a));
   font-weight: 800;
}

.comments .comment-content {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   overflow: auto;
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
}

.comments .comment-options {
   display: flex;
   flex-direction: row;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: 10px 0px;
   overflow: visible;
}

.comments .comment-option {
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(40px * var(--scale-a));
   height: calc(40px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
   color: var(--primary-text);
   font-size: calc(10px * var(--scale-a));
   font-weight: 600;
   line-height: 1;
   text-align: center;
   text-transform: uppercase;
}

.comments .comment-date {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(15px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
}

.comments .comment-options .material-icons-outlined {
   font-size: calc(20px * var(--scale-a));
}

.comments .comment-option:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.comments .comment.unseen {
   background-color: var(--background-transparent);
}

.comments .comment-image img {
   border-radius: 50%;
}


/* ------------------------------ */
/* :replies */
/* ------------------------------ */
.replies {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
}

.replies .reply {
   display: grid;
   grid-template-columns: calc(200px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
}

.replies .reply-image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: calc(200px * var(--scale-a));
   height: calc(200px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
}

.replies .reply-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
}

.replies .reply-name {
   display: block;
   width: 100%;
   height: calc(25px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   overflow: visible;
   font-size: calc(25px * var(--scale-a));
   font-weight: 800;
}

.replies .reply-content {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   overflow: auto;
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
}

.replies .reply-options {
   display: flex;
   flex-direction: row;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: 10px 0px;
   overflow: visible;
}

.replies .reply-option {
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(40px * var(--scale-a));
   height: calc(40px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
   color: var(--primary-text);
   font-size: calc(10px * var(--scale-a));
   font-weight: 600;
   line-height: 1;
   text-align: center;
   text-transform: uppercase;
}

.replies .reply-date {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(15px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
}

.replies .reply-options .material-icons-outlined {
   font-size: calc(20px * var(--scale-a));
}

.replies .reply-option:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.replies .reply.unseen {
   background-color: var(--background-transparent);
}

.replies .reply-image img {
   border-radius: 50%;
}


/* ------------------------------ */
/* :messages */
/* ------------------------------ */
.messages {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
}

.messages .message {
   display: grid;
   grid-template-columns: calc(200px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
}

.messages .message-image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: calc(200px * var(--scale-a));
   height: calc(200px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
}

.messages .message-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
}

.messages .message-name {
   display: block;
   width: 100%;
   height: calc(25px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   overflow: visible;
   font-size: calc(25px * var(--scale-a));
   font-weight: 800;
}

.messages .message-content {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   overflow: auto;
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
}

.messages .message-date {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(15px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   color: var(--accent-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
}

.messages .message.unseen {
   background-color: var(--background-transparent);
}

.messages .message-image img {
   border-radius: 50%;
}


/* ------------------------------ */
/* :content:page */
/* ------------------------------ */
.content-page {
   display: grid;
   grid-template-columns: calc(250px * var(--scale-a)) auto;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   overflow: auto;
   background-color: var(--background-primary);
}

.content-page .content-image {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: calc(10px * var(--scale-a));
   aspect-ratio: 1 / 1;
   overflow: hidden;
   background-color: var(--background-transparent);
   border: 1px solid var(--border-color);
   border-radius: 50%;
}

.content-page .content-image img {
   border-radius: 50%;
}

.content-page .content-image .change {
   position: absolute;
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--background-primary);
   color: var(--primary-text);
   opacity: 0.5;
}

.content-page .content-image .change .material-icons-outlined {
   color: var(--primary-text);
   font-size: calc(40px * var(--scale-a));
}

.content-page .content-image:hover .change {
   cursor: pointer;
   display: flex;
}

.content-page .content-info {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: auto;
   overflow: auto;
}

.content-page .content-name {
   display: flex;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(40px * var(--scale-a));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(40px * var(--scale-a));
   font-weight: 600;
}

.content-page .content-row {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(20px * var(--scale-a));
   overflow: visible;
   font-size: calc(20px * var(--scale-a));
}

.content-page .content-buttons {
   position: absolute;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: calc(20px * var(--scale-a));
   top: calc(0px * var(--scale-a));
   right: calc(0px * var(--scale-a));
   width: calc(400px * var(--scale-a));
   height: calc(50px * var(--scale-a));
   visibility: hidden;
}

.content-page:hover .content-buttons {
   visibility: visible;
}

.content-page .content-button {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(45px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(45px * var(--scale-a));
   color: var(--primary-text);
   font-family: calc(15px * var(--scale-a));
   font-weight: 600;
   text-transform: uppercase;
}

.content-page .content-button:is(.x, :hover) {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.content-page .material-icons-outlined {
   color: var(--primary-text);
   font-size: calc(80px * var(--scale-a));
}

.content-page + .content-options {
   display: flex;
   flex-direction: row;
   justify-content: end;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
}

.content-page + .content-options .content-option {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(59px * var(--scale-a));
   height: calc(59px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
}

.content-page + .content-options .content-option:is(:hover,.active) {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}


/* ------------------------------ */
/* :announcements */
/* ------------------------------ */
.announcements {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(50px * var(--scale-a));
   background-color: var(--background-transparent);
   border-radius: calc(20px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
}

.announcements .announcement-header {
   font-size: calc(40px * var(--scale-a));
}

.announcements .announcement {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
}


/* ------------------------------ */
/* :contacts */
/* ------------------------------ */
.contacts {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(50px * var(--scale-a));
   background-color: var(--background-transparent);
   border-radius: calc(20px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
}

.contacts .contacts-header {
   font-size: calc(40px * var(--scale-a));
}

.contacts .contacts-content {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
}


/* ------------------------------ */
/* :table */
/* ------------------------------ */
.table {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   overflow: visible;
   background-color: var(--background-transparent);
   border-radius: calc(20px * var(--scale-a));
}

.table :where(.table-header,.table-block) {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
   border-bottom: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--accent-text);
   font-size: calc(17.5px * var(--scale-a));
   font-weight: 400;
}

.table .table-header {
   font-weight: 800;
}

.table .table-block:last-child {
   border-bottom: none;
}

.table .grid {
   display: grid;
   width: 100%;
   height: calc(17.5px * var(--scale-a));
   gap: calc(20px * var(--scale-a));
}

.table .flex {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: calc(17.5px * var(--scale-a));
   gap: calc(20px * var(--scale-a));
}

.table .grid-split {
   grid-template-columns: 1fr 1fr;
}

.table .column-auto {
   grid-template-columns: calc(200px * var(--scale-a)) auto;
}

.table .id-column {
   grid-template-columns: 1fr 3fr;
}

.table .column-1 {
   grid-template-columns: 2fr 1fr;
}

.table .date-column-1 {
   grid-template-columns: 2fr 1fr 1fr;
}

.table .id-column-1 {
   grid-template-columns: 1fr 2fr 1fr;
}

.table .column-2 {
   grid-template-columns: 2fr repeat(2,1fr);
}

.table .id-column-2 {
   grid-template-columns: 1fr 2fr repeat(2,1fr);
}

.table .column-3 {
   grid-template-columns: 2fr repeat(3,1fr);
}

.table .id-column-3 {
   grid-template-columns: 1fr 2fr repeat(3,1fr);
}

.table .column-4 {
   grid-template-columns: 2fr repeat(4,1fr);
}

.table .id-columns-4 {
   grid-template-columns: 1fr 2fr repeat(4,1fr);
}

.table .column {
   display: block;
   width: 100%;
   height: 100%;
   overflow: visible;
   float: left;
}

.table .column span {
   color: var(--primary-text);
   float: right;
}


/* ------------------------------ */
/* :submit */
/* ------------------------------ */
.submit {
   display: grid;
   grid-template-columns: calc(200px * var(--scale-a)) auto;
   width: 100%;
   gap: calc(20px * var(--scale-a));
   min-height: calc(200px * var(--scale-a));
   overflow: auto;
   background-color: var(--background-primary);
}

.submit .submit-image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: calc(200px * var(--scale-a));
   height: calc(200px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: 50%;
}

.submit .submit-image img {
   border-radius: 50%;
}

.submit .submit-info {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: auto;
   overflow: auto;
}

.submit .submit-name {
   display: block;
   width: 100%;
   height: calc(25px * var(--scale-a));
   padding: calc(0px * var(--scale-a));
   overflow: visible;
   font-size: calc(25px * var(--scale-a));
   font-weight: 800;
   text-indent: calc(15px * var(--scale-a));
}

.submit .submit-form {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(0px * var(--scale-a));
   overflow: auto;
}

.submit .submit-content {
   display: block;
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   overflow: auto;
   background-color: var(--background-transparent);
   border-radius: calc(60px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 400;
   line-height: 1;
   resize: vertical;
}

.submit .response {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   padding: calc(20px * var(--scale-a));
   background-color: var(--background-messages);
   border-radius: calc(20px * var(--scale-a));
   color: #212529;
   font-size: calc(16px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
   text-align: center;
}

.submit .input-submit {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(60px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(18px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
}

.submit .input-submit:hover {
   cursor: pointer;
   background-color: var(--primary-color);
   border-color: var(--primary-color);
   color: #f8f9fa;
}


/* ------------------------------ */
/* :form */
/* ------------------------------ */
.form {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   overflow: visible;
   background-color: var(--background-transparent);
   border-radius: calc(20px * var(--scale-a));
}

.form .form-header {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(150px * var(--scale-a));
   padding: calc(50px * var(--scale-a));
}

.form .header-name {
   display: flex;
   flex-direction: row;
   width: auto;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(30px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
   text-transform: uppercase;
}

.form .header-type {
   display: flex;
   flex-direction: row;
   width: auto;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
   margin-left: auto;
}

.form .form-body {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a));
   overflow: visible;
}

.form .form-field {
   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   min-height: calc(50px * var(--scale-a));
}

.form .field-name {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: end;
   width: 100%;
   height: 100%;
   color: var(--primary-text);
   font-size: calc(18px * var(--scale-a));
   font-weight: 400;
   line-height: 1.5;
   text-transform: capitalize;
}

.form .field-input {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

.form .input-icon {
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 0;
   width: calc(60px * var(--scale-a));
   height: calc(60px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(5px * var(--scale-a)) 0px 0px calc(5px * var(--scale-a));
}

.form .field-info,
.form .field-link,
.form .input-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(10px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   text-indent: calc(60px * var(--scale-a));
}

.form .field-link {
   background-color: transparent;
   text-indent: 0;
   text-transform: uppercase;
}

.form .field-info {
   background-color: var(--background-transparent);
   text-indent: 0;
   text-transform: uppercase;
   border: none;
}

.form .field-link:hover {
   cursor: pointer;
   color: var(--primary-color);
}

.form .input-options {
   position: absolute;
   display: none;
   flex-direction: column;
   top: calc(60px * var(--scale-a));
   left: 0;
   width: 100%;
   max-height: calc(183px * var(--scale-a));
   overflow: auto;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(10px * var(--scale-a));
   z-index: 10;
}

.form .input-option {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   background-color: var(--background-primary);
   border: none;
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   text-indent: 0;
}

.form .input-option:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
}

.form .input-file {
   cursor: pointer;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(200px * var(--scale-a));
   padding: calc(30px * var(--scale-a));
   padding-top: calc(35px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(2px * var(--scale-a)) dashed var(--border-color);
   border-radius: calc(20px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
}

.form .input-area {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(200px * var(--scale-a));
   padding: calc(30px * var(--scale-a));
   padding-top: calc(35px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(20px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   resize: none;
}

.form .input-radio {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: calc(10px * var(--scale-a));
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(50px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
}

.form .input-radio .radio-option {
   display: none;
}

.form .input-radio .radio-option + label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(38px * var(--scale-a));
   padding: calc(10px * var(--scale-a));
   background-color: var(--background-primary);
   border-radius: calc(38px * var(--scale-a));
}

.form .input-radio .radio-option:is(:checked, :hover) + label {
   cursor: pointer;
   background-color: var(--background-transparent);
}

.form .input-birthday {
   display: grid;
   grid-template-columns: 1fr 3fr 2fr;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(60px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(10px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
}

.form .birthday-menu {
   position: relative;
   display: flex;
   flex-direction: row;
   width: 100%;
   height: calc(58px * var(--scale-a));
   overflow: visible;
   border-right: calc(1px * var(--scale-a)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
}

.form .birthday-menu:last-child {
   border-right: none;
}

.form .input-current {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: 100%;
   padding: calc(15px * var(--scale-a));
   background-color: var(--background-primary);
   border: none;
   border-radius: calc(10px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(15px * var(--scale-a));
   font-weight: 600;
   line-height: 2;
   cursor: pointer;
}

.form .input-current + .menu-options {
   position: absolute;
   display: none;
   flex-direction: column;
   top: calc(55px * var(--scale-a));
   left: calc(-1px * var(--scale-a));
   width: calc(100% + calc(2px * var(--scale-a)));
   max-height: calc(183px * var(--scale-a));
   overflow: auto;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(10px * var(--scale-a));
   color: var(--primary-text);
   z-index: 10;
}

.form .birthday-menu:hover .input-current + .menu-options {
   display: flex;
}

.form .input-current + .menu-options .options-option {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-a));
   padding: calc(15px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-primary);
}

.form .input-current + .menu-options .options-option:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

.form .response {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   padding: calc(20px * var(--scale-a));
   background-color: var(--background-messages);
   border-radius: calc(20px * var(--scale-a));
   color: #212529;
   font-size: calc(16px * var(--scale-a));
   font-weight: 600;
   line-height: 1.5;
   text-align: center;
}

.form .input-submit {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(60px * var(--scale-a));
   padding: calc(20px * var(--scale-a));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-a)) solid var(--border-color);
   border-radius: calc(60px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(18px * var(--scale-a));
   font-weight: 800;
   text-transform: uppercase;
}

/* ------------------------------ */
/* :form:icons */
.form .material-icons-outlined {
   font-size: calc(25px * var(--scale-a));
}


/* ------------------------------ */
/* :form:sidebar */
/* ------------------------------ */
.form-sidebar {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(20px * var(--scale-a)) 0px;
   overflow: visible;
}

.form-sidebar .sidebar-row {
   display: flex;
   flex-direction: row;
   gap: calc(20px * var(--scale-a));
   width: 100%;
   height: auto;
   padding: calc(30px * var(--scale-a));
   overflow: visible;
   background-color: var(--background-transparent);
   border-radius: calc(20px * var(--scale-a));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   text-transform: capitalize;
}


/* ------------------------------ */
/* :html */
/* ------------------------------ */
h1 {
   display: block;
   width: 100%;
   min-height: calc(40px * var(--scale-a));
   overflow: auto;
   font-size: calc(40px * var(--scale-a));
   font-weight: 800;
   margin: calc(50px * var(--scale-a)) 0;
   text-align: center;
   line-height: 1.5;
}

h2 {
   display: block;
   width: 100%;
   min-height: calc(30px * var(--scale-a));
   overflow: auto;
   font-size: calc(30px * var(--scale-a));
   font-weight: 600;
   margin-bottom: 0;
   text-align: left;
   line-height: 1.5;
   text-transform: capitalize;
}

h3 {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   overflow: auto;
   font-size: calc(20px * var(--scale-a));
   font-weight: 400;
   margin-bottom: 0;
   text-align: left;
   line-height: 1.5;
   text-transform: capitalize;
}

p {
   display: block;
   width: 100%;
   min-height: calc(20px * var(--scale-a));
   overflow: auto;
   font-size: calc(20px * var(--scale-a));
   margin-bottom: 0;
   text-align: left;
   line-height: 1.5;
}

ul, ol { 
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-a));
   list-style: disc outside none;
   margin: calc(20px * var(--scale-a)) 0;
   padding: 0 0 0 calc(60px * var(--scale-a));
}

ol { 
   list-style-type: decimal;
}

li { 
   display: list-item;
   font-size: calc(20px * var(--scale-a));
   line-height: 1.5;
}


/* ------------------------------ */
/* :break:1 */
/* ------------------------------ */
@media (max-width: 1240px) {

   .header .header-container,
   .content-sidebar,
   .sidebar-content {
      width: 100%;
   }

   .content-sidebar,
   .sidebar-content {
      gap: calc(20px * var(--scale-b));
      padding: 0px calc(20px * var(--scale-b));
   }

}


/* ------------------------------ */
/* :break:2 */
/* ------------------------------ */
@media (max-width: 800px) {

   body {
      padding-top: calc((74px * 2) * var(--scale-b));
   }

   .header {
      height: calc((74px * 2) * var(--scale-b) - 2px);
   }

   .header .header-container {
      flex-direction: column;
   }

   .header .container-main {
      border-bottom: calc(1px * var(--scale-b)) solid var(--border-color);
   }

   .header-button {
      width: calc(69px * var(--scale-b));
      height: calc(69px * var(--scale-b));
   }

   .header-notifications-menu {
      top: calc(69px * var(--scale-b));
      right: calc(-1px * var(--scale-b));
      width: calc(100vw - (((69px * 2) * var(--scale-b)) + 1px));
      height: auto;
      overflow: visible;
      background-color: var(--background-primary);
      border: calc(1px * var(--scale-b)) solid var(--border-color);
   }

   #nav-button {
      display: flex;
   }

   .header-profile,
   .header-link,
   .content-sidebar,
   .sidebar-content {
      display: flex;
      flex-direction: column;
      width: 100%;
   }

   #Sidebar {
      position: fixed;
      top: calc((72px * 2) * var(--scale-b));
      left: -100%;
      width: calc(400px * var(--scale-b));
      height: calc(100vh - (74px * 2));
      min-height: calc(100vh - 100px);
      padding: calc(20px * var(--scale-b));
      overflow: auto;
      background-color: var(--background-primary);
      border: 1px solid var(--border-color);
      transition: left 500ms;
      z-index: 10;
   }

   #Sidebar.active {
      left: 0px;
   }

}