@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;
}


/* ------------------------------ */
/* :root */
/* ------------------------------ */
:root {
   --primary-color: #4895ef;
   --border-color: #dddddd;
   --primary-text: #000000;
   --secondary-text: #ffffff;
   --accent-text: #aaaaaa;
   --background-primary: #f5f5f5;
   --background-secondary: #ffffff;
   --background-messages: #f8e4cd;
   --background-transparent: rgba(0, 0, 0, 0.05);
   --background-transparent-plus: rgba(0, 0, 0, 0.1);
   --entity-menu: '\21B4';
   --entity-link: '\00BB';
   --header-height: calc(76px * var(--scale));
   --container-width: calc(1200px * var(--scale));
}


/* ------------------------------ */
/* :scale */
/* ------------------------------ */
@media (min-width: 1001px) {

   :root {
      --scale: 1.0;
   }

}

@media (max-width: 1000px) {

 :root {
      --scale: 1.0;
   }

}

@media (max-width: 800px) {

 :root {
      --scale: 0.8;
   }

}

@media (max-width: 600px) {

   :root {
      --scale: 0.6;
   }

}

@media (max-width: 500px) {

   :root {
      --scale: 0.5;
   }

}

@media (max-width: 400px) {

   :root {
      --scale: 0.4;
   }

}

@media (max-width: 300px) {

   :root {
      --scale: 0.3;
   }

}


/* ------------------------------ */
/* :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));
   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,
.underline:hover {
   cursor: pointer !important;
   text-decoration: underline !important;
}

.highlighted,
.highlight: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;
}

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

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

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

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

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

.load-more {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(50px * var(--scale));
   padding: calc(16px * var(--scale));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(50px * var(--scale));
   color: var(--primary-text);
   font-size: calc(16px * var(--scale));
   font-weight: 600;
   text-transform: uppercase;
}

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


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

.header .header-container {
   display: grid;
   grid-template-columns: 1fr 2fr;
   width: var(--container-width);
   height: calc(70px * var(--scale));
   border-left: calc(1px * var(--scale)) solid var(--border-color);
   border-right: calc(1px * var(--scale)) 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));
   font-weight: 600;
}

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

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

.header :is(.website-name,.nav-link):is(:hover, .active) {
   cursor: pointer;
   background-color: var(--background-transparent);
   border-bottom-color: var(--primary-color);
   color: var(--primary-color);
}

.header + .sidebar-button {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: calc(100% - (40px * var(--scale)));
   height: calc(80px * var(--scale));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(20px * var(--scale));
   font-weight: 600;
   text-transform: uppercase;
   margin: calc(20px * var(--scale));
   visibility: hidden;
}


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

.ad {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: var(--container-width);
   height: calc(130px * var(--scale));
   padding: calc(20px * var(--scale));
   background-color: var(--background-primary);
   border-left: calc(1px * var(--scale)) solid var(--border-color);
   border-right: calc(1px * var(--scale)) solid var(--border-color);
}

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

.ad.ad-footer {
   border-top: calc(1px * var(--scale)) solid var(--border-color);
}

.ad .desktop-banner {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 728px;
   height: 90px;
   background-color: var(--background-secondary);
}

.ad .mobile-banner {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 320px;
   height: 60px;
   background-color: var(--background-secondary);
}

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

.content-sidebar {
   display: grid;
   grid-template-columns: auto calc(400px * var(--scale));
   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));
   width: 100%;
   height: auto;
}

.listing-content {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale));
   width: 100%;
   min-height: calc(500px * var(--scale));
   padding: calc(50px * var(--scale));
   overflow: auto;
   background-color: var(--background-secondary);
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(20px * var(--scale));
   color: var(--primary-text);
   font-size: calc(20px * var(--scale));
   font-weight: 400;
   line-height: 1.5;
}


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

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

.content-sidebar .sidebar {
   border-left: calc(1px * var(--scale)) 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)) 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));
   padding: calc(15px * var(--scale)) calc(20px * var(--scale));
   overflow: visible;
   border-left: calc(5px * var(--scale)) solid var(--border-color);
   font-size: calc(25px * var(--scale));
   font-weight: 600;
   line-height: 1;
   text-transform: uppercase;
}

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

.sidebar .section-link .link-name {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   height: calc(70px * var(--scale));
   padding: 0px;
   overflow: visible;
   font-size: calc(20px * var(--scale));
   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));
   aspect-ratio: 1 / 1;
   background-color: var(--background-secondary);
}

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

.sidebar .section-link .link-name span,
.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);
   border-left: calc(5px * var(--scale)) solid var(--primary-color);
}

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


/* ------------------------------ */
/* :page */
/* ------------------------------ */
.page {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;
   gap: calc(20px * var(--scale));
   width: 100%;
   height: auto;
   padding: calc(50px * var(--scale));
   overflow: visible;
   border-bottom: calc(1px * var(--scale)) solid var(--border-color);
}

.page .page-link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(80px * var(--scale));
   padding: calc(25px * var(--scale));
   overflow: visible;
   background-color: var(--primary-text);
   border-radius: calc(80px * var(--scale));
   color: var(--secondary-text);
   font-size: calc(30px * var(--scale));
   font-weight: 800;
   text-transform: uppercase;
}

.page .page-link:hover {
   cursor: pointer;
   background-color: var(--primary-color);
}

.page .page-header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(35px * var(--scale));
   font-weight: 800;
   text-transform: uppercase;
}

.page .page-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));
   font-weight: 400;
   text-transform: capitalize;
}

.page .page-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   overflow: visible;
   color: var(--accent-text);
   font-size: calc(15px * var(--scale));
   font-weight: 400;
}


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

.users .user-image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: calc(200px * var(--scale));
   height: calc(200px * var(--scale));
   overflow: hidden;
   border-radius: 50%;
}

.users .user-image img {
   width: 100%;
   height: 100%;
}

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

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

.users .user-name {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(30px * var(--scale));
   color: var(--primary-text);
   font-size: calc(30px* var(--scale));
   font-weight: 800;
}

.users .user-description {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   min-height: calc(20px * var(--scale));
   color: var(--accent-text);
   font-size: calc(20px* var(--scale));
   font-weight: 400;
   line-height: 1.5;
}

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


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

.listings .listing-image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: calc(250px * var(--scale));
   height: calc(250px * var(--scale));
   overflow: hidden;
}

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

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

.listings .listing-name {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(30px * var(--scale));
   color: var(--primary-text);
   font-size: calc(30px* var(--scale));
   font-weight: 800;
}

.listings .listing-description {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   min-height: calc(20px * var(--scale));
   color: var(--accent-text);
   font-size: calc(20px* var(--scale));
   font-weight: 400;
   line-height: 1.5;
}

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

.listings .listing-link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: auto;
   height: calc(50px * var(--scale));
   padding: calc(20px * var(--scale)) calc(50px * var(--scale));
   background-color: var(--primary-text);
   border-radius: calc(50px * var(--scale));
   color: var(--secondary-text);
   font-size: calc(20px * var(--scale));
   font-weight: 600;
   text-transform: uppercase;
   margin-left: auto;
}

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


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

.categories .category-image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: calc(250px * var(--scale));
   height: calc(250px * var(--scale));
   overflow: hidden;
}

.categories .category-info {
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   gap: calc(20px * var(--scale));
   width: 100%;
   min-height: calc(250px * var(--scale));
   padding: calc(20px * var(--scale)) 0px;
}

.categories .category-name {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   height: calc(30px * var(--scale));
   color: var(--primary-text);
   font-size: calc(30px* var(--scale));
   font-weight: 800;
}

.categories .category-description {
   display: flex;
   flex-direction: row;
   justify-content: start;
   align-items: center;
   width: 100%;
   min-height: calc(20px * var(--scale));
   color: var(--accent-text);
   font-size: calc(20px* var(--scale));
   font-weight: 400;
   line-height: 1.5;
}

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

.categories .category-link {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: auto;
   height: calc(50px * var(--scale));
   padding: calc(20px * var(--scale)) calc(50px * var(--scale));
   background-color: var(--primary-text);
   border-radius: calc(50px * var(--scale));
   color: var(--secondary-text);
   font-size: calc(20px * var(--scale));
   font-weight: 600;
   text-transform: uppercase;
   margin-left: auto;
}

.categories .category-link:hover {
   cursor: pointer;
   background-color: var(--primary-color);
}


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

.table :where(.table-header,.table-block) {
   display: flex;
   flex-direction: column;
   gap: calc(50px * var(--scale));
   width: 100%;
   height: auto;
   padding: calc(50px * var(--scale));
   overflow: visible;
   border-bottom: calc(1px * var(--scale)) solid var(--border-color);
   color: var(--accent-text);
   font-size: calc(18px * var(--scale));
   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));
   gap: calc(50px * var(--scale));
}

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

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

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

.table .column span.primary-color {
   font-weight: 800;
}

.table .table-block .column.span-2 span {
   font-style: italic
}


/* ------------------------------ */
/* :form */
/* ------------------------------ */
.form {
   display: flex;
   flex-direction: column;
   width: calc(700px * var(--scale));
   height: auto;
   overflow: visible;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale)) 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));
   padding: calc(50px * var(--scale));
   background-color: var(--background-primary);
   border-bottom: calc(1px * var(--scale)) 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));
   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));
   font-weight: 600;
   text-transform: uppercase;
   margin-left: auto;
}

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

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

.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));
   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));
   height: calc(50px * var(--scale));
   background-color: transparent;
   border: calc(1px * var(--scale)) 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));
   padding: calc(16px * var(--scale));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(16px * var(--scale));
   font-weight: 600;
   text-indent: calc(50px * var(--scale));
}

.form .input-text:read-only {
   background-color: var(--background-transparent);
   cursor: default;
}

.form .input-text + .input-options {
   position: absolute;
   display: none;
   flex-direction: column;
   top: calc(49px * var(--scale));
   left: 0;
   width: 100%;
   max-height: calc(183px * var(--scale));
   overflow: auto;
   padding: 0;
   background-color: var(--background-primary);
   border: calc(1px * var(--scale)) 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));
   padding: calc(16px * var(--scale));
   background-color: var(--background-transparent);
   border: none;
   color: var(--primary-text);
   font-size: calc(16px * var(--scale));
   font-weight: 600;
   text-indent: 0;
}

.form .input-text + .input-options .input-option:hover {
   cursor: pointer;
   background-color: var(--background-secondary);
}

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

.form .input-textarea {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: calc(250px * var(--scale));
   padding: calc(16px * var(--scale));
   background-color: var(--background-primary);
   border: calc(1px * var(--scale)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(16px * var(--scale));
   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));
   background-color: var(--background-transparent);
   border: calc(1px * var(--scale)) solid var(--border-color);
   color: var(--primary-text);
   font-size: calc(16px * var(--scale));
   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));
   padding: calc(16px * var(--scale));
   border-right: calc(1px * var(--scale)) solid var(--border-color);
}

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

.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));
   overflow: visible;
   color: var(--primary-text);
   font-size: calc(16px * var(--scale));
   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));
   background-color: var(--background-messages);
   border-radius: 0;
   color: #212529;
   font-size: calc(15px * var(--scale));
   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));
   padding: calc(16px * var(--scale));
   background-color: var(--primary-text);
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc(50px * var(--scale));
   color: var(--secondary-text);
   font-size: calc(16px * var(--scale));
   font-weight: 600;
   text-transform: uppercase;
}