.menu-other-service {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1024px) {
    .menu-other-service {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .menu-other-service {
        grid-template-columns: 1fr;
    }
}
.menu-other-service-header {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 18px;
}
.center_menu_razdel {
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.center_menu_text {
    font-size: 16px;
}


.block_list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    /* max-width: 368px;*/
    /* max-width: 423px;*/
    margin: 20px auto;
}
.letters-block {
    margin: 25px 0;
}
.letters-block .block_list {
    margin: 10px auto 0;
}
.bkv-page .shared-slova {
    margin-top: 40px;
}
a.btn-u:focus {
    color: #fff!important;
}
.bkv-page .nav-tabs {
    margin-top: 30px;
    margin-bottom: 30px;
}
.block_list .color-grey {
    background-color: #d7d7d7;
}

.block_list .color-yellow {
    background-color: #ffdd2d;
}

.block_list .color-default {
    background-color: #fff;
}

.bkv-list .btn-u:focus {
    color: #fff!important;
}

/* Стили для строки bkv_line */
.bkv_line {
    /*  display: flex;*/
    align-items: center;
    gap: 10px; /* Расстояние между элементами */
    /* margin-bottom: 10px;*/
}

/* Стили для input */
.block_list input.no-cursor {
    width: 40px; /* Ширина каждого input */
    height: 40px; /* Высота каждого input */
    text-align: center; /* Выравнивание текста по центру */
    font-size: 30px; /* Размер шрифта */
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    caret-color: transparent; /* Скрыть мигающий курсор */
    text-transform: uppercase;
    cursor: pointer !important;
    pointer-events: all !important;
    margin: 1px 0;
}

.block_list input.no-cursor:focus {
    border: 3px solid #2ac100;
}

/* Стили для кнопки */
.block_list .btn {
    background-color: #dc3545; /* Цвет фона кнопки */
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 21px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.block_list .btn-success {
    background-color: #2ac100; /* Цвет фона кнопки */
}

.block_list .btn:hover {
    background-color: #c82333; /* Цвет фона при наведении */
}
.block_list .btn-success:hover {
    background-color: #238109; /* Цвет фона при наведении */
}

.block_list .btn i {
    margin: 0; /* Убираем отступы у иконки */
}

/* Дополнительные стили для иконки */
.block_list .btn .fa-trash-o {
    font-size: 20px; /* Размер иконки */
}

.word-letter-list {
    margin: 0 auto;
}


.number_block_list {
    display: inline-flex; /* Располагает элементы в одну строку */
    align-items: center; /* Выравнивает элементы по вертикали */
    gap: 10px; /* Промежуток между элементами */
    padding: 10px;
    background-color: #f9f9f9; /* Светлый фон для блока */
    border: 1px solid #ddd; /* Граница блока */
    border-radius: 5px; /* Скругленные углы */
    margin-top:10px;
}

.number_block_list .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Ширина кнопки */
    height: 30px; /* Высота кнопки */
    border-radius: 50%; /* Круглая форма */
    transition: background-color 0.3s ease;
    margin-bottom: 0!important;
}

.number_block_list .btn:hover {
    background-color: #0056b3; /* Цвет при наведении */
}

.number_block_list span[data-cont-value] {
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Тёмно-серый цвет */
    text-align: center; /* Центрирование текста */
}


/* Общий контейнер для выравнивания блоков */
.letter-container {
    display: flex;
    flex-wrap: wrap; /* Позволяет блокам переноситься на следующую строку */
    gap: 20px; /* Расстояние между блоками */
    align-items: flex-start; /* Выравнивание по верху */
    margin-bottom: 20px; /* Отступ снизу */
}

/* Блоки с буквами */
.letter-container > div {
    flex: 1 1 calc(50% - 20px); /* Ширина 50% с учетом отступа */
    min-width: 300px; /* Минимальная ширина для лучшего отображения на мобильных */
}

.letter-container strong {
    display: block; /* Блоковый стиль для заголовков */
    margin-bottom: 10px; /* Отступ между заголовком и буквами */
    font-size: 16px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    color: #333; /* Цвет текста */
}

/* Общий стиль для ссылок-букв */
.letter-container a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 5px 8px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 1px;
    width: 28px;
}

.letter-container a:hover {
    background-color: #0068ba;
    color: #fff;
}
.letter-container a.disabled:hover {
    background-color: inherit;
    color: inherit;
    cursor: initial;
}
.letter-container .l-green {
    background-color: #1abc9c;
    color: #fff;
}
.letter-container .l-red {
    background-color: #e67e22;
    color: #fff;
}
.letter-container .disabled {
    background-color: #ddd;
}

.result-container {
    max-width: 100%;
    margin: 20px auto;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr); /* 4 столбца по умолчанию */
   /* padding: 15px;*/
    /*background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

.result-word {
    font-size: 16px;
    color: #333;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #ffffff;
    text-align: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.result-word:hover {
    background-color: #f0f8ff;
    color: #007bff;
    transform: translateY(-2px);
}
.errors {
    color: #ff0000;
}

.badge {
    display: inline-block;
    min-width: 10px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}
.stat-letter em {
    color: #777;
}

.rounded {
    border-radius: 4px !important;
}
span.badge, .list-group-item.active>.badge {
    color: #fff;
    font-weight: 400;
    padding: 4px 7px;
}
span.label-blue, span.badge-blue, .list-group-item.active>.badge {
    background: #1abc9c;
}

/* Уменьшение количества столбцов на планшетах */
@media (max-width: 768px) {
    .result-container {
        grid-template-columns: repeat(2, 1fr); /* 2 столбца */
    }
}

/* Уменьшение количества столбцов на мобильных устройствах */
@media (max-width: 480px) {
    .result-container {
        grid-template-columns: 1fr; /* 1 столбец */
    }
}