/* styles.css */

/* 1. Стили для body */
body {
    font-family: Arial, sans-serif;
}

/* 2. Стили для модального окна */
.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Фиксированное позиционирование */
    z-index: 1; /* Уровень слоя (выше других элементов) */
    left: 0; /* Позиция слева */
    top: 0; /* Позиция сверху */
    width: 100%; /* Ширина на весь экран */
    height: 100%; /* Высота на весь экран */
    overflow: auto; /* Добавляет прокрутку, если контент не помещается */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
}

/* 3. Стили для содержимого модального окна */
.modal-content {
    background-color: #fefefe; /* Белый фон */
    margin: 15% auto; /* Отступ сверху и центрирование по горизонтали */
    padding: 20px; /* Внутренние отступы */
    border: 1px solid #888; /* Граница */
    width: 300px; /* Ширина содержимого */
    text-align: center; /* Выравнивание текста по центру */
    border-radius: 10px; /* Закругленные углы */
}

/* 4. Стили для кнопки закрытия */
.close {
    color: #aaa; /* Серый цвет текста */
    float: right; /* Выравнивание вправо */
    font-size: 28px; /* Размер текста */
    font-weight: bold; /* Жирный текст */
    cursor: pointer; /* Курсор в виде указателя */
}

/* 5. Стили для кнопки закрытия при наведении */
.close:hover {
    color: black; /* Черный цвет текста при наведении */
}

/* 6. Стили для выпадающего списка */
select {
    width: 100%; /* Ширина на 100% родительского элемента */
    padding: 10px; /* Внутренние отступы */
    margin-top: 10px; /* Отступ сверху */
    border-radius: 5px; /* Закругленные углы */
    border: 1px solid #ccc; /* Граница */
}

/* 7. Стили для кнопки подтверждения */
#submitBtn {
    margin-top: 20px; /* Отступ сверху */
    padding: 10px 20px; /* Внутренние отступы (10px сверху/снизу, 20px слева/справа) */
    background-color: #4CAF50; /* Зеленый фон */
    color: white; /* Белый текст */
    border: none; /* Убираем границу */
    border-radius: 5px; /* Закругленные углы */
    cursor: pointer; /* Курсор в виде указателя */
}

/* 8. Стили для кнопки подтверждения при наведении */
#submitBtn:hover {
    background-color: #45a049; /* Темно-зеленый фон при наведении */
}