body {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid grey;
    border-radius: 5px;
    padding: 30px 50px;
    min-width: 400px;
    max-width: 680px;
    width: 35vw;
    overflow-y: auto;

    .logo {
        width: 300px;
        margin-bottom: 30px;
    }

    h1 {
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 30px;
        text-align: center;
    }

    form {
        width: 100%;

        label {
            width: 100%;
            font-size: 20px;
        }

        input {
            width: 100%;
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 16px;
            border-radius: 5px;
            padding: 20px;
            background-color: #ededed;
            border: none;
        }

        .flash-effect {
            position: relative;
            overflow: hidden;
            margin-top: 20px;
            font-size: 16px;
            font-weight: 700;
            padding: 15px 40px;
            border-radius: 5px;
            width: 100%;
            border: none;
            transition: all .2s ease;
            color: white;
            background: linear-gradient(110deg, transparent 49%, rgba(255, 255, 255, 0.6) 50%, transparent 51%);
            background-size: 230% 100%;
            animation: 5s flash 3s infinite;
            background-position: 0 0;
            background-color: #DC2424;

            &:hover {
                background-color: #b61f1f;
            }
        }

        select {
            width: 100%;
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 16px;
            border-radius: 5px;
            padding: 20px;
            background-color: #ededed;
            border: none;
            appearance: none; /* Убирает стандартный стиль браузера */
            -webkit-appearance: none; /* Убирает стандартный стиль браузера в WebKit */
            -moz-appearance: none; /* Убирает стандартный стиль браузера в Firefox */
            color: #333333;

            option {
                color: #333333; /* Цвет текста для опций */
            }

            &:invalid {
                color: #999; /* Цвет текста для placeholder */
            }
        }

        .policy-container {
            display: flex;
            align-items: center;
            width: 100%;

            input {
                width: auto;
                padding: 5px 0;
                margin-right: 10px;
            }

            label {
                font-size: 15px;

                .policy-link {
                    color: #DC2424;

                    &:hover {
                        color: #b61f1f;
                    }
                }
            }
        }
    }
}

.messages {
    margin: 0 auto;
    max-width: 600px;
}

.alert {
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
}

.alert-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}



.time-slot {
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    display: inline-block;
    transition: background-color .2s ease, color .2s ease;
}

.time-slot:hover {
    background-color: #f1f1f1;
}

.occupied {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    cursor: not-allowed;
}

/* Добавляем стиль для контейнера временных слотов */
#time-slots-container {
    display: flex;
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;  /* Горизонтальный скролл */
    margin: 10px 0;
    padding-right: 50px;
}

/* Стили для прокрутки, когда контейнер слишком широкий */
#time-slots-container::-webkit-scrollbar {
    height: 8px;
}

#time-slots-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

#time-slots-container::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}




@keyframes flash {
    0% {
        background-position: 170% 0;
    }

    70% {
        background-position: -230% 0;
    }

    100% {
        background-position: -230% 0;
    }
}

@media (max-width: 347px) {
    .container {
        height: 100%;

        h1 {
            font-size: 20px;
        }
        form {
            label {
                font-size: 15px;
            }
            input {
                font-size: 14px;
            }
            .flash-effect {
                font-size: 14px;
            }
        }
    }
}

@media (min-width: 348px) and (max-width: 478px) {
    .container {
        height: 100%;
        width: 100%;
        min-width: none;
        max-width: none;
        border: none;

        h1 {
            font-size: 25px;
        }
    }
}