﻿.lds-form-field {
    display: flex;
    flex-direction: column;
    row-gap: var(--lds-space-3);
    padding-bottom: var(--lds-space-3);
    padding-top: var(--lds-space-3);
    width: 100%;
    position: relative;
}
    .lds-form-field.lds-hint-space {
        margin-bottom: 22px;
    }

.lds-input {
    background-color: var(--lds-brand-color-background-lighter);
    border-radius: var(--lds-radius-sm) var(--lds-radius-sm) 0px 0px;
    caret-color: var(--lds-brand-color-primary);
    color: var(--lds-color-font-base);
    height: 2.125rem;
    padding: 6px 8px 6px 12px;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    line-height: 1.375rem !important;
    letter-spacing: 0.015625rem !important;
    border: none;
}
    .lds-input:focus-visible {
        outline: none;
        border-bottom: 1px solid var(--lds-brand-color-primary);
    }

.lds-field-label {
    color: var(--lds-color-font-base);
    font-weight: 400 !important;
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
    letter-spacing: 0.009375rem !important;
}

.lds-hint {
    color: var(--lds-color-font-weak);
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    line-height: 1.125rem !important;
    letter-spacing: 0.025rem !important;
}

.lds-field-label,
.lds-hint {
    padding-left: 2px;
}

.lds-error {
    color: var(--lds-color-warn-main);
}

@media only screen and (max-width: 780px) {
    .lds-input {
        height: 2.5rem;
        font-size: 1rem !important;
        line-height: 1.5rem !important;
        letter-spacing: 0.009375rem !important;
    }

    .lds-form-field {
        padding-bottom: var(--lds-space-4);
    }

    .lds-field-label {
        font-weight: 400 !important;
        font-size: 0.875rem !important;
        line-height: 1.375rem !important;
        letter-spacing: 0.015625rem !important;
    }
}