/* File: 01_fonts.css */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

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

.tw-font-mono {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

.tw-font-bold {
    font-weight: bold;
}
/* File: 02_colors.css */
:root {
    --color-foreground: #1a1a1a;
    --color-background: white;

    --color-primary: #076b42;
    --color-primary-border: #064129;
    --color-primary-hover: #064129;
    --color-primary-hover-border: #021a10;
    --color-primary-active: #021a10;
    --color-primary-active-border: #021a10;

    /* --color-secondary: #f5f5f5; */
    --color-secondary: #ffffff;
    --color-secondary-border: #747474;
    --color-secondary-hover: #dcdcdc;
    --color-secondary-hover-border: #454545;
    --color-secondary-active: #bfbfbf;
    --color-secondary-active-border: #1a1a1a;

    --color-on-primary: white;
    --color-on-secondary: var(--color-foreground);

    --color-code: #343536;
    --color-code-foreground: white;

    --color-info: #1B86C3;
    --color-success: #358000;
    --color-warning: #FEBB30;
    --color-destructive: #CC0000;
    --color-destructive-light: #FFE0E0;

}

* {
    color: var(--color-foreground);
}

.tw-bg-primary {
    background-color: var(--color-primary);
}

.tw-border-primary {
    border-color: var(--color-primary-border);
}

.tw-border-destructive {
    border-color: var(--color-destructive);
}

.tw-bg-destructive-light {
    background-color: var(--color-destructive-light);
}

.hover\:tw-bg-primary {
    background-color: var(--color-primary-hover);
}

.hover\:tw-border-primary {
    border-color: var(--color-primary-hover-border);
}

.active\:tw-bg-primary {
    background-color: var(--color-primary-active);
}

.active\:tw-border-primary {
    border-color: var(--color-primary-active-border);
}

.tw-bg-secondary {
    background-color: var(--color-secondary);
}

.tw-border-secondary {
    border-color: var(--color-secondary-border);
}

.hover\:tw-bg-secondary {
    background-color: var(--color-secondary-hover);
}

.hover\:tw-border-secondary {
    border-color: var(--color-secondary-hover-border);
}

.active\:tw-bg-secondary {
    background-color: var(--color-secondary-active);
}

.active\:tw-border-secondary {
    border-color: var(--color-secondary-active-border);
}

.tw-text-foreground {
    color: var(--color-foreground);
}

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

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

.tw-text-secondary-border {
    color: var(--color-secondary-border);
}

.tw-text-primary-foreground {
    color: var(--color-on-primary);
}

.tw-text-secondary-foreground {
    color: var(--color-on-secondary);
}

.tw-text-muted {
    color: var(--color-secondary-border);
}

.tw-bg-muted {
    background-color: var(--color-secondary-border);
}

.tw-text-transparent {
    color: transparent;
}

.tw-bg-code {
    background-color: var(--color-code);
}

.tw-text-code-foreground {
    color: var(--color-code-foreground);
}

.tw-text-destructive {
    color: var(--color-destructive);
}
/* File: 02_flex.css */
.tw-flex       { display: flex; }
.tw-inline-flex{ display: inline-flex; }

.tw-flex-row       { flex-direction: row; }
.tw-flex-row-reverse { flex-direction: row-reverse; }
.tw-flex-col       { flex-direction: column; }
.tw-flex-col-reverse { flex-direction: column-reverse; }

.tw-items-start    { align-items: flex-start; }
.tw-items-center   { align-items: center; }
.tw-items-end      { align-items: flex-end; }
.tw-items-stretch  { align-items: stretch; }

.tw-justify-start  { justify-content: flex-start; }
.tw-justify-center { justify-content: center; }
.tw-justify-end    { justify-content: flex-end; }
.tw-justify-between{ justify-content: space-between; }
.tw-justify-around { justify-content: space-around; }
.tw-justify-evenly { justify-content: space-evenly; }

.tw-gap-0     { gap: 0rem; }
.tw-gap-1     { gap: 0.25rem; }
.tw-gap-2     { gap: 0.5rem; }
.tw-gap-4     { gap: 1rem; }
.tw-gap-8     { gap: 2rem; }

/* File: 02_sizes.css */
.tw-w-full {
    width: 100%;
}

.tw-h-full {
    height: 100%;
}

.tw-h-\[90px\] {
    height: 90px;
}

.tw-h-\[1px\] {
    height: 1px;
}

.tw-w-\[115px\] {
    width: 115px;
}

.tw-scale-50 {
    scale: 0.5;
}

/* File: 02_text.css */
.tw-text-center {
    text-align: center;
}

.tw-text-left {
    text-align: left;
}

.tw-text-right {
    text-align: right;
}

.tw-text-xl {
    font-size: 24px;
    line-height: 31px;
}

.tw-text-sm {
    font-size: 14px;
    line-height: 18px;
}

.tw-underline {
    text-decoration: underline;
}

p {
    font-size: 16px;
    line-height: 21px;
}

::selection {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.tw-break-words {
    overflow-wrap: break-word;
}
/* File: 02_vars.css */
:root {
    --border-radius: 4px;
}
/* File: 03_shadow.css */
.tw-shadow {
    box-shadow: 0 8px 16px #0000004d;
}

/* File: 04_border.css */
.tw-border {
    border-width: 1px;
    border-style: solid;
}

.tw-rounded {
    border-radius: 4px;
}

.tw-border-r-0 { border-right-width: 0px; }
.tw-border-b-0 { border-bottom-width: 0px; }
.tw-border-l-0 { border-left-width: 0px; }
.tw-border-t-0 { border-top-width: 0px; }
.tw-border-x-0 { border-left-width: 0px; border-right-width: 0px; }
.tw-border-y-0 { border-top-width: 0px; border-bottom-width: 0px; }

.tw-border-r-1 { border-right-width: 1px; }
.tw-border-b-1 { border-bottom-width: 1px; }
.tw-border-l-1 { border-left-width: 1px; }
.tw-border-t-1 { border-top-width: 1px; }
.tw-border-t-2 { border-top-width: 2px; }
.tw-border-b-2 { border-bottom-width: 2px; }
.tw-border-l-2 { border-left-width: 2px; }
.tw-border-r-2 { border-right-width: 2px; }
.tw-border-t-4 { border-top-width: 4px; }
.tw-border-b-4 { border-bottom-width: 4px; }
.tw-border-l-4 { border-left-width: 4px; }
.tw-border-r-4 { border-right-width: 4px; }
.tw-border-t-8 { border-top-width: 8px; }
.tw-border-b-8 { border-bottom-width: 8px; }
.tw-border-l-8 { border-left-width: 8px; }
.tw-border-r-8 { border-right-width: 8px; }




/* File: 04_ring.css */
.tw-ring {  
    box-shadow:
      0 0 0 2px white,
      0 0 0 4px var(--color-secondary-border);
}

/* File: 05_padding.css */
/* General padding (p) */
.tw-p-0       { padding: 0rem; }
.tw-p-1       { padding: 0.25rem; }
.tw-p-2       { padding: 0.5rem; }
.tw-p-4       { padding: 1rem; }
.tw-p-8       { padding: 2rem; }

/* Padding per side */
.tw-pt-1      { padding-top: 0.25rem; }
.tw-pr-1      { padding-right: 0.25rem; }
.tw-pb-1      { padding-bottom: 0.25rem; }
.tw-pl-1      { padding-left: 0.25rem; }

.tw-pt-2      { padding-top: 0.5rem; }
.tw-pr-2      { padding-right: 0.5rem; }
.tw-pb-2      { padding-bottom: 0.5rem; }
.tw-pl-2      { padding-left: 0.5rem; }

.tw-pt-4      { padding-top: 1rem; }
.tw-pr-4      { padding-right: 1rem; }
.tw-pb-4      { padding-bottom: 1rem; }
.tw-pl-4      { padding-left: 1rem; }

.tw-pt-8      { padding-top: 2rem; }
.tw-pr-8      { padding-right: 2rem; }
.tw-pb-8      { padding-bottom: 2rem; }
.tw-pl-8      { padding-left: 2rem; }

/* Horizontal & vertical padding shorthands */
.tw-px-1      { padding-left: 0.25rem; padding-right: 0.25rem; }
.tw-py-1      { padding-top: 0.25rem; padding-bottom: 0.25rem; }

.tw-px-2      { padding-left: 0.5rem; padding-right: 0.5rem; }
.tw-py-2      { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.tw-px-4      { padding-left: 1rem; padding-right: 1rem; }
.tw-py-4      { padding-top: 1rem; padding-bottom: 1rem; }

.tw-px-8      { padding-left: 2rem; padding-right: 2rem; }
.tw-py-8      { padding-top: 2rem; padding-bottom: 2rem; }

.tw-px-16      { padding-left: 4rem; padding-right: 4rem; }
.tw-py-16      { padding-top: 4rem; padding-bottom: 4rem; }
/* File: 06_margin.css */
/* General margins (m) */
.tw-m-0       { margin: 0rem; }
.tw-m-1       { margin: 0.25rem; }
.tw-m-2       { margin: 0.5rem; }
.tw-m-4       { margin: 1rem; }
.tw-m-8       { margin: 2rem; }
.tw-m-auto    { margin: auto; }

/* Margin per side */
.tw-mt-0      { margin-top: 0rem; }
.tw-mr-0      { margin-right: 0rem; }
.tw-mb-0      { margin-bottom: 0rem; }
.tw-ml-0      { margin-left: 0rem; }

.tw-mt-1      { margin-top: 0.25rem; }
.tw-mr-1      { margin-right: 0.25rem; }
.tw-mb-1      { margin-bottom: 0.25rem; }
.tw-ml-1      { margin-left: 0.25rem; }

.tw-mt-2      { margin-top: 0.5rem; }
.tw-mr-2      { margin-right: 0.5rem; }
.tw-mb-2      { margin-bottom: 0.5rem; }
.tw-ml-2      { margin-left: 0.5rem; }

.tw-mt-4      { margin-top: 1rem; }
.tw-mr-4      { margin-right: 1rem; }
.tw-mb-4      { margin-bottom: 1rem; }
.tw-ml-4      { margin-left: 1rem; }

.tw-mt-8      { margin-top: 2rem; }
.tw-mr-8      { margin-right: 2rem; }
.tw-mb-8      { margin-bottom: 2rem; }
.tw-ml-8      { margin-left: 2rem; }

.tw-mt-16      { margin-top: 4rem; }
.tw-mr-16      { margin-right: 4rem; }
.tw-mb-16      { margin-bottom: 4rem; }
.tw-ml-16      { margin-left: 4rem; }

/* Horizontal & vertical margin shorthands */
.tw-my-auto  { margin-top: auto; margin-bottom: auto; }
.tw-mx-auto  { margin-left: auto; margin-right: auto; }

.tw-mx-1      { margin-left: 0.25rem; margin-right: 0.25rem; }
.tw-my-1      { margin-top: 0.25rem; margin-bottom: 0.25rem; }

.tw-mx-2      { margin-left: 0.5rem; margin-right: 0.5rem; }
.tw-my-2      { margin-top: 0.5rem; margin-bottom: 0.5rem; }

.tw-mx-4      { margin-left: 1rem; margin-right: 1rem; }
.tw-my-4      { margin-top: 1rem; margin-bottom: 1rem; }

.tw-mx-8      { margin-left: 2rem; margin-right: 2rem; }
.tw-my-8      { margin-top: 2rem; margin-bottom: 2rem; }

.tw-mx-16      { margin-left: 4rem; margin-right: 4rem; }
.tw-my-16      { margin-top: 4rem; margin-bottom: 4rem; }
/* File: 07_buttons.css */
.oes-button-primary {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.5rem 1rem;

    font-weight: bold;
    color: var(--color-on-primary);
    background-color: var(--color-primary);

    height: 40px;

    border-radius: var(--border-radius);
    border-top: 2px solid var(--color-primary-border);
    border-right: 2px solid var(--color-primary-border);
    border-bottom: 4px solid var(--color-primary-border);
    border-left: 2px solid var(--color-primary-border);
}

.oes-button-primary:hover,
.oes-button-primary:focus {
    color: var(--color-secondary-hover);
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover-border);
}

.oes-button-primary:active {
    color: var(--color-secondary-active);
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active-border);
}

.oes-button-primary:disabled,
.oes-button-primary:disabled:hover,
.oes-button-primary:disabled:focus,
.oes-button-primary:disabled:active {
    cursor: not-allowed;
    opacity: 0.5;
}

.oes-button-secondary {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.5rem 1rem;

    color: var(--color-on-secondary);
    background-color: var(--color-secondary);

    height: 40px;

    border-radius: var(--border-radius);
    border-top: 2px solid var(--color-secondary-border);
    border-right: 2px solid var(--color-secondary-border);
    border-bottom: 4px solid var(--color-secondary-border);
    border-left: 2px solid var(--color-secondary-border);
}

.oes-button-secondary:hover,
.oes-button-secondary:focus {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary-hover-border);
}

.oes-button-secondary:active {
    background-color: var(--color-secondary-active);
    border-color: var(--color-secondary-active-border);
}
/* File: 07_cards.css */
.oes-card {
    background-color: white;
    border: 1px solid var(--color-secondary-border);
    border-bottom: 10px solid var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    width: 320px;
    min-height: min(600px, 90vh);
}

/* File: 07_input.css */
input[type="text"].oes-input,
input[type="password"].oes-input {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0.5rem 1rem;

    margin: 0;

    color: var(--color-foreground);
    background-color: white;
    font-family: inherit;

    border-radius: 4px;
    border: 1px solid var(--color-secondary-border);
}

input[type="checkbox"].oes-input {
    border: 1px solid black;
    border-radius: 2px;
    height: 18px;
    width: 18px;
    background-color: white;
}
/* File: 07_links.css */
a {
    text-decoration: underline;
    color: inherit;
}

a:hover,
a:visited,
a:focus {
    color: inherit;
}
/* File: 07_progress.css */
.oes-progress-container {
    display: flex;
    align-items: center;

    width: 300px;
}

.oes-step {
    background-color: #CECECE;
    width: 12px;
    height: 12px;
    border-radius: 100%;
}

.oes-step-line {
    background-color: #CECECE;
    height: 2px;
    flex-grow: 1;
}

.oes-progress-container > .filled {
    background-color: var(--color-primary);
}

.oes-progress-container > .current {
    background-color: #CECECE;
    border: 2px solid var(--color-primary);
}

/* File: 08_layout.css */
body {
    min-height: 100vh;

    font-family: 'IBM Plex Sans', 'Newsreader', 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: calc(1.1em + 0.7rem);
    font-weight: 400;

    background: unset;
    background-color: var(--color-background);
    color: var(--color-foreground);
}

.page-container {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tw-hidden {
    display: none;
}