@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: Verdana, sans-serif; color: #FFFFFF;
}

/* Шапка */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 1000;
}

.header-col {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

header .col1 { width: 125px; background: url(../images/index_01.jpg); }
header .col2 { width: 387px; background: url(../images/index_02.jpg); }
header .col3 { flex: 1; background: url(../images/index_03.jpg); background-repeat:repeat-x; padding-bottom:47px; }
header .col4 { width: 125px; background: url(../images/index_04.jpg); }

/* Подвал */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    color: #0F0;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 1000;
}

.footer-col {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

footer .col1 { width: 125px; background: url(../images/index_33.jpg); }
footer .col2 { width: 387px; background: url(../images/index_34.jpg); }
footer .col3 { flex: 1; background: url(../images/index_35.jpg); background-repeat:repeat-x; padding-bottom:13px; }
footer .col4 { width: 125px; background: url(../images/index_36.jpg); }



/* Основная обертка */
.main {
    display: flex;
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
}

/* Сайдбар */
.sidebar {
	background: url(../images/index_05_06.jpg); background-repeat:repeat-y;
    width: 250px;
    overflow-y: auto;
}

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

a:hover {
  color: #FFF; /* Цвет при наведении */
  text-decoration:underline;
}

a, a:visited {
    color: inherit;
}

.menu {
  display: grid;
  grid-template-columns: 50px 200px; /* ширина колонок */
  grid-template-rows: repeat(9, 40px); /* 9 строк по 40px */
}

.icon {
  background-size: cover;
  background-position: center;
  background-image:url(../images/index_13.jpg);
  /* border: 1px solid #ccc; /* для наглядности, можно убрать */
}

.text {
  display: flex;
  align-items: center;
  padding-left: 5px;
  /* border: 1px solid #ccc; /* для наглядности */
  box-sizing: border-box;
  font-weight:bold;
}


/* Контент */
.content {
    flex: 1;
    padding: 20px;
    overflow-y: auto; /* появляется только если контента больше, чем область */
    scrollbar-gutter: stable both-edges;
    background: url(../images/index_08.jpg); background-size:cover;
	scroll-behavior: smooth;
	scrollbar-color: darkgreen green;
}

ul {
  padding-left: 33px;
}

.tooltip-container {
  position: relative; /* Для позиционирования всплывающей картинки */
  display: inline-block; /* Чтобы текст и картинка были рядом */
}

.tooltip-image {
  display: none; /* Картинка скрыта по умолчанию */
  position: absolute; /* Абсолютное позиционирование для размещения поверх текста */
  top: 100%; /* Размещаем картинку под текстом */
  left: 0; /* Выравниваем по левому краю контейнера */
  z-index: 1; /* Убедитесь, что картинка поверх другого содержимого */
}

.tooltip-container:hover .tooltip-image {
  display: block; /* Показываем картинку при наведении */
}

.counter {
	float:right;
	margin-top: 40px;
	text-align: right;
	font-size: 9px;
	line-height: 1.6;
	background: #33900B;
	border-radius: 10px;
	padding: 15px 25px;
	display: inline-block;
	box-shadow: 0 0 6px rgba(0,0,0,0.1);
}

.counter b {
	color:  #fff;
}

.iconc {
	font-size: 13px;
	margin-right: 6px;
}