.btn-primary, .li-item {
    background-color: #fedc08 !important;
    border-color: #fedc08 !important;
    color: black !important
}

.auth-form {
    padding-top: 15px !important;
    background-color: #ff0f23 !important;
    border-color: #ff0f23 !important;
    margin-left: 25%;
    margin-right: 25%;
}

.btn-category-act {
    background-color: #b4b4b4 !important;
    border-color: #b4b4b4 !important;
    color: black !important
}

.btn-category {
    background-color: #eeeeee !important;
    border-color: #eeeeee !important;
    color: black !important
}

.navbar-inverse {
    background-color: #ffcc00 !important;
    border-color: #ffcc00 !important;
}

.table_outer {
    height: 30em;
    overflow: auto;
}

.table {
    text-align: left;
    position: relative;
    border-collapse: collapse;
    margin-bottom: 0 !important;
    border-top-width: 0 !important;
}

th {
    cursor: pointer;
    background: white;
    position: sticky;
    top: 0;
}

th.sorted[data-order="-1"]::after {
    content: "▼"
}

th.sorted[data-order="1"]::after {
    content: "▲"
}
.btn-secondary {
    background-color: #dfdfdf;
}

#toTop {
    position: fixed;
    bottom: 10px; 
    left: 10px;
    cursor: pointer;
    display: none;
}

.modal {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}


/* ---- Стили для компонента загрузки изображений ---- */

/* Контейнер для превью существующего изображения */
.current-image-container {
    position: relative; 
    width: 150px;
    height: 150px; 
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

/* Само изображение-превью */
.current-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.current-image-preview:hover {
    transform: scale(1.05);
}

/* Кнопка "Удалить" */
.delete-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    opacity: 0.8;
}

.delete-image-btn:hover {
    opacity: 1;
}

/* Стили для превью нового изображения */
.new-image-preview {
    display: none; 
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
}

.image-preview-box {
    width: 150px; 
    height: 150px; 

    object-fit: cover; 

    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

.image-preview-box, .new-image-preview {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

.new-image-container, .upload-controls {
    /* Эти блоки показываются/скрываются через JS */
}

.image-actions {
    margin-top: 10px;
}

.inherited-file-info {
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}

.inherited-file-info .file-name {
    font-weight: bold;
}

.info-tip {
    margin-left: 5px; /* Небольшой отступ от текста метки */
    font-weight: bold;
    color: #007bff; /* Цвет, соответствующий вашему дизайну */
    cursor: help; /* Курсор в виде знака вопроса при наведении */
    border-bottom: 1px dashed #007bff; /* Подчеркивание, чтобы показать интерактивность */
    font-size: 0.9em; /* Чуть меньше основного текста */
}

.col-form-label .info-tip {
    vertical-align: middle;
}

#addEditArticleForm .row {
    margin-bottom: 1.5rem; /* Это значение соответствует классу mb-4 в Bootstrap */
}