[x-cloak] {
    display: none !important;
}

.menu-icon {
    margin-right: 10px;
}

.navbar-toggler {
    border: none;
    outline: none;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid white;
}

.bg-hover:hover {
    background-color: var(--bs-light) !important;
}

/* Цвета для card */

.bg-black-light {
    background: #f2f2f2;
    border-color: #808080;
}

.bg-red-light {
    background: #faeaeb;
    border-color: #bf6972;
}

.bg-green-light {
    background: #eaf7ee;
    border-color: #63b57a;
}

/* Ссылки без выделения */

.hidden_link {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.hidden_link:hover,
.hidden_link:focus {
    /* text-decoration: underline !important; */
    color: #0645ad !important;
    transition: all 0.2s ease;
}

/* Корректируем стили для кнопок тегов */

.btn-tag:not(.btn-dark):hover,
.btn-tag:not(.btn-dark):active {
    background-color: transparent !important;
    border-color: #343a40 !important;
    color: #343a40 !important;
}

/* Стили для списка позиций */

.items-container {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto auto;
    gap: 0;
    row-gap: 12px;
}

.items-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 12px;
    align-items: center;
}

.item-info {
    white-space: nowrap;
    text-align: right;
}

/* Медиа-запрос для узких экранов для списка позиций */

@media (max-width: 576px) {

    .items-container {
        grid-template-columns: 1fr;
    }

    .items-row {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "name name name name"
            "price quantity total delete";
        gap: 10px;
    }

    .item-name {
        grid-area: name;
    }

    .item-info:nth-child(2) {
        grid-area: price;
        justify-self: start;
        text-align: left;
    }

    .item-info:nth-child(3) {
        display: none;
    }

    .item-info:nth-child(4) {
        grid-area: quantity;
        justify-self: center;
    }

    .item-info:nth-child(5) {
        grid-area: total;
        justify-self: end;
        text-align: right;
    }

    .item-info:nth-child(6) {
        grid-area: delete;
        justify-self: end;
        text-align: right;
    }
}

/* Стили для списка элементов */

.list-container-3 {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0;
    row-gap: 8px;
}

.list-container-4 {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0;
    row-gap: 8px;
}

.list-container-5 {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 0;
    row-gap: 8px;
}

.list-container-6 {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    gap: 0;
    row-gap: 8px;
}

.list-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 12px;
    align-items: center;
}

/* Легкие оттенки для бейджей */

.bg-gray-light {
    color: #343a40;
    background-color: #c0c0c0;
}

.bg-red-light {
    color: #343a40;
    background-color: #f0b0b0;
}

.bg-green-light {
    color: #343a40;
    background-color: #b0f0b0;
}