/**
* Variables
**/

:root {

    /**
    * Chota
    **/

    /**
    --bg-color: #ffffff;
    --bg-secondary-color: #f3f3f6;
    --color-primary: #14854F;
    --color-lightGrey: #d2d6dd;
    --color-grey: #747681;
    --color-darkGrey: #3f4144;
    --color-error: #d43939;
    --color-success: #28bd14;
    --grid-maxWidth: 120rem;
    --grid-gutter: 2rem;
    --font-size: 1.6rem;
    --font-color: #333333;
    --font-family-sans: sans-serif;
    --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
    **/

    --bg-color: #18191F;
    --bg-secondary-color: #21222C;
    --color-primary: #C27131;
    --color-lightGrey: #666A73;
    --color-grey: #999EA9;
    --color-darkGrey: #C4C5CC;
    --color-error: #d43939;
    --color-success: #C27131;
    --input-bg-color: #2A2C36;

    --grid-maxWidth: 120rem;
    --grid-gutter: 2rem;

    --font-size: 1.6rem;
    --font-color: #FFFFFF;
    --font-family-sans: "Roboto", sans-serif;
    --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;

    /**
    * Other
    **/

    --spacing-outer: 8rem;
    --spacing-outer: 2rem;
    --spacing-form: 1rem;
}

input,
textarea {
    background-color: var(--input-bg-color);
    color: var(--font-color);
    border: 1px solid var(--color-lightGrey);
    padding: 0.8rem;
    border-radius: 0.4rem;

    &:focus {
        outline: none;
        border-color: var(--color-primary);
    }
}

/**
* Blocks
**/

@media screen and (min-width: 481px) {
    .ln-page-title {
        margin-left: var(--spacing-outer);
    }
}

.ln-page-content-wrapper {
    padding: var(--spacing-outer);
}

.ln-page-content {
    margin: auto;
    max-width: 1080px;
}

.ln-layout-info-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-outer);
}

/**
* Card
**/

.ln-card {
    background-color: var(--bg-secondary-color);
    border-color: var(--color-primary);
    box-shadow: 1px 1px 2px var(--color-primary)
}

/**
* Forms
**/

.ln-form {
    max-width: 540px;
}

.ln-form__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-form);
}

.ln-form__submit {
    margin-top: var(--spacing-outer);
    width: 100%;
}

.ln-form__title {
}

.ln-form__subtitle {
}

.ln-form-field__label-text {
    font-weight: bold;
}

.ln-form-field__description {
    color: var(--color-lightGrey);
}

/**
* Utils
**/

.ln-margin-outer {
    margin: var(--spacing-outer);
}

/**
* Pages
**/

.ln-sign-in-form .ln-form, .ln-sign-up-form .ln-form {
    margin: auto;
}