.circle-number {
    display: inline-flex;          /* или inline-block */
    align-items: center;          /* центрируем число по вертикали */
    justify-content: center;     /* центрируем число по горизонтали */
    width: 50px;
    height: 50px;
    border: 1px solid #000;      /* чёрный контур */
    border-radius: 50%;          /* делаем круг */
    background-color: transparent; /* прозрачный фон */
    font-size: 18px;             /* размер числа (можно настроить) */
    font-weight: bold;           /* жирный шрифт (опционально) */
    line-height: 1;              /* убираем лишний отступ */
    margin: 2px;
}



.btn-circle{
    color: #2b5da8;
    font-weight: bold;
    background-color: white;
    border-color: #2b5da8;
    border-radius: 100px;
    border-width: 2px; /* Толщина границы 3 пикселя */
    height: 45px;
    margin-left: 15px;
}
.btn-primary{
    width:85px;
    height:45px;
    font-weight: bold;
    color: #2b5da8;
    background-color: #fecc00;
    border-color: #fecc00;
}

#logo{
    width:160px;
    height: auto;
}

.btn-primary:hover {
    background-color: #2b5da8; /* Цвет фона при наведении */
    color: white; /* Цвет текста при наведении */
}

.btn-circle:hover {
    background-color: #2b5da8; /* Цвет фона при наведении */
    color: white; /* Цвет текста при наведении */
}

.img-shadow-bottom {
    border-radius: 20px; /* Убирает границу, если она есть */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Тень снизу */
}

.img-flip-horizontal {
    transform: scaleX(-1); /* Поворачивает изображение по горизонтали */
    display: block; /* Убедитесь, что изображение занимает блоковый уровень */
    margin: 0 auto; /* Центрировать изображение, если нужно */
    border: none; /* Убирает границу, если она есть */
}

#leftscroll{
    height: 70px;
    margin-top: 5px;
    /*margin-left: 15px;*/
}
#rightscroll{
    height: 70px;
    margin-left: 5px;
}

.btn-info{
    width:280px;
    height:50px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: #2b5da8;
    border-color: #2b5da8;
}

.justify-content-center{
    margin-left: 120px;
}
.yellow-stripe {
    /*position: fixed; !* Закрепляет полоску внизу экрана *!*/
    /*bottom: 0; !* Размещает полоску у нижнего края экрана *!*/
    /*left: 0; !* Располагает полоску от левого края экрана *!*/
    /*width: 100%; !* Занимает всю ширину экрана *!*/
    height: 30px; /* Высота полоски */
    background-color: #fecc00; /* Цвет полоски */
    /*z-index: 9999; !* Обеспечивает, что полоска будет поверх остальных элементов *!*/
}
.btn-yellow{
    width:280px;
    height:50px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: #2b5da8;
    border-color: #2b5da8;
}
#rules{
    margin-bottom: 15px;
    margin-right: 25px;
}





.modal-dialog {
    width: calc(100% - 40px);  /* Ширина модального окна с учётом отступов */
    height: calc(100% - 40px); /* Высота модального окна с учётом отступов */
    margin: 20px auto;         /* Отступы по 20px со всех сторон */
    max-width: none;           /* Убираем ограничения по ширине */
}
.modal-content {
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 0; /* Убирает скругление углов */
    background-color: #2b5da8; /* Синий фон модального окна */
    color: white; /* Белый текст */
    display: flex;
    flex-direction: column;
}
.modal-header {
    background-color: #fecc00; /* Жёлтый цвет для шапки и подвала */
    color: #2b5da8;
    padding: 10px 20px; /* Отступы внутри шапки и подвала */
}
.modal-footer {
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around; /* Распределение кнопок */
}
.modal-body {
    flex: 1; /* Позволяет телу модального окна занимать оставшееся пространство */
    padding: 20px;
    overflow-y: auto; /* Позволяет вертикальную прокрутку */
    overflow-x: hidden; /* Убирает горизонтальную прокрутку */
}
pre {
    overflow-x: auto; /* Позволяет горизонтальную прокрутку внутри <pre> */
    white-space: pre-wrap; /* Перенос строк внутри <pre> */
    word-wrap: break-word; /* Перенос длинных слов */
}
.btn-yellow {
    background-color: #fecc00;
    color: #2b5da8;
    border: none;
}
.btn-yellow:hover {
    background-color: #fecc00;
}
body {
    overflow-x: hidden; /* Убирает горизонтальную прокрутку на странице */
}

.rounded-corners {
    border-radius: 12px;
}