@charset "utf8";
/*Дизайн от Qutrum*/

@font-face {
    font-family: 'Electronica';
    src: url('kernel/fonts/Electronica-Normal.woff2') format('woff2'),
        url('kernel/fonts/Electronica-Normal.woff') format('woff'),
        url('kernel/fonts/Electronica-Normal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

a { 
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
	color: #000099;
  }
a:focus{
	outline: none;
	/*text-shadow: 0px 3px 12px #f55, 0px -5px 15px #f55;*/
}
a:hover {
	color: #00dd99;
	/*text-shadow: 0px 3px 12px #5f5, 0px -5px 15px #5f5;*/
	/*text-shadow: #ff9 1px 1px 0, #ff9 -1px -1px 0, 
                 #ff9 -1px 1px 0, #ff9 1px -1px 0;*/
	/*text-shadow: -2px 1px 8px #5f5, 0px -5px 10px #cfc;*/
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    background: #555555;
	background-image: url('/img/03.jpg');
    background-size: cover;         /* Растягивает изображение, чтобы покрыть весь элемент */
    background-repeat: no-repeat;   /* Избегает повторения изображения */
    background-position: center;    /* Центрирует изображение */
    background-attachment: fixed;
    overflow-x: hidden;
}

.top_str {
    background: linear-gradient(to bottom, #000000, #555555);
    border: 1px solid #000000;        /* Бордюр 2 пикселя, цвет #22cc22 */
    width: 90%;                       /* Ширина 90% окна браузера */
    min-width: 400px;
	height: 50px;                     /* Высота 50 пикселей */
    position: fixed;                  /* Фиксированная позиция при прокрутке */
    top: 0;                           /* Закрепляем элемент вверху окна */
    left: 5%;                         /* Центрируем по горизонтали */
    /*text-align: center;               /* Текст по центру */
    line-height: 50px;                /* Вертикальное выравнивание текста */
	z-index: 2;
}

/* Стиль для горизонтально вытянутого блока */
.rectangular-block {
    min-width: 100px;                     /* Ширина блока (можно изменить) */
	max-width: 350px;
    height: 35px;                     /* Высота блока */
    background: linear-gradient(#222, #888888); /* Серый градиент */
    border-radius: 0px 0px 0px 0px;              /* Закругленные углы */
    border: 0px solid #999999;
	font-size: 20px;                  /* Размер шрифта */
	/*font-family: 'Electro', sans-serif;*/
    color: #aaaaaa;                     /* Цвет текста */
    display: flex;                    /* Для центровки текста по вертикали и горизонтали */
    justify-content: center;          /* Центровка текста по горизонтали */
    align-items: center;              /* Центровка текста по вертикали */
    margin: 7px;                     /* Отступ вокруг блока */
	/*box-shadow: 0 0 5px 1px #88aa88; /* Свечение зеленого цвета */
	text-shadow: 0px 0px 3px #88aa88, 0px 0px 3px #88aa88;
	/*font-family: 'Electronica';*/
}

/* Цвет ссылок внутри rectangular-block */
.rectangular-block a {
    color: #ddd;  /* Цвет текста ссылок */
    text-decoration: none;  /* Убираем подчеркивание */
}

/* Изменение цвета ссылок при наведении */
.rectangular-block a:hover {
    color: #eee;  /* Цвет текста ссылок при наведении */
    text-shadow: 0px 0px 3px #fff, 0px 0px 3px #fff;
}

/*****************************************************************************************/
/* Основной стиль боковой панели */
.sidebar {
    width: 300px;
    background-color: #111;
    color: #ecf0f1;
    position: fixed; /* Фиксируем блок */
    top: 50px;
    height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;  /* Добавляем прокрутку по горизонтали */
    padding: 1px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Стили для списка элементов меню */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
	width: 300px;
	overflow-x: hidden;  /* Добавляем прокрутку по горизонтали */
}

/* Стиль для элементов меню */
.nav-item {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    text-align: left;
    width: 300px;
    padding: 7px 0px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    align-items: center;
}

/* Фон для всей ширины при наведении */
.nav-item:hover,
.nav-item.active {
    background-color: #efefef;
    color: #000;
}

/* Устанавливаем одинаковые размеры иконок для всех уровней меню */
.nav-item::before,
.sub-nav-item::before {
    content: '';
    display: inline-block;
    width: 16px; /* Фиксированная ширина */
    height: 16px; /* Фиксированная высота */
    margin-right: 10px; /* Отступ между иконкой и текстом */
    background-size: contain; /* Иконка сохраняет пропорции */
    background-repeat: no-repeat;
}

/* Иконки для главного меню */
.nav-item.has-submenu::before {
    background-image: url('img/cat_m.png'); /* Иконка по умолчанию */
}

.nav-item.active.has-submenu::before {
    background-image: url('img/cat_m_c.png'); /* Иконка при активном состоянии */
}

/* Иконки для подменю */
.sub-nav-item::before {
    background-image: url('img/file_2.png'); /* Иконка подменю */
}

/* Изменение иконки при наведении */
.sub-nav-item:hover::before {
    background-image: url('img/file_1.png'); /* Иконка при наведении */
}

/* Подменю скрыто по умолчанию */
.sub-nav {
    list-style: none;
    padding: 0;
    display: none;
    margin-left: 20px;
    height: 0; /* Устанавливаем высоту равной 0 */
    overflow: hidden; /* Скрываем всё, что выходит за пределы */
    transition: height 0.3s ease-in-out; /* Плавное раскрытие */
}

/* Подменю отображается, если родитель активен */
.nav-item.active + .sub-nav {
    display: block;
    height: auto; /* Убираем ограничение по высоте */
}

/* Элементы подменю */
.sub-nav-item {
    padding: 5px 10px; /* Отступ внутри элемента */
    color: #ddd;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    font-size: 12px; /* Уменьшаем шрифт для подменю */
    margin-left: 15px; /* Отступ подменю */
}

/* При наведении и выборе элемента подменю */
.sub-nav-item:hover,
.sub-nav-item.active {
    background-color: #efefef;
    color: #000;
    font-weight: bold;
}

/* Стили для вложенных подменю с увеличением отступа */
.sub-nav .sub-nav {
    padding-left: 10px; /* Добавляем отступ для вложенного подменю */
}
/***********************************************************************/
.body_str {
    width: 90%;
    min-height: 93.5vh;
    margin: 53px auto 0; /* Отступ сверху для учёта фиксированного верхнего блока */
    background-color: #111;
    border: 0px solid #ccc;
    display: flex;
    position: relative; /* Для контроля дочерних элементов */
}

.content {
    flex: 1; /* Занимает всё оставшееся вертикальное пространство */
    padding: 2px;
    /*overflow-y: auto;*/
    background-color: #ffffff;
	min-height: 100%;
}

.main-content {
	width: 90%;
	min-height: 100%;
	margin-left: 302px;
}

/*************************************************************/
.footer_str {
    min-width: 90%;
    min-height: 50px; /* Минимальная высота футера */
    max-height: 70px; /* Максимальная высота футера */
    background-color: #222;
    border: 1px solid #ccc;
    border-top: 1px solid #000;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
    bottom: 50px;
}

.footer-stats {
    display: flex;
    justify-content: space-between; /* Пространство между блоками */
    width: 100%;
}
/**************************************************************************/