/* Стили кнопок */
.btn {
    padding: 10px; /* Внутренний отступ кнопки */
    border: none; /* Убираем рамку */
    border-radius: 4px; /* Закругляем углы кнопки */
    font-size: 16px; /* Размер шрифта текста на кнопке */
    cursor: pointer; /* Изменяем курсор на указатель при наведении */
    transition: background-color 0.3s ease; /* Плавный переход цвета фона */
}
.btn-w {
    width: 100%; /* Ширина кнопки 100% от родительского контейнера */
}

/* Микроскопическая кнопка */
.btn-mc,
.btn-micro {
    padding: 2px 5px; /* Очень маленькие отступы */
    font-size: 10px; /* Очень маленький размер шрифта */
}

/* Малая кнопка */
.btn-sm,
.btn-small {
    padding: 5px 10px; /* Меньшие отступы */
    font-size: 14px; /* Меньший размер шрифта */
}

/* Средняя кнопка */
.btn-md,
.btn-medium {
    padding: 10px 20px; /* Стандартные отступы */
    font-size: 16px; /* Стандартный размер шрифта */
}

/* Большая кнопка */
.btn-lg,
.btn-large {
    padding: 15px 30px; /* Большие отступы */
    font-size: 18px; /* Больший размер шрифта */
}

/* Огромная кнопка */
.btn-hg,
.btn-huge {
    padding: 20px 40px; /* Очень большие отступы */
    font-size: 22px; /* Очень большой размер шрифта */
}

/* Основная кнопка (primary) */
.btn-p,
.btn-primary {
    background-color: #007bff !important; /* Синий цвет фона */
    color: #ffffff !important; /* Белый цвет текста */
    border-color: #007bff !important; /* Синий цвет рамки */
}
.btn-p:hover,
.btn-primary:hover {
    background-color: #0056b3 !important; /* Темно-синий цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
    border-color: #0056b3 !important; /* Темно-синий цвет рамки при наведении */
}
.btn-p-o,
.btn-primary-o,
.btn-outline-primary {
    background-color: transparent !important; /* Прозрачный фон для кнопки с обводкой */
    color: #007bff !important; /* Синий цвет текста */
    border: 1px solid #007bff !important; /* Синяя обводка */
}
.btn-p-o:hover,
.btn-primary-o:hover,
.btn-outline-primary:hover {
    background-color: #007bff !important; /* Синий цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
}

/* Вторичная кнопка (secondary) */
.btn-g,
.btn-secondary {
    background-color: #6c757d !important; /* Серый цвет фона */
    color: #ffffff !important; /* Белый цвет текста */
    border-color: #6c757d !important; /* Серая рамка */
}
.btn-g:hover,
.btn-secondary:hover {
    background-color: #5a6268 !important; /* Темно-серый цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
    border-color: #5a6268 !important; /* Темно-серая рамка при наведении */
}
.btn-g-o,
.btn-secondary-o,
.btn-outline-secondary {
    background-color: transparent !important; /* Прозрачный фон для кнопки с обводкой */
    color: #6c757d !important; /* Серый цвет текста */
    border: 1px solid #6c757d !important; /* Серая обводка */
}
.btn-g-o:hover,
.btn-secondary-o:hover,
.btn-outline-secondary:hover {
    background-color: #6c757d !important; /* Серый цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
}

/* Кнопка успеха (success) */
.btn-s,
.btn-success {
    background-color: #28a745 !important; /* Зеленый цвет фона */
    color: #ffffff !important; /* Белый цвет текста */
    border-color: #28a745 !important; /* Зеленая рамка */
}
.btn-s:hover,
.btn-success:hover {
    background-color: #218838 !important; /* Темно-зеленый цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
    border-color: #218838 !important; /* Темно-зеленая рамка при наведении */
}
.btn-s-o,
.btn-success-o,
.btn-outline-success {
    background-color: transparent !important; /* Прозрачный фон для кнопки с обводкой */
    color: #28a745 !important; /* Зеленый цвет текста */
    border: 1px solid #28a745 !important; /* Зеленая обводка */
}
.btn-s-o:hover,
.btn-success-o:hover,
.btn-outline-success:hover {
    background-color: #28a745 !important; /* Зеленый цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
}

/* Кнопка опасности (danger) */
.btn-d,
.btn-danger {
    background-color: #dc3545 !important; /* Красный цвет фона */
    color: #ffffff !important; /* Белый цвет текста */
    border-color: #dc3545 !important; /* Красная рамка */
}
.btn-d:hover,
.btn-danger:hover {
    background-color: #c82333 !important; /* Темно-красный цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
    border-color: #c82333 !important; /* Темно-красная рамка при наведении */
}
.btn-d-o,
.btn-danger-o,
.btn-outline-danger {
    background-color: transparent !important; /* Прозрачный фон для кнопки с обводкой */
    color: #dc3545 !important; /* Красный цвет текста */
    border: 1px solid #dc3545 !important; /* Красная обводка */
}
.btn-d-o:hover,
.btn-danger-o:hover,
.btn-outline-danger:hover {
    background-color: #dc3545 !important; /* Красный цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
}

/* Кнопка предупреждения (warning) */
.btn-w,
.btn-warning {
    background-color: #ffc107 !important; /* Желтый цвет фона */
    color: #212529 !important; /* Темный цвет текста */
    border-color: #ffc107 !important; /* Желтая рамка */
}
.btn-w:hover,
.btn-warning:hover {
    background-color: #e0a800 !important; /* Темно-желтый цвет фона при наведении */
    color: #212529 !important; /* Темный цвет текста при наведении */
    border-color: #e0a800 !important; /* Темно-желтая рамка при наведении */
}
.btn-w-o,
.btn-warning-o,
.btn-outline-warning {
    background-color: transparent !important; /* Прозрачный фон для кнопки с обводкой */
    color: #ffc107 !important; /* Желтый цвет текста */
    border: 1px solid #ffc107 !important; /* Желтая обводка */
}
.btn-w-o:hover,
.btn-warning-o:hover,
.btn-outline-warning:hover {
    background-color: #ffc107 !important; /* Желтый цвет фона при наведении */
    color: #212529 !important; /* Темный цвет текста при наведении */
}

/* Кнопка информации (info) */
.btn-i,
.btn-info {
    background-color: #17a2b8 !important; /* Бирюзовый цвет фона */
    color: #ffffff !important; /* Белый цвет текста */
    border-color: #17a2b8 !important; /* Бирюзовая рамка */
}
.btn-i:hover,
.btn-info:hover {
    background-color: #138496 !important; /* Темно-бирюзовый цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
    border-color: #138496 !important; /* Темно-бирюзовая рамка при наведении */
}
.btn-i-o,
.btn-info-o,
.btn-outline-info {
    background-color: transparent !important; /* Прозрачный фон для кнопки с обводкой */
    color: #17a2b8 !important; /* Бирюзовый цвет текста */
    border: 1px solid #17a2b8 !important; /* Бирюзовая обводка */
}
.btn-i-o:hover,
.btn-info-o:hover,
.btn-outline-info:hover {
    background-color: #17a2b8 !important; /* Бирюзовый цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
}

/* Светлая кнопка (light) */
.btn-l,
.btn-light {
    background-color: #f8f9fa !important; /* Светлый цвет фона */
    color: #212529 !important; /* Темный цвет текста */
    border-color: #f8f9fa !important; /* Светлая рамка */
}
.btn-l:hover,
.btn-light:hover {
    background-color: #e2e6ea !important; /* Темно-светлый цвет фона при наведении */
    color: #212529 !important; /* Темный цвет текста при наведении */
    border-color: #e2e6ea !important; /* Темно-светлая рамка при наведении */
}
.btn-l-o,
.btn-light-o,
.btn-outline-light {
    background-color: transparent !important; /* Прозрачный фон для кнопки с обводкой */
    color: #f8f9fa !important; /* Светлый цвет текста */
    border: 1px solid #f8f9fa !important; /* Светлая обводка */
}
.btn-l-o:hover,
.btn-light-o:hover,
.btn-outline-light:hover {
    background-color: #f8f9fa !important; /* Светлый цвет фона при наведении */
    color: #212529 !important; /* Темный цвет текста при наведении */
}

/* Темная кнопка (dark) */
.btn-dk,
.btn-dark {
    background-color: #343a40 !important; /* Темный цвет фона */
    color: #ffffff !important; /* Белый цвет текста */
    border-color: #343a40 !important; /* Темная рамка */
}
.btn-dk:hover,
.btn-dark:hover {
    background-color: #23272b !important; /* Очень темный цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
    border-color: #23272b !important; /* Очень темная рамка при наведении */
}
.btn-dk-o,
.btn-dark-o,
.btn-outline-dark {
    background-color: transparent !important; /* Прозрачный фон для кнопки с обводкой */
    color: #343a40 !important; /* Темный цвет текста */
    border: 1px solid #343a40 !important; /* Темная обводка */
}
.btn-dk-o:hover,
.btn-dark-o:hover,
.btn-outline-dark:hover {
    background-color: #343a40 !important; /* Темный цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
}

/* Фиолетовая кнопка (purple) */
.btn-pu,
.btn-purple {
    background-color: #6f42c1 !important; /* Фиолетовый цвет фона */
    color: #ffffff !important; /* Белый цвет текста */
    border-color: #6f42c1 !important; /* Фиолетовая рамка */
}
.btn-pu:hover,
.btn-purple:hover {
    background-color: #5a32a3 !important; /* Темно-фиолетовый цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
    border-color: #5a32a3 !important; /* Темно-фиолетовая рамка при наведении */
}
.btn-pu-o,
.btn-purple-o,
.btn-outline-purple {
    background-color: transparent !important; /* Прозрачный фон для кнопки с обводкой */
    color: #6f42c1 !important; /* Фиолетовый цвет текста */
    border: 1px solid #6f42c1 !important; /* Фиолетовая обводка */
}
.btn-pu-o:hover,
.btn-purple-o:hover,
.btn-outline-purple:hover {
    background-color: #6f42c1 !important; /* Фиолетовый цвет фона при наведении */
    color: #ffffff !important; /* Белый цвет текста при наведении */
}

/* Эффект нажатия кнопки */
.btn:active {
    transform: scale(0.95); /* Уменьшение размера кнопки при нажатии */
    background-color: rgba(111, 66, 193, 0.8); /* Полупрозрачный фиолетовый фон при нажатии */
    color: #ffffff; /* Белый цвет текста при нажатии */
}

/* Стили для отключенной кнопки */
.btn:disabled {
    opacity: 0.65; /* Полупрозрачный эффект для отключенной кнопки */
    cursor: not-allowed; /* Указатель "не разрешено" */
}

/* Удаление обводки при фокусе */
.btn:focus {
    outline: none; /* Удаление стандартного фокуса */
}

/* Дополнительные стили для кнопок с обводкой */
.btn-outline {
    background-color: transparent; /* Прозрачный фон для кнопок с обводкой */
}

/* Стили для кнопок с обводкой при наведении */
.btn-outline:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Легкий серый фон при наведении */
}