/*
Этот CSS-код определяет различные правила оформления для различных размеров экрана и элементов
макета страницы авторизации.
*/

#input-form-col.mt-5 {
    margin-top: 15vh !important;
}

/*
  - Для экранов размером до 1300 пикселей:
  - Размер шрифта для ".mb-3.auth-input" и "#forgotten-block" установлен равным .9rem.
  - Ширина "#input-form-col" установлена равной 50%, а для "justify-content" - "выравнивать содержимое по ширине".
  */
@media screen and (max-width: 1300px) {

    .mb-3.auth-input,
    #forgot-block {
        font-size: .9rem;
    }

    #input-form-col {
        width: 50% !important;
        justify-content: space-evenly;
    }

}

/*
  Для экранов размером до 1000 пикселей:
  - Размер шрифта для '#login-output', '#tooltip', '#login-button', '#forgot-block' установлен равным .8rem.
  - Ширина "#input-form-col" установлена на 50%, а "justify-content" - на "равномерно распределенное пространство".
  - Размер шрифта "#auth-header-text" установлен на 1,1rem, а свойство "wrap" - на "nowrap".
  - Нижнее поле ".mb-3.auth-input" установлено на .5rem.
  - Поле внизу ".mb-3.auth-input > .form-label" имеет значение .2rem.
  - Размер шрифта ".form-control" имеет значение small.
  - Ширина "#login-button" имеет значение auto.
  */
@media screen and (max-width: 1000px) {

    #login-output,
    #tooltip,
    #login-button,
    #forgot-block {
        font-size: .8rem;
    }

    #input-form-col {
        width: 50% !important;
        justify-content: space-evenly;
    }

    #auth-header-text {
        font-size: 1.1rem;
        wrap: nowrap;
    }

    .mb-3.auth-input {
        margin-bottom: .5rem !important;
    }

    .mb-3.auth-input>.form-label {
        margin-bottom: .2rem;
    }

    .form-control {
        font-size: small;
    }

    #login-button {
        width: auto;
    }

}

/*
  Для экранов размером до 500 пикселей:
  - Для свойства "display" класса ".header-main-text-col" установлено значение "none".
  - Ширина "#input-form-col" установлена на 80%, а "justify-content" - на "равномерно распределенное пространство".
  */
@media screen and (max-width: 500px) {
    .header-main-text-col {
        display: none;
    }

    #input-form-col {
        width: 80% !important;
        justify-content: space-evenly;
    }
}