/* Анимация для скейлинга */
@keyframes scalex-animate {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

/* Стили для слотов */
.mark_slot {
    border: 1px dashed #A6B3B9; /* Мягкий серо-голубой */
}

.mark_slot:focus {
    background-color: #A4C6D9 !important; /* Мягкий голубой */
    border: 1px dashed #3D5A6E !important; /* Темно-синий */
    color: #3D5A6E !important; /* Темно-синий */
    outline: none;
}

/* Стили для ячеек таблицы */
.td {
    vertical-align: middle;
}

/* Адаптивные стили для экранов меньше 768px */
@media (max-width: 768px) {
    .activity-property-label {
        min-width: 150px;
        text-align: right;
        display: inline-block;
    }
}

/* Стили для попапов */
.popup {
    background-color: #F39C12 !important; /* Желто-оранжевый */
    border: 1px solid #D35400 !important; /* Оранжевый */
}

.error.popup:before {
    background-color: #E67E22 !important; /* Ярко-оранжевый */
    box-shadow: -1px -1px 0px 0px #D35400 !important; /* Темно-оранжевый */
}

/* Стили для параграфов внутри текстов */
#__RENDERED_TEXT__ .mm-paragraph {
    padding: 12px;
    background-color: #f7f7f7; /* Легкий серый фон */
    border-radius: 4px;
    line-height: 1.6;
}

/* Строки с nowrap */
.row.nowrap {
    flex-wrap: nowrap;
}

/* Стили для файловых элементов при наведении */
.file-item:hover {
    background-color: #F2F6FC; /* Легкий голубоватый фон */
}

/* Стили для выбранных файлов */
.file-item.selected {
    background-color: rgba(116, 162, 205, 0.6) !important; /* Полупрозрачный голубой */
}

/* Стили для кнопок */
.ui.button:focus {
    background-color: #BDC3C7; /* Светло-серый */
}

.ui.button:hover {
    background-color: #AAB7B8; /* Серо-голубой */
}

.ui.button:active {
    background-color: #95A5A6; /* Темный серо-голубой */
}

/* Адаптивные изменения для кнопок */
.ui.button {
    border-radius: 4px; /* Закругленные углы для кнопок */
    padding: 10px 20px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.ui.button:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Легкая тень при наведении */
}

.ui.button:focus, .ui.button:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Легкая тень при фокусе и активном состоянии */
}