.login-container {
    width: 320px;
    height: 302px;
}

.signup-container {
    width: 320px;
    height: 340px;
}


.login-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);

    width: 179px;
    height: 32px;
}

.login-header-text {
    width: 127px;
    height: 32px;

    display: flex;
    flex-direction: column;

    gap: var(--spacing-xs);
}

.login-header-name {
    font: 500 16px / 100% var(--second-family);
    color: var(--default-text);
}

.login-header-description,
.form-label {
    font: 400 12px / 100% var(--font-family);
    color: var(--secondary-text);
}

.login-from {
    margin-top: var(--spacing-2xl);

    width: 320px;
}

.login-from .control {
    width: 320px;
    /*height: 56px;*/

    display: flex;
    flex-direction: column;
    row-gap: 8px;

    font: 400 14px / 114% var(--font-family);
    color: var(--secondary-text) !important;

    margin-bottom: var(--spacing-xl);
}

.login-from .control-input {
    display: flex;

    width: 120px;
    height: 18px;

    gap: var(--radius-md);

    margin-bottom: var(--spacing-xl);
}

.login-from .control-input .form-label {
    font: 400 14px / 114% var(--font-family);
    color: var(--default-text);
}


.login-from .form-control {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    padding: 10px 12px;
    width: 320px;
    height: 36px;

}

.login-from .invalid-feedback {
    font: 400 12px / 130% var(--font-family);
    color: #dc3545;
    padding-left: 4px;
    margin-top: -8px;
}

button {
    width: 320px;
    height: 36px;
}