main {
    padding: 20px;
}

.price-list {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
    color: red;
    font-size: 42px;
}
h2 {
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

.note {
    font-size: 0.9em;
    color: #555;
    margin-top: 20px;
    text-align: center;
}

/*Ниже стили для работы банера*/

.fade-in-block {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 90%; /* Задаем ширину не фиксированным значением */
    max-width: 800px; /* Максимальная ширина остается для больших экранов */
    padding: 20px;
    background-color: #007bff;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(-20px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 1000;
    display: flex; /* Делаем контейнер флексбоксом */
    justify-content: space-between; /* Выровнять содержимое по краям */
    align-items: center; /* Центрируем содержимое по вертикали */
    box-sizing: border-box; /* Учитываем padding в ширине */
}


.email-link {
    color: #ffd700; /* Яркий цвет для ссылок */
    text-decoration: underline; /* Подчеркивание */
}


.close-button {
    background: transparent; /* Прозрачный фон */
    border: none; /* Убираем границу */
    color: white; /* Цвет иконки */
    font-size: 30px;
    cursor: pointer; /* Указатель курсора при наведении */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    align-self: flex-end; /* Прижимает кнопку к правому краю */
    width: 15%;
}

    .close-button:hover {
        transform: scale(1.1); /* Увеличение при наведении */
    }

.email-link:hover {
    color: #f0e68c; /* Более светлый оттенок при наведении */
}

/*Для формы авторизации*/
/* Основной контейнер для формы авторизации */
.login-container {
    max-width: 400px; /* Максимальная ширина формы */
    margin: 50px auto; /* Центрирование по горизонтали и отступ сверху */
    padding: 20px; /* Внутренние отступы */
    border: 1px solid #ccc; /* Рамка вокруг формы */
    border-radius: 8px; /* Закругленные углы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень */
    background-color: #fff; /* Цвет фона */
}

    /* Заголовок формы */
    .login-container h1 {
        text-align: center; /* Центрирование текста */
        font-size: 24px; /* Размер шрифта */
        margin-bottom: 20px; /* Отступ снизу */
    }

/* Стили для группы форм */
.form-group {
    margin-bottom: 15px; /* Отступ между группами форм */
}

/* Ввод текста */
.form-input {
    width: 100%; /* Ширина 100% */
    padding: 8px; /* Внутренние отступы */
    border: 1px solid #ccc; /* Рамка */
    border-radius: 4px; /* Закругленные углы */
    font-size: 16px; /* Размер шрифта */
}

/* Стили для кнопки отправки */
.btn-submit {
    width: 100%; /* Ширина 100% */
    padding: 10px; /* Внутренние отступы */
    border: none; /* Без рамки */
    border-radius: 4px; /* Закругленные углы */
    background-color: #007bff; /* Цвет фона кнопки */
    color: white; /* Цвет текста */
    font-size: 16px; /* Размер шрифта */
    cursor: pointer; /* Курсор-указатель при наведении */
}

    /* Изменения при наведении на кнопку */
    .btn-submit:hover {
        background-color: #0056b3; /* Цвет фона при наведении */
    }

/* Стили для ссылки "Забыли пароль?" */
.link-container {
    text-align: center; /* Центрирование текста ссылки */
    margin-top: 10px; /* Отступ сверху */
}

.forgot-password-link {
    color: #007bff; /* Цвет ссылки */
    text-decoration: none; /* Без подчеркивания */
}

    /* Цвет ссылки при наведении */
    .forgot-password-link:hover {
        text-decoration: underline; /* Подчеркивание при наведении */
    }

/* Стили для сообщений об ошибках */
.text-danger {
    color: red; /* Цвет текста для ошибок */
    font-size: 14px; /* Размер шрифта */
}

/* Стили для сводки валидации */
.validation-summary {
    color: red; /* Цвет ошибок */
    margin-bottom: 15px; /* Отступ снизу */
}


/* Адаптивные стили */
@media (max-width: 768px) {
    h1 {
        font-size: 2em; /* Уменьшение размера заголовка на меньших экранах */
    }

    h2 {
        font-size: 1.5em; /* Уменьшение размера заголовка 2 */
    }

    th, td {
        padding: 8px; /* Уменьшение отступов для маленьких экранов */
    }
    /*Это баннер */
    .fade-in-block {
        padding: 15px; /* Уменьшаем отступы на малых экранах */
        max-width: 600px;
        margin: 10px auto;
    }

    .close-button {
        font-size: 28px; /* Уменьшаем размер кнопки */
    }
}
@media (max-width: 680px) {
    /*Это баннер */
    .fade-in-block {
        padding: 12px; /* Ещё меньше отступов на мобильных устройствах */
        font-size: 16px; /* Уменьшаем размер шрифта */
        max-width: 90%; /* Отслеживаем ширину по аналогии для меньших экранов */
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8em; /* Дополнительное уменьшение для мобильных устройств */
    }

    h2 {
        font-size: 1.2em; /* Дополнительное уменьшение для мобильных устройств */
    }

    th, td {
        display: block; /* Размещение ячеек в столбец при маленьких экранах */
        width: 100%; /* Полная ширина для ячеек */
        box-sizing: border-box; /* Обеспечение корректного вычисления ширины */
    }

    tr {
        margin-bottom: 15px; /* Отступ между рядами при блочном отображении */
        border: 1px solid #ddd; /* Граница между рядами */
    }
    /*Это баннер */
    .fade-in-block {
        padding: 10px; /* Ещё меньше отступов на мобильных устройствах */
        font-size: 14px; /* Уменьшаем размер шрифта */
        max-width: 95%; /* Ширина также адаптируется под маленькие экраны */
        right: 10px; /* Уменьшаем отступ справа */
        flex-direction: column;
        align-items: flex-start;
    }

    .close-button {
        font-size: 24px; /* Дополнительное уменьшение размера кнопки для мобильных */
        align-self: flex-end;
    }

    .email-link {
        font-size: 15px; /* Размер текста для ссылок */
    }
}