@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

:root {
  --font-family: Geist, sans-serif;
  --font-size: 16px;
  --body-bg: #f9f9f9;
  --body-fg: #1a1b1c;
  --default-bg: #1a1b1c;
  --default-fg: #eee;
  --default-border: #1a1b1c;
  --primary-bg: royalblue;
  --primary-fg: #eee;
  --primary-border: transparent;
  --secondary-bg: #d1d2d3;
  --secondary-fg: var(--body-fg);
  --secondary-border: transparent;
  --success-bg: forestgreen;
  --success-fg: #eee;
  --success-border: transparent;
  --warning-bg: orange;
  --warning-fg: #000;
  --warning-border: transparent;
  --danger-bg: crimson;
  --danger-fg: #eee;
  --danger-border: transparent;
  --info-bg: skyblue;
  --info-fg: #000;
  --info-border: transparent;
  --outline-bg: transparent;
  --outline-fg: var(--body-fg);
  --outline-border: #999;
  --ghost-bg: transparent;
  --ghost-fg: var(--body-fg);
  --ghost-border: transparent;
  --link-bg: transparent;
  --link-fg: var(--body-fg);
  --link-border: transparent;

  /* Inputs */
  --input-border: var(--secondary-bg);
  --input-hover-border: #a1a2a3;
  --input-focus-border: var(--default-bg);
  --input-bg: #fefefe;
  --input-fg: var(--default-bg);

  /* Select */
  --select-bg: #ffffff;
  --select-border: #ccc;
  --select-list-bg: #f9f9f9;
  --select-fg: #1a1a1b;
  --select-active-bg: #f6f6f6;
  --select-hover-bg: #e9e9e9;
  --mandatory-bg: rgba(220, 20, 60, 0.05);

  /* Table */
  --table-border: #ddd;
  --table-border-row: #e1e1e1;
  --table-header: #e3e3e3;
  --table-footer: #e6e6e6;
  --table-alternate-rows: #f3f3f3;
  --table-row-hover: #f1f1f1;
  --table-hover-border: #999;

  scrollbar-color: #aaa #f0f0f0;
}

.dark {
  /* --font-family: monospace, sans-serif;
  --font-size: 16px; */
  --body-bg: #1a1b1c;
  --body-fg: #eee;
  --default-bg: #eee;
  --default-fg: #1a1b1c;
  --default-border: #eee;
  --primary-bg: royalblue;
  --primary-fg: #eee;
  --primary-border: transparent;
  --secondary-bg: #313233;
  --secondary-fg: var(--body-fg);
  --secondary-border: transparent;
  --success-bg: forestgreen;
  --success-fg: #eee;
  --success-border: transparent;
  --warning-bg: orange;
  --warning-fg: #000;
  --warning-border: transparent;
  --danger-bg: crimson;
  --danger-fg: #eee;
  --danger-border: transparent;
  --info-bg: skyblue;
  --info-fg: #000;
  --info-border: transparent;
  --outline-bg: transparent;
  --outline-fg: var(--body-fg);
  --outline-border: #999;
  --ghost-bg: transparent;
  --ghost-fg: var(--body-fg);
  --ghost-border: transparent;
  --link-bg: transparent;
  --link-fg: var(--body-fg);
  --link-border: transparent;

  /* Inputs */
  --input-bg: var(--secondary-bg);
  --input-fg: var(--secondary-fg);
  --input-border: #4a4a4a;
  --input-hover-border: #616263;
  --input-focus-border: #8a8b8c;

  /* Select */

  --select-bg: #1a1a1b;
  --select-fg: #f6f6f6;
  --select-border: #333;
  --select-list-bg: #090909;
  --select-active-bg: #111;
  --select-hover-bg: #191919;
  --mandatory-bg: rgba(220, 20, 60, 0.05);

  /* Table */
  --table-border: #333;
  --table-border-row: #111;
  --table-header: #111;
  --table-footer: #030303;
  --table-alternate-rows: #161616;
  --table-row-hover: #090909;
  --table-hover-border: #999;

  scrollbar-color: #555 #1e1e1e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-family);
  font-size: var(--font-size);
  background: var(--body-bg);
  color: var(--body-fg);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100vw;  
  height: 100vh;
  /* padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); */
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal
}

h1 {
  font-size: 2.5rem;
  letter-spacing: -1px;
}

h2 {
  font-size: 2.25rem;
  letter-spacing: -0.9px;
}

h3 {
  font-size: 2rem;
  letter-spacing: -0.8px;
}

h4 {
  font-size: 1.5rem;
  letter-spacing: -0.7px;
}

h5 {
  font-size: 1.25rem;
  letter-spacing: -0.6px;
}

h6 {
  font-size: 0.85rem;
}

label {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  cursor: default;
  user-select: none;
}

/* Anchor sections */
a:not(.button) {
  display: inline-block;
  /* min-height: 25px; */
  font-family: inherit;
  font-size: inherit;
  color: var(--primary-bg);
  text-decoration: none;
  user-select: none;
  outline: transparent;
  white-space: pre;
  text-overflow: ellipsis;

  &:hover,
  &:focus,
  &.hover {
    opacity: 0.8;
    text-decoration: underline;
    /* text-underline-offset: 0.5rem; */
  }

  &:active,
  &:focus,
  &.active {
    opacity: 0.6;
    text-decoration: underline;
    /* text-underline-offset: 0.5rem; */
  }

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

a.button {
  width: 100%;
}

/* Button sections */
button,
.button {
  width: fit-content;
  text-decoration: none;
  /* min-height: 32px; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  font-family: inherit;
  font-size: 14px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--default-border);
  background-color: var(--default-bg);
  color: var(--default-fg);
  border-radius: 0.35rem;
  font-weight: 500;
  transition: 250ms ease-in-out;
  user-select: none;
  outline: transparent;

  &.round {
    aspect-ratio: 1;
    border-radius: 50% !important;
  }

  &.oval{
    border-radius: 9999px !important;
  }

  &:hover,
  &:focus,
  &.hover {
    opacity: 0.8;
    cursor: pointer;
  }

  &:active,
  &.active {
    opacity: 0.6;
  }

  &:disabled,
  &.disabled {
    pointer-events: none;
    opacity: 0.3;
  }

  &.primary {
    background-color: var(--primary-bg);
    color: var(--primary-fg);
    border-color: var(--primary-border);
  }

  &.secondary {
    background-color: var(--secondary-bg);
    color: var(--secondary-fg);
    border-color: var(--secondary-border);
  }

  &.success {
    background-color: var(--success-bg);
    color: var(--success-fg);
    border-color: var(--success-border);
  }

  &.warning {
    background-color: var(--warning-bg);
    color: var(--warning-fg);
    border-color: var(--warning-border);
  }

  &.danger {
    background-color: var(--danger-bg);
    color: var(--danger-fg);
    border-color: var(--danger-border);
  }

  &.info {
    background-color: var(--info-bg);
    color: var(--info-fg);
    border-color: var(--info-border);
  }

  &.outline {
    background-color: var(--outline-bg);
    color: var(--outline-fg);
    border-color: var(--outline-border);

    &.outline:hover,
    &.outline:focus,
    &.outline.hover {
      background-color: var(--default-bg) !important;
      color: var(--default-fg) !important;
      border-color: var(--default-border) !important;
    }

    &.outline:active,
    &.outline.active {
      background-color: var(--default-bg) !important;
      color: var(--default-fg) !important;
      border-color: var(--default-border) !important;
    }
  }

  &.ghost {
    background-color: var(--ghost-bg);
    color: var(--ghost-fg);
    border-color: var(--ghost-border);

    &.ghost:hover,
    &.ghost:focus,
    &.ghost.hover {
      background-color: var(--secondary-bg) !important;
      color: var(--secondary-fg) !important;
      border-color: var(--secondary-border) !important;
    }

    &.ghost:active,
    &.ghost.active {
      background-color: var(--secondary-bg) !important;
      color: var(--secondary-fg) !important;
      border-color: var(--secondary-border) !important;
    }
  }

  &.link {
    min-width: unset;
    min-height: unset;
    padding: 0;
    background-color: var(--link-bg);
    color: var(--link-fg);
    border-color: var(--link-border);

    &.link:hover,
    &.link:focus,
    &.link.hover {
      text-decoration: underline;
      text-underline-offset: 0.5rem;
    }
  }

  &.loading>* {
    animation: animation_rotate var(--duration, 1s) linear infinite forwards;
  }

  &.large {
    font-size: 18px;
    min-height: 40px;
  }

  &.small {
    font-size: 11px;
    min-height: 24px;
    padding: 0.25rem 0.5rem;
  }
}

/* Grid */
grid {
  --cols: 100px;
  display: grid;
  gap: 1rem;
  flex-wrap: wrap;
  grid-template-columns: repeat(auto-fit, minmax(var(--cols), 1fr));
  grid-auto-flow: row;
}

.col2 {
  grid-column: span 2;
}

.col3 {
  grid-column: span 3;
}

.col4 {
  grid-column: span 4
}

.col5 {
  grid-column: span 5
}

.col6 {
  grid-column: span 6
}

.col7 {
  grid-column: span 7
}

.col8 {
  grid-column: span 8
}

.col9 {
  grid-column: span 9
}

.col10 {
  grid-column: span 10
}

.row2 {
  grid-row: span 2
}

.row3 {
  grid-row: span 3
}

.row4 {
  grid-row: span 4
}

.row5 {
  grid-row: span 5
}

.row6 {
  grid-row: span 6
}

.row7 {
  grid-row: span 7
}

.row8 {
  grid-row: span 8
}

.row9 {
  grid-row: span 9
}

.row10 {
  grid-row: span 10
}


/* Inputs and Textarea */
input[type='date'],
input[type='time'],
input[type='file'] {
  appearance: none;
}

img.preview {
  /* width: 100%; */
  /* height: 100%; */
  height: 100%;
  max-height: 300px;
  aspect-ratio: 1/1.5;

  display: none;
  border: 1px solid var(--input-focus-border);
  cursor: default;  
}

input[type='file'] {
  display: none !important;

  &+div.fileDetails {
    font-family: inherit;
    font-size: 14px;
    min-width: fit-content;
    min-height: fit-content;
    padding: 1rem;
    display: flex;
    border-radius: 0.5rem;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--input-border);
    cursor: pointer;
    transition: 300ms ease-in-out;

    &:hover {
      background-color: var(--secondary-bg);
    }
  }
}

input:not([type='checkbox']):not([type='radio']):not([type='file']) {
  background-color: var(--input-bg);
  color: var(--input-fg);
  font-family: inherit;
  font-size: 14px;
  min-height: 32px;
  padding-inline: 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid var(--input-border);
  outline: transparent;
  transition: 250ms ease-in-out;

  &:not(:disabled):hover,
  &:not(:disabled).hover {
    border-color: var(--input-hover-border);
  }

  &:not(:disabled):focus,
  &:not(:disabled).focus {
    border-color: var(--input-focus-border);
  }

  &:disabled,
  &.disabled {
    opacity: 0.5;
  }

  &.mandatory {
    border-left: 2px solid
  }

  &:focus.mandatory {
    background-color: var(--mandatory-bg);
    border-left: 2px solid var(--danger-bg);
  }

  &:disabled.mandatory {
    opacity: 0.5;
  }

  &.large {
    font-size: 18px;
    min-height: 40px;
  }

  &.small {
    font-size: 12px;
    min-height: 24px;
    padding: 0.1rem 0.5rem;
  }
}

textarea {
  background-color: var(--input-bg);
  color: var(--input-fg);
  padding: 0.5rem !important;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  min-height: 32px;
  padding-inline: 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid var(--input-border);
  outline: transparent;
  transition: 250ms ease-in-out;
  width:100%;

  &:not(:disabled):hover,
  &:not(:disabled).hover {
    border-color: var(--input-hover-border);
  }

  &:not(:disabled):focus,
  &:not(:disabled).focus {
    border-color: var(--input-focus-border);
  }

  &:disabled,
  &.disabled {
    opacity: 0.5;
  }

  &.mandatory {
    border-left: 2px solid
  }

  &:focus.mandatory {
    background-color: var(--mandatory-bg);
    border-left: 2px solid var(--danger-bg);
  }

  &:disabled.mandatory {
    opacity: 0.5;
  }

  &.large {
    font-size: 18px;
    min-height: 40px;
  }

  &.small {
    font-size: 12px;
    min-height: 24px;
    padding: 0.5rem;
  }
}


/* Checkbox */
input[type='checkbox']:not(.switch) {
  appearance: none;
  border: 1.5px solid var(--default-border);
  min-width: 1.25rem;
  min-height: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  outline: transparent;

  &:focus {
    outline: 1px solid var(--default-border);
  }

  &.mandatory {
    border: 1.5px solid var(--danger-bg);
  }

  &:hover {
    cursor: pointer;
  }

  &:disabled {
    opacity: 0.25;
    cursor: default;
  }

  &:checked {
    position: relative;
    background-color: var(--default-bg);
    color: var(--default-fg);
  }

  &:checked::after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>');
  }

  .dark &:checked::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>');
  }

  &.mandatory:checked {
    background-color: var(--danger-bg);
    color: var(--danger-fg);
    stroke: #eee;
  }

  .dark &.mandatory:checked::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>');
  }
}

/* Switch */
input.switch[type='checkbox'] {
  appearance: none;
  /* border: 1.5px solid var(--default-border); */
  background-color: var(--secondary-bg);
  border: none;
  min-width: 2.25rem;
  min-height: 1.25rem;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  position: relative;
  outline: transparent;

  &:focus {
    outline: 1px solid var(--secondary-bg);
  }

  &.mandatory {
    border: 1.5px solid var(--danger-bg);
    background-color: var(--danger-fg);
  }

  &:hover {
    cursor: pointer;
  }

  &:disabled {
    opacity: 0.5;
    cursor: default;
  }

  &:checked {
    position: relative;
    background-color: var(--default-bg);
  }

  &::after {
    width: 15px;
    height: 15px;
    background-color: var(--default-fg);
    border-radius: 100%;
    position: absolute;
    content: '';
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
  }

  &.mandatory::after {
    background-color: var(--danger-bg);
  }

  &:checked::after {
    background-color: var(--default-fg);
    left: unset !important;
    right: 2px;
  }

  &.mandatory:checked {
    background-color: var(--danger-bg);
  }

  &.mandatory:checked::after {
    background-color: var(--danger-fg);
  }
}


/* Radio */
input[type='radio'] {
  appearance: none;
  border: 1.5px solid var(--default-border);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 100%;
  outline: transparent;

  &:focus {
    outline: 1px solid var(--secondary-bg);
  }

  &.mandatory {
    border: 1.5px solid var(--danger-bg);
  }

  &:hover {
    cursor: pointer;
  }

  &:checked {
    position: relative;
  }

  &:disabled {
    opacity: 0.25;
    cursor: default;
  }

  &:checked::after {
    content: '';
    background-color: var(--default-bg);
    width: 50%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
  }

  &.mandatory:checked::after {
    background-color: var(--danger-bg);
  }
}


/* Select */
.select {
  font-family: inherit;
  font-size: 14px;
  min-height: 32px;
  max-height: 32px;
  background: var(--select-bg);
  color: var(--select-fg);
  border-radius: 0.35rem;
  border: 1px solid var(--select-border);
  outline: transparent;
  transition: 250ms ease-in-out;
  min-width: fit-content;
  position: relative;
  user-select: none;

  &.disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  & ul {
    margin: 0;
    background-color: var(--select-list-bg);
    color: var(--select-fg);
    list-style-type: none;
    font-weight: 500;
    border: 1px solid var(--select-border);
    border-radius: 0.35rem;
    position: absolute;
    overflow: auto;
    max-height: calc(5 * 34px);
    display: none;
    scrollbar-width: none;
    left: -1px;
    min-width: 100%;
    top: 34px;
    z-index: 9999;

    & li {
      outline: transparent;
      margin: 0;
      min-height: 34px !important;
      display: flex;
      align-items: center;
      padding-left: 0.75rem;
      font-weight: normal;

      &>* {
        pointer-events: none;
      }

      &:hover,
      &:focus-within {
        background-color: var(--select-hover-bg);
      }

      &.active {
        position: relative;
      }

      &.active::after {
        position: absolute;
        z-index: 1;
        opacity: 0.5;
        width: 16px;
        height: 16px;
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>');
        right: 0.5rem;
        top: 0.5rem;
      }

      .dark &.active::after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>');
      }
    }
  }

  &::after {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    opacity: 0.5;
    width: 16px;
    height: 16px;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"/></svg>');
    right: 0.5rem;
    top: 0.5rem;
  }

  .dark &::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"/></svg>');
  }

  &:not(.disabled):focus-within::after {
    transform-origin: center;
    transform: rotate(180deg);
  }

  & button {
    border: transparent;
    height: 32px;
    width: 100%;
    font-weight: normal;
    padding: 0.25rem 0.75rem;
    justify-content: flex-start;
    outline: transparent;
  }

  &:not(.disabled) button:focus,
  &:not(.disabled) button:hover {
    background-color: var(--select-active-bg);
  }

  &:not(.disabled) button:focus ul,
  &:not(.disabled):focus-within ul {
    display: unset;
  }

  &:hover button,
  &:focus-within button {
    border: 1px solid var(--input-focus-border);
  }

  &.mandatory {
    border-left: 0;
  }

  &.mandatory button {
    border-left: 2px solid;
    border-radius: 0.25rem;
  }

  &.mandatory:not(.disabled):focus-within button,
  &.mandatory:not(.disabled) button:focus,
  &.mandatory:not(.disabled) button:hover {
    background-color: var(--mandatory-bg);
    border-left: 2px solid var(--danger-bg) !important;
  }

  &.disabled.mandatory button {
    opacity: 0.5;
  }
}

table {
  border-collapse: collapse;
  border: 1px solid var(--table-border);
  font-size: 15px;
  font-weight: normal !important;

  &>caption {
    padding: 0.75rem;
  }

  & thead,
  & tfoot {
    text-align: left;
    position: sticky;
  }

  & thead {
    top: 0;
    background-color: var(--table-header);
  }

  & tfoot {
    bottom: 1px;
    background-color: var(--table-footer);
  }

  & th,
  & td {
    padding: 0.5rem 0.75rem;
  }

  & th {
    font-weight: 600;
  }

  & td {
    border-bottom: 1px solid var(--table-border-row);
  }

  &.border th,
  &.border td {
    border-bottom: 1px solid var(--table-border-row);
    border-right: 1px solid var(--table-border-row);
  }

  & tbody tr:last-child td {
    border-bottom: none;
  }

  &.alternate>tbody tr:nth-of-type(even) {
    background-color: var(--table-alternate-rows);
  }

  & tr:hover {
    background-color: var(--table-row-hover) !important;
  }

  &:hover {
    border: 1px solid var(--table-hover-border) !important;
  }

  &.compact th,
  &.compact td {
    padding: 0.25rem 0.5rem;
  }

  &.comfort th,
  &.comfort td {
    padding: 0.75rem;
  }

  &.disabled {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0.5;
  }
}

/* Separator */
hr {
  border: 1px solid var(--table-header);
  height: 0;
  width: 100%;

  &.vertical {
    width: 0;
    height: 100%;
  }
}

/* Pre / Code */
pre,
code {
  font-family: monospace;
  background-color: var(--secondary-bg);
  border: 1px solid var(--secondary-border);
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  white-space: pre-line;
  line-height: 1.5;
}

/* ul / ol */
ul,
ol {
  margin-left: 1rem;

  & li {
    line-height: 1.75;
    padding-left: 0.5rem;
  }
}

/* Images */
img {
  display: inline-block;
  /* border: 1px solid var(--default-border); */
  border: none;
  border-radius: 1rem;
  object-fit: cover;
}

.group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.input-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.35rem;

  & label {
    font-size: 14px;
    opacity: 0.75;
  }

  & span.info {
    font-size: 13px;
    opacity: 0.5;
  }

  & span.error {
    font-size: 13px;
    color: var(--danger-bg);
  }

  &.error label {
    color: var(--danger-bg);
  }

  &.error input,
  &.error textarea {
    border-color: var(--danger-bg);
  }
}

/* General styles */

.pointer {
  cursor: pointer;
}

.tal {
  text-align: left
}

.tac {
  text-align: center
}

.taj {
  text-align: justify
}

.tar {
  text-align: right
}

.flex {
  display: flex;
  flex-direction: row
}

.flex-col {
  display: flex;
  flex-direction: column
}

.f1 {
  flex: 1
}

.f2 {
  flex: 2
}

.f3 {
  flex: 3
}

.f4 {
  flex: 4
}

.f5 {
  flex: 5
}

.block {
  display: block
}

.nowrap {
  white-space: pre;
  text-overflow: ellipsis;
  overflow: hidden;
}

.none {
  display: none
}

.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.pf {
  position: fixed;
}

.ps {
  position: sticky;
}

.l0 {
  left: 0
}

.t0 {
  top: 0
}

.r0 {
  right: 0
}

.b0 {
  bottom: 0
}

.pen {
  pointer-events: none;
}

.o0 {
  opacity: 0
}

.o1 {
  opacity: 0.1
}

.o2 {
  opacity: 0.2
}

.o3 {
  opacity: 0.3
}

.o4 {
  opacity: 0.4
}

.o5 {
  opacity: 0.5
}

.o6 {
  opacity: 0.6
}

.o7 {
  opacity: 0.7
}

.o8 {
  opacity: 0.8
}

.o9 {
  opacity: 0.9
}

.o {
  opacity: 1
}

.fw {
  flex-wrap: wrap
}

.oa {
  overflow: auto
}

.oh {
  overflow: hidden;
}

.jsfs {
  justify-self: flex-start
}

.jsc {
  justify-self: center
}

.jsfe {
  justify-self: flex-end;
}

.asfs {
  align-self: flex-start
}

.asc {
  align-self: center
}

.asfe {
  align-self: flex-end;
}

.jcfs {
  justify-content: flex-start
}

.jcc {
  justify-content: center
}

.jcfe {
  justify-content: flex-end;
}

.jcsa {
  justify-content: space-around
}

.jcsb {
  justify-content: space-between
}

.jcse {
  justify-content: space-evenly
}

.aifs {
  align-items: flex-start
}

.aic {
  align-items: center
}

.aife {
  align-items: flex-end;
}

/* .container {
  height: 100dvh;
  width: 100dvw;
  overflow: auto;
} */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 2rem;
}

.muted {
  opacity: .5
}

section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--default-border)
}

section section {
  border-bottom: none
}

.g0 {
  gap: 0
}

.g025 {
  gap: .25rem
}

.g05 {
  gap: .5rem
}

.g075 {
  gap: .75rem
}

.g1 {
  gap: 1rem
}

.g125 {
  gap: 1.25rem
}

.g15 {
  gap: 1.5rem
}

.g175 {
  gap: 1.75rem
}

.g2 {
  gap: 2rem
}

.g25 {
  gap: 2.5rem
}

.g3 {
  gap: 3rem
}

.g35 {
  gap: 3.5rem
}

.g4 {
  gap: 4rem
}

.g45 {
  gap: 4.5rem
}

.g5 {
  gap: 5rem
}

.cg0 {
  column-gap: 0
}

.cg025 {
  column-gap: .25rem
}

.cg05 {
  column-gap: .5rem
}

.cg075 {
  column-gap: .75rem
}

.cg1 {
  column-gap: 1rem
}

.cg125 {
  column-gap: 1.25rem
}

.cg15 {
  column-gap: 1.5rem
}

.cg175 {
  column-gap: 1.75rem
}

.cg2 {
  column-gap: 2rem
}

.cg25 {
  column-gap: 2.5rem
}

.cg3 {
  column-gap: 3rem
}

.cg35 {
  column-gap: 3.5rem
}

.cg4 {
  column-gap: 4rem
}

.cg45 {
  column-gap: 4.5rem
}

.cg5 {
  column-gap: 5rem
}

.rg0 {
  row-gap: 0
}

.rg025 {
  row-gap: .25rem
}

.rg05 {
  row-gap: .5rem
}

.rg075 {
  row-gap: .75rem
}

.rg1 {
  row-gap: 1rem
}

.rg125 {
  row-gap: 1.25rem
}

.rg15 {
  row-gap: 1.5rem
}

.rg175 {
  row-gap: 1.75rem
}

.rg2 {
  row-gap: 2rem
}

.rg25 {
  row-gap: 2.5rem
}

.rg3 {
  row-gap: 3rem
}

.rg35 {
  row-gap: 3.5rem
}

.rg4 {
  row-gap: 4rem
}

.rg45 {
  row-gap: 4.5rem
}

.rg5 {
  row-gap: 5rem
}

.ma {
  margin: auto
}

.m0 {
  margin: 0
}

.m025 {
  margin: .25rem
}

.m05 {
  margin: .5rem
}

.m075 {
  margin: .75rem
}

.m1 {
  margin: 1rem
}

.m125 {
  margin: 1.25rem
}

.m15 {
  margin: 1.5rem
}

.m175 {
  margin: 1.75rem
}

.m2 {
  margin: 2rem
}

.m25 {
  margin: 2.5rem
}

.m3 {
  margin: 3rem
}

.m35 {
  margin: 3.5rem
}

.m4 {
  margin: 4rem
}

.m45 {
  margin: 4.5rem
}

.m5 {
  margin: 5rem
}

.mya {
  margin-block: auto
}

.my0 {
  margin-block: 0
}

.my025 {
  margin-block: .25rem
}

.my05 {
  margin-block: .5rem
}

.my075 {
  margin-block: .75rem
}

.my1 {
  margin-block: 1rem
}

.my125 {
  margin-block: 1.25rem
}

.my15 {
  margin-block: 1.5rem
}

.my175 {
  margin-block: 1.75rem
}

.my2 {
  margin-block: 2rem
}

.my25 {
  margin-block: 2.5rem
}

.my3 {
  margin-block: 3rem
}

.my35 {
  margin-block: 3.5rem
}

.my4 {
  margin-block: 4rem
}

.my45 {
  margin-block: 4.5rem
}

.my5 {
  margin-block: 5rem
}

.mxa {
  margin-inline: auto
}

.mx0 {
  margin-inline: 0
}

.mx025 {
  margin-inline: .25rem
}

.mx05 {
  margin-inline: .5rem
}

.mx075 {
  margin-inline: .75rem
}

.mx1 {
  margin-inline: 1rem
}

.mx125 {
  margin-inline: 1.25rem
}

.mx15 {
  margin-inline: 1.5rem
}

.mx175 {
  margin-inline: 1.75rem
}

.mx2 {
  margin-inline: 2rem
}

.mx25 {
  margin-inline: 2.5rem
}

.mx3 {
  margin-inline: 3rem
}

.mx35 {
  margin-inline: 3.5rem
}

.mx4 {
  margin-inline: 4rem
}

.mx45 {
  margin-inline: 4.5rem
}

.mx5 {
  margin-inline: 5rem
}

.mta {
  margin-top: auto
}

.mt0 {
  margin-top: 0
}

.mt025 {
  margin-top: .25rem
}

.mt05 {
  margin-top: .5rem
}

.mt075 {
  margin-top: .75rem
}

.mt1 {
  margin-top: 1rem
}

.mt125 {
  margin-top: 1.25rem
}

.mt15 {
  margin-top: 1.5rem
}

.mt175 {
  margin-top: 1.75rem
}

.mt2 {
  margin-top: 2rem
}

.mt25 {
  margin-top: 2.5rem
}

.mt3 {
  margin-top: 3rem
}

.mt35 {
  margin-top: 3.5rem
}

.mt4 {
  margin-top: 4rem
}

.mt45 {
  margin-top: 4.5rem
}

.mt5 {
  margin-top: 5rem
}

.mra {
  margin-right: auto
}

.mr0 {
  margin-right: 0
}

.mr025 {
  margin-right: .25rem
}

.mr05 {
  margin-right: .5rem
}

.mr075 {
  margin-right: .75rem
}

.mr1 {
  margin-right: 1rem
}

.mr125 {
  margin-right: 1.25rem
}

.mr15 {
  margin-right: 1.5rem
}

.mr175 {
  margin-right: 1.75rem
}

.mr2 {
  margin-right: 2rem
}

.mr25 {
  margin-right: 2.5rem
}

.mr3 {
  margin-right: 3rem
}

.mr35 {
  margin-right: 3.5rem
}

.mr4 {
  margin-right: 4rem
}

.mr45 {
  margin-right: 4.5rem
}

.mr5 {
  margin-right: 5rem
}

.mba {
  margin-bottom: auto
}

.mb0 {
  margin-bottom: 0
}

.mb025 {
  margin-bottom: .25rem
}

.mb05 {
  margin-bottom: .5rem
}

.mb075 {
  margin-bottom: .75rem
}

.mb1 {
  margin-bottom: 1rem
}

.mb125 {
  margin-bottom: 1.25rem
}

.mb15 {
  margin-bottom: 1.5rem
}

.mb175 {
  margin-bottom: 1.75rem
}

.mb2 {
  margin-bottom: 2rem
}

.mb25 {
  margin-bottom: 2.5rem
}

.mb3 {
  margin-bottom: 3rem
}

.mb35 {
  margin-bottom: 3.5rem
}

.mb4 {
  margin-bottom: 4rem
}

.mb45 {
  margin-bottom: 4.5rem
}

.mb5 {
  margin-bottom: 5rem
}

.mla {
  margin-left: auto
}

.ml0 {
  margin-left: 0
}

.ml025 {
  margin-left: .25rem
}

.ml05 {
  margin-left: .5rem
}

.ml075 {
  margin-left: .75rem
}

.ml1 {
  margin-left: 1rem
}

.ml125 {
  margin-left: 1.25rem
}

.ml15 {
  margin-left: 1.5rem
}

.ml175 {
  margin-left: 1.75rem
}

.ml2 {
  margin-left: 2rem
}

.ml25 {
  margin-left: 2.5rem
}

.ml3 {
  margin-left: 3rem
}

.ml35 {
  margin-left: 3.5rem
}

.ml4 {
  margin-left: 4rem
}

.ml45 {
  margin-left: 4.5rem
}

.ml5 {
  margin-left: 5rem
}

.p0 {
  padding: 0
}

.p025 {
  padding: .25rem
}

.p05 {
  padding: .5rem
}

.p075 {
  padding: .75rem
}

.p1 {
  padding: 1rem
}

.p125 {
  padding: 1.25rem
}

.p15 {
  padding: 1.5rem
}

.p175 {
  padding: 1.75rem
}

.p2 {
  padding: 2rem
}

.p25 {
  padding: 2.5rem
}

.p3 {
  padding: 3rem
}

.p35 {
  padding: 3.5rem
}

.p4 {
  padding: 4rem
}

.p45 {
  padding: 4.5rem
}

.p5 {
  padding: 5rem
}

.pya {
  padding-block: auto
}

.py0 {
  padding-block: 0
}

.py025 {
  padding-block: .25rem
}

.py05 {
  padding-block: .5rem
}

.py075 {
  padding-block: .75rem
}

.py1 {
  padding-block: 1rem
}

.py125 {
  padding-block: 1.25rem
}

.py15 {
  padding-block: 1.5rem
}

.py175 {
  padding-block: 1.75rem
}

.py2 {
  padding-block: 2rem
}

.py25 {
  padding-block: 2.5rem
}

.py3 {
  padding-block: 3rem
}

.py35 {
  padding-block: 3.5rem
}

.py4 {
  padding-block: 4rem
}

.py45 {
  padding-block: 4.5rem
}

.py5 {
  padding-block: 5rem
}

.pxa {
  padding-inline: auto
}

.px0 {
  padding-inline: 0
}

.px025 {
  padding-inline: .25rem
}

.px05 {
  padding-inline: .5rem
}

.px075 {
  padding-inline: .75rem
}

.px1 {
  padding-inline: 1rem
}

.px125 {
  padding-inline: 1.25rem
}

.px15 {
  padding-inline: 1.5rem
}

.px175 {
  padding-inline: 1.75rem
}

.px2 {
  padding-inline: 2rem
}

.px25 {
  padding-inline: 2.5rem
}

.px3 {
  padding-inline: 3rem
}

.px35 {
  padding-inline: 3.5rem
}

.px4 {
  padding-inline: 4rem
}

.px45 {
  padding-inline: 4.5rem
}

.px5 {
  padding-inline: 5rem
}

.pta {
  padding-top: auto
}

.pt0 {
  padding-top: 0
}

.pt025 {
  padding-top: .25rem
}

.pt05 {
  padding-top: .5rem
}

.pt075 {
  padding-top: .75rem
}

.pt1 {
  padding-top: 1rem
}

.pt125 {
  padding-top: 1.25rem
}

.pt15 {
  padding-top: 1.5rem
}

.pt175 {
  padding-top: 1.75rem
}

.pt2 {
  padding-top: 2rem
}

.pt25 {
  padding-top: 2.5rem
}

.pt3 {
  padding-top: 3rem
}

.pt35 {
  padding-top: 3.5rem
}

.pt4 {
  padding-top: 4rem
}

.pt45 {
  padding-top: 4.5rem
}

.pt5 {
  padding-top: 5rem
}

.pra {
  padding-right: auto
}

.pr0 {
  padding-right: 0
}

.pr025 {
  padding-right: .25rem
}

.pr05 {
  padding-right: .5rem
}

.pr075 {
  padding-right: .75rem
}

.pr1 {
  padding-right: 1rem
}

.pr125 {
  padding-right: 1.25rem
}

.pr15 {
  padding-right: 1.5rem
}

.pr175 {
  padding-right: 1.75rem
}

.pr2 {
  padding-right: 2rem
}

.pr25 {
  padding-right: 2.5rem
}

.pr3 {
  padding-right: 3rem
}

.pr35 {
  padding-right: 3.5rem
}

.pr4 {
  padding-right: 4rem
}

.pr45 {
  padding-right: 4.5rem
}

.pr5 {
  padding-right: 5rem
}

.pba {
  padding-bottom: auto
}

.pb0 {
  padding-bottom: 0
}

.pb025 {
  padding-bottom: .25rem
}

.pb05 {
  padding-bottom: .5rem
}

.pb075 {
  padding-bottom: .75rem
}

.pb1 {
  padding-bottom: 1rem
}

.pb125 {
  padding-bottom: 1.25rem
}

.pb15 {
  padding-bottom: 1.5rem
}

.pb175 {
  padding-bottom: 1.75rem
}

.pb2 {
  padding-bottom: 2rem
}

.pb25 {
  padding-bottom: 2.5rem
}

.pb3 {
  padding-bottom: 3rem
}

.pb35 {
  padding-bottom: 3.5rem
}

.pb4 {
  padding-bottom: 4rem
}

.pb45 {
  padding-bottom: 4.5rem
}

.pb5 {
  padding-bottom: 5rem
}

.pla {
  padding-left: auto
}

.pl0 {
  padding-left: 0
}

.pl025 {
  padding-left: .25rem
}

.pl05 {
  padding-left: .5rem
}

.pl075 {
  padding-left: .75rem
}

.pl1 {
  padding-left: 1rem
}

.pl125 {
  padding-left: 1.25rem
}

.pl15 {
  padding-left: 1.5rem
}

.pl175 {
  padding-left: 1.75rem
}

.pl2 {
  padding-left: 2rem
}

.pl25 {
  padding-left: 2.5rem
}

.pl3 {
  padding-left: 3rem
}

.pl35 {
  padding-left: 3.5rem
}

.pl4 {
  padding-left: 4rem
}

.pl45 {
  padding-left: 4.5rem
}

.pl5 {
  padding-left: 5rem
}

.fw1 {
  font-weight: 100
}

.fw2 {
  font-weight: 200
}

.fw3 {
  font-weight: 300
}

.fw4 {
  font-weight: 400
}

.fw5 {
  font-weight: 500
}

.fw6 {
  font-weight: 600
}

.fw7 {
  font-weight: 700
}

.fw8 {
  font-weight: 800
}

.fw9 {
  font-weight: 900
}

.full {
  scroll-behavior: smooth;
  background: inherit;
  min-width: 100vw;
  min-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.wa {
  width: unset !important;
}

.w0 {
  width: 0
}

.w10 {
  width: 10%
}

.w20 {
  width: 20%
}

.w25 {
  width: 25%
}

.w30 {
  width: 30%
}

.w40 {
  width: 40%
}

.w50 {
  width: 50%
}

.w60 {
  width: 60%
}

.w70 {
  width: 70%
}

.w75 {
  width: 75%
}

.w80 {
  width: 80%
}

.w90 {
  width: 90%
}

.w100 {
  width: 100%
}

.wf {
  width: fit-content;
}

.wm {
  width: max-content;
}

.hf {
  height: fit-content;
}

.hm {
  height: max-content;
}

.ha {
  height: unset !important;
}

.h0 {
  height: 0
}

.h10 {
  height: 10%
}

.h20 {
  height: 20%
}

.h25 {
  height: 25%
}

.h30 {
  height: 30%
}

.h40 {
  height: 40%
}

.h50 {
  height: 50%
}

.h60 {
  height: 60%
}

.h70 {
  height: 70%
}

.h75 {
  height: 75%
}

.h80 {
  height: 80%
}

.h90 {
  height: 90%
}

.h100 {
  height: 100%
}

.fs025 {
  font-size: .25rem
}

.fs05 {
  font-size: .5rem
}

.fs075 {
  font-size: .75rem
}

.fs1 {
  font-size: 1rem
}

.fs125 {
  font-size: 1.25rem
}

.fs15 {
  font-size: 1.5rem
}

.fs175 {
  font-size: 1.75rem
}

.fs2 {
  font-size: 2rem
}

.fs25 {
  font-size: 2.5rem
}

.fs3 {
  font-size: 3rem
}

.fs35 {
  font-size: 3.5rem
}

.fs4 {
  font-size: 4rem
}

.fs45 {
  font-size: 4.5rem
}

.fs5 {
  font-size: 5rem
}

.sbn {
  scrollbar-width: none
}

.br0 {
  border-radius: 0
}

.brf {
  border-radius: 100%;
}

.br025 {
  border-radius: 0.25rem
}

.br05 {
  border-radius: 0.5rem
}

.br075 {
  border-radius: 0.75rem
}

.br1 {
  border-radius: 1rem
}

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.errors {
  color: var(--danger-bg);
  font-size: 12px;
  margin: 0;
  margin-bottom: 1rem;
  border: 1px solid var(--danger-bg);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  list-style-position: outside;
  background-color: rgba(255, 0, 0, 0.025);

  &>li {
    margin-left: 1rem;
    line-height: 1.5
  }

  &>li:first-child {
    font-size: 14px;
    font-weight: 600;
    list-style-type: none;
    margin: 0;
    padding: 0
  }
}


#moveTop {
  z-index: 9999;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--default-fg);
  position: fixed;
  right: 2rem;
  bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms cubic-bezier(0.86, 0, 0.07, 1);
  user-select: none;
  transform: translateY(100px) scale(1);
  background: var(--default-bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 512 512"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 244l144-144 144 144M256 120v292" fill="none" stroke="white"></path></svg>') no-repeat center center;

  &.show {
    transform: translateY(0);
  }

  &>* {
    pointer-events: none
  }

  &.show:hover {
    cursor: pointer;
    transform: scale(1.05);
  }
}

.dark #moveTop {
  background: var(--default-bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 512 512"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 244l144-144 144 144M256 120v292" fill="none" stroke="black"></path></svg>') no-repeat center center;
}

.bs1 {
  box-shadow: 0 0 4px 4px #0002
}
.bs2 {
  box-shadow: 0 0 8px 8px #0002
}

/* Animations */
.rotate {
  animation: animation_rotate var(--duration, 1s) linear infinite forwards;
}

.alternate {
  animation-direction: alternate-reverse;
}

@keyframes animation_rotate {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@media screen and (max-width: 800px) {
  .col3 {
    grid-column: span 1 !important
  }

  .col2 {
    grid-column: span 1 !important
  }
}