.forms {
    width: 100%;
}

.forms .box {
    display: block;
    box-sizing: border-box;
    border: var(--border_subtle);
    margin: 2em 0;
    padding: 0.5em 1em;
    border-radius: var(--border_radius);
}

.forms .fieldsSeparator {
    width: 100%;
    margin: 1em 0;
}

.forms .fieldsSeparator:last-child {
    display: none;
}


/**
 * labels
 */
.forms label {
    display: block;
    line-height: 2em;
}

.forms label.required::after {
    content: '*';
    display: inline-block;
    padding-left: 5px;
}

.forms label.labelCheckboxOption,
.forms label.labelRadioOption {
    line-height: 1em;
    display: inline-block;
    font-weight: normal;
    margin-top: unset;
}


/**
 * inputs
 */
.forms input.input,
.forms select.select,
.forms textArea.inputTextArea,
.forms input.inputText {
    display: block;
    box-sizing: border-box;

    min-width: unset;
    max-width: 100%;

    border-radius: 0.5em;
    border: var(--border_subtle);

    padding: 0.2em 1em;
    line-height: 2em;

    box-shadow: var(--box_shadow);

    background-color: var(--color_11);
    color: var(--color_11_f);

    font-size: var(--font_size);
    font-family: var(--font_family), serif;
}

.forms select.select {
    height: 2.4em;
}

.forms textarea.inputTextArea {
    width: 100%;
}

.forms input.inputRadioOption,
.forms input.inputCheckboxOption {
    display: inline-block;
}

.forms input.input[type="date"],
.forms input.input[type="datetime-local"],
.forms input.input[type="file"],
.forms input.input[type="number"] {
    min-width: 25%;
}


/**
 * Compact
 */
.forms .fieldCompact {
    margin-bottom: 6px;
}

.forms .fieldCompact label,
.forms .fieldCompact input,
.forms .fieldCompact select {
    display: inline-flex;
}


/**
 * Read-only
 */
.forms input:read-only,
.forms textarea:read-only {
    background-color: var(--color_10);
    color: var(--color_10_f);
    box-shadow: none;
}

.forms .formsColorDisabled {
    color: rgb(170, 170, 170);
}


/**
 * invalidField
 */
.forms .invalidField {
    color: var(--color_failure);
    padding: var(--padding);
    border-radius: var(--border_radius);
    margin-top: 0.5em;
    display: none;
}

.forms .invalidField .material-symbols-outlined {
    vertical-align: sub;
    font-size: calc(1.5 * var(--font_size));
    padding-right: 5px;
}


/**
 * Files
 */
.forms a.deleteFile {
    cursor: pointer;
    color: var(--color_font_failure);
    background-color: var(--color_failure);
    padding: 2px;
    font-weight: bold;
    margin: 0;
    font-size: calc(0.7 * var(--font_size));
    border-radius: var(--border_radius);
    width: unset;
    min-width: unset;
    height: unset;
    line-height: unset;
}


/**
 * Chat
 */
.forms .chat {
    background-color: var(--color_11);
    border: var(--border_subtle);
    margin-top: var(--margin);
    margin-bottom: var(--margin);
    border-radius: var(--border_radius);
    display: inline-block;
    padding: var(--padding);
}

.forms .chatUser {
    text-align: right;
    font-weight: bold;
}

.forms .chatText {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.forms .chatDate {
    text-align: right;
}