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


/* ------------------------------ */
/* :reset */
/* ------------------------------ */
* {
   margin: 0;
   padding: 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: #4895ef;
   --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: #4895ef;
   --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';
   --header-height: calc(76px * var(--scale-header));
   --wrapper-width: calc(1200px * var(--scale-elements));
}


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

@media (max-width: 1024px) {

 :root {
      --scale-elements: 0.8;
      --scale-header: 1.0;
   }

}

@media (max-width: 768px) {

 :root {
      --scale-elements: 1.0;
      --scale-header: 1.0;
   }

}

@media (max-width: 460px) {

   :root {
      --scale-elements: 0.6;
      --scale-header: 0.7;
   }

}


/* ------------------------------ */
/* :html */
/* ------------------------------ */
body {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   min-height: 100vh;
   padding-top: var(--header-height);
   overflow: visible;
   background-color: var(--background-primary);
   color: var(--primary-text);
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: calc(15px * var(--scale-elements));
   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;
}

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

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

.primary-color {
   color: var(--primary-color) !important;
}

.border-color {
   color: var(--border-color) !important;
}

.primary-text {
   color: var(--primary-text) !important;
}

.secondary-text {
   color: var(--secondary-text) !important;
}

.accent-text {
   color: var(--accent-text) !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(150px * var(--scale-header));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(50px * var(--scale-header));
   height: calc(50px * var(--scale-header));
   background-color: var(--primary-color);
   border-radius: calc(50px * var(--scale-header));
   color: #212529;
}

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

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

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

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

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

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

.sidebar-btn {
   display: none;
}

#close {
   position: fixed;
   display: block;
   top: var(--header-height);
   left: 0px;
   width: 100vw;
   height: calc(100vh - var(--header-height));
   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: var(--header-height);
   background-color: var(--background-primary);
   border-bottom: calc(1px * var(--scale-header)) solid var(--border-color);
   border-top: calc(5px * var(--scale-header)) solid var(--primary-color);
   z-index: 5;
}

.header .header-wrapper {
   display: grid;
   grid-template-columns: 1fr 2fr;
   width: var(--wrapper-width);
   height: calc(70px * var(--scale-header));
   border-left: calc(1px * var(--scale-header)) solid var(--border-color);
   border-right: calc(1px * var(--scale-header)) solid var(--border-color);
}

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

.header .header-nav-logged-in,
.header .header-nav-logged-out {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}

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

/* :header:hover */
.header .website-name:is(:hover, .active) {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-color);
}

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


/* ------------------------------ */
/* :layout */
/* ------------------------------ */
.wrapper {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   width: var(--wrapper-width);
   min-height: calc(100vh - var(--header-height));
   border-left: calc(1px * var(--scale-elements)) solid var(--border-color);
   border-right: calc(1px * var(--scale-elements)) solid var(--border-color);
}

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

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

.sidebar-content {
   display: grid;
   grid-template-columns: calc(400px * var(--scale-elements)) auto;
   width: 100%;
   min-height: calc(100vh - var(--header-height));
}

.content-sidebar {
   display: grid;
   grid-template-columns: auto calc(400px * var(--scale-elements));
   width: 100%;
   min-height: calc(100vh - var(--header-height));
}

.append,
.content {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   height: auto;
}

.forms {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   min-height: auto;
   padding: calc(20px * var(--scale-elements));
}

.overview {
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   min-height: auto;
}


/* ------------------------------ */
/* :sidebar */
/* ------------------------------ */
.sidebar {
   display: flex;
   flex-direction: column;
   width: 100%;
   min-height: calc(100vh - var(--header-height));
}

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

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

.sidebar-content .sidebar {
   border-right: calc(1px * var(--scale-elements)) solid var(--border-color);
}

.content-sidebar .sidebar {
   border-left: calc(1px * var(--scale-elements)) solid var(--border-color);
}

.sidebar .sidebar-section {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   overflow: visible;
   border-bottom: calc(1px * var(--scale-elements)) 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-elements));
   padding: calc(15px * var(--scale-elements)) calc(20px * var(--scale-elements));
   overflow: visible;
   border-left: calc(5px * var(--scale-elements)) solid var(--border-color);
   font-size: calc(25px * var(--scale-elements));
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
}

.sidebar .section-link {
   position: relative;
   display: grid;
   grid-template-columns: calc(70px * var(--scale-elements)) 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-elements));
   height: calc(70px * var(--scale-elements));
   overflow: visible;
   border-right: calc(1px * var(--scale-elements)) solid var(--border-color);
}

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

.sidebar .section-ads {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: calc(10px * var(--scale-elements));
   aspect-ratio: 1 / 1;
   background-color: var(--background-transparent);
}

.sidebar .section-info {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(60px * var(--scale-elements));
   padding: calc(20px * var(--scale-elements));
   background-color: var(--background-transparent);
   color: var(--accent-text);
   font-size: calc(18px * var(--scale-elements));
   font-weight: 400;
}

.sidebar .section-info span {
   color: var(--primary-text);
   margin-left: auto;
}

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

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


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

.page-options .options-row {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   height: calc(60px * var(--scale-elements));
}

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

.page-options .options-space {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(60px * var(--scale-elements));
}

.page-options .nav-option {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: calc(10px * var(--scale-elements));
   width: 100%;
   height: 100%;
   padding: calc(20px * var(--scale-elements));
   color: var(--primary-text);
   font-size: calc(14px * var(--scale-elements));
   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-elements));
   background-color: var(--background-transparent);
   color: var(--primary-text);
   font-size: calc(16px * var(--scale-elements));
   font-weight: 600;
   text-transform: lowercase;
}

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


/* ------------------------------ */
/* :users */
/* ------------------------------ */
.users {
   display: grid;
   grid-template-columns: calc(250px * var(--scale-elements)) auto;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   min-height: calc(250px * var(--scale-elements));
   padding: 0;
}

.users .user-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: calc(10px * var(--scale-elements));
   background-color: var(--background-transparent);
}

.users .user-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   min-height: 100%;
}

.users .user-info-small {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(16px * var(--scale-elements));
   font-size: calc(16px * var(--scale-elements));
   font-weight: 400;
}

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

.users .user-info-large {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(24px * var(--scale-elements));
   font-size: calc(24px * var(--scale-elements));
   font-weight: 800;
}

.users .user-info-more {
   display: flex;
   flex-direction: column;
   gap: calc(14px * var(--scale-elements));
   width: 100%;
   height: auto;
}

.users .user-description {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(14px * var(--scale-elements));
   font-size: calc(14px * var(--scale-elements));
   font-weight: 200;
}

.users .user-gap {
   gap: calc(6px * var(--scale-elements));
}


/* ------------------------------ */
/* :listings */
/* ------------------------------ */
.listings {
   display: grid;
   grid-template-columns: calc(250px * var(--scale-elements)) auto;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   min-height: calc(250px * var(--scale-elements));
   padding: 0;
}

.listings .listing-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: calc(10px * var(--scale-elements));
   background-color: var(--background-transparent);
}

.listings .listing-info {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   min-height: calc(250px * var(--scale-elements));
}

.listings .listing-info-small {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(16px * var(--scale-elements));
   font-size: calc(16px * var(--scale-elements));
   font-weight: 400;
}

.listings .listing-info-medium {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(20px * var(--scale-elements));
   font-size: calc(20px * var(--scale-elements));
   font-weight: 600;
}

.listings .listing-info-large {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(24px * var(--scale-elements));
   font-size: calc(24px * var(--scale-elements));
   font-weight: 800;
}

.listings .listing-info-more {
   display: flex;
   flex-direction: column;
   gap: calc(14px * var(--scale-elements));
   width: 100%;
   height: auto;
}

.listings .listing-description {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(14px * var(--scale-elements));
   font-size: calc(14px * var(--scale-elements));
   font-weight: 200;
}

.listings .listing-link {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   bottom: 0;
   right: 0;
   width: 50%;
   height: calc(50px * var(--scale-elements));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-elements)) solid var(--border-color);
   color: var(--accent-text);
   font-size: calc(14px * var(--scale-elements));
   font-weight: 800;
   text-transform: uppercase;
}

.listings .listing-link:hover {
   cursor: pointer;
   background-color: var(--background-transparent);
   color: var(--primary-text);
}

.listings .listing-gap {
   gap: calc(6px * var(--scale-elements));
}


/* ------------------------------ */
/* :discussions */
/* ------------------------------ */
.discussions {
   display: grid;
   grid-template-columns: calc(100px * var(--scale-elements)) auto;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   min-height: calc(100px * var(--scale-elements));
   padding: 0;
}

.discussions .discussion-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: calc(10px * var(--scale-elements));
   background-color: var(--background-transparent);
}

.discussions .discussion-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: calc(16px * var(--scale-elements));
   width: 100%;
   min-height: 100%;
}

.discussions .discussion-title {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(24px * var(--scale-elements));
   font-size: calc(24px * var(--scale-elements));
   font-weight: 600;
}

.discussions .discussion-details {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   height: calc(14px * var(--scale-elements));
   font-size: calc(14px * var(--scale-elements));
   font-weight: 400;
}


/* ------------------------------ */
/* :replies */
/* ------------------------------ */
.replies {
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   min-height: calc(192px * var(--scale-elements));
   padding: calc(20px * var(--scale-elements));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-elements)) solid var(--border-color);
}

.replies .reply-replier {
   display: flex;
   flex-direction: row;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   height: calc(150px * var(--scale-elements));
}

.replies .reply-replier-image {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
   width: calc(150px * var(--scale-elements));
   height: calc(150px * var(--scale-elements));
   padding: calc(10px * var(--scale-elements));
   background-color: var(--background-transparent);
}

.replies .reply-replier-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   height: calc(150px * var(--scale-elements));
}

.replies .reply-replier-info-name {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   width: 100%;
   height: calc(24px * var(--scale-elements));
   font-size: calc(24px * var(--scale-elements));
   font-weight: 600;
}

.replies .reply-replier-info-details {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: calc(14px * var(--scale-elements));
   width: 100%;
   height: auto;
   font-size: calc(14px * var(--scale-elements));
   font-weight: 400;
}

.replies .reply-replier-info-details > span {
   display: flex;
   flex-direction: row;
   gap: calc(6px * var(--scale-elements));
}

.replies hr {
   width: 100%;
   height: calc(1px * var(--scale-elements));
   background-color: var(--border-color);
}

.replies .reply {
   display: flex;
   flex-direction: column;
   gap: calc(10px * var(--scale-elements));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale-elements));
   font-weight: 400;
   line-height: 1.25;
}


/* ------------------------------ */
/* :table */
/* ------------------------------ */
.table {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   overflow: visible;
   border: calc(1px * var(--scale-elements)) solid var(--border-color);
}

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

.table .table-header {
   background-color: var(--background-transparent);
   font-weight: 800;
}

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

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

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

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

.table .column-auto {
   grid-template-columns: calc(200px * var(--scale-elements)) 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;
}


/* ------------------------------ */
/* :form */
/* ------------------------------ */
.form {
   display: flex;
   flex-direction: column;
   width: calc(700px * var(--scale-elements));
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale-elements)) solid var(--border-color);
}

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

.form .form-header {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(150px * var(--scale-elements));
   padding: calc(50px * var(--scale-elements));
   background-color: var(--background-primary);
   border-bottom: calc(1px * var(--scale-elements)) solid var(--border-color);
}

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

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

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

.form .form-field {
   display: grid;
   grid-template-columns: 40% auto;
   gap: calc(20px * var(--scale-elements));
   width: 100%;
   min-height: calc(50px * var(--scale-elements));
}

.form .field-name {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: 100%;
   color: var(--primary-text);
   font-size: calc(18px * var(--scale-elements));
   font-weight: 600;
   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 .field-icon {
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 0;
   width: calc(50px * var(--scale-elements));
   height: calc(50px * var(--scale-elements));
   background-color: transparent;
   border: calc(1px * var(--scale-elements)) solid var(--border-color);
}

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

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

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

.form .input-file {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(50px * var(--scale-elements));
   padding: calc(16px * var(--scale-elements));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-elements)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(16px * var(--scale-elements));
   font-weight: 600;
   text-indent: calc(50px * var(--scale-elements));
}

.form .input-textarea {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(200px * var(--scale-elements));
   padding: calc(16px * var(--scale-elements));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-elements)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(16px * var(--scale-elements));
   font-weight: 600;
   resize: none;
}

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

.form .input-radio .input-option + label {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(48px * var(--scale-elements));
   padding: calc(16px * var(--scale-elements));
   border-right: calc(1px * var(--scale-elements)) solid var(--border-color);
}

.form .input-radio .input-option + label:last-child {
   border-right: none;
}

.form .input-checkbox {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   overflow: visible;
}

.form .input-checkbox + label {
   cursor: pointer;
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale-elements));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(16px * var(--scale-elements));
   font-weight: 600;
   text-transform: capitalize;
}

.form .response {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   padding: calc(20px * var(--scale-elements));
   background-color: var(--background-messages);
   border-radius: 0;
   color: #212529;
   font-size: calc(15px * var(--scale-elements));
   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(50px * var(--scale-elements));
   padding: calc(16px * var(--scale-elements));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale-elements)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(16px * var(--scale-elements));
   font-weight: 600;
   text-transform: uppercase;
}


@media (max-width: 1200px) {

   :root {
      --wrapper-width: 100%;
   }

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

}

@media (max-width: 900px) {

   .content-sidebar,
   .sidebar-content {
      grid-template-columns: 100%;
   }

   .sidebar-btn {
      display: flex;
   }

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

   .sidebar.active {
      left: 0px;
   }

   .form {
      width: 100%;
   }

}