/* Фон всей страницы Вордпресса для плагина */

body:has(div[class*="ss-main-wrap"]) {
	background: var(--bg-wp-page-ss-pre);
}

/* Убираем оригинальный Подвал Вордпресса для плагина */

body:has(div[class*="ss-main-wrap"]) #wpfooter {
	display: none;
}

/* Корректируем отступ страницы Вордпресса для плагина */

body:has(div[class*="ss-main-wrap"]) #wpbody-content {
	padding-bottom: 10px;
}

/* Убираем предупреждения от других плагинов и Вордпресса */

body:has(div[class*="ss-main-wrap"]) .notice-error,
body:has(div[class*="ss-main-wrap"]) .notice-warning {
	display: none;
}

/* -------------------------- */
/* ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ПЛАГИНА */
/* -------------------------- */

/* Обёртка кнопки переключения темы */

.ss-switch-theme {
	display: flex;
	align-items: center;
    justify-content: center;
	position: fixed;
	bottom: 50px;
	right: 25px;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	z-index: 100;
	cursor: pointer;
	color: var(--color-switch-theme-ss-pre);
	background: var(--bg-switch-theme-ss-pre);
	transition: all 0.2s ease;
}

.ss-switch-theme:hover {
	color: var(--color-switch-theme-hover-ss-pre);
	background: var(--bg-switch-theme-hover-ss-pre);
}

/* Обёртка Иконки переключения темы */

.ss-switch-theme span[class*="fi"] {
	display: flex;
    line-height: 1;
    font-size: 1.7em;
	transform: rotateZ(var(--rotate-switch-theme-ss-pre)) translate(var(--translate-gor-switch-theme-ss-pre), var(--translate-ver-switch-theme-ss-pre));
}

/* Иконка переключения темы */

.ss-switch-theme span[class*="fi"]:before {
	content: var(--icon-switch-theme-ss-pre);
	vertical-align: middle;
}

/* ------------------------------- */
/* ОБЩАЯ ОБЁРТКА СТРАНИЦЫ НАСТРОЕК */
/* ------------------------------- */

.ss-main-wrap {
	/* display: block; */
	display: flex;
	flex-flow: column;
    gap: 40px;
    margin: 0 auto;
	margin-top: 40px;
    padding-right: 20px;
    width: 90%;
    max-width: 1205px;
	box-sizing: border-box;
}

/* ------------------------------ */
/* ОБЁРТКА МЕНЮ СТРАНИЦЫ НАСТРОЕК */
/* ------------------------------ */

.ss-menu-wrap {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	align-items: center;
	justify-self: center;
	margin: 0 auto;
	/* margin: 10px 20px 0 2px; */
	width: 100%;
    /* max-width: 1205px; */
	box-sizing: border-box;
	padding: 20px;
    border-radius: 20px;
	background: var(--bg-menu-wrap-ss-pre);
	/* box-shadow: 0px 10px 25px -30px rgb(34 60 80); */
	/* -webkit-box-shadow: 0px 10px 25px -30px rgb(34 60 80); */
    /* -moz-box-shadow: 0px 10px 25px -30px rgb(34 60 80); */
}

/* Обёртка меню страницы настроек на маленьких и средних экранах */
/* ------------------------------------------------------------- */

@media (max-width: 1280px) {

.ss-menu-wrap {
    flex-flow: column;
    gap: 15px;
}
}

/* Контейнер Логотипа в меню */

.ss-menu-logo {
	display: flex;
	padding: 5px;
	justify-content: flex-start;
	/* border: 1px solid #000000; */
}

.ss-menu-logo h2 {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	gap: 10px;
    margin: 0;
	color: var(--color-h2-menu-ss-pre);
	font-size: 1.8em;
    font-weight: 700;
	text-transform: uppercase;
    /* flex-flow: row; */
}

/* Логотип в меню на маленьких и средних экранах */
/* --------------------------------------------- */

@media (max-width: 1280px) {

.ss-menu-logo h2 {
    line-height: 1em;
}
}

/* Контейнер Ссылок в меню */

.ss-menu-links {
	display: flex;
    flex-flow: row;
    gap: 10px;
	flex-grow: 2;
	flex-wrap: wrap;
	justify-content: flex-end;
	/* border: 1px solid #000000; */
}

/* Контейнер Ссылок в меню на маленьких и средних экранах */
/* ------------------------------------------------------ */

@media (max-width: 1280px) {

.ss-menu-links {
    justify-content: center;
}
}

/* Общие настройки обёрток ссылок в меню */

.ss-menu-links div {
	padding: 5px;
	/* border: 1px solid #000000; */
}

/* Общие настройки ссылок - для Иконок UIcons */

.ss-menu-links div a {
	display: flex;
    gap: 10px;
    flex-flow: row;
    align-items: center;
    justify-content: center;
	font-weight: normal!important;
	/* font-weight: 500!important; */
    /* line-height: normal; */
}

/* Общие настройки Иконки UIcons в ссылках */

.ss-menu-links div a::before {
	font-size: 1.2em;
	/* font-size: 1em; */
	line-height: normal;
	font-weight: normal;
    vertical-align: middle;
    font-family: "uicons-regular-rounded" !important;
	/* color: #222222; */
}

/* .ss-menu-links div a:hover::before {
    color: #0aa0ff;
} */

/* Иконка ссылки «Библиотека дополнений» */

.ss-menu-download-style-link-wrap a::before {
	/* content: "\e8b2"; */
	/* content: "\eed9"; */
	content: "\e783";
}

/* Иконка ссылки «Телеграм - чат» */

.ss-menu-support-link-wrap a::before {
	content: "\eb50";
}

/* Иконка ссылки «Написать Игорю» */

.ss-menu-author-link-wrap a::before {
	/* content: "\e455"; */
	/* content: "\e454"; */
	content: "\e5e1";
}

/* Иконка ссылки «Урок по Преображатору» */

.ss-menu-lesson-link-wrap a::before {
	content: "\e3d8";
	/* content: "\ec2a"; */
}

.ss-menu-lesson-link-wrap a {
	cursor: pointer;
}

/* Обёртка ссылки «Библиотека стилей» */

/* .ss-menu-download-style-link-wrap {
	
} */

/* Обёртка ссылки «Автор плагина» */

/* .ss-menu-author-link-wrap {
	
} */

/* Обёртка ссылки «Поддержка - группа» */

/* .ss-menu-support-link-wrap {
	
} */

/* Обёртка Аватара админа */

/* .ss-menu-admin-avatar-wrap {
	
} */

/* ---------------------- */
/* ОБЩАЯ ОБЁРТКА НАСТРОЕК */
/* ---------------------- */

/* Очистка отступов у всех элементов на страницах плагина */

.ss-wrap * {
    padding: 0;
    margin: 0;
	line-height: normal;
}

/* Обёртка главной страницы Вордпресса */
/* Нужно, чтобы работало выравнивание обёртки страницы плагина в Opera и Firefox */

/* #wpbody-content {
	display: flex;
	flex-flow: column;
    justify-content: center;
} */

/* Главная обёртка страницы */

.ss-wrap {
	/* margin: 10px 20px 0 2px; */
	/* выравнивание по центру */
	margin: 0 auto;
	display: flex;
    flex-flow: column;
	gap: 20px;
    width: 100%;
	/* max-width: 1205px; */
    align-items: center;
    justify-self: center;
    box-sizing: border-box;
}

/* АДАПТАЦИЯ НА РАЗНЫХ ЭКРАНАХ */
/* --------------------------- */

/* Обёртка всех кнопок-иконок на средних экранах */
/* --------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1399px) {

.ss-file-settings {
    width: 12%!important;
}
}
/* конец настроек для средних экранов */
/* ---------------------------------- */

/* Расставляем все обёртки внутри отдельного css-файла в СТОЛБЕЦ */
/* На всех экранах, кроме больших */
/* ------------------------------ */

@media (max-width: 1199px) {

.ss-wrap h1 {
    gap: 0px;
}

/* Расставляем все обёртки внутри секции с заголовком и кнопками таблицы в СТОЛБЕЦ */
/* На средних и маленьких экранах */

.ss-title-and-buttons-section {
	gap: 20px!important;
	flex-flow: column!important;
}

/* Чекбоксы напротив файлов */

.ss-list-all-files-section .ss-all-files-wrap input.ss-css-checkbox {
	align-self: flex-start;
    margin-top: 12.5px;
}

/* Контейнер отдельного css-файла */

.ss-file-row {
	gap: 15px!important;
    flex-flow: column!important;
    align-items: flex-start!important;
}

/* Растягиваем все обёртки внутри отдельного css-файла на всю ширину их контейнера */

/* Обёртка с именем css-файла и иконкой */
.ss-file-name-and-icon-wrap,
/* Обёртка АВТОРА css-файла */
.ss-author-name-and-image-wrap,
/* Обёртка описания css-файла */
.ss-file-description-wrap,
/* Обёртка всех кнопок-иконок */
.ss-file-settings {
	width: 100%!important;
}

/* Меняем порядок обёрток */

/* Обёртка с именем css-файла и иконкой */
.ss-file-name-and-icon-wrap {
	order: 3;
}

/* Обёртка с типом файла */
.ss-file-type-wrap {
	order: 1;
}

/* Обёртка АВТОРА css-файла */
.ss-author-name-and-image-wrap {
	order: 2;
}

/* Обёртка описания css-файла */
.ss-file-description-wrap {
	order: 4;
}

/* Обёртка всех кнопок-иконок */
.ss-file-settings {
	order: 5;
}

/* Убираем секцию с названиями столбцов таблицы */

.ss-table-column-headers-section {
	display: none;
}

/* Человеческое описание файла (в теге <p></p>) */
/* убираем отступ */

#ss-human-description-css {
	padding-right: 0px!important;
}
}
/* конец настроек для всех экранов, кроме больших */
/* ---------------------------------------------- */

/* Обёртка заголовка и кнопки в диалоговом окне на маленьких и средних экранах */
/* --------------------------------------------------------------------------- */

@media (max-width: 767px) {

.ss-window-title-and-button-wrap {
    gap: 20px!important;
	flex-flow: column!important;
}

/* Обёртка заголовка и имени текущего css-файла в окне */

.ss-window-title-wrap {
    align-items: center!important;
}
}
/* конец настроек для маленьких и средних экранов */
/* ---------------------------------------------- */

/* Всплывающие подсказки при наведении на кнопки-иконки */
/* На маленьких и средних экранах */
/* Положение подсказок */
/* блок «Редактировать» */
/* блок «Скачать» */
/* блок «Удалить» */
/* ------------------------------ */

/* @media (max-width: 767px) {

.ss-file-edit:hover::before {
	transform: translate(65px, -25px)!important;
}

.ss-file-download:hover::before {
	transform: translate(45px, -25px)!important;
}

.ss-file-delete:hover::before {
	transform: translate(45px, -25px)!important;
}
} */
/* конец настроек для маленьких и средних экранов */
/* ---------------------------------------------- */

/* Всплывающее окно на маленьких и средних экранах */
/* ----------------------------------------------- */

@media (max-width: 767px) {

/* Убираем иконку во всплывающем окне */

/* иконка в «загрузка css-файлов» */
.ss-upload-alert-icon,
/* иконка в «удаление одного или всех файлов» */
.ss-delete-alert-icon {
	display: none;
}

/* Расставляем обёртку кнопок во всплывающем окне в СТОЛБЕЦ */

/* загрузка css-файлов */
.ss-upload-alert-buttons-wrap,
/* удаление одного или всех файлов */
.ss-delete-alert-buttons-wrap {
	flex-flow: column!important;
}
}
/* конец настроек для маленьких и средних экранов */
/* ---------------------------------------------- */

/* КНОПКИ ПОД ОБЛАСТЬЮ ЗАГРУЗКИ НА РАЗНЫХ ЭКРАНАХ */
/* ---------------------------------------------  */

/* Обёртки кнопок на маленьких и средних экранах */
/* --------------------------------------------- */

@media (max-width: 991px) {

/* Общая обёртка 3-х кнопок - автозагрузка, сброс и ручная кнопка */

.ss-wrap-files-upload-page .ss-upload-buttons-wrap {
    flex-flow: column!important;
    gap: 15px!important;
}

/* Обёртка кнопки ручного создания пустого файла */

.ss-wrap-files-upload-page .ss-manually-create-empty-file-wrap {
	justify-content: flex-start!important;
}
}
/* конец настроек для маленьких и средних экранов */
/* ---------------------------------------------- */

/* Обёртка кнопок автозагрузки и сброса - расставляем в СТОЛБЕЦ */
/* На маленьких и средних экранах */
/* ------------------------------ */

@media (max-width: 767px) {

.ss-wrap-files-upload-page .ss-auto-create-file-wrap {
	flex-flow: column!important;
	gap: 15px!important;
}

/* Кнопка ручного создания пустого файла */

.ss-manually-create-empty-file {
	flex-grow: 1!important;
}
}
/* конец настроек для маленьких и средних экранов */
/* ---------------------------------------------- */

/* КНОПКА СОХРАНЕНИЯ НАСТРОЕК на маленьких и средних экранах */
/* --------------------------------------------------------- */

@media (max-width: 767px) {

/* кнопка сохранения чекбоксов в списке */
.ss-save-options-button {
	width: 100%;
}
}
/* конец настроек для маленьких и средних экранов */
/* ---------------------------------------------- */

/* КОНЕЦ НАСТРОЕК АДАПТИВНОСТИ */
/* --------------------------- */

/* ---------------------- */
/* ОБЩИЕ НАСТРОЙКИ СЕКЦИЙ */
/* ---------------------- */

/* Блок названия страницы */

.ss-page-title {
	margin: 40px 0;
    text-align: center;
}

/* Обёртка дополнительных страниц с настройками */

/* импорт файлов */
.ss-wrap .ss-upload-wrap {
    padding: 20px;
	background-color: var(--upload-wrap-ss-pre);
	border-radius: 20px;
    margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* Внутренняя обёртка содержания */

/* импорт файлов */
.ss-wrap .ss-select-and-upload-wrap {
	padding: 20px;
	border-radius: 10px;
	background-color: var(--select-and-upload-wrap-ss-pre);
	border: 1px solid var(--border-color-all-wrap-ss-pre);
}

/* ------ */
/* ТЕКСТЫ */
/* ------ */

/* Базовые настройки текста */

.ss-wrap {
	font-size: 13px;
	color: var(--color-text-main-ss-pre);
}

.ss-wrap p {
	margin-bottom: 1em;
}

/* ОСНОВНОЙ ТЕКСТ */
/* -------------- */

/* Размер и цвет */

/* абзац */
.ss-wrap p {
	color: var(--color-text-p-ss-pre);
}

/* абзац */
.ss-wrap p {
	font-size: 1.25em;
	line-height: 1.5em;
}

/* ЗАГОЛОВКИ */
/* --------- */

.ss-wrap h1,
.ss-wrap h2 {
	color: var(--color-h2-ss-pre);
	font-weight: 700;
	flex-wrap: wrap;
}

.ss-wrap h1 {
	font-size: 2.4em;
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
}

.ss-wrap h2 {
	font-size: 1.8em;
	margin-bottom: 0.5em;
}

/* ССЫЛКИ */
/* ------ */

.ss-main-wrap a {
	color: var(--color-href-ss-pre);
	text-decoration: none;
	font-weight: 700;
    font-size: 1.25em;
    line-height: 1em;
	transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
}

.ss-main-wrap a:hover {
	color: var(--color-href-hover-ss-pre);
}

.ss-main-wrap a:focus {
	outline: none;
	box-shadow: none;
}

/* ЦВЕТНЫЕ АКЦЕНТЫ */
/* --------------- */

.color-accent-1 {
	color: var(--color-accent-1-ss-pre);
}

.color-accent-2 {
	color: var(--color-accent-2-ss-pre);
}

/* -------------- */
/* ИКОНКИ AWESOME */
/* -------------- */
/* Отключил пока иконку */

/* Общие настройки Иконки для главного заголовка страницы */

/* .ss-wrap .ss-page-title h1:before {
	font-family: "Font Awesome 6 Free";
    font-family: 'icomoon';
    font-size: 1.2em;
    vertical-align: bottom;
    font-weight: normal;
    margin: 0;
    padding: 0;
} */

/* Иконка для главной страницы плагина */

/* .ss-wrap-files-upload-page .ss-page-title h1:before {
    content: '\f0d0';
	color: #0aa0ff;
} */

/* Отключил пока иконку */

.ss-wrap-files-upload-page .ss-page-title h1:before {
	display: none;
}

/* -------------- */
/* КНОПКИ ПЛАГИНА */
/* -------------- */

/* АНИМАЦИЯ ВСЕХ КНОПОК ПЛАГИНА */

/* кнопки на странице плагина */
.ss-wrap button,
/* кнопки в окне создания пустого css-файла */
.ss-manually-create-window button {
	transition: all 0.2s ease;
	outline: none;
}

/* ОБЩИЕ НАСТРОЙКИ ИКОНОК В СРЕДНИХ КНОПКАХ */
/* ---------------------------------------- */

/* Общие настройки самих кнопок */

/* Кнопка автозагрузки css-файлов */
.ss-upload-button,
/* Кнопка ручного создания пустого файла */
.ss-manually-create-empty-file,
/* Кнопка «Скачать все файлы» */
#ss-download-all-files-button,
/* Кнопка «Удалить все файлы» */
#ss-delete-all-files-button {
	display: flex;
    gap: 10px;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    line-height: normal;
}

/* Общие настройки Иконки UIcons в кнопке */

/* Кнопка автозагрузки css-файлов */
.ss-upload-button::before,
/* Кнопка ручного создания пустого файла */
.ss-manually-create-empty-file::before,
/* Кнопка «Скачать все файлы» */
#ss-download-all-files-button::before,
/* Кнопка «Удалить все файлы» */
#ss-delete-all-files-button::before {
    font-size: 1em;
    margin-top: 3px;
	line-height: normal;
	font-weight: normal;
    vertical-align: middle;
    font-family: "uicons-regular-rounded" !important;
}

/* Общие настройки Иконки UIcons в кнопке на маленьких экранах */

@media (max-width: 767px) {

/* Кнопка автозагрузки css-файлов */
.ss-upload-button::before,
/* Кнопка ручного создания пустого файла */
.ss-manually-create-empty-file::before,
/* Кнопка «Скачать все файлы» */
#ss-download-all-files-button::before,
/* Кнопка «Удалить все файлы» */
#ss-delete-all-files-button::before {
    margin-top: 0px;
}
}
/* конец настроек для маленьких экранов */
/* ------------------------------------ */

/* КНОПКИ АВТОЗАГРУЗКИ И СБРОСА ВЫБРАННЫХ ФАЙЛОВ + РУЧНАЯ КНОПКА */
/* ------------------------------------------------------------- */

/* Общая обёртка 3-х кнопок */
/* ------------------------ */

.ss-wrap-files-upload-page .ss-upload-buttons-wrap {
    display: flex;
	flex-flow: row;
    justify-content: flex-start;
    margin-bottom: 15px;
	/* gap: 10px; */
}

/* ОБЁРТКА КНОПОК ЗАГРУЗКИ И СБРОСА ВЫБРАННЫХ ФАЙЛОВ */
/* ------------------------------------------------- */

/* Обёртка кнопок автозагрузки и сброса */
/* ------------------------------------ */

.ss-wrap-files-upload-page .ss-auto-create-file-wrap {
    display: flex;
	flex-flow: row;
    justify-content: flex-start;
    gap: 10px;
}

/* Кнопка автозагрузки css-файлов */

.ss-upload-button {
	
}

/* Анимация иконки в АКТИВНОЙ Кнопке автозагрузки файлов */

/* характер анимации. Бесконечная. linear или ease  */
/* проигрывает анимацию сначала вперед, потом назад */

.ss-upload-button:not([disabled])::before {
	animation: upload_button_ani 1s ease infinite;
	animation-direction: alternate;
}

/* пауза анимации при наведении мыши */

.ss-upload-button:hover:not([disabled])::before {
	animation-play-state: paused;
}

/* унимация иконки в Активной кнопке */

@keyframes upload_button_ani {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.2); }
	100% { transform: scale(1); }
}

/* Конец стилей для анимации иконки в АКТИВНОЙ Кнопке автозагрузки */
/* --------------------------------------------------------------- */

/* Иконка UIcons в кнопке автозагрузки css-файлов */

.ss-upload-button::before {
    content: "\ec28";
}

/* Обёртка кнопки ручного создания пустого файла */
/* --------------------------------------------- */

.ss-wrap-files-upload-page .ss-manually-create-empty-file-wrap {
	display: flex;
    justify-content: flex-end;
    flex-grow: 2;
}

/* Кнопка ручного создания пустого файла */

.ss-manually-create-empty-file {
	border: 2px dashed var(--border-color-manually-file-ss-pre) !important;
    background: var(--bg-manually-file-ss-pre);
    color: var(--color-manually-file-ss-pre);
}

.ss-manually-create-empty-file:hover {
	background-color: var(--bg-manually-file-hover-ss-pre);
}

/* Иконка UIcons в кнопке ручного создания пустого файла */

.ss-manually-create-empty-file::before {
    content: "\e698";
	color: var(--color-icon-manually-file-ss-pre);
}

/* Меняем текст в кнопке ручного создания пустого файла на маленьких экранах */
/* ------------------------------------------------------------------------- */

@media (max-width: 767px) {

.ss-manually-create-empty-file { 
	font-size: 0!important;
}

.ss-manually-create-empty-file:after {
	font-size: 16.25px;
    font-weight: 600;
    content: 'Создать пустой файл';
}

/* Правка размера иконки после удаления оригинального текста в кнопке */

.ss-manually-create-empty-file::before {
	font-size: 16.25px;
}

/* Правка интервала между иконкой и текстом кнопки */

.ss-manually-create-empty-file {
    gap: 5px;
}
}
/* конец настроек для маленьких экранов */
/* ------------------------------------ */

/* ОБЩИЕ НАСТРОЙКИ ВСЕХ КНОПОК ПЛАГИНА */
/* ----------------------------------- */

/* кнопки автозагрузки и сброса css файлов */
.ss-upload-button,
.ss-reset-upload-button,
/* кнопка ручного создания пустого файла */
.ss-manually-create-empty-file,
/* кнопка сохранения изменений в редакторе CodeMirror */
#ss-file-content-save,
/* кнопка создания пустого css-файла */
#ss-manually-create-button,
/* кнопка отмены создания пустого css-файла */
#ss-manually-cancel-button,
/* кнопка сохранения чекбоксов в списке */
.ss-save-options-button {
    border-radius: 10px;
	cursor: pointer;
	border: none;
}

/* -------------- */
/* СРЕДНИЕ КНОПКИ */
/* -------------- */

/* Общие настройки всех средних кнопок */

/* кнопки автозагрузки и сброса css файлов */
.ss-upload-button,
.ss-reset-upload-button,
/* кнопка ручного создания пустого файла */
.ss-manually-create-empty-file,
/* кнопка сохранения изменений в редакторе CodeMirror */
#ss-file-content-save,
/* кнопка создания пустого css-файла */
#ss-manually-create-button,
/* кнопка отмены создания пустого css-файла */
#ss-manually-cancel-button {
	padding: 8px 16px;
    font-size: 1.25em;
    font-weight: 600;
}

/* ОБЩИЕ НАСТРОЙКИ ПОДТВЕРЖДАЮЩИХ СРЕДНИХ КНОПОК */
/* --------------------------------------------- */

/* кнопка автозагрузки css файлов */
.ss-upload-button,
/* кнопка сохранения изменений в редакторе CodeMirror */
#ss-file-content-save,
/* кнопка создания пустого css-файла */
#ss-manually-create-button {
	background-color: var(--bg-button-confirm-medium-ss-pre);
    color: var(--color-button-confirm-medium-ss-pre);
}

/* ПРИ НАВЕДЕНИИ */

/* кнопка автозагрузки css файлов */
.ss-upload-button:hover,
/* кнопка сохранения изменений в редакторе CodeMirror */
#ss-file-content-save:hover,
/* кнопка создания пустого css-файла */
#ss-manually-create-button:hover {
	background-color: var(--bg-button-confirm-medium-hover-ss-pre);
}

/* ОБЩИЕ НАСТРОЙКИ СБРАСЫВАЮЩИХ СРЕДНИХ КНОПОК */
/* ------------------------------------------- */

/* кнопка сброса css файлов */
.ss-reset-upload-button,
/* кнопка отмены создания пустого css-файла */
#ss-manually-cancel-button {
	color: var(--color-button-reset-medium-ss-pre);
    background: var(--bg-button-reset-medium-ss-pre);
    border: 1px solid var(--border-color-button-reset-medium-ss-pre);
}

/* ПРИ НАВЕДЕНИИ */

/* кнопка сброса css файлов */
.ss-reset-upload-button:hover,
/* кнопка отмены создания пустого css-файла */
#ss-manually-cancel-button:hover {
	background-color: var(--bg-button-reset-medium-hover-ss-pre);
}

/* Средние НЕАКТИВНЫЕ ПОДТВЕРЖДАЮЩИЕ кнопки */
/* ---------------------------------------- */

/* кнопка автозагрузки css файлов */
.ss-upload-button[disabled] {
	cursor: default;
    pointer-events: none;
	color: var(--color-button-confirm-medium-not-active-ss-pre);
	background-color: var(--bg-button-confirm-medium-not-active-ss-pre);
}

/* -------------- */
/* БОЛЬШИЕ КНОПКИ */
/* -------------- */

/* КНОПКА СОХРАНЕНИЯ НАСТРОЕК */
/* -------------------------- */

/* Общая обёртка кнопки сохранения главных настроек */

.ss-save-options-wrap {
    text-align: center;
	margin: 20px 0;
}

/* Общие настройки всех больших кнопок */

/* кнопка сохранения чекбоксов в списке */
.ss-save-options-button {
	font-size: 16px;
	padding: 15px 25px;
	font-weight: 600;
	text-transform: uppercase;
}

/* ОБЩИЕ НАСТРОЙКИ ПОДТВЕРЖДАЮЩИХ БОЛЬШИХ КНОПОК */
/* --------------------------------------------- */

/* кнопка сохранения чекбоксов в списке */
.ss-save-options-button {
	color: var(--color-button-confirm-big-ss-pre);
	background-color: var(--bg-button-confirm-big-ss-pre);
}

/* ПРИ НАВЕДЕНИИ */

/* кнопка сохранения чекбоксов в списке */
.ss-save-options-button:hover {
	background-color: var(--bg-button-confirm-big-hover-ss-pre);
}

/* -------------------- */
/* ИНФОРМАЦИОННЫЕ БЛОКИ */
/* -------------------- */

/* Блок «Будет импортировано файлов» */

#ss-select-upload-status {
	margin-bottom: 11px;
}

#ss-select-upload-status p {
	margin: 0;
}

#ss-select-upload-status .count-selected-files {
	font-weight: 600;
}

/* ----------------------- */
/* ОБЛАСТЬ ЗАГРУЗКИ ФАЙЛОВ */
/* ----------------------- */

/* Обёртка загрузки файлов */

.ss-upload-area-with-message-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 220px;
    width: auto;
	margin: 20px 0 30px 0;
}

/* Область загрузки Drag-and-drop */

.ss-upload-area-wrap {
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: var(--bg-upload-area-wrap-ss-pre);
	border: 2px dashed var(--border-color-upload-area-wrap-ss-pre);
	border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1; /* Слой ниже обёртки всего контента */
	transition: all 0.2s ease;
	/* background-image: url("../images/preview-empty.png"); */
}

/* Область загрузки при наведении */

.ss-upload-area-wrap:hover {
	background-color: var(--bg-upload-area-wrap-hover-ss-pre);
    border-color: var(--border-color-upload-area-wrap-hover-ss-pre);
}

/* Область загрузки при наведении с зажатыми файлами */

.ss-upload-area-wrap.dragover {
    background-color: var(--bg-upload-area-wrap-drag-ss-pre);
    border-color: var(--border-color-upload-area-wrap-drag-ss-pre);
}

/* КОНТЕНТ ВНУТРИ ОБЛАСТИ ЗАГРУЗКИ */
/* ------------------------------- */

/* Обёртка всего контента */

.ss-status-upload-out,
.ss-status-upload-in {
	display: flex;
    flex-flow: column;
    gap: 10px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
    pointer-events: none; /* Игнорируем события мыши */
    z-index: 2; /* Слой выше области загрузки */
}

/* Заголовок */

.ss-status-upload-out-title,
.ss-status-upload-in-title {
	color: var(--color-title-upload-area-wrap-ss-pre);
	font-weight: 600;
}

/* .ss-upload-area-with-message-wrap:hover .ss-status-upload-out-title {
	color: #0aa0ff;
} */

/* Подзаголовок */

.ss-status-upload-out-subtitle,
.ss-status-upload-in-subtitle {
	color: var(--color-subtitle-upload-area-wrap-ss-pre);
}

/* Иконка */

.ss-status-upload-out-icon,
.ss-status-upload-in-icon {
	background-image: var(--icon-upload-area-wrap-ss-pre);
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	align-self: center;
	height: 70px;
    width: 70px;
}

@media (max-width: 767px) {

.ss-status-upload-out-icon,
.ss-status-upload-in-icon {
	height: 50px;
    width: 50px;
}
}

/* Иконка при наведении на область «Перетащите сюда файлы» */

.ss-upload-area-with-message-wrap:hover .ss-status-upload-out-icon{
	background-image: var(--icon-upload-area-wrap-hover-ss-pre);
}

/* Оформление поддерживаемых файлов */

.ss-status-upload-out-subtitle .ss-upload-type-file {
	/* color: #ff992a; */
	font-weight: 600;
}

/* Иконка при наведении с зажатыми файлами на область «Отпустите мышку» */

.ss-upload-area-wrap.dragover + .ss-status-upload-out + .ss-status-upload-in .ss-status-upload-in-icon {
	background-image: var(--icon-upload-area-wrap-hover-ss-pre);
}

/* ---------------------------------- */
/* ВСПЛЫВАЮЩИЕ ПРЕДУПРЕЖДЕНИЯ - ALERT */
/* ---------------------------------- */

/* ОБЁРТКА ДЛЯ ОБЁРТКИ ОКНА ALERT - ДЛЯ ТЕНИ */
/* ----------------------------------------- */

/* загрузка css-файлов */
.ss-hidden-upload-alert-wrap,
/* удаление всех файлов */
.ss-hidden-delete-all-alert-wrap,
/* удаление одного файла */
.ss-hidden-delete-single-alert-wrap {
	display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-blackout-wrap-ss-pre);
    justify-content: center;
    align-items: center;
}

/* ОБЁРТКА ОКНА ALERT */
/* ------------------ */

/* загрузка css-файлов */
.ss-hidden-upload-alert,
/* удаление всех файлов */
.ss-hidden-delete-all-alert,
/* удаление одного файла */
.ss-hidden-delete-single-alert {
	display: flex;
    flex-flow: column;
	align-items: center;
    gap: 20px;
    background: var(--bg-window-wrap-ss-pre);
    padding: 40px;
    border-radius: 20px;
    width: 500px;
    max-width: 50%;
    max-height: 60%;
    box-shadow: 0 4px 8px var(--shadow-color-window-wrap-ss-pre);
}

/* ИКОНКА В ОКНЕ */
/* ------------- */

/* загрузка css-файлов */
.ss-upload-alert-icon,
/* удаление одного или всех файлов */
.ss-delete-alert-icon {
	background-image: var(--icon-alert-ss-pre);
	background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
	align-self: center;
	height: 70px;
    width: 70px;
	filter: brightness(var(--icon-color-brightness-alert-ss-pre)) invert(var(--icon-color-invert-alert-ss-pre)) sepia(var(--icon-color-sepia-alert-ss-pre)) saturate(var(--icon-color-saturate-alert-ss-pre)) hue-rotate(var(--icon-color-hue-rotate-alert-ss-pre)) contrast(var(--icon-color-contrast-alert-ss-pre));
	
	/* красный 1 */
	/* filter: brightness(0) invert(43%) sepia(87%) saturate(2952%) hue-rotate(336deg) contrast(92%); */
	/* красный 2 */
	/* filter: invert(36%) sepia(76%) saturate(963%) hue-rotate(325deg) brightness(97%) contrast(100%); */
	/* белый */
	/* filter: brightness(0) invert(100%) sepia(0%) saturate(0%) hue-rotate(90deg) contrast(102%); */
}

/* ЗАГОЛОВОК В ОКНЕ */
/* ---------------- */

/* загрузка css-файлов */
.ss-upload-alert-title,
/* удаление одного или всех файлов */
.ss-delete-alert-title {
	
}

/* загрузка css-файлов */
.ss-upload-alert-title h2,
/* удаление одного или всех файлов */
.ss-delete-alert-title h2 {
	margin: 0;
}

/* ПОДЗАГОЛОВОК В ОКНЕ */
/* ------------------- */

/* загрузка css-файлов */
.ss-upload-alert-subtitle,
/* удаление одного или всех файлов */
.ss-delete-alert-subtitle {
	text-align: center;
	margin-bottom: 10px;
}

/* загрузка css-файлов */
.ss-upload-alert-subtitle p,
/* удаление одного или всех файлов */
.ss-delete-alert-subtitle p {
	margin: 0;
	color: var(--color-subtitle-alert-wrap-ss-pre);
	line-height: 1.5em;
}

/* ОБЁРТКА КНОПОК В ОКНЕ */
/* --------------------- */

/* загрузка css-файлов */
.ss-upload-alert-buttons-wrap,
/* удаление одного или всех файлов */
.ss-delete-alert-buttons-wrap {
	display: flex;
    flex-flow: row;
    gap: 15px;
}

/* ----------------------------- */
/* Общие настройки кнопок в окне */
/* ----------------------------- */

/* Кнопки загрузки и сброса css-файлов */
.ss-no-upload-button,
.ss-yes-upload-button,
/* Кнопки удаления всех файлов и отмены */
.ss-no-delete-all-button,
.ss-yes-delete-all-button,
/* Кнопки удаления одного файла и отмены */
.ss-no-delete-single-button,
.ss-yes-delete-single-button {
	padding: 8px 16px;
    font-size: 1.25em;
    font-weight: 600;
	border-radius: 10px;
	border: none;
	cursor: pointer;
}

/* ПОДТВЕРЖДАЮЩАЯ КНОПКА В ОКНЕ */
/* ---------------------------- */

/* загрузка css-файлов */
.ss-yes-upload-button {
	background-color: var(--bg-button-confirm-medium-ss-pre);
    color: var(--color-button-confirm-medium-ss-pre);
}

/* загрузка css-файлов - при наведении */
.ss-yes-upload-button:hover {
	background-color: var(--bg-button-confirm-medium-hover-ss-pre);
}

/* ОТМЕНЯЮЩАЯ КНОПКА В ОКНЕ */
/* ------------------------ */

/* загрузка css-файлов */
.ss-no-upload-button,
/* удаление всех файлов */
.ss-no-delete-all-button,
/* удаление одного файла */
.ss-no-delete-single-button {
	color: var(--color-button-reset-medium-ss-pre);
    background: var(--bg-button-reset-medium-ss-pre);
    border: 1px solid var(--border-color-button-reset-medium-ss-pre);
}

/* При наведении */

/* загрузка css-файлов */
.ss-no-upload-button:hover,
/* удаление всех файлов */
.ss-no-delete-all-button:hover,
/* удаление одного файла */
.ss-no-delete-single-button:hover {
	background-color: var(--bg-button-reset-medium-hover-ss-pre);
}

/* УДАЛЯЮЩАЯ КНОПКА В ОКНЕ */
/* ----------------------- */

/* удаление всех файлов */
.ss-yes-delete-all-button,
/* удаление одного файла */
.ss-yes-delete-single-button {
	background-color: var(--bg-button-delete-medium-ss-pre);
    color: var(--color-button-delete-medium-ss-pre);
}

/* При наведении */

/* удаление всех файлов */
.ss-yes-delete-all-button:hover,
/* удаление одного файла */
.ss-yes-delete-single-button:hover {
	background-color: var(--bg-button-delete-medium-hover-ss-pre);
}

/* ПРЕЛОАДЕР */
/* --------- */

#ss-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-preloader-ss-pre);
	/* чтобы прелоадер был выше редактора CodeMirror */
	z-index: 100001;
    /* z-index: 3000; */
    display: flex;
    align-items: center;
    justify-content: center;
}

#ss-preloader-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Скругленный фон под анимацией */
}

#ss-preloader-content-mini {
	position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    height: 20px;
    width: 80px;
	/* border: 1px solid; */
}

#ss-preloader img {
    width: 200px;
    height: 200px;
}

/* ---------------------------------- */
/* СООБЩЕНИЕ ОБ ОТСУТСТВИИ ДОПОЛНЕНИЙ */
/* ---------------------------------- */

/* Обёртка блока сообщения */

.ss-no-files-massege-wrap {
	display: flex;
	justify-content: center;
    padding: 20px;
    border-radius: 20px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
	background: var(--bg-no-files-massege-wrap-ss-pre);
	/* border: 1px solid #444444; */
}

/* Блок сообщения */

.ss-no-files-massege {
	
}

/* Сообщение */

.ss-no-files-massege p {
	margin: 0;
	color: var(--color-text-no-files-massege-ss-pre);
}

/* Ссылка в сообщении */

.ss-no-files-massege a {
    font-weight: 700;
    font-size: 1em;
	text-decoration: none;
	color: var(--color-href-no-files-massege-ss-pre);
}

/* Ссылка в сообщении - при наведении */

.ss-no-files-massege a:hover {
	color: var(--color-href-hover-no-files-massege-ss-pre);
}

/* ------------------------------------ */
/* ТАБЛИЦА С ПОДКЛЮЧЕННЫМИ CSS-ФАЙЛАМИ  */
/* ------------------------------------ */

/* ВРЕМЕННО - РАМКИ */
/* ---------------- */

/* .ss-table-connected-files-wrap div,
.ss-file-content-wrap div {
	padding: 5px;
    border-radius: 10px;
    border: 1px solid #c8c8c8;
} */

/* Общие настройки иконок AWESOME */
/* ------------------------------ */

/* Иконка в кнопке закрытия CodeMirror */
.ss-window-close-icon:before,
/* Статус сохранения изменений */
.ss-file-content-save-status p:before,
/* Иконка в кнопке закрытия в окне создания пустого файла */
.ss-manually-create-close-icon:before {
    font-family: "uicons-regular-rounded" !important;
	/* font-family: "Font Awesome 6 Free"; */
	/* font-family: 'icomoon'; */
	font-weight: normal;
    margin: 0px;
    text-align: center;
    line-height: normal;
}

/* Главная обёртка таблицы */

.ss-table-connected-files-wrap {
	display: flex;
    flex-flow: column;
    gap: 20px;
    padding: 20px;
    border-radius: 20px;
    background-color: var(--bg-table-wrap-ss-pre);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* СЕКЦИЯ С ЗАГОЛОВКОМ И БОЛЬШИМИ КНОПКАМИ ТАБЛИЦЫ */
/* ----------------------------------------------- */

/* ЗАГОЛОВОК */
/* --------- */

.ss-title-and-buttons-section {
	display: flex;
    flex-flow: row;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
	padding: 20px !important;
	border-radius: 10px;
    border: 1px solid var(--border-color-all-wrap-ss-pre);
}

/* Обёртка заголовка таблицы и его иконки */
/* Кликабельная - выполняет функцию сворачивания списка */

.ss-table-title-wrap {
	display: flex;
    flex-flow: row;
	align-items: center;
    gap: 10px;
	cursor: pointer;
	/* background: #e4e4e4; */
}

.ss-table-title-wrap h2 {
	margin: 0;
}

/* ФУНКЦИОНАЛ СВОРАЧИВАНИЯ И РАЗВОРАЧИВАНИЯ СПИСКА */
/* ----------------------------------------------- */

/* Обёртка иконки в заголовке таблицы */

#ss-expand-collapse-button {
	display: flex;
    justify-content: center;
    align-items: center;
	padding: 0;
	border: none;
	margin-top: 1px;
	/* cursor: pointer; */
	/* border: 1px solid; */
	/* width: 20px; */
    /* height: 20px; */
}

/* Иконка в заголовке таблицы */

#ss-expand-collapse-button span[class*="fi"] {
	color: var(--icon-color-expand-collapse-button-ss-pre);
    font-size: 22px;
	transition: all 0.2s ease;
    /* line-height: 70%; */
}

#ss-expand-collapse-button span[class*="fi"]:before {
    vertical-align: middle;
}

/* Иконка в заголовке таблицы при наведении на их обёртку */

.ss-table-title-wrap:hover #ss-expand-collapse-button span[class*="fi"] {
	color: var(--icon-color-expand-collapse-button-hover-ss-pre);
	transition: all 0.2s ease;
}

/* #ss-expand-collapse-button img {
	width: auto;
    height: 100%;
} */

/* Сворачивание и разворачивание элемента */
/* убрал, так как вместо max-height решил сделать display */

/* .ss-table-header-and-list-files-wrap {
	Изначально видим полностью
    max-height: none;
    Чтобы не показывать содержимое, когда max-height = 0
	overflow: hidden;
    transition: max-height 0.3s ease-in-out;
} */

/* Сворачиваем элемент */
/* вместо max-height решил сделать display */

.ss-collapsed {
    /* вообще убираем свёрнутый элемент */
	display: none!important;
	/* max-height: 0; */
}

/* СРЕДНИЕ КНОПКИ ТАБЛИЦЫ */
/* ---------------------- */

/* Обёртка средних кнопок таблицы */
	
.ss-table-buttons-wrap {
	display: flex;
    flex-flow: row;
    gap: 10px;
}

/* Смещаем кнопки в столбец и Растягиваем их обёртку на всю ширину */
/* На маленьких экранах */

@media (max-width: 767px) {

.ss-table-buttons-wrap {
    flex-flow: column;
	width: 100%;
}
}
/* конец настроек для маленьких экранов */
/* ------------------------------------ */

/* Общие настройки кнопок таблицы */

.ss-table-buttons-wrap button {
	padding: 8px 16px;
    font-size: 1.25em;
    font-weight: 600;
	border-radius: 10px;
    cursor: pointer;
    border: none;
}

/* Кнопка «Скачать все файлы» */

#ss-download-all-files-button {
	color: var(--color-button-download-all-ss-pre);
	background: var(--bg-button-download-all-ss-pre);
    border: 1px solid var(--border-color-button-download-all-ss-pre);
    /* color: #fff; */
	/* background-color: #0aa0ff; */
}

#ss-download-all-files-button:hover {
	background-color: var(--bg-button-download-all-hover-ss-pre);
}

/* Иконка UIcons в кнопке «Скачать все файлы» */

#ss-download-all-files-button::before {
    content: "\e5a3";
	color: var(--color-icon-button-download-all-ss-pre);
}

/* Кнопка «Удалить все файлы» */

#ss-delete-all-files-button {
	color: var(--color-button-delete-all-ss-pre);
	background: var(--bg-button-delete-all-ss-pre);
    border: 1px solid var(--border-color-button-delete-all-ss-pre);
    /* color: #fff; */
	/* background-color: #f04b43; */
}

#ss-delete-all-files-button:hover {
	background-color: var(--bg-button-delete-all-hover-ss-pre);
}

/* Иконка UIcons в кнопке «Удалить все файлы» */

#ss-delete-all-files-button::before {
    content: "\f026";
	color: var(--color-icon-button-delete-all-ss-pre);
}

/* ГЛАВНАЯ ОБЁРТКА ДЛЯ СЕКЦИЙ «АКТИВНЫЕ ФАЙЛЫ», «НАЗВАНИЯ СТОЛБЦОВ» И «СПИСОК ФАЙЛОВ» */
/* ---------------------------------------------------------------------------------- */

.ss-table-and-list-files-and-active-files-wrap {
	display: flex;
    flex-flow: column;
    gap: 20px;
}

/* ОБЁРТКА ДЛЯ СЕКЦИИ «АКТИВНЫЕ ФАЙЛЫ» */
/* ----------------------------------- */

.ss-active-files-from-all-wrap {
	
}

.ss-active-files-from-all-wrap p {
	margin-bottom: 0;
}

/* Количество АКТИВНЫХ файлов */

.ss-active-files {
	font-weight: 600;
}

/* Количество ВСЕХ установленных файлов */

.ss-all-installed-files {
	font-weight: 600;
}

/* ОБЁРТКА ДЛЯ СЕКЦИЙ «НАЗВАНИЯ СТОЛБЦОВ» И «СПИСОК ФАЙЛОВ» */
/* -------------------------------------------------------- */

.ss-table-header-and-list-files-wrap {
	display: flex;
    flex-flow: column;
    gap: 20px;
	padding: 20px !important;
	border-radius: 10px;
    border: 1px solid var(--border-color-all-wrap-ss-pre);
}

/* на маленьких экранах */
/* -------------------- */

@media (max-width: 782px) {

.ss-table-header-and-list-files-wrap {
	padding: 0px!important;
    border: none;
}
}
/* конец настроек для маленьких экранов */
/* ------------------------------------ */

/* СЕКЦИЯ С НАЗВАНИЯМИ СТОЛБЦОВ ТАБЛИЦЫ */
/* ------------------------------------ */

.ss-table-column-headers-section {
	padding: 10px 20px;
	border-radius: 10px;
	background: var(--bg-table-column-headers-section-ss-pre);
    width: 95%;
	flex-grow: 2;
    box-sizing: border-box;
	/* width: 100%; */
	/* background: #0aa0ff; */
	/* border: 1px solid #c8c8c8; */
}

/* Обёртка столбцов */

.ss-table-column-headers-wrap {
	/* width: 99%; */
}

/* Контейнер столбцов */

.ss-table-column-headers-row {
	display: flex;
    flex-flow: row;
	align-items: flex-start;
	/* gap: 20px; */
    /* justify-content: space-between; */
}

/* Названия столбцов */

.ss-table-column-headers-row p {
	color: var(--color-table-column-headers-section-ss-pre);
	/* color: #777777; */
	font-weight: normal!important;
    /* font-weight: 600 !important; */
}

/* Столбец "Действия" */
/* ---------------- */

#ss-file-settings-column-header {
	margin: 0;
	/* корректировка положения */
	padding-left: 6px;
}

/* СЕКЦИЯ СО СПИСКОМ ВСЕХ ПОДКЛЮЧЕННЫХ CSS-ФАЙЛОВ */
/* ---------------------------------------------- */

.ss-list-all-files-section {
	display: flex;
    flex-flow: column;
    gap: 10px;
}

/* Обёртка Обёртки отдельного файла */

.ss-all-files-wrap {
	display: flex;
	flex-flow: row;
	align-items: center;
	gap: 20px;
}

/* Обёртка отдельного файла */

.ss-single-file-wrap {
	border-radius: 10px;
    /* border: 1px solid #c8c8c8; */
	/* border: 1px solid #EAEAEA; */
	border: 1px solid var(--border-color-single-file-wrap-ss-pre);
	padding: 10px 20px;
	/* всякие выравнивания */
	flex-grow: 2;
    width: 95%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Обёртка отдельного файла при наведении на Обёртку Обёртки отдельного файла */
/* На средних и больших экранах */

@media (min-width: 1200px) {
	
.ss-list-all-files-section .ss-all-files-wrap:hover .ss-single-file-wrap {
	border: 1px solid var(--border-color-single-file-wrap-hover-ss-pre) !important;
}
}

/* Обёртка отдельного файла для НЕЧЁТНЫХ строк в списке на маленьких экранах */

@media (max-width: 1199px) {

.ss-all-files-wrap:nth-child(2n+1) .ss-single-file-wrap {
    border: 1px solid var(--border-color-single-file-wrap-odd-hover-ss-pre);
}
}

/* Обёртка отдельного css-файла на маленьких экранах */
/* ------------------------------------------------- */

@media (max-width: 782px) {

.ss-single-file-wrap {
	width: 85%;
}
}
/* конец настроек для маленьких экранов */
/* ------------------------------------ */

/* Общие настройки чекбоксов */

.ss-all-files-wrap input.ss-check-all-files,
.ss-all-files-wrap input.ss-css-checkbox {
    height: 1.5625rem;
	width: 1.5625rem;
	box-shadow: none;
	margin: 0;
	background: var(--bg-checkbox-ss-pre);
	border: 1px solid var(--border-color-checkbox-ss-pre);
	/* border: 1px solid #8c8f94; */
}

.ss-all-files-wrap input.ss-check-all-files:focus,
.ss-all-files-wrap input.ss-css-checkbox:focus {
    border-color: var(--border-color-checkbox-focus-ss-pre);
}

/* КОРРЕКТИРОВКА ПОЛОЖЕНИЯ ЧЕКБОКСОВ ПРИ РАСКРЫТИИ ОПИСАНИЯ ФАЙЛА */
/* На средних и больших экранах */
/* -------------------------------------------------------------- */

@media (min-width: 1200px) {

/* Чекбоксы напротив файлов при клике на Обёртку Обёртки отдельного файла */
/* То есть, когда раскрываем полное описание файла */
/* Пояснение: при клике на внутренний элемент <div class="ss-single-file-wrap"> родительскому элементу <div class="ss-all-files-wrap"> добавляется id="ss-expand-collapse-wrap" */

#ss-expand-collapse-wrap input.ss-css-checkbox {
    align-self: flex-start;
	/* корректировка положения чекбокса */
	margin-top: 12.5px;
	transform: translateY(0.7px);
}
}
/* КОНЕЦ КОРРЕКТИРОВКИ */
/* ------------------- */

/* Чекбоксы при наведении на Обёртку Обёртки отдельного файла */

.ss-list-all-files-section .ss-all-files-wrap:hover input.ss-css-checkbox {
    background: var(--bg-color-checkbox-hover-ss-pre);
}

input.ss-check-all-files:hover {
    background: var(--bg-color-checkbox-hover-ss-pre);
}

/* Общие настройки Галочки в чекбоксах */

.ss-all-files-wrap input.ss-check-all-files:checked::before,
.ss-all-files-wrap input.ss-css-checkbox:checked::before {
	width: 1.875rem;
	height: 1.875rem;
	margin: -.1875rem 0 0 -0.3rem;
	/* Убираем стандартную галочку */
	content: '';
	/* Пример цвета: #0aa0ff => %230aa0ff */
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230aa0ff' viewBox='0 0 20 20'%3e%3cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	filter: brightness(var(--check-mark-color-brightness-ss-pre)) invert(var(--check-mark-color-invert-ss-pre)) sepia(var(--check-mark-color-sepia-ss-pre)) saturate(var(--check-mark-color-saturate-ss-pre)) hue-rotate(var(--check-mark-color-hue-rotate-ss-pre)) contrast(var(--check-mark-color-contrast-ss-pre));
}

/* Общий чекбокс  */

/* .ss-all-files-wrap input.ss-check-all-files {
	margin: 0;
} */

/* Чекбокс рядом с обёрткой отдельного css-файла */

/* .ss-all-files-wrap input.ss-css-checkbox {
	margin: 0;
} */

/* Стилизация ЧЁТНЫХ обёрток отдельного css-файла */

.ss-list-all-files-section .ss-all-files-wrap:nth-child(2n) .ss-single-file-wrap {
	background-color: var(--bg-single-file-wrap-even-ss-pre);
	border: 1px solid var(--border-color-single-file-wrap-even-ss-pre);
}

/* Контейнер отдельного css-файла */

.ss-file-row {
	display: flex;
    flex-flow: row;
    /* gap: 20px; */
	align-items: center;
	/* align-items: flex-start; */
    /* justify-content: space-between; */
}

/* КОРРЕКТИРОВКА ПОЛОЖЕНИЯ ЭЛЕМЕНТОВ СПИСКА ПРИ РАСКРЫТИИ ОПИСАНИЯ ФАЙЛА */
/* На средних и больших экранах */
/* --------------------------------------------------------------------- */

@media (min-width: 1200px) {

/* Контейнер отдельного css-файла при клике на Обёртку Обёртки отдельного css-файла */
/* То есть, когда раскрываем полное описание файла */
/* Пояснение: при клике на внутренний элемент <div class="ss-single-file-wrap"> родительскому элементу <div class="ss-all-files-wrap"> добавляется id="ss-expand-collapse-wrap" */

#ss-expand-collapse-wrap .ss-single-file-wrap .ss-file-row {
	align-items: flex-start;
}

/* Корректировка названия файла и описания */

#ss-expand-collapse-wrap .ss-file-description-wrap,
#ss-expand-collapse-wrap .ss-file-name-and-icon-wrap {
    margin-top: 3px;
}

/* Корректировка типа файла */

#ss-expand-collapse-wrap .ss-file-type-wrap {
    margin-top: 1px;
}

/* Корректировка иконки в имени файла */

#ss-expand-collapse-wrap .ss-file-name-and-icon span[class*="fi"] {
    align-self: flex-start;
    margin-top: 2.5px;
}
}

@media (max-width: 1199px) {
#ss-expand-collapse-wrap .ss-file-name-and-icon span[class*="fi"] {
    align-self: flex-start;
    margin-top: 2.7px;
}
}
/* КОНЕЦ КОРРЕКТИРОВКИ */
/* ------------------- */

/* ПОЛЕ - ИМЯ ФАЙЛА И ИКОНКА */
/* ------------------------- */

/* Обёртка с именем файла и иконкой */

.ss-file-name-and-icon-wrap {
	display: flex;
    flex-flow: row;
	width: 30%;
    box-sizing: border-box;
    align-items: flex-start;
}

/* Контейнер с именем css-файла и иконкой */

.ss-file-name-and-icon {
	display: flex;
	gap: 10px;
    flex-flow: row;
    align-items: center;
}

/* Общие настройки ИКОНКИ в имени файла */

.ss-file-name-and-icon span[class*="fi"] {
	color: var(--icon-color-file-name-ss-pre);
	line-height: 1;
	font-size: 1.25em;
}

.ss-file-name-and-icon span[class*="fi"]:before {
	vertical-align: middle;
}

/* Иконка БЕСПЛАТНОГО файла */

.ss-file-name-and-icon span:before {
	content: var(--icon-file-name-free-ss-pre);
}

/* Иконка ПРОДВИНУТОГО файла */

.ss-single-file-wrap[data-file-name*="css-advanced"] .ss-file-name-and-icon span:before,
.ss-single-file-wrap[data-file-name*="js-advanced"] .ss-file-name-and-icon span:before {
	content: var(--icon-file-name-advanced-ss-pre);
}

/* Иконка ПРЕМИУМ файла */

.ss-single-file-wrap[data-file-name*="css-premium"] .ss-file-name-and-icon span:before,
.ss-single-file-wrap[data-file-name*="js-premium"] .ss-file-name-and-icon span:before {
	content: var(--icon-file-name-premium-ss-pre);
}

/* Иконка ФИКС файла */

.ss-single-file-wrap[data-file-name*="css-fix"] .ss-file-name-and-icon span:before,
.ss-single-file-wrap[data-file-name*="js-fix"] .ss-file-name-and-icon span:before {
	content: var(--icon-file-name-fix-ss-pre);
}

/* Цвет Иконки ПРОДВИНУТОГО, ПРЕМИУМ и ФИКС файла для Типа «CSS» */

.ss-single-file-wrap[data-file-name*="css-advanced"] .ss-file-name-and-icon span:before,
.ss-single-file-wrap[data-file-name*="css-premium"] .ss-file-name-and-icon span:before,
.ss-single-file-wrap[data-file-name*="css-fix"] .ss-file-name-and-icon span:before {
	color: var(--icon-color-css-file-advanced-premium-fix-ss-pre);
}

/* Цвет Иконки ПРОДВИНУТОГО, ПРЕМИУМ и ФИКС файла для Типа «JS» */

.ss-single-file-wrap[data-file-name*="js-advanced"] .ss-file-name-and-icon span:before,
.ss-single-file-wrap[data-file-name*="js-premium"] .ss-file-name-and-icon span:before,
.ss-single-file-wrap[data-file-name*="js-fix"] .ss-file-name-and-icon span:before {
	color: var(--icon-color-js-file-advanced-premium-fix-ss-pre);
}

/* Человеческое название файла (в теге <p></p>) */

#ss-human-name-css {
	margin: 0;
	font-weight: 600;
	padding-right: 15px;
	/* перенос слов */
	hyphens: auto;
}

/* ПОЛЕ - ТИП ПОДКЛЮЧЕННОГО ФАЙЛА */
/* ------------------------------ */

.ss-file-type-wrap {
	display: flex;
    flex-flow: row;
	width: 7%;
    box-sizing: border-box;
    align-items: flex-start;
	/* overflow: hidden; */
    /* justify-content: flex-start; */
}

.ss-file-type-wrap p {
	margin: 0;
	/* корректировка положения */
	padding-left: 2px;
}

/* Тип «CSS» */

.ss-single-file-wrap[data-file-name*=".css"] .ss-file-type-wrap p {
    color: var(--color-css-file-ss-pre);
    background: var(--bg-css-file-ss-pre);
	padding: 2px 6px;
	font-weight: 600;
    border-radius: 5px;
}

/* Тип «JS» */

.ss-single-file-wrap[data-file-name*=".js"] .ss-file-type-wrap p {
    color: var(--color-js-file-ss-pre);
    background: var(--bg-js-file-ss-pre);
	padding: 2px 6px;
	font-weight: 600;
    border-radius: 5px;
	/* корректировка положения */
	margin-left: 5px;
}

/* Отменяем корректировку положения типа «JS» на маленьких экранах */

@media (max-width: 1199px) {

.ss-single-file-wrap[data-file-name*=".js"] .ss-file-type-wrap p {
	margin-left: 0px;
}
}

/* Тип «CSS» для ЧЁТНЫХ строк в списке */

.ss-all-files-wrap:nth-child(2n) .ss-single-file-wrap[data-file-name*=".css"] .ss-file-type-wrap p {
    background: var(--bg-css-file-even-ss-pre);
}

/* Тип «JS» для ЧЁТНЫХ строк в списке */

.ss-all-files-wrap:nth-child(2n) .ss-single-file-wrap[data-file-name*=".js"] .ss-file-type-wrap p {
    background: var(--bg-js-file-even-ss-pre);
}

/* ПОЛЕ - АВТОР CSS-ФАЙЛА И ЕГО ФОТО */
/* --------------------------------- */

/* Обёртка АВТОРА css-файла */

.ss-author-name-and-image-wrap {
	display: flex;
    flex-flow: row;
	width: 25%;
    box-sizing: border-box;
    align-items: flex-start;
}

/* Контейнер с именем Автора и его фото */

.ss-author-name-and-image {
	display: flex;
	gap: 10px;
    flex-flow: row;
    align-items: center;
}

/* Фото Автора (тег <img>) */

#ss-human-author-image {
    width: 30px;
    height: 30px;
	border-radius: 100%;
    border: none;
	/* border: 1px solid; */
}

/* Фото Автора */

/* .ss-author-name-and-image span[class*="fi"] {
	color: #ff8000;
	line-height: 1;
}

.ss-author-name-and-image span[class*="fi"]:before {
	vertical-align: middle;
} */

/* Человеческое имя Автора (в теге <p></p>) */

#ss-author-human-name {
	margin: 0;
	padding-right: 15px;
}

/* ПОЛЕ - ОПИСАНИЕ CSS-ФАЙЛА */
/* ------------------------- */

/* Обёртка описания css-файла */

.ss-file-description-wrap {
	display: flex;
    align-items: flex-start;
    justify-content: flex-start;
	width: 30%;
    /* width: 35%; */
    box-sizing: border-box;
}

/* ПОЛЕ - ДЕЙСТВИЯ С ФАЙЛАМИ */
/* ------------------------- */

/* Обёртка всех кнопок-иконок */
/*--------------------------- */

.ss-file-settings {
	display: flex;
    flex-flow: row;
	gap: 5px;
	width: 10%;
	box-sizing: border-box;
}

/* Общие настройки блоков кнопок с иконками */

/* блок «Редактировать» */
.ss-file-edit,
/* блок «Скачать» */
.ss-file-download,
/* блок «Удалить» */
.ss-file-delete {
	display: flex;
	/* gap: 7px; */
	flex-flow: row;
    align-items: center;
	justify-content: center;
	width: 20px;
    height: 20px;
	padding: 5px;
	cursor: pointer;
	background: none;
    /* background: #ffffff; */
    border-radius: 5px;
    /* border: 1px solid #c8c8c8; */
	transition: all 0.2s ease;
}

/* Блок иконки «Редактировать» */

/* .ss-file-edit {
	border: 1px solid #36b100;
} */

/* Блок иконки «Скачать» */

/* .ss-file-download {
	border: 1px solid #0aa0ff;
} */

/* Блок иконки «Удалить» */

/* .ss-file-delete {
	border: 1px solid #ff490a;
} */

/* Общие настроки иконок в поле - Действие с файлами */

/* блок «Редактировать» */
.ss-file-edit span[class*="fi"],
/* блок «Скачать» */
.ss-file-download span[class*="fi"],
/* блок «Удалить» */
.ss-file-delete span[class*="fi"] {
	font-size: 1.25em;
	/* font-size: 14px; */
}

/* Иконка «Редактировать» */

.ss-file-edit span[class*="fi"] {
	color: var(--icon-color-file-edit-ss-pre);
}

/* Иконка «Скачать» */

.ss-file-download span[class*="fi"] {
	color: var(--icon-color-file-download-ss-pre);
}

/* Иконка «Удалить» */

.ss-file-delete span[class*="fi"] {
	color: var(--icon-color-file-delete-ss-pre);
}

/* Настройки блоков кнопок с иконками - при Наведении */

/* блок «Редактировать» */
.ss-file-edit:hover {
	/* border: 1px solid #36b100; */
	background: var(--icon-color-file-edit-hover-ss-pre);
}

/* блок «Скачать» */
.ss-file-download:hover {
	/* border: 1px solid #0aa0ff; */
	background: var(--icon-color-file-download-hover-ss-pre);
}

/* блок «Удалить» */
.ss-file-delete:hover {
	/* border: 1px solid #ff490a; */
	background: var(--icon-color-file-delete-hover-ss-pre);
}

/* блок «Редактировать» для ЧЁТНЫХ строк в списке */
.ss-all-files-wrap:nth-child(2n) .ss-file-edit:hover {
	background: var(--icon-color-file-edit-even-hover-ss-pre);
}

/* блок «Скачать» для ЧЁТНЫХ строк в списке */
.ss-all-files-wrap:nth-child(2n) .ss-file-download:hover {
	background: var(--icon-color-file-download-even-hover-ss-pre);
}

/* блок «Удалить» для ЧЁТНЫХ строк в списке */
.ss-all-files-wrap:nth-child(2n) .ss-file-delete:hover {
	background: var(--icon-color-file-delete-even-hover-ss-pre);
}

/* ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ ПРИ НАВЕДЕНИИ НА КНОПКИ-ИКОНКИ */
/* ---------------------------------------------------- */

/* Общие настройки всплывающей подсказки */

.ss-file-edit:hover::before,
.ss-file-download:hover::before,
.ss-file-delete:hover::before {
	display: ruby-text;
    width: fit-content;
    padding: 7px 10px;
    background: var(--bg-tip-file-edit-ss-pre);
    color: var(--color-tip-file-edit-ss-pre);
    font-weight: 500;
    text-align: center;
    border-radius: 10px;
    position: absolute;
    z-index: 1;
    cursor: default;
    pointer-events: none;
    opacity: 1;
	box-shadow: 0 4px 8px var(--shadow-color-tip-file-edit-ss-pre);
	/* border: 2px solid #eeeeee; */
}

/* блок «Редактировать» */
.ss-file-edit:hover::before {
	content: var(--content-file-edit-ss-pre);
	transform: translate(0px, -40px);
	/* transform: translate(-65px, -25px); */
}

/* блок «Скачать» */
.ss-file-download:hover::before {
	content: var(--content-file-download-ss-pre);
	transform: translate(0px, -40px);
	/* transform: translate(-45px, -25px); */
}

/* блок «Удалить» */
.ss-file-delete:hover::before {
	content: var(--content-file-delete-ss-pre);
	transform: translate(0px, -40px);
	/* transform: translate(-45px, -25px); */
}

/* ФУНКЦИОНАЛ СКРЫТИЯ ДЛИННЫХ НАЗВАНИЙ В ПОЛЯХ ТАБЛИЦЫ */
/* --------------------------------------------------- */

/* Общие настройки обёрток */
/* Нужно для корректного скрытия описания */

/* описание css-файла */
.ss-file-description-wrap,
/* автор css-файла */
.ss-author-name-and-image-wrap,
.ss-author-name-and-image,
/* имя css-файла */
.ss-file-name-and-icon-wrap,
.ss-file-name-and-icon {
	overflow: hidden;
}

/* Общие настройки скрытия длинного текста */

/* описание css-файла */
#ss-human-description-css,
/* автор css-файла */
#ss-author-human-name,
/* имя css-файла */
#ss-human-name-css {
	text-wrap: nowrap;
    text-overflow: ellipsis;
	white-space: nowrap;
    /* white-space: -moz-pre-space; */
    overflow: hidden;
}

/* Общие настройки раскрытия длинного текста при наведении на всю строку */

/* описание css-файла */
.ss-single-file-wrap:hover #ss-human-description-css,
/* автор css-файла */
.ss-single-file-wrap:hover #ss-author-human-name,
/* имя css-файла */
.ss-single-file-wrap:hover #ss-human-name-css {
    /* text-wrap: inherit; */
    /* white-space: normal; */
}

/* Обёртка отдельного css-файла при наведении */

.ss-single-file-wrap:hover {
	cursor: pointer;
}

/* Раскрытие длинного текста при наведении на Обёртку отдельного css-файла */
/* Работает через ss-upload.js - клик по элементу ".ss-single-file-wrap" */

.ss-expand-collapse-content {
    text-wrap: inherit!important;
    white-space: normal!important;
}

/* Человеческое описание файла (в теге <p></p>) */

#ss-human-description-css {
	margin: 0;
	padding-right: 15px;
	/* перенос слов */
	hyphens: auto;
}

/* ------------------------ */
/* ОКНО С СОДЕРЖИМЫМ-ФАЙЛА  */
/* ------------------------ */

/* Обёртка всего диалогового окна */

.ss-file-content-wrap {
	display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	cursor: default;
    background-color: var(--bg-blackout-wrap-ss-pre);
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
	/* чтобы редактор CodeMirror в полноэкранном режиме перекрывал админку WP */
	z-index: 100000;
    /* z-index: 1000; */
	/* visibility: hidden; */
    /* opacity: 0; */
}

/* Диалоговое окно */

.ss-file-content-wrap .ss-file-content-window {
	background: var(--bg-window-wrap-ss-pre);
	padding: 20px;
    border-radius: 20px;
    width: 900px;
    max-width: 70%;
    max-height: 80%;
    position: relative;
    box-shadow: 0 4px 8px var(--shadow-color-window-wrap-ss-pre);
	overflow-y: auto;
	/* убираем вертикальную полосу прокрутки */
	/* overflow-y: hidden; */
}

/* Обёртка кнопки закрытия окна CodeMirror */

.ss-window-close-wrap {
	display: flex;
    justify-content: flex-end;
    align-items: center;
	margin-bottom: 20px;
}

/* Блок иконки закрытия окна CodeMirror (span) */

.ss-window-close-icon {
	display: flex;
    align-items: center;
	/* padding: 5px; */
    /* border-radius: 5px; */
    /* border: 1px solid #c8c8c8; */
}

/* Иконка в кнопке закрытия окна CodeMirror - AWESOME */

.ss-window-close-icon:before {
    content: "\e4d0";
	font-size: 16px;
    font-weight: 700;
	/* content: '\f00d'; */
    /* font-size: 15px; */
    color: var(--close-icon-color-window-ss-pre);
	cursor: pointer;
    /* border: 3px solid; */
    /* border-radius: 100%; */
	width: 17px;
    height: 17px;
	/* padding: 3px; */
    transform: rotateZ(90deg);
	transition: all 0.3s ease;
}

.ss-window-close-icon:hover:before,
.ss-window-close-icon:focus:before {
    color: var(--close-icon-color-window-hover-ss-pre);
    text-decoration: none;
    cursor: pointer;
	transform: rotateZ(0deg);
}

/* Обёртка заголовка, кнопки, статуса и содержимого файла */

.ss-window-content-wrap {
	display: flex;
    flex-flow: column;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color-window-content-wrap-ss-pre);
}

/* Обёртка заголовка и кнопки в диалоговом окне */

.ss-window-title-and-button-wrap {
	display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Обёртка заголовка и имени текущего css-файла в окне */

.ss-window-title-wrap {
	display: flex;
    flex-flow: column;
    gap: 10px;
    align-items: flex-start;
}

.ss-window-title-wrap h2 {
	margin: 0;
}

/* Исходное имя открытого текущего файла */

#ss-name-current-file {
    padding: 5px 16px;
    font-size: 14px;
    color: var(--color-name-current-file-ss-pre);
    border-radius: 10px;
    border: 1px solid var(--border-color-window-content-wrap-ss-pre);
}

/* Обёртка кнопки в окне */

.ss-window-button-wrap {
	
}

/* Кнопка «Сохранить изменения» */

#ss-file-content-save {
	
}

/* Статус сохранения изменений содержимого файла */

.ss-file-content-save-status {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px 20px;
    /* width: fit-content; */
	background: var(--bg-file-content-save-status-ss-pre);
	border-radius: 10px;
    border: 1px solid var(--border-color-file-content-save-status-ss-pre);
}

.ss-file-content-save-status p {
	display: flex;
	flex-flow: row;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
	color: var(--color-file-content-save-status-ss-pre);
    font-weight: 600;
	margin: 0;
}

/* Иконка в Статусе сохранения изменений - AWESOME */

.ss-file-content-save-status p:before {
    content: var(--icon-file-content-save-status-ss-pre);
    color: var(--icon-color-file-content-save-status-ss-pre);
    font-size: 15px;
}

/* Содержимое css-файла */

.ss-file-content {
	
}

/* ------------------- */
/* РЕДАКТОР CodeMirror */
/* ------------------- */

/* Обёртка редактора */

.ss-file-content-wrap .CodeMirror {
	padding: 0;
	height: 400px;
	font-size: 14px;
	/* на всякий случай */
	border: none;
	/* height: 100%; */
}

/* Рамка вокруг редактора */

.ss-file-content-wrap .CodeMirror-wrap {
	border: 1px solid var(--border-color-window-content-wrap-ss-pre);
	border-radius: 10px;
}

.ss-file-content-wrap .CodeMirror div {
	padding: 0;
    border: inherit;
    border-radius: 0;
	/* border: none; */
}

/* Курсор */

.ss-file-content-wrap .CodeMirror div.CodeMirror-cursors {
	border-left: 1px solid var(--color-cursor-current-file-ss-pre) !important;
	padding: 0 !important;
}

/* Абзац кода */

.ss-file-content-wrap .CodeMirror pre.CodeMirror-line,
.ss-file-content-wrap .CodeMirror pre.CodeMirror-line-like {
    padding: 0 20px;
}

/* Вертикальный блок со всеми номерами строк (больше приоритет) */
/* Надо ли задавать ширину? */

.ss-file-content-wrap .CodeMirror .CodeMirror-gutters .CodeMirror-linenumbers {
	border: none;
	padding-right: 10px;
	/* background: aqua; */
}

/* Ещё один вертикальный блок со всеми номерами строк (меньше приоритет) */
/* Не надо задавать ширину */

.ss-file-content-wrap .CodeMirror .CodeMirror-gutters {
    background-color: var(--bg-line-number-current-file-ss-pre);
	border-right: 1px solid var(--bg-line-number-current-file-ss-pre) !important;
	/* border-right: 2px solid #ff5b39 !important; */
}

/* Блок отдельного номера строки */
/* Задаём левый отступ? */

/* .CodeMirror-gutter-wrapper {
    margin-left: 5px;
} */

/* Отдельный номер строки */
/* Не нужно задавать фон */

.ss-file-content-wrap .CodeMirror .CodeMirror-linenumber {
	color: var(--color-line-number-current-file-ss-pre);
	padding: 0 15px 0 5px !important;
	text-align: right;
	min-width: 30px;
}

/* Вся прокручиваемая область кода */

.ss-file-content-wrap .CodeMirror .CodeMirror-scroll {
	padding-top: 20px;
	/* Скрываем область с нижней полосой прокрутки (по умолчанию было 50px)*/
	padding-bottom: 0px !important;
	/* убираем рамки в всех внутренних элементах */
	border: none !important;
}

/* Ширина контента */
/* Иначе строки занимают не всю ширину редактора */

.ss-file-content-wrap .CodeMirror .CodeMirror-sizer {
	/* по умолчанию */
    /* border-right: 50px solid transparent !important; */
	border-right: 0px solid transparent !important;
}

/* Дополнение CodeMirror - Полосы прокрутки */
/* ---------------------------------------- */

/* Горизонтальной полосы нет, потому что в редакторе включен перенос текста */

.ss-file-content-wrap .CodeMirror-overlayscroll-vertical {
    width: 8px;
	background: var(--bg-scroll-empty-current-file-ss-pre);
	border: none !important;
    border-radius: 0px !important;
}

.ss-file-content-wrap .CodeMirror-overlayscroll-vertical div {
    background: var(--bg-scroll-current-file-ss-pre);
	/* background: #0aa0ff; */
    border-radius: 5px !important;
}

/* Дополнение CodeMirror - Color Picker */
/* ------------------------------------ */

/* Сам Color Picker */

.codemirror-colorpicker {
	border: none!important;
	z-index: 100001!important;
	box-shadow: 0 0 5px rgba(0, 0, 0, .05), 0 5px 20px rgba(0, 0, 0, .1)!important;
}

/* -------------------------------- */
/* ОКНО СОЗДАНИЯ ПУСТОГО CSS-ФАЙЛА  */
/* -------------------------------- */

/* ВРЕМЕННО */
/* -------- */

.ss-manually-create-wrap div,
.ss-manually-create-wrap p {
	/* padding: 5px; */
    /* border-radius: 10px; */
    /* border: 1px solid #c8c8c8; */
}

/* Обёртка всего диалогового окна */

.ss-manually-create-wrap {
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-blackout-wrap-ss-pre);
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100000;
}

/* Окно с содержимым */

.ss-manually-create-window {
	background: var(--bg-window-wrap-ss-pre);
    padding: 20px;
    border-radius: 20px;
    width: 510px;
    max-width: 80%;
    max-height: 80%;
    position: relative;
    box-shadow: 0 4px 8px var(--shadow-color-window-wrap-ss-pre);
    overflow-y: auto;
}

/* Настройки текста в окне по умолчанию */

.ss-manually-create-window {
	font-size: 13px;
    color: var(--color-text-p-ss-pre);
}

/* Общие настройки описания полей */

.ss-manually-create-form p {
	margin: 0;
    padding: 0px;
	color: var(--color-text-p-ss-pre);
	font-size: 1.25em;
}

/* ОБЁРТКА КНОПКИ ЗАКРЫТИЯ ОКНА */
/* ---------------------------- */

.ss-manually-create-close-wrap {
	display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
}

/* Блок иконки закрытия окна создания пустого файла (span) */

.ss-manually-create-close-icon {
	display: flex;
    align-items: center;
    /* border: 1px solid #c8c8c8; */
}

/* Иконка в кнопке закрытия создания пустого файла - AWESOME */

.ss-manually-create-close-icon:before {
    content: "\e4d0";
	font-size: 16px;
    font-weight: 700;
	/* content: '\f00d'; */
    /* font-size: 15px; */
    color: var(--close-icon-color-window-ss-pre);
	cursor: pointer;
	width: 17px;
    height: 17px;
    transform: rotateZ(90deg);
	transition: all 0.3s ease;
}

.ss-manually-create-close-icon:hover:before,
.ss-manually-create-close-icon:focus:before {
    color: var(--close-icon-color-window-hover-ss-pre);
    text-decoration: none;
    cursor: pointer;
	transform: rotateZ(0deg);
}

/* ОБЩАЯ ОБЁРТКА ЗАГОЛОВКА ОКНА И ФОРМЫ С ПОЛЯМИ */
/* --------------------------------------------- */

.ss-manually-title-and-form-wrap {
	padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color-all-wrap-ss-pre);
}

/* ОБЁРТКА ЗАГОЛОВКА ОКНА */
/* ---------------------- */

.ss-manually-create-title {
	margin-bottom: 20px;
}

/* Заголовок окна */

.ss-manually-create-title h2 {
	margin: 0;
    font-size: 1.8em;
    color: var(--color-h2-ss-pre);
    font-weight: 700;
	line-height: normal;
}

/* ОБЁРТКА ФОРМЫ С ПОЛЯМИ */
/* ---------------------- */

.ss-manually-create-form {
	display: flex;
    flex-flow: column;
    gap: 10px;
}

/* Общие настроек всех обёрток полей */

.ss-manually-create-form div[class*="ss-manually-input-css"] {
	display: flex;
    flex-flow: column;
    gap: 10px;
	margin-bottom: 5px;
}

/* Обёртка поля «Имя css-файла» */

.ss-manually-input-css-name-wrap {
	
}

/* Обёртка поля «Название стиля в таблице» */

.ss-manually-input-css-title-wrap {
	
}

/* Обёртка поля «Имя автора» */

.ss-manually-input-css-author-name-wrap {
	
}

/* ПОЛЕ «ПУТЬ ДО АВАТАРА АВТОРА» */
/* ----------------------------- */

/* Главная обёртка поля «Путь до аватара автора» */

.ss-manually-input-css-author-image-wrap {
	
}

/* Обёртка поля и кнопки выбора изображения */

.ss-manually-url-and-button-wrap {
	display: flex;
    flex-flow: row;
    gap: 10px;
	/* align-items: center; */
    /* box-sizing: border-box; */
}

/* Кнопка выбора изображения - Аватара */

.ss-open-media-upload-image-button {
	display: flex;
    align-items: center;
	align-self: center;
    gap: 5px;
    padding: 8px 15px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	background-color: var(--bg-upload-image-button-ss-pre);
    /* background-color: #ff9738; */
    color: var(--color-upload-image-button-ss-pre);
	transition: all 0.2s ease;
    outline: none;
}

.ss-open-media-upload-image-button:hover {
    background-color: var(--bg-upload-image-button-hover-ss-pre);
	/* background-color: #f57d0f; */
}

/* Иконка в кнопке выбора изображения - Аватара */

.ss-open-media-upload-image-button:before {
    font-family: "uicons-regular-rounded" !important;
	/* font-family: "Font Awesome 6 Free"; */
    /* font-family: 'icomoon'; */
    content: var(--icon-upload-image-button-ss-pre);
    font-size: 1.1em;
    color: var(--icon-color-upload-image-button-ss-pre);
    font-weight: normal;
    margin: 0;
    padding: 0;
}

/* Обёртка поля «Описание стиля в таблице» */

.ss-manually-input-css-description-wrap {
	
}

/* ОБЁРТКА КНОПОК В ФОРМЕ */
/* ---------------------- */

.ss-manually-create-buttons-wrap {
	display: flex;
    flex-flow: row;
	gap: 10px;
	margin-top: 20px;
}

/* Кнопка «Отменить» */

#ss-manually-cancel-button {
	flex-grow: 1;
}

/* Кнопка «Создать» */

#ss-manually-create-button {
	flex-grow: 1;
}

/* ПОЛЯ ФОРМЫ - INPUT */
/* ------------------ */

/* Общие настройки полей */

.ss-manually-create-form input {
	font-size: 1.25em;
	color: var(--color-form-input-ss-pre);
    background-color: var(--bg-form-input-ss-pre);
	border-radius: 10px;
    /* border-radius: 4px; */
    border: 1px solid var(--border-color-form-input-ss-pre);
    padding: 5px 15px;
    line-height: 2;
    min-height: 30px;
    box-shadow: 0 0 0 transparent;
    width: 100%;
	/* width: auto; */
}

.ss-manually-create-form input:focus {
	border: 1px solid var(--border-color-form-input-ss-pre);
    box-shadow: none;
    outline: none;
}

/* Текст подсказки внутри поля */

.ss-manually-create-form input::placeholder {
	color: var(--color-form-placeholder-ss-pre);
}

/* Стилизация автозаполнения поля */

.ss-manually-create-form input:-webkit-autofill,
.ss-manually-create-form input:-webkit-autofill:hover, 
.ss-manually-create-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--color-form-input-ss-pre);
    -webkit-box-shadow: 0 0 0px 40rem var(--bg-form-input-ss-pre) inset;
	font-size: 1.25em;
}

/* ПОДСКАЗКА ДЛЯ ПОСТРАНИЧНОЙ НАВИГАЦИИ */
/* ------------------------------------ */

/* Убираем Подсказку, внутри Обёртки "Названия столбцов" и "Список файлов" нет страниц */

.ss-table-header-and-list-files-wrap:not(:has(.ss-pagination-button)) .ss-tip-for-page-navigation {
	display: none;
}

/* Обёртка подсказки */

.ss-tip-for-page-navigation {
	margin-top: 5px;
	order: 2;
}

.ss-tip-for-page-navigation p {
	margin: 0;
	/* для иконки */
	display: flex;
    gap: 10px;
    flex-flow: row;
	flex-wrap: wrap;
	align-items: center;
	line-height: 1.5em;
}

/* Иконка в подсказке для постраничной навигации */

.ss-tip-for-page-navigation p::before {
	content: var(--icon-tip-page-navigation-ss-pre);
	font-size: 1.2em;
	color: var(--icon-color-tip-page-navigation-ss-pre);
	/* line-height: 1.2em; */
    /* line-height: normal; */
    font-weight: normal;
    vertical-align: middle;
    font-family: "uicons-regular-rounded" !important;
}

/* ПОСТРАНИЧНАЯ НАВИГАЦИЯ ФАЙЛОВ В СПИСКЕ */
/* -------------------------------------- */

/* Обёртка страниц */

.ss-pagination-wrap {
	display: flex;
    flex-flow: row;
	gap: 10px;
	justify-content: flex-start;
	order: 1;
}

/* Общие настройки для страниц */

.ss-pagination-button {
    width: 40px;
    height: 40px;
	color: var(--color-button-page-navigation-ss-pre);
    background: var(--bg-button-page-navigation-ss-pre);
	font-size: 1.25em;
	border-radius: 10px;
    border: 1px solid var(--border-color-button-page-navigation-ss-pre);
	cursor: pointer;
	transition: all 0.2s ease;
	outline: none;
    appearance: none;
}

/* Страница при наведении */

.ss-pagination-button:hover {
	color: var(--color-button-page-navigation-hover-ss-pre);
	background: var(--bg-button-page-navigation-hover-ss-pre);
    border: 1px solid var(--border-color-button-page-navigation-hover-ss-pre);
}

/* Активная страница */

.ss-pagination-button.active {
    color: var(--color-button-page-navigation-active-ss-pre);
	background: var(--bg-button-page-navigation-active-ss-pre);
    border: 1px solid var(--border-color-button-page-navigation-active-ss-pre);
}

/* Стилизация ВАЛИДНОСТИ обязательного поля */
/* ---------------------------------------- */

/* Обязательное поле по умолчанию */
/* :empty - для стилизации пустого поля */

#ss-css-name:required {
	border: 1px solid var(--color-form-input-required-ss-pre);
    outline: 1px solid var(--color-form-input-required-ss-pre);
	/* border: 1px solid #ff142a; */
	/* outline: 1px solid #ff142a; */
	/* Маркер внутри поля */
	background-size: 0.7em 0.7em;
	background-repeat: no-repeat;
	background-position: top right;
	background-image: linear-gradient(45deg, transparent, transparent 50%, var(--color-form-input-required-ss-pre) 50%, var(--color-form-input-required-ss-pre) 100%);
	/* background-image: linear-gradient(45deg, transparent, transparent 50%, #ff142a 50%, #ff142a 100%); */
}

/* Маркер внутри правильно заполненного поля */

#ss-css-name.correct {
	background-image: linear-gradient(45deg, transparent, transparent 50%, var(--color-form-input-correct-ss-pre) 50%, var(--color-form-input-correct-ss-pre) 100%);
}

/* Общие настройки для правильно и НЕправильно заполненного поля */
/* Актуально для альтернативного варианта иконки  */

/* #ss-css-name.correct,
#ss-css-name.not-correct {
	padding-right: 2.25rem;
	background-repeat: no-repeat;
	background-size: 1.125rem 1.125rem;
	background-position: right 0.5625rem center;
} */

/* Правильно заполненное поле */

#ss-css-name.correct {
	border: 1px solid var(--color-form-input-correct-ss-pre);
	outline: 1px solid var(--color-form-input-correct-ss-pre);
	/* альтернативный вариант иконки */
	/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2319a038' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); */
}

/* НЕправильно заполненное поле */

#ss-css-name.not-correct {
	border: 1px solid var(--color-form-input-not-correct-ss-pre);
	outline: 1px solid var(--color-form-input-not-correct-ss-pre);
	/* Маркер внутри НЕправильно заполненного поля */
	background-image: linear-gradient(45deg, transparent, transparent 50%, var(--color-form-input-not-correct-ss-pre) 50%, var(--color-form-input-not-correct-ss-pre) 100%);
	/* альтернативный вариант иконки */
	/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff142a'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff142a' stroke='none'/%3e%3c/svg%3e"); */
}

/* МОЯ ИКОНКА ВАЛИДНОСТИ от UIcons */
/* ------------------------------- */
/* отключил пока */

/* Общие настройки Иконки валидности */

/* #ss-css-name.correct + span::before,
#ss-css-name.not-correct + span::before {
    font-family: "uicons-regular-rounded"!important;
    font-size: 20px;
    margin-left: 5px;
    vertical-align: middle;
} */

/* Иконка для правильно заполненного поля */

/* #ss-css-name.correct + span::before {
    content: "\e360";
	color: #19a038;
} */

/* Иконка для НЕправильно заполненного поля */

/* #ss-css-name.not-correct + span::before {
    content: "\e61e";
	color: #ff142a;
} */

/* -------------------- */
/* ПЛАШКИ С ИНФОРМАЦИЕЙ */
/* -------------------- */

/* ОБЩИЕ НАСТРОЙКИ БЛОКОВ С СООБЩЕНИЯМИ */

/* Такой css-файл существует */
.ss-manually-input-css-name-exists,
/* Имя должно быть на латинице */
.ss-manually-input-css-name-wrong {
	display: flex;
    align-items: center;
	gap: 10px;
    border-radius: 10px;
    padding: 13px 20px;
	width: fit-content;
}

/* Текст сообщения */

/* Такой css-файл существует */
.ss-manually-input-css-name-exists p,
/* Имя должно быть на латинице */
.ss-manually-input-css-name-wrong p {
	margin: 0;
	font-size: 1.25em;
	font-weight: 500;
	line-height: normal;
}

/* Иконка сообщения */

/* Такой css-файл существует */
.ss-manually-input-css-name-exists:before,
/* Имя должно быть на латинице */
.ss-manually-input-css-name-wrong:before {
	font-family: "uicons-regular-rounded" !important;
	/* font-family: "Font Awesome 6 Free"; */
    /* font-family: 'icomoon'; */
    font-size: 1.3em;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

/* --------------- */
/* БЛОК «ВНИМАНИЕ» */
/* --------------- */

/* БЛОК СООБЩЕНИЯ «Внимание» */

/* Такой css-файл существует */
.ss-manually-input-css-name-exists,
/* Имя должно быть на латинице */
.ss-manually-input-css-name-wrong {
	background: var(--bg-attention-block-ss-pre);
    border: 1px solid var(--border-color-attention-block-ss-pre);
	flex-flow: row !important;
	line-height: 1.5em;
}

/* ТЕКСТ СООБЩЕНИЯ «Внимание» */

/* Такой css-файл существует */
.ss-manually-input-css-name-exists p,
/* Имя должно быть на латинице */
.ss-manually-input-css-name-wrong p {
	color: var(--color-attention-block-ss-pre);
}

/* ИКОНКА СООБЩЕНИЯ «Внимание» */

/* Такой css-файл существует */
.ss-manually-input-css-name-exists:before,
/* Имя должно быть на латинице */
.ss-manually-input-css-name-wrong:before {
    content: var(--icon-attention-block-ss-pre);
	color: var(--icon-color-attention-block-ss-pre);
	margin-top: 2px;
}

/* ВСПЛЫВАЮЩЕЕ ПРЕДУПРЕЖДЕНИЕ - ТАКОЕ ИМЯ CSS-ФАЙЛА СУЩЕСТВУЕТ */
/* ----------------------------------------------------------- */

/* Обёртка */

.ss-manually-input-css-name-exists {
	
}

/* Сообщение */

.ss-manually-input-css-name-exists p {
	
}

/* ВСПЛЫВАЮЩЕЕ ПРЕДУПРЕЖДЕНИЕ - ИМЯ ДОЛЖНО БЫТЬ НА ЛАТИНИЦЕ И ОКАНЧИВАТЬСЯ НА .CSS */
/* ------------------------------------------------------------------------------- */

/* Обёртка */

.ss-manually-input-css-name-wrong {
	
}

/* Сообщение */

.ss-manually-input-css-name-wrong p {
	
}

/* Акцент текста в форме */
/* --------------------- */

.ss-manually-highlight {
	font-weight: 600;
}

/* Общие настройки дизайна Типа файлов в форме - CSS и JS */

.ss-manually-file-type-css,
.ss-manually-file-type-js {
    font-weight: 600;
    border-radius: 5px;
    display: inline-block;
	padding: 2px 6px 4px 6px;
}

/* Дизайн типа файла CSS в форме */

.ss-manually-file-type-css {
	color: var(--color-css-file-ss-pre);
    background: var(--bg-css-file-ss-pre);
}

/* Дизайн типа файла JS в форме */

.ss-manually-file-type-js {
	color: var(--color-js-file-ss-pre);
    background: var(--bg-js-file-ss-pre);
}

/* ------------------------------------- */
/* ПОП-АП С ВИДЕОУРОКОМ ПО ПРЕОБРАЖАТОРУ */
/* ------------------------------------- */

/* Обёртка всего диалогового окна */

.ss-video-lesson-content-wrap {
	display: flex;
    position: fixed;
	z-index: 100000;
    /* z-index: 1000; */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-blackout-wrap-ss-pre);
    justify-content: center;
    align-items: center;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Диалоговое окно */

.ss-video-lesson-content-window {
	background: var(--bg-window-wrap-ss-pre);
	padding: 20px;
    border-radius: 20px;
    width: 900px;
    max-width: 70%;
    max-height: 80%;
    position: relative;
    box-shadow: 0 4px 8px var(--shadow-color-window-wrap-ss-pre);
	/* убираем полосы прокрутки */
	/* overflow-y: hidden; */
	/* overflow-y: auto; */
}

/* Обёртка плеера */

.ss-video-player-wrap {
	padding: 56.25% 0 0 0;
	position:relative;
}

/* УВЕДОМЛЕНИЕ ПОСЛЕ СОХРАНЕНИЯ НАСТРОЕК */
/* ------------------------------------- */

.ss-notification {
    color: var(--color-notification-ss-pre);
	font-size: 16px;
    bottom: 20px;
    right: 20px;
	position: fixed;
    padding: 10px 20px;
    border-radius: 10px;
	opacity: 0;
    z-index: 10000;
	transform: translateY(20px);
    box-shadow: 0 4px 6px var(--bg-shadow-notification-ss-pre);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ss-notification-success {
	background-color: var(--bg-notification-success-ss-pre);
    /* background-color: #4caf50; */
}

.ss-notification-error {
    background-color: var(--bg-notification-error-ss-pre);
}

.ss-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------ */
/* ДИЗАЙН ПОЛОСЫ ПРОКРУТКИ  */
/* ------------------------ */

/* ПОЛОСЫ ПРОКРУТКИ В АДМИНКЕ ВОРДПРЕССА */
/* ------------------------------------- */

/* Работает и в Firefox, и в остальных браузерах */

:root {
	scrollbar-color: var(--bg-scroll-ss-pre) var(--bg-scroll-empty-ss-pre) !important;
	scrollbar-width: thin !important;
}

/* Полоса прокрутки в окне создания пустого css-файла */

body .ss-manually-create-window {
	scrollbar-color: var(--bg-scroll-ss-pre) var(--bg-scroll-empty-ss-pre) !important;
	scrollbar-width: thin !important;
}

/* Полоса прокрутки в окне с содержанием css-файла */

.ss-file-content-wrap .ss-file-content-window {
	scrollbar-color: var(--bg-scroll-ss-pre) var(--bg-scroll-empty-ss-pre) !important;
	scrollbar-width: thin !important;
}

/* ВРЕМЕННО */
/* -------- */

/* Новогодняя шапка в заголовке страницы */

/* .ss-page-title h1 img {
	width: 40px;
    height: auto;
    position: relative;
    right: 36px;
    top: 31px;
    transform: rotateZ(11deg);
    filter: drop-shadow(0px 1px 0px #888888);
} */

/* Смещаем заголовок */

/* .ss-page-title h1 span.color-accent-2 {
	transform: translate(0px, 15px) rotateZ(8deg);
} */

/* --------------------------------- */
/* ОБЁРТКА ПОДВАЛА СТРАНИЦЫ НАСТРОЕК */
/* --------------------------------- */

.ss-footer-wrap {
	text-align: center;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
    border-radius: 20px;
	/* background: #ffffff; */
}

/* Общие настройки текста в подвале */

.ss-footer-wrap p {
	color: var(--color-footer-ss-pre);
	font-size: 1.25em;
	line-height: 1.5em;
}

/* Заголовок плагина в подвале (тег <p>) */

.ss-footer-wrap .ss-plugin-title {
	font-weight: 700;
}

/* Версия Преображатора в подвале */

.ss-footer-wrap span.ss-version {
	font-weight: normal;
}

/* Блок ссылок в подвале (тег <p>) */

.ss-footer-links {
	display: flex;
    gap: 20px;
	flex-wrap: wrap;
    justify-content: center;
}

/* Ссылки в подвале */

.ss-footer-wrap a {
	color: var(--color-href-footer-ss-pre);
	font-size: inherit;
	/* для иконки */
	display: flex;
    gap: 10px;
    flex-flow: row;
	flex-wrap: wrap;
	align-items: center;
	line-height: 1.5em;
}

.ss-footer-wrap a:hover {
	color: var(--color-href-footer-hover-ss-pre);
}

/* Общие настройки иконок для ссылок в подвале */

.ss-footer-wrap .ss-king-kit-link::before,
.ss-footer-wrap .ss-space-kit-link::before {
	font-size: 1.2em;
	color: var(--icon-color-footer-hover-ss-pre);
    font-weight: normal;
    vertical-align: middle;
    font-family: "uicons-regular-rounded" !important;
}

/* Иконка в ссылке «Царский набор рубрик» (тег <a>) */

.ss-footer-wrap .ss-king-kit-link::before {
	content: "\e4d3";
}

/* Иконка в ссылке «Космический набор материалов» (тег <a>) */

.ss-footer-wrap .ss-space-kit-link::before {
	content: "\ed22";
}