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




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

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

.da-balance {

margin-top: 200px;

}

.da-balance2 {

margin-top: 100px;

}

.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; /* Уменьшение размера шрифта на мобильных */
    }

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

.backgroundIndex {

    background-size: cover; /* Масштабируем фоновое изображение */
    background-attachment: fixed; /* Фиксируем фон при прокрутке */
    height: 100vh; /* Обеспечиваем, чтобы блок занимал всю высоту окна */
    width: 100vw; /* Обеспечиваем, чтобы блок занимал всю ширину окна */
}

.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; /* Центрируем по вертикали */
}

.start-page__step-content {
    width: 100%; /* Используйте 100%, чтобы элемент заполнял доступное пространство */
    max-width: 100%; /* Устанавливает максимальную ширину в 100% */
    padding: 30px;
    box-sizing: border-box; /* Это позволит учитывать padding в ширине элемента */
}

.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;
    }











    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        font-family: Arial, sans-serif;
    }

    .container {
        max-width: 400px;
        padding: 20px;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        height: 100%;
    }

    h1 {
        margin-bottom: 20px;
    }

    input[type="text"], input[type="password"] {
        display: block;
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    button {
        padding: 10px 20px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    button:hover {
        background-color: #0056b3;
    }

    body {
      color: white;
      font-family: sans-serif;
      display: flex;
      justify-content: center; /* Центрирование по горизонтали */
      align-items: center;     /* Центрирование по вертикали */
      min-height: 100vh;       /* Занимает всю высоту окна */
      background-color: #f0f0f0; /* Добавил фон для видимости */
    }

    .container {
      background-color: white;
      color: black;
      padding: 30px;
      display: flex;
      flex-direction: column; /* Изменил на column для лучшего размещения */
      align-items: center;      /* Центрирование содержимого внутри контейнера */
      box-shadow: 0px 0px 10px rgba(0,0,0,0.1); /* Добавил тень */
      width: 400px; /* Увеличили ширину для длинных никнеймов */
      min-height: 100%;
      max-width: 90vw; /* Ограничиваем максимальную ширину */
    }

    .container h1 {
      font-size: 18px; /* Уменьшили размер шрифта */
      margin-bottom: 15px;
      word-wrap: break-word; /* Перенос длинных слов */
      overflow-wrap: break-word;
      text-align: center;
      line-height: 1.3;
    }

    .container p {
      font-size: 14px; /* Уменьшили размер шрифта */
      margin-bottom: 10px;
      word-wrap: break-word;
      overflow-wrap: break-word;
      text-align: center;
      line-height: 1.4;
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%; /* Форма займет всю ширину контейнера */
    }

    input {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      width: 100%; /* Input займет всю ширину формы */
      box-sizing: border-box; /* Чтобы padding не влиял на общую ширину */
    }

    button {
      padding: 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      width: 100%; /* Кнопка займет всю ширину формы */
    }
    .error {
      color: red;
    }

    .button {
    display: inline-block;
    padding: 40px 80px;  /* Увеличенные отступы */
    font-size: 48px;     /* Увеличенный размер шрифта */
    color: #fff;         /* Цвет текста */
    background-color: #007bff; /* Цвет фона */
    border: none;
    border-radius: 5px;
    text-decoration: none; /* Убирает подчеркивание */
    transition: background-color 0.3s, transform 0.3s; /* Анимация при наведении */
}

    .button:hover {
        background-color: #0056b3; /* Цвет фона при наведении */
        transform: translateY(-2px); /* Легкое поднятие при наведении */
    }


.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: linear-gradient(135deg, #add8e6, #0000ff);
    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: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.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); }
}


.gradient-button {
    display: inline-block;
    padding: 12px 24px;
    margin: 10px 0;
    border-radius: 4px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.gradient-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #5d7de8, #9666d8);
}

/* Стили для красивых уведомлений */
.minus12-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    max-width: 400px;
    animation: slideInCenter 0.3s ease-out;
}

.minus12-content {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 2px solid #3498db;
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
}

.minus12-icon {
    font-size: 24px;
    min-width: 24px;
    text-align: center;
}

.minus12-text {
    color: white;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    line-height: 1.4;
}

.minus12-close {
    color: #bdc3c7;
    font-size: 20px;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.minus12-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Анимации */
@keyframes slideInCenter {
    from {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes slideOutCenter {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}

.minus12-alert.hide {
    animation: slideOutCenter 0.3s ease-in forwards;
}

/* Типы уведомлений */
.minus12-alert.success .minus12-content {
    border-color: #27ae60;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.minus12-alert.error .minus12-content {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #c0392b, #e74c3c);
}

.minus12-alert.warning .minus12-content {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #c0392b, #e74c3c);
}

.minus12-alert.info .minus12-content {
    border-color: #3498db;
    background: linear-gradient(135deg, #2980b9, #3498db);
}

/* Enforce consistent banner container across pages regardless of other CSS */
body .container {
  width: 400px !important;
  max-width: 90vw !important;
}

/* Ensure gradient button spacing is uniform everywhere */
a.gradient-button {
  padding: 12px 24px !important;
  width: auto !important;
  display: inline-block !important;
}

/* Стили для пагинации перенесены в style.css */