@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Regular.11eabca22513.ttf");
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-weight: bold;
    src: url("../fonts/Roboto-Bold.e07df86cef2e.ttf");
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-weight: 600;
    src: url("../fonts/Roboto-Medium.58aef543c97b.ttf");
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/Roboto-BoldItalic.5b44818d2b9e.ttf");
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    src: url("../fonts/Roboto-Italic.a720f17aa773.ttf");
    font-display: swap;
}

@font-face {
    font-family: 'RobotoMedium';
    src: url("../fonts/Roboto-Medium.58aef543c97b.ttf");
    font-display: swap;
}

@font-face {
    font-family: 'RobotoMedium';
    font-style: italic;
    src: url("../fonts/Roboto-MediumItalic.cf23e1bb6190.ttf");
    font-display: swap;
}

body {
    font-family: "Roboto", sans-serif;
}

div {
    margin-top: 1em;
    margin-bottom: 1em;
}

#content {
    margin: 0 auto;
    max-width: 600px;
}

.required-star {
    color: red;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}


label {
    display: block;
    font-family: "RobotoMedium", sans-serif;
}

label.radio, label.checkbox {
    cursor: pointer;
    font-family: "Roboto", sans-serif;
}

label.checkbox {
    display: inline;
}

label.radio:first-of-type {
    margin-bottom: 0.75em;
}

input, select {
    padding: 1em;
    border: 2px solid #E4E5E7;
    outline: none;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s;
    border-radius: 8px;
}

input:focus,
select:focus {
    border: 2px solid #2c65fa;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=radio] {
    width: auto;
    vertical-align: middle;
    cursor: pointer;
}

input[type=number] {
    -moz-appearance: textfield;
}

div .multiselect {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

div .multiselect-option {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 4px 6px 4px 2px;
    width: fit-content;
    background-color: #E4E5E7;
    border-radius: 8px;
}

input.checkbox {
    width: 14px;
    height: 14px;
    margin: 0 4px;
    cursor: pointer;
}

div .preamble-errors {
    color: red;
}

div .validation-error {
    color: red;
}

div .error {
    color: red;
}

div .field {
    margin: 36px 0;
}

hr {
    border: 1px solid green;
}

button[type="submit"] {
    background-color: #2C65FA;
    color: white;
    border-radius: 4px;
    border: 0;
    padding: 20px;
    cursor: pointer;
    margin-top: 1em;
}

button[type="submit"]:disabled {
    cursor: initial;
    background-color: grey;
}