.form-part {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    gap: 8px;
}

.form-error {
    color: red;
}

.form-part-half {
    display: flex;
    flex-direction: column;
    width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

.input-group {
    width: 100%;
    width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    position: relative !important;
}

.input-label {
    position: absolute !important;
    top: 15px !important;
    color: #494D5A !important;
    font-size: 15px;
}

.form-group {
    display: flex;
}

.input-element {
    background-color: white !important;
    padding: 30px 15px 0 0 !important;
    width: 100%;
    width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    border-radius: 2px;
    margin: unset !important;
}

.form-buttons {
    margin: auto;
}

span.fa {
    position: absolute;
    top: 50%;
    font-size: 20px;
    right: 20px;
    transform: translateY(-50%);
    color: #B4B7C0;
}

.button-react-style {
    text-decoration: none!important;
    background-color: var(--input-color) !important;
    color: #FFF !important;
    font-weight: 500 !important;
    font-size: 0.875rem!important;

    min-width: 170px !important;
    width: fit-content;
    display: flex;
    justify-content: center;

    border-radius: 4px !important;
    box-shadow: unset;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;

    &:hover {
        background-color: var(--input-color-dark) !important;
        box-shadow: 0 4px 9px -4px var(--input-color-dark);
    }
}

.button-react-style-outline {
    text-decoration: none!important;
    background-color: #FFF !important;
    color: var(--input-color) !important;
    font-weight: 500 !important;
    font-size: 0.875rem!important;

    min-width: 170px !important;
    width: fit-content;
    display: flex;
    justify-content: center;

    border-radius: 4px !important;
    box-shadow: unset;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;

    &:hover {
        box-shadow: 0 4px 9px -4px var(--input-color-dark);
    }
}

.input-has-error {
    background-color: #fbeaea !important;
    border: #D32F2F 1px solid!important;
}

.form-text-error {
    color: #D32F2F!important;
}

.form-text-error > ul {
    margin: 0.5em 0 1em 0!important;
}