@charset "UTF-8";

/* ======== Общий контейнер для деления на блоки=============== */
.forms-container {
    display: flex;
    gap: 20px; /* расстояние между формами */
}

form {
    flex: 1; /* обе формы одинаковой ширины */
}
/* ======== Общий контейнер для деления на блоки=============== */

/* ======== Форма для ввода данных =============== */
/* Делаем каждый блок с label и input гибким контейнером */
.form-row {
    display: flex;
    align-items: center; /* Выравниваем элементы по вертикали по центру */
    margin-bottom: 10px; /* Отступ между строками */
}

/* Задаём фиксированную ширину для всех label,
   чтобы поля ввода начинались на одном уровне */
.form-row label {
    width: 150px; /* Подберите ширину под самый длинный текст метки */
    margin-right: 20px; /* Отступ между меткой и полем ввода */
}

/* Чтобы поля ввода занимали всё оставшееся пространство */
.form-row input[type="text"] {
    flex-grow: 1; /* Поле ввода растянется на всю доступную ширину */
}

/* Стилизуем кнопку отправки, чтобы она не растягивалась */
.form-row input[type="submit"] {
    margin-left: auto; /* Прижмём кнопку к правому краю, если нужно */
    /* Или, чтобы она была по центру под полями: */
    /* display: block; */
    /* margin: 20px auto 0 auto; */
}
/* ======== Форма для ввода данных =============== */



/* ========Деление пополам экрана=============== */
/* 1. Стили для родительского контейнера */
.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Создаем две колонки равной ширины (1fr + 1fr = 100%) */
    gap: 10px; /* Зазор между колонками */
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.grid-item {
    padding: 15px;
    border-radius: 8px;
}

/* Выравниваем текст внутри каждой колонки */
.left {
    text-align: left;
}

.right {
    text-align: left;
}
/* ========Деление пополам экрана=============== */

/* ======== Центрирующий блок =============== */
.block-center {
    display: flex;              /* Включаем Flexbox */
    justify-content: center;    /* Центрируем по горизонтали */
    align-items: center;        /* Центрируем по вертикали */
    min-height: 200px;          /* Минимальная высота для вертикального центрирования (подберите под себя) */
    padding: 10px;
    overflow: hidden;           /* На всякий случай, чтобы ничего не вылезало */
}
/* ======== Центрирующий блок =============== */