/* Стилі для контейнера списку */
.list-group {
    list-style-type: none; /* Прибираємо стандартні маркери списку */
    padding: 0;
    margin: 0;
    max-width: 100%; /* Максимальна ширина для списку */
    border-radius: 5px; /* Закруглені кути для контейнера */
    overflow: hidden; /* Забезпечуємо, що елементи залишаються в межах контейнера */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Додаємо тінь для ефекту піднятого контейнера */
}

/* Стилі для елементів списку */
.list-group-item {
    padding: 10px 15px; /* Внутрішні відступи для елементів */
    background-color: #fff; /* Білий фон для елементів */
    border: 1px solid #ddd; /* Обводка для кожного елемента */
    border-radius: 4px; /* Закруглені кути для елементів */
    margin-bottom: 0px; /* Відступ між елементами */
    color: #333; /* Колір тексту */
    font-size: 16px; /* Розмір шрифту */
    transition: border-color 0.3s ease; /* Плавний перехід для обводки */
}

/* Стиль для останнього елемента, щоб видалити нижню межу */
.list-group-item:last-child {
    margin-bottom: 0;
}

/* Стилі для активного елемента (якщо потрібно) */
.list-group-item.active {
    background-color: #007bff; /* Синій фон для активного елемента */
    color: #fff; /* Білий текст для активного елемента */
    border-color: #007bff; /* Синя обводка для активного елемента */
}

/* Стан при наведенні застосовується лише до активного елемента */
.list-group-item.active:hover {
    cursor: pointer; /* Зміна курсору на указівник при наведенні на активний елемент */
}

/* Стилі для інтерактивних елементів */
.list-group-item-action {
    cursor: pointer; /* Зміна курсору на указівник для інтерактивних елементів */
}

.list-group-item-action:hover {
    background-color: #f7f7f7; /* Світло-сірий фон при наведенні */
    color: #007bff; /* Синій текст при наведенні */
    border-color: #007bff; /* Синя обводка при наведенні */
}

/* Стилі для активного стану інтерактивного елемента */
.list-group-item-action:active {
    background-color: #007bff; /* Синій фон для активного елемента */
    color: #fff; /* Білий текст для активного елемента */
    border-color: #007bff; /* Синя обводка для активного елемента */
}

/* Стилі для list-group-flush */
.list-group-flush .list-group-item {
    border-radius: 0; /* Прибираємо закруглені кути */
    border-left: none; /* Прибираємо ліву обводку */
    border-right: none; /* Прибираємо праву обводку */
    border-top: 1px solid #ddd; /* Додаємо верхню обводку для розділення елементів */
    margin-bottom: 0; /* Відстань між елементами прибирається */
}

.list-group-flush .list-group-item:first-child {
    border-top: none; /* Прибираємо верхню межу для першого елемента */
}

/* Стилі для нумерованих елементів списку */
.list-group-numbered .list-group-item {
    counter-increment: list-item; /* Інкрементуємо лічильник для кожного елемента */
    padding-left: 40px; /* Відступ для розміщення нумерації */
    position: relative; /* Позиціювання для розміщення номерів */
    background-color: #fff; /* Білий фон для елементів */
    border: 1px solid #ddd; /* Обводка для кожного елемента */
    margin-bottom: 0px; /* Відступ між елементами */
    color: #333; /* Колір тексту */
    font-size: 16px; /* Розмір шрифту */
    border-radius: 4px; /* Закруглені кути для елементів */
}

.list-group-numbered .list-group-item::before {
    content: counter(list-item) ". "; /* Відображення номера перед елементом */
    position: absolute;
    left: 10px; /* Відступ зліва для нумерації */
    top: 50%;
    transform: translateY(-50%); /* Вирівнювання номера по центру елемента */
    font-weight: normal; /* Звичайний шрифт для номера */
    color: #000; /* Чорний колір номера */
    font-family: "Open Sans", sans-serif; /* Додаємо шрифт Open Sans */
}

/* Стилі для різних типів фону */
.list-group-item-primary {
    background-color: #007bff; /* Синій фон для головного рядка */
    color: #fff; /* Білий текст на синьому фоні */
}

.list-group-item-secondary {
    background-color: #6c757d; /* Сірий фон для другорядного рядка */
    color: #fff; /* Білий текст на сірому фоні */
}

.list-group-item-success {
    background-color: #28a745; /* Зелений фон для успіху */
    color: #fff; /* Білий текст на зеленому фоні */
}

.list-group-item-warning {
    background-color: #ffc107; /* Жовтий фон для попередження */
    color: #212529; /* Темний текст на жовтому фоні */
}

.list-group-item-danger {
    background-color: #dc3545; /* Червоний фон для небезпеки */
    color: #fff; /* Білий текст на червоному фоні */
}

.list-group-item-info {
    background-color: #17a2b8; /* Блакитний фон для інформаційного рядка */
    color: #fff; /* Білий текст на блакитному фоні */
}

.list-group-item-light {
    background-color: #f8f9fa; /* Світло-сірий фон для світлого рядка */
    color: #212529; /* Темний текст на світлому фоні */
}

.list-group-item-dark {
    background-color: #343a40; /* Темний фон для темного рядка */
    color: #fff; /* Білий текст на темному фоні */
}