.aquarium {
 display: none; /* Скрыта по умолчанию */
}

.fish {
 width: 60px;
 height: 40px;
 background-image: url('https://dahock.su/folder/ribja/rybka-35-0.gif');
 background-size: cover;
 position: absolute;
 z-index: 5;
 transition: transform 0.2s;
 cursor: pointer;
}


 /* Скрыть мобильную кнопку по умолчанию */
 .mobile-button {
 display: none;
 }

 /* Скрыть десктопную кнопку по умолчанию */
 .desktop-button {
 display: inline-block;
 }

 /* Медиа-запрос для мобильных экранов */
 @media (max-width: 768px) {
 .mobile-button {
 display: inline-block; /* Показываем мобильную кнопку */
 }
 .desktop-button {
 display: none; /* Скрываем десктопную кнопку */
 }
 }

 .mouse-line-canvas {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 z-index: 9999;
 pointer-events: none;
}

.head-r {
width: 55%; 
}
.head-l {
width: 45%;
}
 
.rollover {
 display: block;
 width: 60px !important; /* Размер для ПК */
 height: 60px !important;
 background-size: contain !important; /* Или cover — зависит от нужного эффекта */
 background-repeat: no-repeat !important;
 background-position: center !important;
 top: 18px; /* Сдвигаем элемент вниз на 10px */
}

@media (max-width: 768px) {
 .rollover {
 width: 50px !important; /* Размер для мобилки */
 height: 50px !important;
 top: 0px; /* Сдвигаем элемент вниз на 10px */ 
 }
}
 
 .head-r {
 padding: 16px 20px !important;
 } 
 
#catmenu {
padding: 0 5px 0 0px !important;
} 
 
#catmenu a {
 font-size: 18px !important;
 display: inline-block; /* нужно для transform */
 transition: transform 0.2s ease;
}

#catmenu a:hover {
 transform: scale(1.05); /* увеличение без изменения размеров контейнера */
}

 .nav-head {
 margin-left: 0px !important;
 padding: 0 0px 0 0px !important;
 }
 
/* Базовый стиль */
button.g-button,
input[type="submit"].g-button {
 font-size: 16px;
 margin: 8px 0 !important; /* отступ сверху и снизу */
}


/* Для экранов шириной до 480px — уменьшаем шрифт */
@media (max-width: 480px) {
 button.g-button,
 input[type="submit"].g-button {
 font-size: 14px;
 }
}

/* Для экранов до 360px — ещё меньше */
@media (max-width: 360px) {
 button.g-button,
 input[type="submit"].g-button {
 font-size: 13px;
 }
}

 
.material-icons {
 padding: 0 15px 0 10px !important;
 margin-left: 2px !important;
 font-size: 30px !important;
}

/* Стили для контейнера мобильного меню */
.mobile-menu-container {
 width: 100% !important;
 padding: 10px !important;
 z-index: 999 !important; /* Убедитесь, что меню имеет высокий z-index */
 height: 100% !important;
 box-sizing: border-box !important;
 display: flex !important;
 flex-direction: column !important;
 justify-content: flex-start !important;
}

/* Стили для элементов меню */
.slider-menu__link {
 padding: 20px !important; /* Увеличены отступы */
 color: #fff !important; /* Белый цвет текста */
 font-size: 28px !important; /* Увеличенный размер шрифта */
 text-decoration: none !important; /* Без подчеркивания */
 font-weight: 500 !important; /* Более выразительный шрифт */
 transition: background-color 0.3s ease-in-out !important; /* Плавный переход */
 border-bottom: none !important; /* Убираем разделители между кнопками */
 cursor: pointer !important;
}

.slider-menu__link:hover {
 background-color: #4444445e !important; /* Более тёмный фон при наведении */
 transform: translateX(5px) !important; /* Легкое смещение при наведении для эффекта */
}
 
.slider-menu__link:hover::before {
 border-color: #fff; /* Белая обводка при наведении */
}
 
/* Плоская кнопка закрытия */
i.material-icons.i_close {
 font-size: 48px !important; /* Увеличен размер иконки */
 color: #fff !important; /* Белый цвет иконки */
 position: absolute !important;
 top: 20px !important; /* Отступ от верхнего края */
 right: 20px !important; /* Отступ от правого края */
 cursor: pointer !important;
 background: none !important;
 border: 2px solid #fff !important; /* Белая обводка */
 padding: 10px !important; /* Добавлен внутренний отступ для кнопки */
 z-index: 1000 !important; /* Устанавливаем z-index для кнопки выше, чтобы она не перекрывалась */
 transition: transform 0.2s ease-in-out !important; /* Плавный эффект для кнопки */
}

i.material-icons.i_close:hover {
 transform: rotate(90deg) !important; /* Эффект вращения при наведении */
}

/* Стиль для мобильного экрана */
@media (max-width: 768px) {
 .mobile-menu-container {
 width: 100% !important;
 top: 0 !important;
 }
 .slider-menu__link {
 font-size: 30px !important; /* Увеличенный размер текста для мобильных экранов */
 padding: 25px !important; /* Ещё больше отступы для удобства */
 }
}

/* Контейнер для кнопок */
.button-container55558888 {
 display: flex;
 justify-content: center; /* Центрирование кнопок по горизонтали */
 gap: 20px; /* Расстояние между кнопками */
}

.toggle-container {
 display: flex;
 align-items: center;
}

.toggle-button {
 width: 60px; /* Ширина тумблера */
 height: 30px; /* Высота тумблера */
 background: linear-gradient(90deg, #1abc9c, #16a085); /* Бирюзовый градиент для дня */ 
 border: 2px solid #999; /* Цвет рамки */
 border-radius: 15px; /* Округлые края */
 position: relative;
 cursor: pointer;
 outline: none;
 transition: background-color 0.3s; /* Плавный переход */
}

.toggle-button:before {
 content: "";
 position: absolute;
 top: 3px; /* Отступ от верхнего края */
 left: 3px; /* Отступ от левого края */
 width: 24px; /* Ширина ползунка */
 height: 24px; /* Высота ползунка */
 background-image: url('https://dahock.su/avatar/chek/solnce.png'); /* Фон для ползунка (день) */
 background-size: cover; /* Масштабирование изображения */
 border-radius: 50%; /* Округлая форма */
 transition: transform 0.3s; /* Плавный переход */
}

.toggle-button.active {
 background: linear-gradient(90deg, #2c3e50, #34495e); /* Градиент для ночи */
}

.toggle-button.active:before {
 background-image: url('https://dahock.su/css/cloud/luna.png'); /* Фон для ползунка (ночь) */
 transform: translateX(30px); /* Сдвиг ползунка для ночного режима */
}

 .language-selector {
 position: relative;
 width: 180px;
 }

.language-button {
 width: 100%;
 background: #fff;
 color: #000;
 border: none;
 padding: 10px 15px;
 cursor: pointer;
 text-align: left;
 display: flex;
 align-items: center;
 justify-content: space-between;
 user-select: none;
 margin-top: 20px; /* ← отступ сверху */
}

 .language-button:hover {
 background-color: #fff;
 color: #555;
 }

 .language-list {
 position: absolute;
 top: 110%;
 left: 0;
 width: 100%;
 background: #1a1a1a;
 box-shadow: 0 8px 16px rgba(0,0,0,0.7);
 overflow: hidden;
 max-height: 0;
 transition: max-height 0.3s ease;
 z-index: 10;
 }

 .language-list.open {
 max-height: 500px;
 transition: max-height 0.5s ease;
 }

 .language-list ul {
 list-style: none;
 padding: 0;
 margin: 0;
 }

 .language-list ul li {
 display: flex;
 align-items: center;
 padding: 10px 15px;
 cursor: pointer;
 border-bottom: 1px solid #333;
 color: #ccc;
 transition: background-color 0.25s ease, color 0.25s ease;
 }

 .language-list ul li:last-child {
 border-bottom: none;
 }

 .language-list ul li img {
 width: 28px;
 height: 28px;
 margin-right: 14px;
 border-radius: 4px;
 box-shadow: 0 0 3px rgba(0,0,0,0.5);
 flex-shrink: 0;
 }

 .language-list ul li:hover {
 background-color: #333;
 color: #fff;
 }

 .language-list ul li:hover img {
 filter: brightness(1.2);
 }

 .arrow {
 border: solid #555;
 border-width: 0 2px 2px 0;
 display: inline-block;
 padding: 4px;
 transform: rotate(45deg);
 transition: transform 0.3s ease;
 margin-left: 10px;
 }

 .arrow.open {
 transform: rotate(-135deg);
 }

 #google_translate_element {
 display: none; /* Прячем стандартный виджет */
 }
 
 /* Скрыть баннер и тултипы Google Translate */
.VIpgJd-yAWNEb-L7lbkb,
.skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-te-menu-frame {
 display: none !important;
}

/* Убрать отступ от баннера */
body {
 top: 0px !important;
}

.Blackfirseg544 {
 width: 100%;
 background-color: black;
 color: white;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 20px;
 box-sizing: border-box;
}

.Blackfirseg544 .title-center {
 flex-grow: 1;
 text-align: center;
 font-size: 1.4rem;
 font-weight: bold;
 letter-spacing: 2px;
}

.Blackfirseg544 .left,
.Blackfirseg544 .right {
 flex-shrink: 0;
}

.Blackfirseg544 .right {
 width: 40px; /* или auto, если кнопка будет шире */
 text-align: right;
}
 
.close123 {
 background: #11b7c8; /* Бирюзовый цвет фона */
 color: white; /* Белый цвет текста */
 padding: 5px 15px;
 cursor: pointer;
 font-size: 26px;
 z-index: 1;
 transition: none; /* Убираем все переходы */
}

.close123:hover,
.close123:active {
 background: #11b7c8; /* Фон не меняется при наведении и нажатии */
 color: white; /* Цвет текста остаётся белым */
}

 
/* Анимация крестика */
.cross {
 display: inline-block;
 transition: transform 0.3s ease-in-out;
}

/* При наведении */
.close123:hover .cross {
 transform: rotate(90deg);
}

.close123:active .cross {
 transform: rotate(180deg);
}

.close123:hover,
.close123:focus {
 text-decoration: none;
 cursor: pointer;
} 

 @media (max-width: 480px) {
 .music-section {
 display: none !important;
 }
}

 @keyframes bounce {
 0%, 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-6px);
 }
}

.jumpings.jumping {
 animation: bounce 0.5s ease-in-out infinite;
}

#overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.4);
 display: none;
 z-index: 999;
}

/* Панель музыкального плеера */
.music-panel {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 background: linear-gradient(to bottom, #0c0c0c, #1d222f, #37465a, #3f5765, #3e697c, #2e8a9d, #0dbdbf);
 color: white;
 padding: 20px;
 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
 transform: translateY(100%);
 transition: transform 0.4s ease;
 z-index: 9999;
}

.music-panel.open {
 transform: translateY(0);
}

.music-panel-content {
 max-width: 100%;
 margin: 0 auto;
}
 
.jumpings {
 display: inline-block;
 cursor: pointer;
}

.jumpings .music-icon {
 transition: transform 0.3s ease;
}

.jumpings:hover .music-icon {
 animation: jump 0.6s ease;
}

@keyframes jump {
 0% { transform: translateY(0); }
 30% { transform: translateY(-10px); }
 50% { transform: translateY(0); }
 70% { transform: translateY(-5px); }
 100% { transform: translateY(0); }
}

 .bookmarks-txt1 {
 font-size: 20px;
 } 
 /* Стили для select (выпадающий список) в черном стиле */
#sortBookmarks {
 font-size: 14px;
 padding: 8px 12px;
 border: 1px solid #444; /* Темная рамка */
 border-radius: 4px;
 background-color: #222; /* Черный фон */
 color: #fff; /* Белый текст */
 transition: all 0.3s ease;
 width: 200px;
 margin-bottom: 15px;
}

#sortBookmarks:hover {
 border-color: #666; /* Серая рамка при наведении */
 background-color: #333; /* Темно-серый фон при наведении */
}

#sortBookmarks:focus {
 border-color: #4b9bff; /* Голубая рамка при фокусировке */
 outline: none;
 background-color: #222; /* Черный фон при фокусировке */
}

/* Стили для option (пунктов в выпадающем списке) */
#sortBookmarks option {
 padding: 8px 10px;
 background-color: #333; /* Темно-серый фон */
 color: #fff; /* Белый текст */
 border: none;
}

#sortBookmarks option:hover {
 background-color: #444; /* Цвет при наведении на пункт */
}
 
 
 .bookmark-table-wrapper {
 overflow-x: auto;
 margin-top: 10px;
}

.bookmark-table {
 width: 100%;
 border-collapse: collapse;
 font-family: sans-serif;
}

.bookmark-table th, .bookmark-table td {
 border: 1px solid #ccc;
 padding: 8px;
 text-align: left;
}

.bookmark-table th {
 background-color: #f5f5f51a;
}

.bookmark-table button {
 background: #000;
 color: white;
 border: none;
 padding: 5px 10px;
 cursor: pointer;
}
.bookmark-table button:hover {
 background: #5f0505ed;
}

/* Стилизация ползунков */
#all_elements_radius, 
#buttons_radius, 
#menuPosition, 
#menuPosition1, 
#opacity-range {
 appearance: none;
 width: 100%; /* Полная ширина */
 height: 10px; /* Высота ползунка */
 background: #333; /* Тёмный фон */
 border-radius: 5px; /* Скругление углов */
 outline: none; /* Без обводки */
}
 
 #darknessIntensityNew {
 appearance: none;
 width: 90%; /* Полная ширина */
 height: 10px; /* Высота ползунка */
 background: #fff; /* Тёмный фон */
 border-radius: 5px; /* Скругление углов */
 outline: none; /* Без обводки */
} 

.Up_overlays {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.7); /* Затемнение */
 display: none; /* Скрыт по умолчанию */
 z-index: 9999; /* Задний фон, ниже панели */
}

.vvehk_panel_izbrannoe {
 position: fixed;
 top: -50vh;
 left: 0;
 width: 100%;
 height: 50vh;
 background: linear-gradient(to bottom, #0c0c0c, #1d222f, #37465a, #3f5765, #3e697c, #2e8a9d, #0dbdbf);
 color: white;
 padding: 15px;
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
 transition: top 0.4s ease-in-out;
 text-align: center;
 z-index: 99999;
 display: none;
 overflow-y: auto;
}

.vvehk_panel_izbrannoe.active {
 display: block;
 top: 0;
}

.close-panel {
 position: fixed;
 top: 30px;
 right: 25px;
 background: linear-gradient(to right, #11b7c8, #11b7c4);
 color: white;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
 font-size: 26px;
 z-index: 999999;
 display: flex;
 align-items: center;
 justify-content: center;
}

.close-icon {
 display: inline-block;
 transition: transform 0.3s ease-in-out;
}

.close-panel:hover .close-icon {
 transform: rotate(360deg);
}

.vvehk_panel_izbrannoe h1 {
 position: sticky;
 top: 0;
 background: linear-gradient(to bottom, #0c0c0c, #1d222f);
 padding: 10px;
 margin: 0;
 z-index: 9;
}

.vvehk_panel_izbrannoe.active .spoiler-123 {
 display: block; /* Показываем кнопку, если панель активна */
}

.vippodskaz {
 position: fixed; /* Фиксируем контейнер */
 top: 35px; /* Отступ сверху */
 left: 25px; /* Отступ слева */
 z-index: 9999999; /* Чтобы контейнер был поверх других элементов */
 display: none; /* Скрыть по умолчанию */
}
 
.tooltip-789 {
 width: 250px;
}

@media (max-width: 768px) {
 .tooltip-789 {
 width: 150px; /* Ширина подсказки для мобильных экранов */
 }
}

 .settings-profiles {
 background-color: #000;
 padding: 12px;
 max-width: 100%;
 margin: 20px auto;
 font-family: sans-serif;
 color: #fff;
 }

 .settings-profiles .section-title {
 font-size: 16px;
 font-weight: bold;
 margin-bottom: 8px;
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 1px;
 }

 #profile-buttons-container {
 display: flex;
 justify-content: space-between;
 gap: 8px;
 }

 .profile-button {
 background-color: #000;
 border: 1px solid rgba(255, 255, 255, 0.2); /* Тонкая белая обводка */
 padding: 8px;
 cursor: pointer;
 flex: 1;
 transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }

 .profile-button.selected {
 background-color: #1abc9c;
 border-color: #1abc9c; /* Подсветка границы при выборе */
 }


 .profile-button img {
 display: block;
 width: 19px;
 height: 19px;
 margin: 0 auto;
 }

 .Medemid {
 border: 2px solid #000; /* чёрная обводка */
 padding: 20px;
 margin: 30px 0;
 margin-left: auto;
 margin-right: auto;
 }

 /* Заголовок секции */
 .Medemid p {
 font-size: 20px;
 color: #333;
 text-align: center;
 margin-bottom: 10px;
 }
 
 .zoomable {
 transition: all 0.3s ease;
 }

 .zoomed {
 width: 150px !important;
 height: 150px !important;
 }

.uvelechilka {
 margin: 10px;
 padding: 8px 16px;
 font-size: 18px;
 font-weight: bold;
 color: #fff;
 background: linear-gradient(135deg, #000000, #339fb7);
 border: none;
 cursor: pointer;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 transition: all 0.3s ease;
}

.uvelechilka:hover {
 transform: scale(1.05);
}

.uvelechilka:active {
 transform: scale(0.98);
}

.wide_switch {
 display: flex;
 align-items: center;
 cursor: pointer;
 user-select: none;
}

.wide_switch input {
 display: none;
}

.wide_switch .track {
 width: 100%;
 height: 36px;
 background-color: #0a0a2a;
 border: 2px solid transparent;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 15px;
}

.wide_switch .toggle-text {
 font-size: 14px;
 color: #fff;
 transition: color 0.3s ease;
}

.wide_switch .emoji {
 font-size: 18px;
 margin-left: 10px;
 color: white;
 flex-shrink: 0;
}

.wide_switch input:checked + .track {
 background-color: #2f0000;
}

.wide_switch input:checked + .track .toggle-text {
 color: white;
}

.wide_switch input:not(:checked) + .track .toggle-text {
 color: white;
}
 .track2 {
 width: 100%;
 height: 36px;
 border: 2px solid #000;
 position: relative;
 transition: 
 background-color 0.3s ease,
 border-color 0.3s ease,
 font-weight 0.3s ease,
 color 0.3s ease;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 15px;
 font-weight: normal;
 color: #000;
}

/* Анимация при нажатии */
.track2:active {
 border-color: red;
 color: #c00;
}
 
/* Эффекты при наведении и нажатии */
.wide_switch .track2:hover {
 background-color: transparent;
 border: 2px solid; 
 border-color: #250000;
}

 body.no-anim *, 
 body.no-anim *::before, 
 body.no-anim *::after {
 transition: none !important;
 }

 .tollbar64232 {
 display: flex;
 align-items: center;
 gap: 15px;
 }

 .collor_button {
 padding: 5px 10px;
 border: none;
 cursor: pointer;
 background-color: #1C1C1CAD;
 color: #fff;
 transition: background-color 0.3s, color 0.3s;
 }

 .color-picker-container {
 position: relative;
 display: flex;
 align-items: center;
 gap: 10px;
 }

 .color-picker-input {
 position: absolute;
 top: 100%;
 left: 0;
 display: none;
 z-index: 10;
 }

 .color-preview {
 width: 30px;
 height: 30px;
 border-radius: 5px;
 border: 2px solid #333;
 background-color: #007BFF;
 }

.border-toggle-container-xj392 {
 display: flex;
 justify-content: space-between;
 font-family: sans-serif;
 margin: 10px 0;
}

.switch-xj392 {
 position: relative;
 width: 50px;
 height: 28px;
 background-color: #ccc;
 border-radius: 34px;
 cursor: pointer;
 transition: background-color 0.3s;
}

 .toggle-label-xj392 {
 margin: 0;
 display: flex;
 align-items: center;
}
 
 
.switch-xj392.active {
 background-color: #333;
}

.slider-toggle-xj392 {
 position: absolute;
 height: 22px;
 width: 22px;
 left: 3px;
 bottom: 3px;
 background-color: white;
 border-radius: 50%;
 transition: transform 0.3s;
}

.switch-xj392.active .slider-toggle-xj392 {
 transform: translateX(22px);
}

 #rotateOverlay {
 display: none;
 position: fixed;
 z-index: 9999;
 top: 0; left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 color: white;
 font-size: 18px;
 font-weight: bold;
 text-align: center;
 padding: 40px 20px;
 box-sizing: border-box;
 }

 #rotateOverlay span {
 display: inline-block;
 margin-top: 30%;
 line-height: 1.5;
 }

.xt,
.xt-close,
.xt-close2 {
 width: 36px !important; /* увеличено */
 height: 36px !important; /* увеличено */
 background-color: #000 !important;
 color: #fff !important;
 border: 3px solid #fff !important; /* жирная белая обводка */
 font-size: 22px !important;
 line-height: 36px !important; /* центрируем содержимое по вертикали */
 text-align: center !important;
 cursor: pointer !important;
 border-radius: 0px !important;
 box-sizing: border-box !important;
 transition: background-color 0.3s ease, transform 0.1s ease !important;
}

.xt-close {
 background: transparent url(/.s/src/panel-v2/img/del_icon_off.png) no-repeat center center !important;
 background-size: 16px 16px !important; /* масштабируем иконку под размер кнопки */
 filter: brightness(0) invert(1) !important; 
}


.xw-plain .xw-bl,
.xw-plain .xw-ml,
.xw-plain .xw-tl,
.xw-plain .xw-tr,
.xw-plain .xw-br,
.xw-plain .xw-bc,
.xw-plain .xw-tc,
.xw-plain .xw-mr {
 background-color: #111 !important; /* глубокий чёрный, но не глухой */
 padding: 0 !important;
 margin: 0 !important;
 border: none !important;
}

.xw-plain .xw-tl {
 border-top-left-radius: 12px !important;
 border-top-right-radius: 12px !important;
 padding: 16px !important;
}

.xw-plain .xw-bl {
 border-bottom-left-radius: 12px !important;
 border-bottom-right-radius: 12px !important;
 padding: 16px !important;
}

.xw-plain .xw-hdr {
 padding: 12px 16px !important;
 font-size: 18px !important;
 font-weight: bold !important;
 color: #fff !important;
 background-color: #111 !important;
 border-bottom: 1px solid #333 !important;
}

.xw-plain .xw-body {
 padding: 16px !important;
 background-color: #1a1a1a !important;
 color: #eee !important;
 font-size: 15px !important;
 border-bottom-left-radius: 12px !important;
 border-bottom-right-radius: 12px !important;
}

.xw-plain .myWinLoad {
 width: 40px !important;
 height: 40px !important;
 margin: 16px auto !important;
 background: url(/.s/img/light_wait.svg) no-repeat center center !important;
 background-size: contain !important;
}

.xw-blank {
 background-color: rgba(0, 0, 0, 0.6) !important;
 border-radius: 12px !important;
 backdrop-filter: blur(2px);
}