/* від Квазара */
/* типі стрелок:
/* &#9013   */
/* &#9660  9650 */
/* на Андроиде не отображаются ((
/* &#11167  */
/* &#11193  */
/* &#11163  */

/*
@media (max-width: 768px) {
    #sidebar {
        display: none;
    }
    .menu-toggle {
        display: block;
        cursor: pointer;
    }
}
*/
/*
html, body {
  overflow: hidden; /* Повністю вимикає скролбар 
} */

html {
    scroll-padding-top: 60px; /* урахування висоти фіксованого меню - уменьшил из-за уменьшения МЕНЮ до 60px */
}

body {
    -webkit-text-size-adjust: none; /* Забороняє масштабування тексту */
    text-size-adjust: none;         /* Забороняє це саме в інших браузерах */
    background-image: url('../images/site_fon.jpg'); /* Шлях до вашого фонового зображення */
/*    background-size: cover; /* Зображення буде масштабуватись, щоб покрити весь екран */
/*    background-position: center;  Центрування зображення */
    background-position: left; /* Центрування зображення */
    background-attachment: fixed; /* Робить фон нерухомим */
/*    background-repeat: no-repeat; /* Виключає повторення зображення */
    overflow-x: hidden; /* Приховує горизонтальну прокрутку */
    font-family: Times, Georgia, serif !important;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
}

.highlight4 {
        background-color: #56698f; /* Колір фону для першого рядка: main колір сайту */
 	color: white;
	display: inline-block;
    	max-width: fit-content; /* Встановлює ширину під перший рядок */
    	white-space: normal; /* Дозволяє переноси */
        padding: 5px 12px; /* Внутрішні відступи верх-низ; перед-після тексту */
/*        display: inline-block; /* Дозволяє застосовувати padding */
/*        border-radius: 5px; /* Закруглені кути для краси */
/*    display: inline-block; /* Щоб задати ширину лише першому рядку */
/*    padding: 5px; /* Внутрішній відступ */
/*	display: inline-block; /* Автоматична ширина під текст */
/*	display: inline-flex; /* Гнучка адаптація під текст */
/*    align-items: flex-start; /* Текст рівняється зверху */
/*    display: inline-block; /* Робить контейнер таким, що підлаштовується під текст */
/*    width: max-content; /* Обмежує ширину тільки до тексту */
/*    max-width: max-content; /* Автоматична ширина під перший рядок */

}



/* НЕ застосовуємо жорстке успадкування для всіх елементів */
* {
    font-family: unset; /* НЕ блокує локальні font face */
}

/* Дозволяємо працювати <font face="..."> */
font[face] {
    font-family: attr(face);
}


/* Стилі для класу "local-text-arial" */
.local-text-arial {
    font-family: Arial, sans-serif;     
/*    font-size: 16px; /* Можна змінити за потреби 
    color: #333;  Колір тексту 
    line-height: 1.5;  Міжрядковий інтервал */
}


#inner {
    padding: 0;  /* Прибираємо відступи */
}





/* Для контейнера списку, щоб вирівняти елементи по центру */
/* Для зафіксованого блоку */
/* Для блоку sidebar */
#sidebar {
    position: fixed;  /* Фіксуємо блок */
    top: 0;  /* Відступ від верхнього краю */
    left: 0;  /* Відступ від лівого краю */
    width: 100%;  /* Займає всю ширину */
/*    height: 100%;   Займає всю висоту */
    padding: 0;  /* Прибираємо відступи */
/*    margin: 0;   Прибираємо відступи */
    margin-bottom: 50px;   /* зазор между блоками */
    border-bottom: 2px solid #365377;  /* темна смужка по спмому низу області МЕНЮ (шоб не зливалось з контентом!)   */
    z-index: 100;  /* Встановлюємо рівень шару, щоб він не перекривався іншими елементами */
}


#LED_panel {
    position: fixed;  /* Фіксуємо блок */
    top: 1;  /* Відступ від верхнього краю */
    left: 0;  /* Відступ від лівого краю */
    width: 100%;  /* Займає всю ширину */
/*    height: 100%;   Займає всю висоту */
    padding: 0;  /* Прибираємо відступи */
/*    margin: 0;   Прибираємо відступи */
    margin-bottom: 50px;   /* зазор между блоками */
/*    border-bottom: 2px solid #365377;  /* темна смужка по спмому низу області МЕНЮ (шоб не зливалось з контентом!) */  
    z-index: 101;  /* Встановлюємо рівень шару, щоб він не перекривався іншими елементами */
}



/* Для блоку sidebar 
#footer {
    bottom: 0;  /* Відступ від нижнього краю 
    left: 0;  /* Відступ від лівого краю 
    width: 100%;  /* Займає всю ширину */
/*    height: 100%;   Займає всю висоту
    padding: 0;  /* Прибираємо відступи 
/*    margin: 0;   Прибираємо відступи
    margin-bottom: 0px;   /* зазор между блоками */
/*    z-index: 100;  /* Встановлюємо рівень шару, щоб він не перекривався іншими елементами 
}
*/


#footer {
    position: relative; /* Відносне позиціонування (буде під контентом)     */
/*    position: absolute; /* Відносне позиціонування (буде під контентом)   */
    left: 0vw;  /* Відступ від лівого краю                                    */
    bottom: 0; /* Опускає вниз                                              */
    width: 100vw; /* Ширина дорівнює ширині вікна браузера (viewport width) */
/*    width: 100%; /* Заповнює всю ширину                                     */
    background-color: #56698f; /* Колір фону (БАЗОВИЙ), щоб відповідати стилю         */
    padding: 5px 0; /* Внутрішні відступи для гарного вигляду               */
/*    text-align: center;  Вирівнює текст по центру                         */
}


.custom-spacing2 {
}





/* формат для ul-il по всему документу */
.ulli ul {
    list-style-type: none; /* Вимикаємо маркери */
    padding-left: 0; /* Вимикаємо відступи зліва */
    margin: 0; /* Вимикаємо відступи */
    text-align: justify; /* Вирівнює елементи по центру */
}
.ulli ul li {
    display: inline-block; /* Відображення елементів в одному рядку */
    margin-right: 5px; /* Відступи між елементами */
    vertical-align: top; /* Вирівнювання по верхньому краю */
}





/* Для списку, щоб прибрати кружечки */
#sidebar ul {
    list-style-type: none; /* Вимикаємо маркери */
    padding-left: 0; /* Вимикаємо відступи зліва */
    margin: 0; /* Вимикаємо відступи */
    text-align: center; /* Вирівнює елементи по центру */
}


/* Для елементів списку, щоб вони йшли в одному рядку */
#sidebar ul li {
    display: inline-block; /* Відображення елементів в одному рядку */
    margin-right: 5px; /* Відступи між елементами */
}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}



/*
.GoogleMap, .slideshow-container {
  width: 100%; /* Контент блоку завжди займає всю ширину контейнера 
  height: auto;   
}
*/







/* для 3х елементів <li>:    */
/* спочатку всі 3 вряд з 33% ширини; */
/* потім при width < за 1100px, 1-2 - по 50% на першій лінії, останній - 100% н адругій; */
/* нарешті при width < за 800px, всі по 100% - кожен на своїй лінії! */
nav.ulli33 {
  width: 100%; /* Займає всю ширину зовнішнього контейнера */
}

nav.ulli33 ul {
  display: flex;
  flex-wrap: wrap; /* Дозволяє переносити блоки на новий ряд */
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

nav.ulli33 ul li {
  flex: 1 1 calc(33.33% - 20px); /* Кожен <li> займає третину ширини контейнера мінус відступи */
  box-sizing: border-box;
  padding: 10px;
}

nav.ulli33 ul li > div {
  width: 100%; /* Контент завжди займає всю ширину <li> */
  box-sizing: border-box;
}
/* опис прив'язки до контейнеру <li> контентних картинок шо обгорнуті у <div> з класом class="img-container" */
nav.ulli33 ul li div.img-container {
  width: 100%;  /* Контейнер для картинки займає всю ширину блоку <li> */
  position: relative;
  overflow: hidden; /* Запобігає виходу картинки за межі */
}

nav.ulli33 ul li div.img-container img {
  width: 100%; /* Картинка масштабується по ширині контейнера */
  height: auto; /* Висота автоматично підлаштовується, щоб зберегти пропорції */
  display: block; /* Забирає можливі зайві відступи навколо картинки */
  object-fit: cover; /* Опціонально: заповнює контейнер без спотворення (якщо потрібен ефект обрізки) */
}
/* блок переналаштування елементів по строках */
@media (max-width: 1100px) {     /* 1100px & <<  */
  nav.ulli33 ul li {
    flex: 1 1 calc(50% - 20px); /* По 50% ширини контейнера для перших двох <li> */
  }
  nav.ulli33 ul li:nth-child(3) {
    flex: 1 1 100%; /* Третій <li> займає 100% ширини */
  }
}

@media (max-width: 800px) {     /* 800px & <<  */
  nav.ulli33 ul li {
    flex: 1 1 100%; /* Усі <li> займають 100% ширини зовнішнього контейнера */
  }
}



/* для 4х елементів <li>: */
/* спочатку всі 4 в ряд з 25% ширини; */
/* потім при width < 1100px — два рядки по 50%; */
/* нарешті при width < 800px — кожен по 100%, кожен на своєму рядку */
nav.ulli25 {
  width: 100%; /* Займає всю ширину зовнішнього контейнера */
}

nav.ulli25 ul {
  display: flex;
  flex-wrap: wrap; /* Дозволяє переносити блоки на новий ряд */
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

nav.ulli25 ul li {
  flex: 1 1 calc(25% - 20px); /* Кожен <li> займає 25% ширини контейнера мінус відступи */
  box-sizing: border-box;
  padding: 10px;
}

nav.ulli25 ul li > div {
  width: 100%; /* Контент завжди займає всю ширину <li> */
  box-sizing: border-box;
}

/* опис прив'язки до контейнеру <li> контентних картинок шо обгорнуті у <div> з класом class="img-container" */
nav.ulli25 ul li div.img-container {
  width: 100%;  /* Контейнер для картинки займає всю ширину блоку <li> */
  position: relative;
  overflow: hidden; /* Запобігає виходу картинки за межі */
}

nav.ulli25 ul li div.img-container img {
  width: 100%; /* Картинка масштабується по ширині контейнера */
  height: auto; /* Висота автоматично підлаштовується, щоб зберегти пропорції */
  display: block; /* Забирає можливі зайві відступи навколо картинки */
  object-fit: cover; /* Опціонально: заповнює контейнер без спотворення (якщо потрібен ефект обрізки) */
}
/* блок переналаштування елементів по строках */
@media (max-width: 1100px) {     /* 1100px & << */
  nav.ulli25 ul li {
    flex: 1 1 calc(50% - 20px); /* По 50% ширини контейнера для всіх <li> */
  }
}

@media (max-width: 800px) {     /* 800px & << */
  nav.ulli25 ul li {
    flex: 1 1 100%; /* Усі <li> займають 100% ширини зовнішнього контейнера */
  }
}




/* для 4х елементів <li>: */
/* спочатку — два рядки по 2 елементи, кожен займає 50% ширини; */
/* при width < 1100px — усі по 100% на окремих рядках */
nav.ulli50 {
  width: 100%; /* Займає всю ширину зовнішнього контейнера */
}

nav.ulli50 ul {
  display: flex;
  flex-wrap: wrap; /* Дозволяє переносити блоки на новий ряд */
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

nav.ulli50 ul li {
  flex: 1 1 calc(50% - 20px); /* Кожен <li> займає 50% ширини контейнера мінус відступи */
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 2px;
}

nav.ulli50 ul li > div {
  width: 100%; /* Контент завжди займає всю ширину <li> */
  box-sizing: border-box;
}

/* опис прив'язки до контейнера <li> контентних картинок, обгорнутих у <div> з класом class="img-container" */
nav.ulli50 ul li div.img-container {
  width: 100%;  /* Контейнер для картинки займає всю ширину блоку <li> */
  position: relative;
  overflow: hidden; /* Запобігає виходу картинки за межі */
}

nav.ulli50 ul li div.img-container img {
  width: 100%; /* Картинка масштабується по ширині контейнера */
  height: auto; /* Висота автоматично підлаштовується, щоб зберегти пропорції */
  display: block; /* Забирає можливі зайві відступи навколо картинки */
  object-fit: cover; /* Опціонально: заповнює контейнер без спотворення */
}

/* блок переналаштування елементів на 100% ширини */
@media (max-width: 1100px) {     /* 1100px & << */
  nav.ulli50 ul li {
    flex: 1 1 100%; /* Усі <li> займають 100% ширини зовнішнього контейнера */
  }
}











/* ==== Custom Tooltip Styles ==== */

/* Стилі для гіперпосилання з іконкою */
.icon-link {
    position: relative;
    display: inline-block;
    text-decoration-color: #5E42A6; /* Колір підкреслення */
    text-decoration: none; /* Вимикає підкреслення для цього посилання */
    border: none; /* Перевіряємо на випадок, якщо є бордер */
}

/* Стилі для картинки в гіперпосиланні */
.icon-link img {
    text-decoration-color: #5E42A6; /* Колір підкреслення */
    text-decoration: none; /* Забирає підкреслення з картинки всередині посилання */
    border: none; /* Перевіряємо на випадок, якщо є бордер */
}



/* Стилі для підказки */
.tooltip1 {
    visibility: hidden;
    background-color: #333;
    color: #fff;
/*    text-align: left; /* Текст починається з лівого краю */
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 100;
/*    bottom: 100%; /* Позиція над іконкою */
/*    left: 0; /* Початок тексту з лівого краю іконки */
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap; /* Запобігає переносу тексту */
    display: inline-block; /* Текст виводиться в одному рядку */
/*    top: 50%;  Центрує по вертикалі відносно іконки */
    transform: translateY(-50%); /* Коригує зміщення по вертикалі */
/*    left: 100%; /* Розміщує підказку справа від іконки */
}

span[data-bg="type_lefttop"] {
    text-align: left; /* Текст починається з лівого краю */
    left: 0; /* Початок тексту з лівого краю іконки */
    bottom: 40%; /* Позиція над іконкою */
}

span[data-bg="type_righttop"] {
    text-align: right; /* Текст починається з правого краю */
    right: 0; /* Початок тексту з правого краю іконки */
    bottom: 40%; /* Позиція над іконкою */
}

span[data-bg="type_rightcenter"] {
    top: 50%; /* Центрує по вертикалі відносно іконки */
    text-align: left; /* Текст починається з лівого краю */
    left: 100%; /* Розміщує підказку справа від іконки */
}

span[data-bg="type_right2"] {
    bottom:60%; /* Позиція над іконкою */
    text-align: left; /* Текст починається з лівого краю */
    left: 0; /* Розміщує підказку зліва від іконки */
}

span[data-bg="type_right3"] {
    text-align: right; /* Текст починається з правого краю */
    right: 100%; /* Початок тексту з правого краю іконки */
    bottom: 40%; /* Позиція над іконкою */
}

span[data-bg="type_right4"] {
    text-align: right; /* Текст починається з правого краю */
    right: 10px; /* Початок тексту з правого краю іконки + 140px */
    top: 15%; /* Позиція згори */
}



a:hover .tooltip1 {
    visibility: visible;
    opacity: 1;
}



/* Показ підказки при наведенні на іконку */
.icon-link:hover .tooltip {
    visibility: visible;
    opacity: 1;
}




/* Стилі для самої іконки (картинки) */
.icon2 {
    border-radius: 8px; /* Скруглення кутів картинки */
    text-decoration-color: #5E42A6; /* Колір підкреслення */
    text-decoration: none; /* Вимикає підкреслення для цього посилання */
}





.bg-red {
    background-color: #f8d7da; /* Червоний фон */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}


div[data-bg="slider"] {
    background-color: #56698f;
    padding: 00px;
/*    border-radius: 5px;    */
    margin-bottom: 0px;       /* 15 */
}


div[data-bg="header"] {
    background-color: #56698f;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 0px;   /* зазор между блоками */
}

div[data-bg="header0"] {
    background-color: #56698f;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 0px;   /* зазор между блоками */
}


div[data-bg="white"] {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 0px;
}

div[data-bg="white_arch"] {
    background-color: #eeeeee;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 0px;
}

div[data-bg="white0"] {
    background-color: #ffffff;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 0px;
}


div[data-bg="white1"] {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
}

div[data-bg="white5"] {
    background-color: #ffffff;
    padding: 2px 10px 2px 10px;
    border-radius: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
}


div[data-bg="transparent"] {
    background-color: rgba(255, 255, 255, 0.5); /* білий фон з 50% прозорістю */
    padding: 8px 8px 8px 8px; /* Відступи: верхній, правий, нижній, лівий УПРАВЛЕНИЕ ШИРИНОЙ ОКАНТОВКИ транспарентного слоя */
/*    padding: 10px;        */
    border-radius: 5px;
/*    margin-bottom: 15px;    */
    margin-bottom: 0px;    
}



.custom-spacing li {
    margin: 0 0 0 0; /* Встановлює меншу відстань між елементами 0 0 */
    padding: 0; /* Забезпечує, що немає додаткових внутрішніх відступів */
}                                                             

.custom-spacing li img {
    display: block; /* Вирівнює зображення по центру */
    margin: auto;   /* Центрування */
}



/* Стиль для стрілочок (обертання на -90°) */
.charround-90 {
  display: inline-block;
  transform: rotate(-90deg); /* Обертаємо Char на 90° проти */
}

/* Стиль для стрілочок (обертання на 90°) */
.charround90 {
  display: inline-block;
  transform: rotate(90deg); /* Обертаємо Char на 90° по */
}

/* Стиль для стрілочок (обертання на -180°) */
.charround-180 {
  display: inline-block;
  transform: rotate(-180deg); /* Обертаємо Char на 180° проти */
}

/* Стиль для стрілочок (обертання на 180°) */
.charround180 {
  display: inline-block;
  transform: rotate(180deg); /* Обертаємо Char на 180° по */
}

/* Стиль для стрілочок (обертання на -45°) */
.charround-45 {
  display: inline-block;
  transform: rotate(-45deg); /* Обертаємо Char на 45° проти */
}

/* Стиль для стрілочок (обертання на 45°) */
.charround45 {
  display: inline-block;
  transform: rotate(45deg); /* Обертаємо Char на 45° по */
}



/* Стиль для першого рядка */
.highlighted-line {
    background-color: #56698f; /* Колір фону для першого рядка: main колір сайту */
    display: inline-block; /* Щоб задати ширину лише першому рядку */
    padding: 5px; /* Внутрішній відступ */
}


/* Стиль для першого рядка */
.highlighted-line6 {
    background-color: #56698f; /* Колір фону для першого рядка: main колір сайту */
    display: inline-block; /* Щоб задати ширину лише першому рядку */
    padding: 5px; /* Внутрішній відступ */
    width: 165px;
}


/*  типи гіперлінків: ВНУТРІШНІЙ  */
/*  target="_blank" подставляет скрипт: target_blank.js */
.site-out {
    color: #1E6EA4; /* Колір тексту */
    text-decoration: none; /* Прибирає підкреслення */
}

.site-out:hover, 
.site-out:focus {
    color: #2AE1FF !important; /* Колір при наведенні мишкою (важливість підвищена) */
    text-decoration: none; /* Прибирає підкреслення */
}

.site-out:active, 
.site-out:focus {
    color: #121212 !important; /* Колір при натисканні */
    text-decoration: underline; /* Додає підкреслення */
}

.site-out:visited {
    color: #1E6EA4; /* Колір після переходу */
    text-decoration: none; /* Прибирає підкреслення */
}


.site-out2 {
    color: #2AE1FF !important; /* Колір тексту */
    text-decoration: none; /* Прибирає підкреслення */
}

.site-out2:hover, 
.site-out2:focus {
    color: #ffffff !important; /* Колір при наведенні мишкою (важливість підвищена) */
    text-decoration: none; /* Прибирає підкреслення */
}

.site-out2:active, 
.site-out2:focus {
    color: #2AE1FF !important; /* Колір при натисканні */
    text-decoration: underline; /* Додає підкреслення */
}

.site-out2:visited {
    color: #ffffff; /* Колір після переходу */
/*    text-decoration: none;  Прибирає підкреслення */
    text-decoration: underline; /* Додає підкреслення */
}








/*  типи гіперлінків: ЗОВНІШНІЙ  */
/*  target="_blank" подставляет скрипт: target_blank,js */
.site-in {
    color: #1E6EA4 !important; /* Колір тексту */
    text-decoration: none !important; /* Прибирає підкреслення */
}

/* цей спрощений варіант не працює для .site-out:hover
.site-out:hover {
    color: #2AE1FF;  Колір при наведенні мишкою 
    text-decoration: none; /* Прибирає підкреслення 
}
*/
.site-in:hover, 
.site-in:focus {
    color: #2AE1FF !important; /* Колір при наведенні мишкою (важливість підвищена) */
    text-decoration: none; /* Прибирає підкреслення */
}

/*.site-out:active {
    color: #2AE1FF; /* Колір при натисканні *
    text-decoration: underline; /* Додає підкреслення 
}  */

.site-in:active, 
.site-in:focus {
    color: #121212 !important; /* Колір при натисканні */
    text-decoration: underline; /* Додає підкреслення */
}

.site-in:visited {
    color: #1E6EA4; /* Колір після переходу */
    text-decoration: none; /* Прибирає підкреслення */
}









.footer-out {
    color: #121212; /* Колір тексту */
    text-decoration: none; /* Прибирає підкреслення */
}

.footer-out:hover, 
.footer-out:focus {
    color: #121212 !important; /* Колір при наведенні мишкою (важливість підвищена) */
    text-decoration: none; /* Прибирає підкреслення */
}
.footer-out:active {
    color: #121212; /* Колір при натисканні */
    text-decoration: none; /* Прибирає підкреслення */
}


.footer-out:visited {
    color: #121212; /* Колір після переходу */
    text-decoration: none; /* Прибирає підкреслення */
}

div[data-bg="Accordion"] {
    background-image: url('../images/newspaper1.png'); /* Шлях до вашого фонового зображення */
    background-color: #DDDDDD;          /*  колір для фону LED-панелі   */
    padding: 5px;
   /* 	margin-top: 5px;
    	margin-bottom: 5px;   */
}

div[data-bg="Accordion3"] {
    background-image: url('../images/TV-0.png'); /* Шлях до вашого фонового зображення */
    background-color: #DDDDDD;          /*  колір для фону LED-панелі   */
    padding: 5px;
   /* 	margin-top: 5px;
    	margin-bottom: 5px;   */
}


div[data-bg="Accordion9"] {
    padding: 0px;
 	margin-top: 0px;
    	margin-bottom: 5px;  
}

div[data-bg="test1"] {
    background-color: #734293;          /*  колір для фону LED-панелі   */
}

/* границы между страницами меню */

.mt-4 {
  margin-top: 4px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-100 {
  margin-top: 90px;   /*  было 100px - уменьшил до 90px из-за уменьшения МЕНЮ */
}

div[data-bg="bordX"] {
/*    padding: 0px;          */
/* 	margin-top: 200px;      */
/*    	margin-bottom: 5px;     */
    	margin-left: 7px;    
    	margin-right: 7px;
/*  border: 1px solid #ffffff;   */
}

/* клас для параграфів без проміжків */
.no-gap-paragraphs p {
    margin: 0;
    padding: 0;
}

/* вирывнювання тексу в таблицы під СТЕЛЮ */
.td-top td {
    vertical-align: top;
    text-align: left;       /*  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?    */
}


.image-top-left_logo {
    position: absolute;
    top: 4px;            /* Притискає до стелі */
    left: 3px;            /* Притискає до лівого краю */
    width: 16px;          /* ширина 20px */
    height: auto;         /* Пропорційне масштабування */
}


.image-top-right_lamp {
    position: absolute;
    top: 35px;              /* Притискає до стелі */
    right: 5px;            /* Притискає до правого краю */
    width: auto; /* або конкретну ширину */
    max-width: 90%;     /* Щоб не виходила за межі ширини контейнера */
    height: auto;        /* Пропорційне масштабування */
    display: none; /* Лампочка прихована за замовчуванням (по старту) */
}


.image-top-right_back {
    position: absolute;
    top: 5px;              /* Притискає до стелі */
    right: 1px;            /* Притискає до правого краю */
    width: auto; /* або конкретну ширину */
    max-width: 90%;     /* Щоб не виходила за межі ширини контейнера */
    height: auto;        /* Пропорційне масштабування */
}


.div-top-right_txt {
    position: absolute;
    top: 0px;              /* Притискає до стелі */
    right: 1px;            /* Притискає до правого краю */
    width: 18px;
    max-width: 90%;     /* Щоб не виходила за межі ширини контейнера */
    height: 18px;
    padding: 0px;
    display: inline-block;
    transform: scaleX(1.75);
    color: #ffffff;
}



.div-top-right_txt1 {
    position: absolute;
    top: 2px;              /* Притискає до стелі */
    right: 1px;            /* Притискає до правого краю */
/*    width: auto; /* або конкретну ширину */
/*    height: auto;        /* Пропорційне масштабування */
    width: 20px;
    max-width: 90%;     /* Щоб не виходила за межі ширини контейнера */
    height: 20px;
    padding: 0px;
    display: inline-block;
    transform: scaleX(2);
}

.div-top-right_txt2 {
    position: absolute;
    top: 16px;              /* Притискає до стелі */
    right: 1px;            /* Притискає до правого краю */
/*    width: auto; /* або конкретну ширину */
/*    height: auto;        /* Пропорційне масштабування */
    width: 20px;
    max-width: 90%;     /* Щоб не виходила за межі ширини контейнера */
    height: 20px;
    padding: 0px;
    display: inline-block;
    transform: scaleX(2);
}



.custom-spacing7 li:not(:last-child) {
  margin-bottom: 7px; /* Відстань між усіма, крім останнього пункту */
}

.hr-gradient {
  border: 0;
  height: 2px;
  background: linear-gradient(to left, #aaaaaa, #ffffff);
  margin: 20px 0;
}

.hr-gradient_arch {
  border: 0;
  height: 2px;
  background: linear-gradient(to left, #aaaaaa, #eeeeee);
  margin: 20px 0;
}



/*
hr {
  border: 0;
  height: 4px;
  background: linear-gradient(to right, #ff7eb3, #2ae1ff);
  margin: 20px 0;
}
*/


.parent-container {
  position: relative; /* Це робить контейнер референтним для абсолютно позиціонованих елементів */
/*  width: 100%; /* Ширина контейнера 
  height: 300px; /* Встанови бажану висоту
  background-color: #f0f0f0; /* Для наочності  */
}

.icon-topright {
  position: absolute; /* Дозволяє точне позиціонування */
  top: 5px;          /* Відстань від верхнього краю контейнера */
  right: 5px;        /* Відстань від правого краю контейнера */
  z-index: 10;        /* Забезпечує, щоб картинка була поверх інших елементів */
  width: 75px;
}

.icon-topright_arch {
  position: absolute; /* Дозволяє точне позиціонування */
  top: -5px;          /* Відстань від верхнього краю контейнера */
  right: -10px;        /* Відстань від правого краю контейнера */
  z-index: 10;        /* Забезпечує, щоб картинка була поверх інших елементів */
  width: 75px;
}

.icon-topright2 {
  position: absolute; /* Дозволяє точне позиціонування */
  top: 5px;          /* Відстань від верхнього краю контейнера */
  right: 5px;        /* Відстань від правого краю контейнера */
  z-index: 10;        /* Забезпечує, щоб картинка була поверх інших елементів */
  width: 70px;
}


.top-align-table td {
  vertical-align: top;
}


/* Рамка навколо всього контейнера <table> при наведенні по <a> */
/* Базовий стиль для таблиці всередині контейнера */
.hover-border-container a {
  display: block;
  border: 4px solid #cccccc;
  border-radius: 5px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.hover-border-container a:hover {
  border-color: #888888;
  background-color: rgba(150, 150, 250, 0.1); /* Напівпрозорий синій фон */
}

.hover-border-container a:focus {
  border-color: #eeeeee;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.hover-border-container a:active {
  border-color: #000000;
  background-color: rgba(255, 255, 255, 0.1);
} 




.txt-button_lng {
    display: inline-block;
    transform: scaleX(1.80);
    font-size: 2.2mm;
    font-family: Arial, sans-serif;
    color: #ffffff;
}

.txt-button_lng a {
    text-decoration: none !important;
}


.hover-border-container000 {
  text-decoration: none !important; /* Без підкреслення */
  color: #ffffff;
  border: 1px solid transparent;
  transition: border 0.2s ease-in-out; /* Додає плавний ефект */
  padding: 2px;
}

.hover-border-container90 {
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 2px;}

.hover-border-container90:hover {
  border: 2px solid #ffffff;
  padding: 1px;
}

.hover-border-container90 a {
 text-decoration: none !important; /* Без підкреслення */
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 1px;
}

.hover-border-container90 a:hover {
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 1px;
}

.hover-border-container90 a:focus {
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 1px;
}

.hover-border-container90 a:active {
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 1px;
}


.hover-border-container91 {
  border: 1px solid #ffffff;
  padding: 2px;
  background-color: #000000;
}


/* альтернативні кольори */
/* Базовий стиль для таблиці всередині контейнера */
.hover-border-container1 a {
  display: block;
  border: 4px solid #cccccc;
  border-radius: 5px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.hover-border-container1 a:hover {
  border-color: #56698f;      /* базовиый колір сайту */
  background-color: rgba(150, 150, 250, 0.1); /* Напівпрозорий синій фон */
}

.hover-border-container1 a:focus {
  border-color: #eeeeee;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.hover-border-container1 a:active {
  border-color: #2AE1FF;
  background-color: rgba(255, 255, 255, 0.1);
} 





.no-decoration {  /* клас, шо прибирає будьякі оформлення для <a>  */
  text-decoration: none; /* Без підкреслення */
  color: inherit; /* Зберігає колір тексту батьківського елемента */
/*  cursor: pointer; /* Зміна курсору на руку */
}


/* простое зумирование картинок в мобильной версии */
.zoomable {
    touch-action: manipulation;
    cursor: zoom-in;
  }


/* сложный вариант зумирования картинок в мобильной версии - со скроллингом! */
/* фіксований контейнер
.image-zoom-container {
  width: 300px; /* Ширина контейнера 
  height: 200px; /* Висота контейнера 
  overflow: hidden; /* Приховує все, що виходить за межі контейнера 
  position: relative;
  border: 2px solid #ccc; /* Для наочності 
}

.zoomable-image {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* Плавне збільшення 
  cursor: grab; /* Курсор руки 
}

/* Збільшення зображення при наведенні 
.image-zoom-container:hover .zoomable-image {
  transform: scale(2); /* Збільшення у 2 рази 
  cursor: move; /* Курсор переміщення 
}
*/

/* адаптивний контейнер 
.image-zoom-container {
  max-width: 100%; /* Контейнер адаптується під ширину сторінки 
  height: auto; /* Висота буде залежати від зображення 
  overflow: hidden;
  position: relative;
  border: 2px solid #ccc; /* Для наочності 
}

.zoomable-image {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* Плавне збільшення 
  cursor: grab;
}  */

/* Збільшення зображення при наведенні */
.image-zoom-container:hover .zoomable-image {
  transform: scale(2); /* Збільшення у 2 рази */
  cursor: move;
}


/* адаптивний контейнер */
.image-zoom-container {
  max-width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  border: 4px solid #ccc;
  padding: 0;
}

.zoomable-image {
  display: block; /* Усуває зайвий простір під зображенням */
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  cursor: grab;
}

/* центрування єлементів таблиці по вертикалі */
.table-centered td {
  vertical-align: middle; /* Вирівнювання по вертикалі по центру */
  text-align: left;
}

/* для прибирання щілини між картинкою та контейнером */
.table-custom78 {
  border-collapse: collapse; /* Усуває зайві проміжки між комірками таблиці */
}

.table-custom78 td {
  vertical-align: top; /* Усуває вирівнювання по центру */
  padding: 0;
}


/* обмежений вмістом контейнер */
.custom-container1 {
  display: inline-block; /* Ширина контейнера визначається шириною його вмісту */
  padding: 0; /* Прибирає внутрішні відступи */
  margin: 0; /* Прибирає зовнішні відступи */
  border: 0px solid #ccc; /* Додає рамку для наочності */
}

.custom-container1 p {
  margin: 0;
  padding: 0;
}

/* списки с длинным тире вместо кружка */
.list-big {
  list-style: none; /* Прибираємо стандартні маркери */
  padding-left: 0;  /* Забираємо внутрішній відступ */
}

.list-big li::before {
  content: "\2013"; /* Середнє тире  {{Довге тире ( "\2014" em dash) перед кожним елементом */
  color: #000;   /* Колір тире (за потреби змінюй) */
  font-weight: bold; /* За бажанням — жирний шрифт */
  margin-right: 10px; /* Відступ між тире і текстом */
}


.switch-img-container {
  position: relative;
  display: inline-block;
/*  width: auto;         
  width: 50%;         
  height: auto;   */
  transform: scale(0.5);
  transform-origin: top left; /* Можеш змінити на center для іншого позиціювання  */

}


/* стиль для переключающихся иконок при наведении мыши: серая/цветная  */
/* не нуждается в поддержке JS ! ! ! */
.switch-img-container2 {
  position: relative; 
  display: inline-block; /* Це ключове для правильного позиціонування всередині таблиці */
  width: 32px; /* Ширина під твій розмір зображення */
  height: 32px; /* Висота під твій розмір зображення */
}

.switch-img-container2 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Підлаштовує зображення, зберігаючи пропорції */
  transition: opacity 0.3s ease;
}

.switch-img-container2 .start-img {
  opacity: 1;
}

.switch-img-container2 .over-img {
  opacity: 0;
}

.switch-img-container2:hover .start-img {
  opacity: 0;
}

.switch-img-container2:hover .over-img {
  opacity: 1;
}




/* стиль №5 для переключающихся иконок при наведении мыши: серая/цветная  */
/* не нуждается в поддержке JS ! ! ! */

.switch-img-container5 {
  position: relative;
  display: inline-block; /* Запобігає зайвому простору між іконками */
  width: 24px; /* Фіксована ширина контейнера */
  height: 24px; /* Фіксована висота контейнера */
}

.switch-img-container5 img {
  position: absolute; /* Тепер обидва зображення накладаються одне на одне */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Зберігає пропорції зображення */
  transition: opacity 0.3s ease;
}

.switch-img-container5 .start-img {
  opacity: 1;
}

.switch-img-container5 .over-img {
  opacity: 0;
}

.switch-img-container5:hover .start-img {
  opacity: 0;
}

.switch-img-container5:hover .over-img {
  opacity: 1;
}

/* Вирівнюємо вміст у таблиці */
td {
/*  text-align: center; */
  vertical-align: middle;
}




.gray-block {
  background-color: #EEEEEE;
  padding: 4px;
  border-radius: 5px;
}


.gray-block-arch {
  background-color: #DDDDDD;
  padding: 4px;
  border-radius: 5px;
}



/* якшо потрібна трансфвормація оригінальних розмірыв картинки 
.switch-img-container img {
  transform: scale(0.5);
  transform-origin: top left; /* Можеш змінити на center для іншого позиціювання 
}
/* АБО:  
.switch-img-container img {
  width: 50%;
  height: auto; /* Зберігає пропорції 
}
*/

.start-img, .over-img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

.start-img {
  opacity: 1;
  z-index: 1;
}

.over-img {
  opacity: 0;
  z-index: 2;
}

.switch-img-container:hover .over-img {
  opacity: 1;
}

.switch-img-container:hover .start-img {
  opacity: 0;
}


/* для скрытого текста: белым по белому */
.signature {
  display: inline-block;
  background-color: white;
  color: white;
  font-style: italic;
  padding: 0 5px; /* Лише горизонтальні відступи для зручності */
  margin: 0; /* Прибирає зовнішні відступи */
  text-align: right; /* Вирівнює текст всередині блоку */
  float: right; /* Прилипає до правого краю батьківського контейнера */
}

.signature p {
  margin: 0; /* Прибирає відступи зверху та знизу у <p> */
}

.styled-table4 {
/*  border: 3px solid grey; /* Зовнішня рамка таблиці */
  border: 4px solid #aaaaaa; /* Зовнішня рамка таблиці */
  border-collapse: separate; /* Щоб не зливалися внутрішні бордюри */
  border-spacing: 0; /* Прибирає проміжки між комірками */
  width: 100%; /* Таблиця заповнює всю ширину контейнера */
}

.styled-table4 td {
  border: none; /* Вимикає внутрішні бордюри */
  padding: 2px; /* Додає відступи для контенту */
  text-align: left;
}

.styled-table4 iframe {
  display: block;
  width: 100%;
  height: 300px; /* Фіксована висота для iframe, можна змінити за потреби */
}

.base_color-header4 {
  background-color: #56698f; /* Світло-зелений фон (можеш змінити на свій смак) */
  color: white; /* Колір тексту білий для кращого контрасту */
  font-weight: bold; /* Жирний текст для заголовка */
  padding: 4px; /* Внутрішні відступи */
}

/*  эффекты перехода от Ч/Б к цфетному изображению   */
.image-container_BW {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* без ефекту напівпрозорості
.color-effect_BW {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  transition: filter 0.5s ease-in-out;
} */

.color-effect_BW {
  width: 100%;
  height: auto;
  filter: grayscale(100%); /* За замовчуванням ч/б */
  opacity: 0.5; /* Напівпрозорість по старту */
  transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Плавний перехід кольору та прозорості */
}

.color-effect_BW.color-visible {
  filter: grayscale(0%); /* Кольорове */
  opacity: 1; /* Повністю непрозоре */
}


/* такий же BW-ефект для iframe від Гугла */
.iframe-container_BW iframe {
  width: 100%;
  height: 500px;
  filter: grayscale(100%);
  opacity: 0.5; /* Напівпрозорий у BW-стані */
  transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.iframe-container_BW.iframe-visible iframe {
  filter: grayscale(0%);
  opacity: 1; /* Повністю непрозорий у кольоровому стані */
}




/* контейнер, шо зменшує свої пропорції відповідно до ширини вікна бразеру  */
.adaptive-container1 {
    width: 30%; /* За замовчуванням */
    max-width: 100%; /* Щоб не виходило за межі */
    transition: width 0.3s ease-in-out; /* Плавний ефект зміни ширини */
}

/* Якщо ширина вікна 800px або менше */
@media (max-width: 1100px) {
    .adaptive-container1 {
        width: 50%;
    }
}

/* Якщо ширина вікна 600px або менше */
@media (max-width: 600px) {
    .adaptive-container1 {
        width: 70%;
    }
}


/*  додатково до розміру тексту!   */
@media (max-width: 600px) {
    .text_size1 {
        font-size: 0.9em; /* Зменшуємо шрифт тільки всередині цього контейнера */
    }
}

/* стиль для контейнеру з хірш-факторм  */
.HirschIndex-container {
    background-color: #949494; /* Темно-сірий фон */
    color: white; /* Білий колір тексту */
    border-radius: 8px; /* Закруглені кути */
    width: 50px; /* Фіксована ширина */
    padding: 5px; /* Додаємо трохи внутрішнього відступу */
    text-align: center; /* Вирівнюємо текст по центру */
}




/* CSS для tooltips777 */
/* Стиль для контейнера */
.tooltips_Hirch {
/*    background-color: #888888; /* Темно-сірий фон */
/*    color: white;
    border-radius: 8px;
    width: 50px;
    padding: 5px;        */
    text-align: center;  
    position: relative; /* Відносне позиціонування для підказки */
    cursor: pointer; /* Міняємо курсор для взаємодії */
}

/* Стиль для сповіщення */
.tooltipTEXT {
    position: absolute;
    bottom: 120%; /* Розташування над контейнером */
    left: 50%;    
    transform: translateX(-85%);
    background-color: black;
    color: white;
    padding: 8px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

/* Активне сповіщення */
.tooltipTEXT.active {
    opacity: 1;
    visibility: visible;
}

.tooltip-text_Hirch {
    display: none; /* Приховує текст, але JS зможе його прочитати */
}

    /* Стилі для виводу контенту від Google */
    #result_Hirch {
        color: white;
/*        background-color: rgba(86, 105, 143, 0);
        font-family: Geneva, sans-serif;
        font-size: 16px;
        font-weight: bold;
        padding: 10px;       */
        text-align: center;
        position: relative;
    }

/* для лампочки  */
#newsFlagImage {
    display: none; /* За замовчуванням приховано */
}

.text-div_switch {
    font-size: 24px;
    color: white;
    background-color: black;
    display: inline-block;    /* тільки під літерами! */
    padding: 2px 5px; /* Додає трохи відступу навколо літер */
    /* прибираємо вирівнювання по центру (від зовнішнього контейнеру)! */
    margin-left: 0;
    margin-right: auto;
    align-self: flex-start;
}

.custom-div {
/*    text-align: left;       /*  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?    */
}

/*
body a {
    cursor: pointer !important;
}

 a {
    cursor: pointer !important;
}
*/

a, button, input, label, select, textarea {
    cursor: pointer !important;
}   


.NAS-logo-container {
    width: 93px;            /* 85 x 109 - Loogo NAS:  +8px   */
    height: 134px;                               /*   +25px  */
   /* position: absolute;  */
    position: relative;
    top: 0px;
    right: 0px;
    padding: 15px 3px 10px 5px; /* Відступи: зверху, справа, знизу, зліва */
    float: right; /* Робить так, щоб текст обтікав цей блок */
    /* background-color: lightgray; /* Для візуалізації (можеш прибрати) */
}


.NAS-logo-container1 {
    width: 93px;            /* 85 x 109 - Loogo NAS:  +8px   */
    height: 109px;                               /*   +25px  */
   position: absolute;  
 /*   position: relative; */
    top: 5%;
    right: 0px;
    padding: 0px 3px 0px 5px; /* Відступи: зверху, справа, знизу, зліва */
    float: right; /* Робить так, щоб текст обтікав цей блок */
    /* background-color: lightgray; /* Для візуалізації (можеш прибрати) */
}

.NAS-logo-container2 {
    width: 98px;            /* 85 x 109 - Loogo NAS:  +8px   */
    height: 100%;                               /*   +25px  */
    position: absolute;     /**/
/*    position: relative;   /**/
    top: 0px;
    right: 0px;
    padding: 0px 5px 0px 0px; /* Відступи: зверху, справа, знизу, зліва */
/*    float: right; /* Робить так, щоб текст обтікав цей блок */
    /* background-color: lightgray; /* Для візуалізації (можеш прибрати) */
    display: flex;
    justify-content: center; /* По горизонталі */
    align-items: center; /* По вертикалі */
  /*  border: 2px solid black;  */
}

.NAS-logo-container3 {
    display: inline-block; /* Зберігає потік тексту */
    width: 93px;
    height: 80%;
  /*  vertical-align: top; /* Вирівнює контейнер по верхньому краю */
    margin-right: 5px; /* Відступ від тексту */
    /* background-color: lightblue;   */
    horisontal-align:
}

.NAS-logo-text-container {
    width: calc(100% - 100px);     /* внешний - ширина "Loogo NAS"-контейнера   */
    height: 100%;                               /*   +25px  */
    position: relative;  
    top: 0px;
    left: 0px;
    padding: 0px 0px 0px 0px; /* Відступи: зверху, справа, знизу, зліва */
    /* background-color: lightgray; /* Для візуалізації (можеш прибрати) */
  /*  border: 2px solid black;  */
}