:root {
    --button-primary-bg: var(--color-blue);
    --button-primary-bg-hover: #333659;
    --button-primary-text: #ffffff;
    --button-secondary-bg: #ffffff;
    --button-secondary-bg-hover: var(--color-light-purple);
    --button-secondary-text: var(--color-text-primary);
    --button-secondary-outline: var(--color-text-primary);
    --button-bankid-bg: #39134c;
    --button-bankid-bg-hover: #470d70;
    --button-bankid-text: #ffffff
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: 0 3px 5px var(--color-shadow);
    font-family: inherit;
    font-weight: var(--font-weight-medium);
    padding: .25em .75em;
    line-height: 1.1;
    cursor: pointer;
    padding: calc(.5rem + .2vw) calc(1rem + .4vw);
    transition:.22s all ease-in-out
}

.button:hover {
    background-color:var(--button-primary-bg-hover)
}

.button[data-variant=outline] {
    background: none;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    border: 1px solid var(--button-secondary-outline);
    transition:background-color .3s, color .3s
}

.button[data-variant=outline]:hover {
    background-color: var(--button-secondary-bg-hover);
    transition:background-color .3s ease
}

.button[data-variant=outline]:focus {
    background-color: var(--button-secondary-bg-hover);
    transition:background-color .3s ease
}

.button[data-variant=outline]:active {
    background-color: var(--button-secondary-bg-hover);
    transition:background-color .3s ease
}

.button[data-variant=flat] {
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    padding: 8px;
    transition:background-color .3s, color .3s
}

.button[data-variant=flat]:hover {
    background-color: var(--button-secondary-bg-hover);
    transition:background-color .3s ease
}

.button[data-variant=flat]:focus {
    background-color: var(--button-secondary-bg-hover);
    transition:background-color .3s ease
}

.button[data-variant=flat]:active {
    background-color: var(--button-secondary-bg-hover);
    transition:background-color .3s ease
}

.button[data-variant=secondary] {
    outline:1px solid var(--btn-secondary-outline)
}

.button[data-variant=secondary]:hover {
    background-color: var(--btn-secondary-bg-hover);
    transition:background-color .3s ease
}

.button[data-variant=secondary] {
    background-color: var(--btn-secondary-bg);
    color:var(--btn-secondary-text)
}

.button[data-variant=bankid] {
    background-color: var(--button-bankid-bg);
    color:var(--button-bankid-fg)
}

.button[data-variant=bankid]:hover {
    background-color:var(--button-bankid-bg-hover)
}

.footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    padding: calc(4 * var(--spacing-v)) var(--spacing-h) var(--spacing-v) var(--spacing-h);
    gap:var(--spacing-h-base)
}

.form {
    display: flex;
    flex-direction: column;
    gap:var(--spacing-v)
}

.form-section {
    display: flex;
    flex-direction: column;
    gap:calc(2 * var(--spacing-v-base))
}

.form-field {
    display: flex;
    flex-direction: column;
    gap:2px
}

.form-label {
    font-weight:var(--font-weight-medium)
}

.form-field .form-label {
    transition:transform .2s ease
}

.form-field:focus-within .form-label {
    transform:translateY(-3px)
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-v-base) var(--spacing-h);
    margin-bottom:calc(2 * var(--spacing-v))
}

.header-left {
    display: flex;
    flex-direction: row;
    gap:var(--spacing-h)
}

.header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:var(--spacing-h-base)
}

.header-right a {
    text-decoration:none
}

.header-title {
    display: flex;
    align-items:center
}

.header-subtitle {
    color:var(--color-text-secondary)
}

:root {
    --input-background: #ffffff;
    --input-border: #d4d4d4;
    --input-border-focus: #b3b3b3;
    --input-border-width: 1px;
    --input-shadow: 0 0 #000, 0 0 #000, 0 1px 3px var(--color-shadow);
    --input-shadow-focus: 0 0 #000, 0 0 #000, 0 1px 3px rgba(0, 0, 0, .15);
    --input-height: calc(2.4rem + .1vw)
}

input, select, textarea {
    font-size: var(--font-size);
    padding: calc(.5rem + .2vw) calc(1rem + .4vw);
    box-sizing:border-box
}

.input, .select-wrapper {
    width: 100%;
    font-family: inherit;
    background-color: var(--input-background);
    border-radius: var(--border-radius);
    border: var(--input-border-width) solid var(--input-border);
    outline: var(--input-border-width) solid transparent;
    box-shadow:var(--input-shadow)
}

.input:hover {
    border: var(--input-border-width) solid var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
    transition:box-shadow .2s ease, border .2s ease
}

.input:focus, .select-wrapper:focus-within {
    outline-offset: 1.5px;
    outline: 2px solid color-mix(in srgb, var(--color-purple) 40%, transparent);
    transition:outline .2s ease, outline-offset .2s ease, box-shadow .2s ease
}

.input:not(textarea), .select-wrapper {
    line-height: var(--line-height-md);
    height:var(--input-height)
}

.select-wrapper {
    display: grid;
    min-width: 15ch;
    max-width: 30ch;
    cursor: pointer;
    grid-template-areas: "select";
    align-items: center;
    position:relative
}

.select-wrapper:after {
    content: "";
    width: .8em;
    height: .5em;
    background-color: var(--input-border-focus);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    justify-self: end;
    align-self: center;
    transition:transform .1s ease
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1rem;
    margin: 0;
    width: 100%;
    font-family: inherit;
    cursor: inherit;
    line-height: var(--line-height-md);
    outline:none
}

select, .select-wrapper:after {
    grid-area:select
}

input[type=checkbox] {
    position: absolute;
    opacity: 0;
    pointer-events:none
}

.checkbox-container {
    display: flex;
    align-items: center;
    width: fit-content;
    cursor: pointer;
    font-size: var(--font-size);
    position: relative;
    transition:box-shadow .3s
}

.checkbox-container:hover .checkbox-mark {
    outline-offset: 1.5px;
    outline:2px solid color(from var(--color-purple) / .9)
}

.checkbox-mark {
    position: relative;
    width: var(--font-size);
    height: var(--font-size);
    border: var(--border-width) solid var(--input-border);
    border-radius: var(--border-radius);
    margin-right: var(--spacing-h-base);
    background-color: var(--input-background);
    box-shadow: var(--input-shadow);
    transition:background-color .3s, border-color .3s, box-shadow .3s
}

.checkbox:checked + .checkbox-mark {
    box-shadow:var(--input-shadow-focus)
}

.checkbox-mark:after {
    content: "";
    position: absolute;
    display:none
}

.checkbox:checked + .checkbox-mark:after {
    display: block;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--color-text-primary);
    border-width: 0 3px 3px 0;
    transform:rotate(45deg)
}

main {
    width: 100vw;
    height:100vh
}

.content {
    flex-grow: 2;
    overflow-y: auto;
    transition:all .5s cubic-bezier(.25, .8, .25, 1)
}

.container {
    display: flex;
    flex-direction: column;
    height:100vh
}

.page {
    display: flex;
    flex-direction: column;
    align-items:center
}

.page__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin:0 auto
}

.page__content {
    width: min(100vw - 3rem, 80ch);
    margin-inline:auto
}

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

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

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

html {
    line-height: 1.15;
    -webkit-text-size-adjust:100%
}

body {
    margin:0
}

main {
    display:block
}

h1 {
    font-size: 2em;
    margin:.67em 0
}

a {
    background-color: transparent;
    text-decoration:none
}

img {
    border-style:none
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin:0
}

button, input {
    overflow:visible
}

button, select {
    text-transform:none
}

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance:button
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border-style: none;
    padding:0
}

button:-moz-focusring, input:-moz-focusring {
    outline:1px dotted ButtonText
}

textarea {
    overflow:auto
}

fieldset {
    border: 1px solid #d3d3d3;
    margin: 0 2px;
    padding:.35em .625em .75em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal;
    padding:0
}

progress {
    vertical-align:baseline
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height:auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset:-2px
}

::-webkit-search-decoration {
    -webkit-appearance:none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font:inherit
}

:root {
    --sidebar-color-bg: var(--color-background-secondary);
    --sidebar-color-border: var(--color-border);
    --sidebar-width: clamp(250px, 20vw, 300px)
}

.sidebar {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    overflow-x: hidden;
    border-right: var(--border-width) dashed var(--sidebar-color-border);
    background-color: var(--sidebar-color-bg);
    opacity: 1;
    will-change: auto;
    transition:flex .5s ease, opacity .3s ease
}

.sidebar[data-expanded=true] {
    visibility: visible;
    flex-grow: 1;
    pointer-events:auto
}

.sidebar[data-expanded=false] {
    flex: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events:none
}

.sidebar-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:var(--spacing-v-base) var(--spacing-h)
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--spacing-v) 0;
    transition:padding .5s ease
}

.sidebar-content nav {
    padding:var(--spacing-v) var(--spacing-h-base)
}

.sidebar-nav .nav-heading {
    font-weight: var(--font-weight-medium);
    font-size: 16px;
    padding:2px var(--spacing-h)
}

.sidebar-nav .nav-item {
    padding: 0 var(--spacing-h);
    border-radius: var(--border-radius);
    cursor:pointer
}

.sidebar-nav .nav-item a {
    font-weight: var(--font-weight-regular);
    text-decoration:none
}

.sidebar-nav .nav-item:hover {
    background-color:var(--color-light-purple)
}

.sidebar-footer {
    font-size: var(--font-size-md);
    display: flex;
    flex-direction: row;
    padding:var(--spacing-v) var(--spacing-h)
}

:root {
    --spacing-0: 0px;
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-48: 48px;
    --spacing-64: 64px
}

.m-0 {
    margin:var(--spacing-0)
}

.m-2 {
    margin:var(--spacing-2)
}

.m-4 {
    margin:var(--spacing-4)
}

.m-8 {
    margin:var(--spacing-8)
}

.m-16 {
    margin:var(--spacing-16)
}

.m-24 {
    margin:var(--spacing-24)
}

.m-32 {
    margin:var(--spacing-32)
}

.m-48 {
    margin:var(--spacing-48)
}

.m-64 {
    margin:var(--spacing-64)
}

.mt-0 {
    margin-top:var(--spacing-0)
}

.mt-2 {
    margin-top:var(--spacing-2)
}

.mt-4 {
    margin-top:var(--spacing-4)
}

.mt-8 {
    margin-top:var(--spacing-8)
}

.mt-16 {
    margin-top:var(--spacing-16)
}

.mt-24 {
    margin-top:var(--spacing-24)
}

.mt-32 {
    margin-top:var(--spacing-32)
}

.mt-48 {
    margin-top:var(--spacing-48)
}

.mt-64 {
    margin-top:var(--spacing-64)
}

.mr-0 {
    margin-right:var(--spacing-0)
}

.mr-2 {
    margin-right:var(--spacing-2)
}

.mr-4 {
    margin-right:var(--spacing-4)
}

.mr-8 {
    margin-right:var(--spacing-8)
}

.mr-16 {
    margin-right:var(--spacing-16)
}

.mr-24 {
    margin-right:var(--spacing-24)
}

.mr-32 {
    margin-right:var(--spacing-32)
}

.mr-48 {
    margin-right:var(--spacing-48)
}

.mr-64 {
    margin-right:var(--spacing-64)
}

.mb-0 {
    margin-bottom:var(--spacing-0)
}

.mb-2 {
    margin-bottom:var(--spacing-2)
}

.mb-4 {
    margin-bottom:var(--spacing-4)
}

.mb-8 {
    margin-bottom:var(--spacing-8)
}

.mb-16 {
    margin-bottom:var(--spacing-16)
}

.mb-24 {
    margin-bottom:var(--spacing-24)
}

.mb-32 {
    margin-bottom:var(--spacing-32)
}

.mb-48 {
    margin-bottom:var(--spacing-48)
}

.mb-64 {
    margin-bottom:var(--spacing-64)
}

.ml-0 {
    margin-left:var(--spacing-0)
}

.ml-2 {
    margin-left:var(--spacing-2)
}

.ml-4 {
    margin-left:var(--spacing-4)
}

.ml-8 {
    margin-left:var(--spacing-8)
}

.ml-16 {
    margin-left:var(--spacing-16)
}

.ml-24 {
    margin-left:var(--spacing-24)
}

.ml-32 {
    margin-left:var(--spacing-32)
}

.ml-48 {
    margin-left:var(--spacing-48)
}

.ml-64 {
    margin-left:var(--spacing-64)
}

.p-0 {
    padding:var(--spacing-0)
}

.p-2 {
    padding:var(--spacing-2)
}

.p-4 {
    padding:var(--spacing-4)
}

.p-8 {
    padding:var(--spacing-8)
}

.p-16 {
    padding:var(--spacing-16)
}

.p-24 {
    padding:var(--spacing-24)
}

.p-32 {
    padding:var(--spacing-32)
}

.p-48 {
    padding:var(--spacing-48)
}

.p-64 {
    padding:var(--spacing-64)
}

.pt-0 {
    padding-top:var(--spacing-0)
}

.pt-2 {
    padding-top:var(--spacing-2)
}

.pt-4 {
    padding-top:var(--spacing-4)
}

.pt-8 {
    padding-top:var(--spacing-8)
}

.pt-16 {
    padding-top:var(--spacing-16)
}

.pt-24 {
    padding-top:var(--spacing-24)
}

.pt-32 {
    padding-top:var(--spacing-32)
}

.pt-48 {
    padding-top:var(--spacing-48)
}

.pt-64 {
    padding-top:var(--spacing-64)
}

.pr-0 {
    padding-right:var(--spacing-0)
}

.pr-2 {
    padding-right:var(--spacing-2)
}

.pr-4 {
    padding-right:var(--spacing-4)
}

.pr-8 {
    padding-right:var(--spacing-8)
}

.pr-16 {
    padding-right:var(--spacing-16)
}

.pr-24 {
    padding-right:var(--spacing-24)
}

.pr-32 {
    padding-right:var(--spacing-32)
}

.pr-48 {
    padding-right:var(--spacing-48)
}

.pr-64 {
    padding-right:var(--spacing-64)
}

.pb-0 {
    padding-bottom:var(--spacing-0)
}

.pb-2 {
    padding-bottom:var(--spacing-2)
}

.pb-4 {
    padding-bottom:var(--spacing-4)
}

.pb-8 {
    padding-bottom:var(--spacing-8)
}

.pb-16 {
    padding-bottom:var(--spacing-16)
}

.pb-24 {
    padding-bottom:var(--spacing-24)
}

.pb-32 {
    padding-bottom:var(--spacing-32)
}

.pb-48 {
    padding-bottom:var(--spacing-48)
}

.pb-64 {
    padding-bottom:var(--spacing-64)
}

.pl-0 {
    padding-left:var(--spacing-0)
}

.pl-2 {
    padding-left:var(--spacing-2)
}

.pl-4 {
    padding-left:var(--spacing-4)
}

.pl-8 {
    padding-left:var(--spacing-8)
}

.pl-16 {
    padding-left:var(--spacing-16)
}

.pl-24 {
    padding-left:var(--spacing-24)
}

.pl-32 {
    padding-left:var(--spacing-32)
}

.pl-48 {
    padding-left:var(--spacing-48)
}

.pl-64 {
    padding-left:var(--spacing-64)
}

html, body {
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size);
    letter-spacing:var(--font-letter-spacing)
}

h1, h2, h3, h4, h5, h6 {
    color: #171717;
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    line-height:var(--line-height-md)
}

h1 {
    font-size: calc(var(--font-size) * 2);
    font-weight:var(--font-weight-bold)
}

h2 {
    font-size: calc(var(--font-size) * 1.8);
    font-weight:var(--font-weight-semibold)
}

h3 {
    font-size: calc(var(--font-size) * 1.5);
    font-weight:var(--font-weight-semibold)
}

h4 {
    font-size: calc(var(--font-size) * 1.2);
    font-weight:var(--font-weight-semibold)
}

h5 {
    font-size: calc(var(--font-size) * 1.1);
    font-weight:var(--font-weight-semibold)
}

h6 {
    font-size: calc(var(--font-size));
    font-weight:var(--font-weight-semibold)
}

[data-size=sm] {
    font-size: clamp(12px, 2vw + 1rem, 14px);
    font-weight: var(--font-weight-regular);
    line-height:var(--line-height-sm)
}

[data-size=md] {
    font-size: clamp(14px, 2vw + 1rem, 16px);
    font-weight: var(--font-weight-regular);
    line-height:var(--line-height-md)
}

[data-size=lg] {
    font-size: clamp(16px, 2vw + 1rem, 18px);
    font-weight: var(--font-weight-regular);
    line-height:var(--line-height-lg)
}

:root {
    --link-color: var(--color-text-primary);
    --link-color-underline: var(--color-text-primary);
    --link-color-hover: var(--color-light-purple)
}

a:not([class]) {
    text-decoration-thickness: max(.08em, 1px);
    text-underline-offset:.25em
}

a {
    font-weight: 600;
    color: var(--link-color);
    text-decoration:solid underline var(--link-color-underline)
}

a:hover {
    background-color:var(--link-color-hover)
}

a[data-variant=icon] {
    display: inline-block;
    transition:transform .5s cubic-bezier(.25, .8, .25, 1), opacity .2s ease
}

a[data-variant=icon] svg {
    vertical-align: middle;
    display: block;
    margin:0
}

a[data-variant=icon]:hover {
    background: none;
    transform:scale(1.2)
}

a[data-variant=icon]:active {
    transform: scale(1);
    opacity:.8
}

a[data-variant=icon]:not(:hover):not(:active) {
    transform:scale(1)
}

html, body {
    background-color:var(--color-background-primary)
}

:root {
    --font-family: "Gabarito", sans-serif;
    --font-letter-spacing: -.03em;
    --font-size: clamp(14px, 2vw + 1rem, 18px);
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-sm: 1.3;
    --line-height-md: 1.5;
    --line-height-lg: 1.7;
    --screen-size-sm: 576px;
    --screen-size-md: 768px;
    --screen-size-lg: 992px;
    --color-purple: #632cc8;
    --color-light-purple: #eff0f8;
    --color-light-yellow: #f4f1e4;
    --color-light-green: #e8f5ed;
    --color-blue: #2f3b59;
    --color-light-blue: #eef1f8;
    --color-pink: #f8eef1;
    --color-background-primary: #ffffff;
    --color-background-secondary: #fcfcfc;
    --color-border: #e2e2e2;
    --color-border-focus: var(--color-purple);
    --color-outline: #e2e2e2;
    --color-text-primary: #23262a;
    --color-text-secondary: #41464c;
    --color-shadow: rgba(0, 0, 0, .08);
    --border-radius: .3rem;
    --border-width: .5px;
    --border-width-lg: 2px;
    --spacing-h-base: 8px;
    --spacing-h-dynamic: 1.6vw;
    --spacing-h: calc(var(--spacing-h-base) + var(--spacing-h-dynamic));
    --spacing-v-base: 8px;
    --spacing-v-dynamic: 1.6vh;
    --spacing-v: calc(var(--spacing-v-base) + var(--spacing-v-dynamic))
}