.btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #383d41;
    font-size: 20px;
    cursor: pointer;
    outline: none;
}

.btn-close:hover {
    color: #000;
}

.btn-close:focus {
    outline: none;
    box-shadow: none;
}

/* Базові стилі для кнопок */
.button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    margin: 5px 0;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Повні кнопки */
.button-primary {
    background-color: #007bff;
    color: #fff;
}

.button-primary:hover {
    background-color: #0056b3; /* Світліший синій при наведенні */
}

.button-secondary {
    background-color: #6c757d;
    color: #fff;
}

.button-secondary:hover {
    background-color: #5a6268; /* Світліший сірий при наведенні */
}

.button-success {
    background-color: #28a745;
    color: #fff;
}

.button-success:hover {
    background-color: #218838; /* Світліший зелений при наведенні */
}

.button-warning {
    background-color: #ffc107;
    color: #212529;
}

.button-warning:hover {
    background-color: #e0a800; /* Світліший жовтий при наведенні */
}

.button-danger {
    background-color: #dc3545;
    color: #fff;
}

.button-danger:hover {
    background-color: #c82333; /* Світліший червоний при наведенні */
}

.button-info {
    background-color: #17a2b8;
    color: #fff;
}

.button-info:hover {
    background-color: #138496; /* Світліший блакитний при наведенні */
}

.button-light {
    background-color: #f8f9fa;
    color: #212529;
}

.button-light:hover {
    background-color: #e2e6ea; /* Світліший світло-сірий при наведенні */
}

.button-dark {
    background-color: #343a40;
    color: #fff;
}

.button-dark:hover {
    background-color: #23272b; /* Світліший чорний при наведенні */
}


/* Пусті кнопки (Outline) */
.button-outline-primary {
    background-color: transparent;
    color: #007bff;
    border: 2px solid #007bff;
}

.button-outline-secondary {
    background-color: transparent;
    color: #6c757d;
    border: 2px solid #6c757d;
}

.button-outline-success {
    background-color: transparent;
    color: #28a745;
    border: 2px solid #28a745;
}

.button-outline-warning {
    background-color: transparent;
    color: #ffc107;
    border: 2px solid #ffc107;
}

.button-outline-danger {
    background-color: transparent;
    color: #dc3545;
    border: 2px solid #dc3545;
}

.button-outline-info {
    background-color: transparent;
    color: #17a2b8;
    border: 2px solid #17a2b8;
}

.button-outline-light {
    background-color: transparent;
    color: #212529; /* Темний колір тексту */
    border: 2px solid #f8f9fa;
}

.button-outline-dark {
    background-color: transparent;
    color: #343a40;
    border: 2px solid #343a40;
}

/* Стан при наведенні */
.button-outline-primary:hover {
    background-color: #007bff;
    color: #fff;
}

.button-outline-secondary:hover {
    background-color: #6c757d;
    color: #fff;
}

.button-outline-success:hover {
    background-color: #28a745;
    color: #fff;
}

.button-outline-warning:hover {
    background-color: #ffc107;
    color: #212529;
}

.button-outline-danger:hover {
    background-color: #dc3545;
    color: #fff;
}

.button-outline-info:hover {
    background-color: #17a2b8;
    color: #fff;
}

.button-outline-light:hover {
    background-color: #f8f9fa;
    color: #212529; /* Залишаємо темний колір тексту */
}

.button-outline-dark:hover {
    background-color: #343a40;
    color: #fff;
}

.button-long {
    width: 100%; /* Кнопка займає всю ширину контейнера */
    display: block; /* Робимо кнопку блоковим елементом, щоб вона займала всю ширину */
    margin-bottom: 10px; /* Додаємо відступ знизу для відділення від інших елементів */
}