@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



* {
    box-sizing: border-box; /* Позволяет избежать проблем с шириной */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Обеспечение полной высоты для body и html */
    /*overflow-x: hidden; /* Отключаем горизонтальную прокрутку */
    /*overflow: hidden; !* Прекращает прокрутку *!*/
    background: white;
    max-width: 100vw;
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.socialsBlock {
    margin: 30px 0;
    display: flex;
    z-index: 1
}

.da-balance {

margin-top: 200px;

}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: transparent;
    text-align: center;
    padding: 40px 0;
}

.footer a {
    color: black;
    text-decoration: none;
    margin-right: 20px;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .socialsBlock {
    display: inline-block;
}

.footer .socialElement {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: center;
    margin-right: 10px;
}

.linkDs {
    background-image: url('/static/image/icons/ds.png');
}

.linkVk {
    background-image: url('/static/image/icons/vk.png');
}

.linkTg {
    background-image: url('/static/image/icons/tg.png');
}


.headerMenuBlockLeft {
    display: flex; /* Используйте flexbox для расположения элементов */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    flex-direction: row; /* Элементы расположены в строку */
}

.headerMenuBlockLeftElement {
    margin: 0 10px; /* Отступ между элементами */
}

.headerMenuBlockLeftElementText {
    height: 73px; /* Высота элемента */
    display: flex;
    align-items: center; /* Центрирование текста по вертикали */
    justify-content: center; /* Центрирование текста по горизонтали */
    width: 153px; /* Ширина элемента */
    color: #fff; /* Цвет текста */
    font-size: 12pt; /* Размер шрифта */
    transition: .3s; /* Плавный переход для hover */
}

.headerMenuBlockLeftElementText.goToMain {
    background: initial;
    box-shadow: none;
}

.headerMenuBlockLeftElementText:not(.currentPage, .headerMenuBlockLeftElementTextDropable, .headerMenuBlockLeftElementTextLogo):hover,
.headerMenuBlockRightElement:not(.currentPage, .download):hover {
    color: #000000; /* Цвет текста при наведении */
    cursor: pointer; /* Указатель при наведении */
    background: #ffffff; /* Фон при наведении */
    box-shadow: 0 0 30px 7px #000; /* Тень при наведении */
}


footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 50px auto 0;
    background: linear-gradient(rgba(26, 18, 15, 0) 5%, rgba(21, 15, 11, 0) 50%);
    overflow: hidden;
    z-index: 0;
}

.headerMenuBlockLeftElementText:hover {
    color: #000000; /* Цвет текста при наведении */
     text-decoration: none;
    font-size: 16px; /* Фиксированный размер шрифта */
}

.headerMenuBlockRightElement {
    margin-left: 20px; /* Отступ между элементами */
     text-decoration: none;
    font-size: 16px; /* Фиксированный размер шрифта */
}

/* Медиа-запросы для адаптивного дизайна */
@media screen and (max-width: 768px) {
    .headerMenuBlockLeftElementText {
        font-size: 10pt; /* Уменьшение размера шрифта на мобильных */
    }

    .rulesContainer {
        width: min(60vw, 100% - 40px); /* Лучшая адаптация */
        margin: 0 auto;
    }

    .headerMenuBlockLeft {
        flex-direction: column; /* Вертикальное расположение для мобильных устройств */
        align-items: center; /* Центрирование элементов */
    }
}

.backgroundIndex {
    background-image: url(/static/image/main_for_rules.jpg);
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0; /* Убираем отступы у .backgroundIndex */
}

.headerMenuBlock {
    display: flex; /* Настраиваем флекс-контейнер для боковых меню */
    justify-content: space-between; /* Пространство между левым и правым блоками */
    align-items: center; /* Центрируем элементы по вертикали */
    width: 100%; /* Устанавливаем ширину в 100% */
    max-width: 1200px; /* Ограничиваем максимальную ширину */
    margin: 0 auto; /* Центрируем блок на странице */
}

.headerMenuBlockLeft, .headerMenuBlockRight {
    display: flex; /* Для логического выравнивания элементов внутри */
    align-items: center; /* Центрируем по вертикали */
}

.rulesContainer {
    display: flex;
    flex-direction: column;
    width: 60vw;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.71);
    /*backdrop-filter: blur(10px);*/
    border-radius: 10px;
    align-items: center;
    box-sizing: border-box;
}
.stub {
    width: 100%;
    height: 80px;
    padding: 80px;
    background: transparent;
}
.rulesContainer > h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 100%;
    margin-left: 50px;
}
.rules {
    margin-left: 50px;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.rules .rules_type {
    font-family: 'Montserrat', sans-serif;
    display: block;
    grid-template-columns: 1fr 1fr 1fr;
}
.type_of_rules {
    margin-left: 10px;
    font-size: 100%;
}
.rule_naming {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;

    margin-bottom: 5px;
    margin-left: 10px;
    gap: 80px;
    /*margin: 10px;*/
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;

    border: none;
    font-size: 100%;
}
.rules .rule {
    margin: 0 10px;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}
.rule .rule_number {
    width: 10px;
}
.rule .violation, .rule .sanction {
    padding: 10px 20px;
    margin: 10px 20px;
    width: 100%;
    font-size: 10px;
}

.payform-tbank {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 2px auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 250px;
    }
    .payform-tbank-row {
        margin: 2px;
        border-radius: 4px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        border: 1px solid #DFE3F3;
        padding: 15px;
        outline: none;
        background-color: #DFE3F3;
        font-size: 15px;
    }
    .payform-tbank-row:focus {
        background-color: #FFFFFF;
        border: 1px solid #616871;
        border-radius: 4px;
    }
    .payform-tbank-btn {
        background-color: #FBC520;
        border: 1px solid #FBC520;
        color: #3C2C0B;
    }
    .payform-tbank-btn:hover {
        background-color: #FAB619;
        border: 1px solid #FAB619;
    }


.minus12-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 80%;
    max-width: 500px;
    animation: minus12-shake 0.5s ease;
}

.minus12-content {
    background: white;
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    border: 2px solid white;
    position: relative;
}

.minus12-icon {
    font-size: 30px;
    margin-right: 15px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.minus12-text {
    flex: 1;
    font-size: 18px;
    font-weight: bold;
    text-shadow: white;
}

.minus12-close {
    font-size: 25px;
    cursor: pointer;
    margin-left: 15px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.minus12-close:hover {
    opacity: 1;
}

@keyframes minus12-shake {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    20% { transform: translateX(-50%) rotate(-5deg); }
    40% { transform: translateX(-50%) rotate(5deg); }
    60% { transform: translateX(-50%) rotate(-5deg); }
    80% { transform: translateX(-50%) rotate(5deg); }
}