@charset "utf-8";
/* CSS Document */

/*
Вказування "font-display: swap;"" у правилі @font-face наказує браузеру миттєво показати текст із використанням системного (резервного) шрифту, а щойно кастомний шрифт завантажиться — автоматично підмінити його на новий.
*/

@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/oswald-v57-cyrillic_cyrillic-ext_latin-200.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/oswald-v57-cyrillic_cyrillic-ext_latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/oswald-v57-cyrillic_cyrillic-ext_latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/oswald-v57-cyrillic_cyrillic-ext_latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/oswald-v57-cyrillic_cyrillic-ext_latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/oswald-v57-cyrillic_cyrillic-ext_latin-700.woff2') format('woff2'); }

@font-face { font-family: 'Arimo'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/Arimo/arimo-cyrillic-ext-italic.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Arimo'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/Arimo/arimo-cyrillic-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Arimo'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/Arimo/arimo-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Arimo'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/Arimo/arimo-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/Arimo/arimo-cyrillic-ext-normal.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/Arimo/arimo-cyrillic-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/Arimo/arimo-latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/Arimo/arimo-latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* 10px = 0.6250rem */
  /* 11px = 0.6875rem */
  /* 12px = 0.7500rem */
  /* 13px = 0.8125rem */
  /* 14px = 0.8750rem */
  /* 15px = 0.9375rem */  
  --HE_FS_BODY: 16px; /* 1rem */
  /* 17px = 1.0625rem */
  /* 18px = 1.1250rem */
  /* 19px = 1.1875rem */
  /* 20px = 1.2500rem */
  /* 21px = 1.3125rem */
  /* 22px = 1.3750rem */
  /* 23px = 1.4375rem */
  /* 24px = 1.5000rem */
  /* 25px = 1.5625rem */
  /* 26px = 1.6250rem */
  /* 27px = 1.6875rem */
  /* 28px = 1.7500rem */
  /* 29px = 1.8125rem */
  /* 30px = 1.8750rem */
  /* 31px = 1.9375rem */
  /* 32px = 2.0000rem */
  /* 33px = 2.0625rem */
  /* 34px = 2.1250rem */
  /* 35px = 2.1875rem */
  /* 36px = 2.2500rem */
  --HE_FONT_DEFAULT: "Arimo", sans-serif;
  --HE_FONT_HEADINGS: "Oswald", sans-serif;
  
  --HE_TEXT_COLOR: #333;
  
  --HE_HEADER_BG: #bfc4cdcc;
  --HE_HEADER_HEIGHT: 90px;
  
  --HE_MAX_WIDTH: 1440px;
  --HE_CONTAINER_PADDING: 15px;
  
  --HE_COLOR_GRE: #589d89;
  --HE_COLOR_RED: #a55f65;
  --HE_COLOR_WHI: #ffffff;
  
  --HE_COLOR_ADEF: #5b667a; /* колір посилання за замовчуванням */
  --HE_COLOR_AHOV: #db7c0a; /* колір посилання при наведенні */
  
}

html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; min-height: 100%; }

body { font-family: var(--HE_FONT_DEFAULT); font-size: var(--HE_FS_BODY); font-weight: 400; color: var(--HE_TEXT_COLOR); line-height: 1.6; margin: 0; font-feature-settings: "onum" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  
  min-height: 100vh;   /* Резервний варіант для дуже старих браузерів */  
  min-height: 100dvh;  /* Сучасний варіант: динамічно підлаштовується під появу/зникнення плаваючих панелей */
  
  display: flex;
  flex-direction: column;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.clr { clear: both; }

.clrfix:after { clear: both; content: ""; display: table; }

h1, h2, h3, h4, h5, h6 { font-family: var(--HE_FONT_HEADINGS); font-weight: 500; line-height: 1.3; color: var(--HE_TEXT_COLOR); margin: 0; padding: 0; }

.container { width: 100%; margin: 0 auto; max-width: var(--HE_MAX_WIDTH); padding-inline: var(--HE_CONTAINER_PADDING); }

.gap50col { display: flex; flex-direction: column; gap: 50px; }

.pad50top { padding-top: 50px; }

.pad50bot { padding-bottom: 50px; }

.color_gre { color: var(--HE_COLOR_GRE); }

.color_red { color: var(--HE_COLOR_RED); }
/*
.super-button {
  font-size: 1.1rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; width: 100%; min-height: auto; padding: 10px 16px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI) !important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none !important; white-space: nowrap; background: linear-gradient(180deg, #1bc4bc 0%, #159690 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none !important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #0d5e5a, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease !important;
}  
.super-button:hover {
  transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #0d5e5a, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none;
}  
.super-button:active {
  transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #0d5e5a, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96);
}  
.super-button:focus-visible {
  outline: 3px solid color-mix(in srgb, #159690 42%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #0d5e5a, 0 12px 20px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px color-mix(in srgb, #159690 20%, transparent);
}
.super-button i {
  color: var(--HE_COLOR_WHI); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); padding: 6px 10px; font-size: 1.2500rem; height: 32px; align-items: center; border-radius: 8px;
}
*/

.super-button {
  font-size: 1.1rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; width: 100%; min-height: auto; padding: 10px 16px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI) !important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none !important; white-space: nowrap; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none !important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #3e4653, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease !important;
}
.super-button:hover {
  transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none;
}
.super-button:active {
  transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #3e4653, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96);
}
.super-button:focus-visible {
  outline: 3px solid color-mix(in srgb, #5b667a 42%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px color-mix(in srgb, #5b667a 20%, transparent);
}
.super-button i {
  color: var(--HE_COLOR_WHI); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); padding: 6px 10px; font-size: 1.2500rem; height: 32px; align-items: center; border-radius: 8px;
}

a { color: var(--HE_COLOR_ADEF); text-decoration: none; }
a:hover { color: var(--HE_COLOR_AHOV); }

/*============================================================================
  HEADER /START/
============================================================================*/

.hex_header { /*position: sticky;*/ top: 0; z-index: 1000; min-height: var(--HE_HEADER_HEIGHT); background-color: var(--HE_HEADER_BG); }

.header_container { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: var(--HE_HEADER_HEIGHT); }

/*============================================================================
  ЛОГОТИП /START/
============================================================================*/

.logo { display: inline-flex; align-items: center; }

.logo img { display: block; width: 217px; height: auto; }

@media screen and (max-width: 1023px) {
  
  .header_container { flex-direction: column; }
  
  .logo { margin: 20px auto; }
  
  .logo img { width: 330px; }

}

/*============================================================================
  ЛОГОТИП /END/
============================================================================*/
/*============================================================================
  ГОЛОВНЕ МУЛЬТИМЕНЮ /START/
============================================================================*/

.hdm-checkbox-toggle { display: none !important; }

.hdm-mobile-label { display: none; }

.hdm-navigation { width: 100%; position: relative; box-sizing: border-box; font-family: var(--HE_FONT_HEADINGS); }

@media screen and (min-width: 1024px) {
  
  .hdm-burger-btn { display: none !important; }
  
  .hdm-menu-root { display: flex !important; align-items: center; justify-content: center; gap: 40px; list-style: none; padding: 0; margin: 0; }
  
  .hdm-root-item { position: relative; display: inline-block; }
  
  .hdm-root-link { font-size: 1.1rem; color: #5b667a; text-transform: uppercase; text-decoration: none; font-weight: 400; letter-spacing: 0.04rem; padding: 10px 0; display: inline-flex; align-items: center; gap: 8px; transition: color 0.25s ease; }
  
  .hdm-root-link .fa-regular { font-size: 1.25rem !important; color: #db7c0a; }
  
  .hdm-arrow { /*font-size: 0.85rem !important; color: #999 !important;*/ transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1); }
  
  .hdm-root-item:hover .hdm-arrow { transform: rotate(180deg); color: var(--HE_MAIN_COLOR, #159690) !important; }
  
  .hdm-root-link:hover { color: #db7c0a; }
  
  .hdm-root-item:hover .hdm-root-link { color: #db7c0a; }
  
  .hdm-mega-panel { position: absolute; top: 100%; left: calc(50% - 505px); width: 1000px; background: linear-gradient(to bottom, #ccd0d7 0%, #aeb4bd 100%) !important; border-radius: 20px; padding: 35px 30px; box-shadow: 0px 5px 0px 0px rgba(204, 208, 215, 1), 0px 5px 10px rgba(0,0,0,0.1); box-sizing: border-box; z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.25s; }
  
  #panel-exchanges { left: calc(50% - 227px); }
  #panel-soft-wallets { left: calc(50% - 389px); }
  #panel-hard-wallets { left: calc(50% - 600px); }
  #panel-knowledge-base { left: calc(50% - 781px); }
  
  .hdm-has-mega:hover .hdm-mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
  
  .hdm-mega-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
  
  .hdm-mega-col { display: flex; flex-direction: column; }
  
  .hdm-col-title { font-family: var(--HE_FONT_HEADINGS); font-size: 1rem; color: #424751; text-transform: uppercase; margin: 0 0 10px 0; letter-spacing: 0.02rem; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #e2e2e2; padding-bottom: 8px; font-weight: 400; user-select: none; }
  
  .hdm-col-title-smfont { font-family: var(--HE_FONT_HEADINGS); font-size: 0.75rem; color: #333; text-transform: uppercase; margin: 0 0 20px 0; letter-spacing: 0.02rem; display: flex; align-items: center; gap: 6px; border-bottom: 2px solid #e2e2e2; padding-bottom: 8px; }
  
  .hdm-col-services .hdm-col-title { border-bottom-color: var(--HE_MAIN_COLOR, #159690); }
  
  .hdm-col-services .hdm-col-title i { color: var(--HE_MAIN_COLOR, #159690); font-size: 1.1rem; }
  
  .hdm-lvl-badge { display: inline-block; font-family: var(--HE_FONT_BRAND1) !important; font-size: 0.75rem; font-weight: 500; padding: 2px 6px 4px; border-radius: 4px; color: var(--HE_COLOR_WHI); text-transform: uppercase; letter-spacing: 0.02rem; line-height: 1.3; }
  
  .badge-red { background-color: #e53e3e; }
  
  .badge-teal { background-color: var(--HE_MAIN_COLOR, #159690); }
  
  .badge-blue { background-color: #3182ce; }
  
  .badge-grey { background-color: #4d4d4d; }
  
  .hdm-sub-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; /*gap: 14px;*/ }
  
  .hdm-sub-list li { display: flex; align-items: center; }
  
  .hdm-sub-list-wicons { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
  
  .hdm-sub-list-wicons li { display: flex; align-items: center; }
  
  .hdm-sub-list li a { font-size: 1.05rem; color: #303b4e; text-decoration: none; display: flex!important; align-items: center; position: relative; white-space: nowrap!important; transition: color 0.25s ease, transform 0.25s ease; width: 100%; box-sizing: border-box; gap: 10px; min-height: 40px; font-weight: 300; letter-spacing: 0.02rem; }
  
  .hdm-sub-list-wicons li a { font-size: 1.1250rem; color: var(--HE_COLOR_WHI); text-decoration: none; display: flex!important; align-items: center; position: relative; white-space: nowrap!important; transition: color 0.25s ease, transform 0.25s ease; width: 100%; box-sizing: border-box; gap: 10px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.04rem; min-height: 50px; }
  
  .hdm-sub-list-wicons li a sup { font-size: 0.75rem; color: #5b667a; position: relative; /*top: -3px;*/ margin-left: auto; }
  
  .hdm-sub-list-wicons li a img { width: 36px; height: 36px; border-radius: 5px; box-sizing: border-box; }
  
  .hdm-sub-list li a i { font-size: 0.95rem !important; color: #e8e7ed; width: 25px; padding: 0 0 0 5px; transition: color 0.25s; }
  
  .hdm-sub-list li a::after { content: ""; position: absolute; left: 35px; right: 0; bottom: 0; border-bottom: 1px dashed #e2e2e2; transition: border-color 0.25s ease; }
  
  .hdm-sub-list-wicons li a::after { content: ""; position: absolute; left: 46px; right: 0; bottom: 0; border-bottom: 1px dashed #e2e2e2; transition: border-color 0.25s ease; }
  
  .hdm-sub-list li a:hover { color: #191f2a; transform: translateX(4px); }
  
  .hdm-sub-list-wicons li a:hover { color: #4c576c; transform: translateX(4px); }
  
  .hdm-sub-list li a:hover i { color: #191f2a; }
  
  .hdm-sub-list li a:hover::after { border-bottom-style: solid; border-bottom-color: #c8c8c8; }
  
  .hdm-sub-list-wicons li a:hover::after { border-bottom-style: solid; border-bottom-color: #c8c8c8; }

}

@media screen and (min-width: 1024px) {
  
  .hdm-sub-mobile-label { display: none !important; }
  
  .hdm-has-sub-dropdown { position: relative; }
  
  .hdm-sub-arrow { font-size: 0.75rem !important; margin-left: auto; color: #b3b3b3; transition: transform 0.25s ease; }
  
  .hdm-has-sub-dropdown:hover .hdm-sub-arrow { transform: translateX(3px); color: var(--HE_MAIN_COLOR, #159690); }
  
  .hdm-sub-dropdown-box { position: absolute; top: -5px; left: 100%; width: 220px; background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 100%) !important; border: 1px solid #e2e2e2; border-radius: 8px; box-shadow: 0px 8px 0px 0px rgba(226, 226, 226, 1), 0px 20px 30px rgba(0,0,0,0.325); padding: 6px 0; margin: 0 0 0 10px; list-style: none; box-sizing: border-box; z-index: 10005; opacity: 0; visibility: hidden; transform: translateX(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
  
  .hdm-has-sub-dropdown:hover .hdm-sub-dropdown-box { opacity: 1; visibility: visible; transform: translateX(0); }
  
  .hdm-sub-dropdown-box li { padding: 0 15px !important; }
  
  .hdm-sub-dropdown-box li a { font-size: 1rem !important; padding: 6px 0 !important; color: #666 !important; }
  
  .hdm-sub-dropdown-box li a::after { left: 0 !important; bottom: 2px !important; }
  
  .hdm-sub-dropdown-box li a:hover { color: var(--HE_MAIN_COLOR, #159690) !important; }

}

@media screen and (min-width: 1024px) {
  
  .hdm-sub-mobile-label-4 { display: none !important; }
  
  .hdm-has-sub-dropdown-4 { position: relative; }
  
  .hdm-sub-arrow-4 { font-size: 0.75rem !important; margin-left: auto; color: #b3b3b3; transition: transform 0.25s ease; }
  
  .hdm-has-sub-dropdown-4:hover .hdm-sub-arrow-4 { transform: translateX(3px); color: var(--HE_MAIN_COLOR, #159690); }
  
  .hdm-sub-dropdown-box-4 { position: absolute; top: -5px; left: 90%; width: 240px; background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 100%) !important; border: 1px solid #e2e2e2; border-radius: 8px; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05), 0px 4px 0px 0px rgba(226, 226, 226, 1); padding: 6px 0; margin: 0 0 0 10px; list-style: none; box-sizing: border-box; z-index: 10105; opacity: 0; visibility: hidden; transform: translateX(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
  
  .hdm-has-sub-dropdown-4:hover .hdm-sub-dropdown-box-4 { opacity: 1; visibility: visible; transform: translateX(0); }
  
  .hdm-sub-dropdown-box-4 li { padding: 0 15px !important; }
  
  .hdm-sub-dropdown-box-4 li a { font-size: 1rem !important; padding: 6px 0 !important; color: #666 !important; }
  
  .hdm-sub-dropdown-box-4 li a::after { left: 0 !important; bottom: 2px !important; }
  
  .hdm-sub-dropdown-box-4 li a:hover { color: var(--HE_MAIN_COLOR, #159690) !important; }

}

@media screen and (max-width: 1023px) {
  
  .hdm-desktop-only { display: none !important; }
  
  .hdm-menu-root { display: none; width: 100%; /*background-color: #3f4a60;*/ list-style: none; padding: 0; margin: 0; box-sizing: border-box; border-top: 2px solid #e9aa5f; }
  
  .hdm-burger-btn { display: flex!important; align-items: center; justify-content: center; gap: 25px; background-color: var(--HE_COLOR_AHOV); height: 60px; /*padding: 0px 25px;*/ /*height: 100px;*/ cursor: pointer; box-sizing: border-box; user-select: none; border-radius: 10px; }
  
  .hdm-burger-text { font-size: 1.5000rem; color: var(--HE_COLOR_WHI); font-weight: 500; letter-spacing: 0.05rem; }
  
  .hdm-burger-icon { position: relative; width: 22px; height: 4px; background-color: var(--HE_COLOR_WHI); display: inline-block; }
  
  .hdm-burger-icon::before, .hdm-burger-icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 4px; background-color: var(--HE_COLOR_WHI); transition: transform 0.25s; }
  
  .hdm-burger-icon::before { top: -10px; }
  
  .hdm-burger-icon::after { bottom: -10px; }
  
  .hdm-checkbox-toggle:checked ~ .hdm-menu-root { display: block !important; }
  
  .hdm-checkbox-toggle:checked ~ .hdm-burger-btn { border-radius: 10px 10px 0 0; }
  
  .hdm-checkbox-toggle:checked ~ .hdm-burger-btn .hdm-burger-icon { background: transparent; }
  
  .hdm-checkbox-toggle:checked ~ .hdm-burger-btn .hdm-burger-icon::before { transform: rotate(45deg); top: 0; }
  
  .hdm-checkbox-toggle:checked ~ .hdm-burger-btn .hdm-burger-icon::after { transform: rotate(-45deg); bottom: 0; }
  
  .hdm-root-item { display: block; width: 100%; position: relative; background-color: #3f4a60; border-bottom: 1px solid #697386; }
  
  .hdm-root-item:last-child { border-radius: 0 0 15px 15px; }
  
  .hdm-root-link, .hdm-mobile-label { display: flex !important; align-items: center; gap: 12px; padding: 0 25px; height: 60px; color: var(--HE_COLOR_WHI) !important; font-size: 1.2rem; text-transform: uppercase; text-decoration: none; box-sizing: border-box; cursor: pointer; user-select: none; }
  
  .hdm-root-link i { font-size: 1.35rem !important; color: var(--HE_MAIN_COLOR, #159690); }
  
  .hdm-mobile-label i { font-size: 1.35rem !important; }
  
  .hdm-mobile-label::after { content: "\f339"; font-family: "Font Awesome 6 Pro"; color: var(--HE_COLOR_AHOV); margin-left: auto; font-size: 1rem; transition: transform 0.25s; }
  
  .hdm-mega-panel { display: none; width: 100% !important; position: static !important; background-color: #3f4a60!important; box-shadow: none !important; border: none !important; padding: 0 !important; }
  
  .hdm-mobile-trigger:checked ~ .hdm-mega-panel { display: block !important; }
  
  .hdm-mobile-trigger:checked ~ .hdm-mobile-label::after { transform: rotate(180deg); color: #ffba00; }
  
  .hdm-mega-wrapper { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  
  .hdm-col-title { background-color: #161616 !important; padding: 15px 25px !important; margin: 0 !important; border-bottom: 1px solid #2d2d2d !important; font-size: 1.25rem !important; color: #888 !important; height: 60px; width: 100%; }
  
  .hdm-col-services .hdm-col-title { color: var(--HE_COLOR_AHOV) !important; }
  
  .hdm-col-services .hdm-col-title i { margin: 0 15px 0 6px; }
  
  .hdm-lvl-badge { display: inline-block; font-family: var(--HE_FONT_BRAND1) !important; padding: 2px 6px; border-radius: 4px; color: var(--HE_COLOR_WHI); text-transform: uppercase; letter-spacing: 0.02rem; line-height: 1.3; margin-right: 5px; }
  
  .badge-red { background-color: #e53e3e; }
  
  .badge-teal { background-color: var(--HE_MAIN_COLOR, #159690); }
  
  .badge-blue { background-color: #3182ce; }
  
  .hdm-sub-list, .hdm-sub-list-wicons { gap: 0 !important; list-style: none; padding: 0px; }
  
  .hdm-sub-list li, .hdm-sub-list-wicons li { padding: 0!important; border-bottom: 1px solid #4e5970; }
  
  .hdm-sub-list li a, .hdm-sub-list-wicons li a { padding: 10px 0 10px 40px!important; height: 50px; color: #b3b3b3 !important; font-size: 1.05rem !important; display: block; text-align: left; text-decoration: none; position: relative; }
  
  .hdm-sub-list-wicons li a sup { font-size: 0.6750rem!important; color: #b3b3b3; position: absolute; right: 25px; top: 16px; margin-left: auto; text-transform: uppercase; }
  
  .hdm-sub-list-wicons li a img { display: none; }
  
  .hdm-sub-list li a i { color: #b3b3b3!important; width: 15px; margin-right: 10px!important; }
  
  .hdm-sub-list-wicons li a::before { content: "\f33b"; font-family: "Font Awesome 6 Pro"; color: #b3b3b3!important; margin-right: 10px!important; font-weight: 300; }
  
  .hdm-sub-list li a::after { display: none !important; }
  
  .hdm-sub-list li a:hover, .hdm-sub-list-wicons li a:hover { background-color: var(--HE_COLOR_AHOV); color: var(--HE_COLOR_WHI) !important; transform: none !important; }
  
  .hdm-sub-list li a:hover i { color: var(--HE_COLOR_WHI)!important; transform: none !important; }
  
  .hdm-sub-list-wicons li a:hover::before { color: var(--HE_COLOR_WHI)!important; transform: none !important; }
  
  .hdm-sub-list-wicons li a:hover sup { color: var(--HE_COLOR_WHI)!important; transform: none !important; }
  
  .hdm-lvl-badge i { position: relative; top: -2px; }

}

@media screen and (max-width: 1023px) {
  
  .hdm-desktop-only { display: none !important; }
  
  .hdm-mobile-label { display: inline-flex !important; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; }
  
  #hdm-burger-toggle:checked ~ .hdm-menu-root { display: block !important; }

}

@media screen and (max-width: 1023px) {
  
  .hdm-sub-desktop-link { display: none !important; }
  
  .hdm-sub-mobile-label { display: flex !important; gap: 14px; align-items: center; padding: 10px 55px 10px 55px !important; height: 50px; color: #b3b3b3; font-size: 1.05rem; cursor: pointer; width: 100%; box-sizing: border-box; }
  
  .hdm-sub-mobile-label::after { content: "⮧"; color: #555; margin-left: auto; font-size: 0.9rem; transition: transform 0.25s; }
  
  .hdm-sub-dropdown-box { display: none; list-style: none; padding: 0; margin: 0; background-color: #262626 !important; }
  
  .hdm-sub-mobile-trigger:checked ~ .hdm-sub-dropdown-box { display: block !important; }
  
  .hdm-sub-mobile-trigger:checked ~ .hdm-sub-mobile-label::after { transform: rotate(180deg); color: #ffba00; }
  
  .hdm-sub-dropdown-box li a { padding: 10px 0 10px 90px !important; height: 50px; color: #888888 !important; font-size: 0.95rem !important; text-transform: none !important; }
  
  .hdm-sub-dropdown-box li a:hover { background-color: #000000; color: var(--HE_COLOR_WHI) !important; }

}

@media screen and (max-width: 1023px) {
  
  .hdm-sub-desktop-link-4 { display: none !important; }
  
  .hdm-sub-mobile-label-4 { display: flex !important; gap: 14px; align-items: center; padding: 10px 55px 10px 90px !important; height: 50px; color: #b3b3b3; font-size: 1.05rem; cursor: pointer; width: 100%; box-sizing: border-box; }
  
  .hdm-sub-mobile-label-4::after { content: "⮧"; color: #555; margin-left: auto; font-size: 0.9rem; transition: transform 0.25s; }
  
  .hdm-sub-dropdown-box-4 { display: none; list-style: none; padding: 0; margin: 0; background-color: #262626 !important; }
  
  .hdm-sub-mobile-trigger-4:checked ~ .hdm-sub-dropdown-box-4 { display: block !important; }
  
  .hdm-sub-mobile-trigger-4:checked ~ .hdm-sub-mobile-label-4::after { transform: rotate(180deg); color: #ffba00; }
  
  .hdm-sub-dropdown-box-4 li a { padding: 10px 0 10px 125px !important; height: 50px; color: #888888 !important; font-size: 0.95rem !important; text-transform: none !important; }
  
  .hdm-sub-dropdown-box-4 li a:hover { background-color: #000000; color: var(--HE_COLOR_WHI) !important; }

}

@media screen and (max-width: 330px) {
  
  .hdm-menu-root li { display: block; width: 94%; }
  
}
  
/*============================================================================
  ГОЛОВНЕ МУЛЬТИМЕНЮ /END/
============================================================================*/ 
/*============================================================================
  ПОШУК ТА ОСОБИСТИЙ КАБІНЕТ /START/
============================================================================*/

.header_search_login { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.header_search_link { display: flex; align-items: center; text-decoration: none; border-radius: 10px; background-color: #9ea4af; color: var(--HE_COLOR_WHI); width: 40px; height: 40px; transition: background 0.25s ease; cursor: pointer; }

.header_search_link:hover { background-color: #4c576c; }

.header_search_link i { font-size: 1.2500rem; margin: 0 auto; }

.header_login_link { display: flex; align-items: center; text-decoration: none; border-radius: 10px; background-color: #9ea4af; color: var(--HE_COLOR_WHI); width: 40px; height: 40px; transition: background 0.25s ease; cursor: pointer; }

.header_login_link:hover { background-color: #4c576c; }

.header_login_link i { font-size: 1.2500rem; margin: 0 auto; }

@media screen and (max-width: 1023px) {  
  .header_search_login { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 330px; margin: 30px auto; }
  
  .header_search_link { width: 60px; height: 60px; }
  
  .header_search_link i { font-size: 1.6250rem; }
  
  .header_login_link { width: 60px; height: 60px; }
  
  .header_login_link i { font-size: 1.6250rem; }  
}

@media screen and (max-width: 639px) {  
  .header_search_login { margin: 15px auto; }
  
  .header_search_link { width: 40px; height: 40px; }
  
  .header_search_link i { font-size: 1.2500rem; }
  
  .header_login_link { width: 40px; height: 40px; }
  
  .header_login_link i { font-size: 1.2500rem; }  
}

/*============================================================================
  ПОШУК ТА ОСОБИСТИЙ КАБІНЕТ /END/
============================================================================*/
/*============================================================================
  HEADER /END/
============================================================================*/



















/*============================================================================
  MAIN /START/
============================================================================*/

.hex_main { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; }

/*============================================================================
  HERO-СЕКЦІЯ (ВСТУП) /START/
============================================================================*/

.main_hero_section_bg { background-color: #e1e1e3; background-image: linear-gradient(180deg, #e1e1e3 0%, #c0bfc6 55%, #e1e1e3 100%); }

.main_hero_section { background-color: #e8e7ed; background-image: url('../images/hodl-smart.png'); background-repeat: no-repeat; background-position: left center; border-radius: 30px; padding: 50px 30px 50px 380px; margin: 50px 0; display: flex; flex-direction: column; gap: 25px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); border: 0px solid var(--HE_COLOR_WHI); }

.main_hero_section h1 { font-size: 2.2500rem; text-transform: uppercase; color: #525e73; font-weight: 600; }

.hero_section_slogans { color: #9e7a60; font-family: "Oswald"; font-size: 1.2500rem; font-weight: 500; }

.hero_section_slogans p { margin: 0; line-height: 1.6; }

.hero_section_slogans p i { margin: 0 15px 0 0; font-size: 0.7500rem; position: relative; top: -3px; color: #bdc0c6; }

.hero_section_description { color: #37383c; font-family: "Oswald"; font-size: 1.1250rem; font-weight: 400; }

.hero_section_description p { margin: 0; line-height: 1.6; }

.hero_section_cards { display: flex; gap: 35px; justify-content: space-between; }

.hero_section_card { display: flex; flex-direction: column; flex: 1; background-color: #ced1d6; border-radius: 20px; border-left: 5px solid #bdc0c6; padding: 30px; min-width: 310px; box-shadow: 0px 5px 20px rgba(0,0,0,0.1); }

.card_ex { background-image: url('../images/hodl-ex.png'); background-repeat: no-repeat; background-position: right center; background-size: contain; }

.card_sw { background-image: url('../images/hodl-sw.png'); background-repeat: no-repeat; background-position: right center; background-size: contain; }

.card_hw { background-image: url('../images/hodl-hw.png'); background-repeat: no-repeat; background-position: right center; background-size: contain; }

.hero_section_card h2 { font-size: 1.0625rem; font-weight: 500; color: #444; text-transform: uppercase; }

.hero_section_card .purpose { color: #777; font-family: "Oswald"; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; }

.hero_section_card .card_link { margin-top: /*20*/8px; }

.hero_section_card .card_link a { color: #777; font-family: "Oswald"; font-size: 1.1250rem; font-weight: 500; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid #777; transition: color 0.25s ease; transition: border-bottom 0.25s ease; }

.hero_section_card .card_link a:hover { color: #555; border-bottom: 1px solid transparent; }

.hero_section_info { background-color: #d1d1d266; border-radius: 20px; border-left: 5px solid #db7c0a; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; box-shadow: 0px 5px 20px rgba(0,0,0,0.1); }

.hero_section_info i { font-size: 3.0000rem; color: #cdcdcf; }

.hero_section_info span { font-size: 0.9375rem; color: #37383c; }

@media screen and (max-width: 1535px) {
  .main_hero_section { background-position: -100px top; padding: 30px 30px 30px 230px; }
  
  .hero_section_cards { gap: 25px; }
}

@media screen and (max-width: 1279px) {
  .main_hero_section { background-image: none; padding: 30px 30px 30px 30px; }
  
  .hero_section_cards { gap: 20px; }
}

@media screen and (max-width: 1119px) {
  .main_hero_section { background-image: none; padding: 30px 30px 30px 30px; }
  
  .hero_section_cards { gap: 20px; }
  
  .hero_section_card { min-width: 250px; }
}

@media screen and (max-width: 1023px) {
  .hero_section_cards { flex-direction: column; }
}

@media screen and (max-width: 479px) {
  .hero_section_info i { font-size: 2.0000rem; }
}

/*============================================================================
  HERO-СЕКЦІЯ (ВСТУП) /END/
============================================================================*/
/*============================================================================
  СЛАЙД-ПАНЕЛЬ ОСТАННІХ НОВИН /START/
============================================================================*/

.main_latest_news_bg { background-color: #e8e7ed; }

.news-slider { display: flex; align-items: center; max-width: 100%; font-family: "Oswald"; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); margin-bottom: 50px; }

.slider-label { font-size: 1.1250rem; text-transform: uppercase; font-weight: 500; color: #dc3545; margin-right: 15px; white-space: nowrap; }

.slider-label i { position: relative; top: -1px; margin-right: 10px; color: #555; font-size: 1.0500rem; animation: changeColor 1.25s infinite; }

@keyframes changeColor {
  0%, 100% {
    color: #e8e7ed;
  }
  50% {
    color: #555;
  }
}

.slider-container { flex-grow: 1; height: 24px; /* Висота одного рядка новин */ overflow: hidden; position: relative; }

.slider-track { position: relative; width: 100%; height: 100%; }

.slider-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: translateY(15px); /* Початковий зсув знизу для ефекту появи */ transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s; display: flex; align-items: center; }

/* Стан активного слайда (плавна поява) */

.slider-item.active { opacity: 1; visibility: visible; transform: translateY(0); }

.slider-item span { white-space: nowrap; font-size: 0.8750rem; color: #777; }

.slider-item a { color: var(--HE_COLOR_ADEF); font-size: 1.0000rem!important; text-decoration: none; margin-left: 10px; position: relative; transition: color 0.25s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.slider-item a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background-color: var(--HE_COLOR_ADEF); /* Колір лінії */ transition: background-color 0.25s ease; }

.slider-item a:hover { color: var(--HE_COLOR_AHOV); }

.slider-item a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background-color: transparent; /* Колір лінії */ }

.slider-controls { display: flex; gap: 5px; margin-left: 15px; }

.slider-btn { background-color: #9ea4af; border: 0px solid #ced4da; border-radius: 5px; width: 52px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8750rem; color: var(--HE_COLOR_WHI); transition: all 0.25s ease; }

.slider-btn:hover { background: #828997; color: var(--HE_COLOR_WHI); }

.slider-btn:active { transform: scale(0.95); }

@media screen and (max-width: 767px) {
  .news-slider { display: block; }
  
  .slider-label { margin-right: 0; margin-bottom: 10px; text-align: center; display: block; }
  
  .slider-controls { display: flex; gap: 5px; margin-left: 0; margin-top: 10px; justify-content: center; }
}

/*============================================================================
  СЛАЙД-ПАНЕЛЬ ОСТАННІХ НОВИН /END/
============================================================================*/
/*============================================================================
  КРИПТОБІРЖІ ВСТУП + ОГЛЯДИ /START/
============================================================================*/

.main_exchanges_section_bg { background-color: #e1e1e3; background-image: linear-gradient(180deg, #c0bfc6 0%, #e1e1e3 55%, #c0bfc6 100%); }

.main_exchanges_intro_and_reviews { display: flex; gap: 50px; justify-content: space-between; }

.main_exchanges_intro { display: flex; gap: 20px; flex-direction: column; min-width: 630px; max-width: 630px; background-color: #9ea4af; border-radius: 30px; padding: 30px 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); scroll-margin-top: 140px; }

.intro_header { display: flex; gap: 10px; align-items: center; }

.intro_header_icon { background-image: url('../images/icon-star-plus-plus.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.intro_header h2 { text-transform: uppercase; font-size: 1.5000rem; font-weight: 500; color: var(--HE_COLOR_WHI); flex: 1 0 auto; }

.complex_link { width: 260px; height: 60px; border-radius: 20px; padding: 6px; display: flex; gap: 10px; text-decoration: none; align-items: center; background-image: linear-gradient(180deg, rgba(214, 215, 220, 0.6) 0%, rgba(244, 243, 247, 0.6) 100%); box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: transform 0.25s ease, box-shadow 0.25s ease; }

.complex_link_icon { background-image: url('../images/icon-ex-all.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_binance { background-image: url('../images/icon-ex-binance.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_okx { background-image: url('../images/icon-ex-okx.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_kucoin { background-image: url('../images/icon-ex-kucoin.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_bitget { background-image: url('../images/icon-ex-bitget.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_bybit { background-image: url('../images/icon-ex-bybit.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_txt { color: #444; font-family: "Oswald"; font-size: 1.0625rem; font-weight: 400; text-transform: uppercase; line-height: 1; flex: 1 0 auto; }

.complex_link_txt span { color: #a6aab0; font-size: 0.6875rem; }

.complex_link i { color: var(--HE_COLOR_WHI); margin: 0 10px 0 0; }

.complex_link:hover { box-shadow: 0px 15px 50px rgba(0,0,0,0.1); transform: translateY(-3px); }

.intro_body { background-color: #f0f0f4; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 15px; font-size: 0.9375rem; }

.intro_body p { margin: 0; hyphens: auto; line-height: 1.55; }

.intro_body p.osw { font-family: "Oswald"; text-transform: uppercase; font-weight: 500; color: #5b667a; position: relative; line-height: 1.6; }

.intro_body p.osw i { margin-right: 10px; font-size: 0.6875rem; color: #bbc2ce; position: relative; top: -2px; }

.main_exchanges_reviews { background-color: #e8e7ed; background-image: url('../images/hodl-exchanges.png'); background-repeat: no-repeat; background-position: right center; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; flex: 1 0 auto; gap: 40px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); }

.main_exchanges_headers { display: flex; flex-direction: column; gap: 10px; }

.main_exchanges_headers h2 { text-align: center; color: #5b667a; font-size: 1.5000rem; font-weight: 500; text-transform: uppercase; }

.main_exchanges_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_exchanges_reviews ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }

@media screen and (max-width: 1535px) {
  .main_exchanges_intro_and_reviews { flex-direction: column; }
  
  .main_exchanges_intro { min-width: 100%; }
}

@media screen and (max-width: 639px) {
  .intro_header { flex-direction: column; }
  
  .intro_header_icon { display: none; }
  
  .main_exchanges_reviews { background-image: none!important; }
  
  .main_exchanges_reviews ul { margin: 0 auto; }
}

/*============================================================================
  КРИПТОБІРЖІ ВСТУП + ОГЛЯДИ /END/
============================================================================*/
/*============================================================================
  КРИПТОБІРЖІ ПЕРЕВАГИ ТА НЕДОЛІКИ /START/
============================================================================*/

.main_exchanges_pros_and_cons { display: flex; gap: 50px; justify-content: space-between; }

.main_exchanges_pros { min-width: 680px; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 25px; }

.main_exchanges_cons { min-width: 680px; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 25px; }

.main_exchanges_pros_headers { display: flex; flex-direction: column; gap: 10px; }

.main_exchanges_pros_headers h2 { text-align: center; color: #555; font-size: 1.2500rem; font-weight: 500; text-transform: uppercase; }

.main_exchanges_pros_headers h2 span { color: var(--HE_COLOR_GRE); }

.main_exchanges_pros_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_exchanges_pros_headers div { height: 10px; border-bottom: 1px solid var(--HE_COLOR_WHI); }

.main_exchanges_pros ul { background-image: url('../images/hodl-pros.png'); background-repeat: no-repeat; background-position: center center; list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; font-size: 0.9375rem; color: #666; }

.main_exchanges_pros ul li { background-image: linear-gradient(135deg, rgba(215, 220, 227, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%); border-radius: 10px; padding: 12px 10px 12px 25px; border-left: 5px solid var(--HE_COLOR_GRE); box-sizing: border-box; box-shadow: 0px 5px 20px rgba(0,0,0,0.1); line-height: 1.4; min-height: 92px; }

.main_exchanges_pros ul li h4 { font-size: 1.0000rem; color: #555; text-transform: uppercase; margin-bottom: 5px; }

.main_exchanges_cons_headers { display: flex; flex-direction: column; gap: 10px; }

.main_exchanges_cons_headers h2 { text-align: center; color: #555; font-size: 1.2500rem; font-weight: 500; text-transform: uppercase; }

.main_exchanges_cons_headers h2 span { color: var(--HE_COLOR_RED); }

.main_exchanges_cons_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_exchanges_cons_headers div { height: 10px; border-bottom: 1px solid var(--HE_COLOR_WHI); }

.main_exchanges_cons ul { background-image: url('../images/hodl-cons.png'); background-repeat: no-repeat; background-position: center center; list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; font-size: 0.9375rem; color: #666; }

.main_exchanges_cons ul li { background-image: linear-gradient(135deg, rgba(215, 220, 227, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%); border-radius: 10px; padding: 12px 10px 12px 25px; border-left: 5px solid var(--HE_COLOR_RED); box-sizing: border-box; box-shadow: 0px 5px 20px rgba(0,0,0,0.1); line-height: 1.4; min-height: 92px; }

.main_exchanges_cons ul li h4 { font-size: 1.0000rem; color: #555; text-transform: uppercase; margin-bottom: 5px; }

@media screen and (max-width: 1535px) {
  .main_exchanges_pros_and_cons { flex-direction: column; }
  
  .main_exchanges_pros { min-width: 100%; }

  .main_exchanges_cons { min-width: 100%; }
}

/*============================================================================
  КРИПТОБІРЖІ ПЕРЕВАГИ ТА НЕДОЛІКИ /END/
============================================================================*/
/*============================================================================
  КРИПТОБІРЖІ ПОРІВНЯННЯ CEX ТА DEX /START/
============================================================================*/

.main_exchanges_cex_vs_dex { background-color: #e8e7ed; background-image: url('../images/hodl-ex-dex.png'); background-repeat: no-repeat; background-position: left 70px; border-radius: 30px; padding: 30px; margin-bottom: 50px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 30px; }

.main_exchanges_cex_vs_dex h2 { font-size: 1.5000rem; color: #5b667a; text-transform: uppercase; text-align: center; font-weight: 500; }

.cex_vs_dex_txts { background-color: #f0f0f4cc; border-radius: 20px; font-size: 0.9375rem; color: #333; padding: 30px; margin-left: 500px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

.cex_vs_dex_txts h3 { font-size: 1.2500rem; color: #9e7a60; }

.cex_vs_dex_txts p { margin: 0; }

.cex_vs_dex_txts p i { font-size: 0.7500rem; margin-right: 10px; color: #bbc2ce; }

@media screen and (max-width: 1119px) {
  .main_exchanges_cex_vs_dex { background-image: none!important; }
  
  .cex_vs_dex_txts { margin-left: 0!important; }
}

/*============================================================================
  КРИПТОБІРЖІ ПОРІВНЯННЯ CEX ТА DEX /END/
============================================================================*/
/*============================================================================
  ПРОГРАМНІ ГАМАНЦІ ВСТУП + ОГЛЯДИ /START/
============================================================================*/

.main_softwallets_section_bg { background-color: #e1e1e3; background-image: linear-gradient(180deg, #e1e1e3 0%, #c0bfc6 55%, #e1e1e3 100%); }

.main_softwallets_intro_and_reviews { display: flex; gap: 50px; justify-content: space-between; }

.main_softwallets_intro { display: flex; gap: 20px; flex-direction: column; min-width: 630px; max-width: 630px; background-color: #9ea4af; border-radius: 30px; padding: 30px 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); scroll-margin-top: 140px; }

.complex_link_icon_sw { background-image: url('../images/icon-sw-all.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_metamask { background-image: url('../images/icon-sw-metamask.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_rabby { background-image: url('../images/icon-sw-rabby.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_phantom { background-image: url('../images/icon-sw-phantom.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_trust { background-image: url('../images/icon-sw-trust.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_exodus { background-image: url('../images/icon-sw-exodus.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.main_softwallets_reviews { background-color: #e8e7ed; background-image: url('../images/hodl-softwallets.png'); background-repeat: no-repeat; background-position: right center; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; flex: 1 0 auto; gap: 40px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); }

.main_softwallets_headers { display: flex; flex-direction: column; gap: 10px; }

.main_softwallets_headers h2 { text-align: center; color: #5b667a; font-size: 1.5000rem; font-weight: 500; text-transform: uppercase; }

.main_softwallets_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_softwallets_reviews ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }

@media screen and (max-width: 1535px) {
  .main_softwallets_intro_and_reviews { flex-direction: column; }
  
  .main_softwallets_intro { min-width: 100%; }
}

@media screen and (max-width: 639px) {
  .main_softwallets_reviews { background-image: none!important; }
  
  .main_softwallets_reviews ul { margin: 0 auto; }
}

/*============================================================================
  ПРОГРАМНІ ГАМАНЦІ ВСТУП + ОГЛЯДИ /END/
============================================================================*/
/*============================================================================
  ПРОГРАМНІ ГАМАНЦІ ПЕРЕВАГИ ТА НЕДОЛІКИ /START/
============================================================================*/

.main_softwallets_pros_and_cons { display: flex; gap: 50px; justify-content: space-between; }

.main_softwallets_pros { min-width: 680px; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 25px; }

.main_softwallets_cons { min-width: 680px; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 25px; }

.main_softwallets_pros_headers { display: flex; flex-direction: column; gap: 10px; }

.main_softwallets_pros_headers h2 { text-align: center; color: #555; font-size: 1.2500rem; font-weight: 500; text-transform: uppercase; }

.main_softwallets_pros_headers h2 span { color: var(--HE_COLOR_GRE); }

.main_softwallets_pros_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_softwallets_pros_headers div { height: 10px; border-bottom: 1px solid var(--HE_COLOR_WHI); }

.main_softwallets_pros ul { background-image: url('../images/hodl-pros.png'); background-repeat: no-repeat; background-position: center center; list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; font-size: 0.9375rem; color: #666; }

.main_softwallets_pros ul li { background-image: linear-gradient(135deg, rgba(215, 220, 227, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%); border-radius: 10px; padding: 12px 10px 12px 25px; border-left: 5px solid var(--HE_COLOR_GRE); box-sizing: border-box; box-shadow: 0px 5px 20px rgba(0,0,0,0.1); line-height: 1.4; min-height: 92px; }

.main_softwallets_pros ul li h4 { font-size: 1.0000rem; color: #555; text-transform: uppercase; margin-bottom: 5px; }

.main_softwallets_cons_headers { display: flex; flex-direction: column; gap: 10px; }

.main_softwallets_cons_headers h2 { text-align: center; color: #555; font-size: 1.2500rem; font-weight: 500; text-transform: uppercase; }

.main_softwallets_cons_headers h2 span { color: var(--HE_COLOR_RED); }

.main_softwallets_cons_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_softwallets_cons_headers div { height: 10px; border-bottom: 1px solid var(--HE_COLOR_WHI); }

.main_softwallets_cons ul { background-image: url('../images/hodl-cons.png'); background-repeat: no-repeat; background-position: center center; list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; font-size: 0.9375rem; color: #666; }

.main_softwallets_cons ul li { background-image: linear-gradient(135deg, rgba(215, 220, 227, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%); border-radius: 10px; padding: 12px 10px 12px 25px; border-left: 5px solid var(--HE_COLOR_RED); box-sizing: border-box; box-shadow: 0px 5px 20px rgba(0,0,0,0.1); line-height: 1.4; min-height: 92px; }

.main_softwallets_cons ul li h4 { font-size: 1.0000rem; color: #555; text-transform: uppercase; margin-bottom: 5px; }

@media screen and (max-width: 1535px) {
  .main_softwallets_pros_and_cons { flex-direction: column; }
  
  .main_softwallets_pros { min-width: 100%; }

  .main_softwallets_cons { min-width: 100%; }
}

/*============================================================================
  ПРОГРАМНІ ГАМАНЦІ ПЕРЕВАГИ ТА НЕДОЛІКИ /END/
============================================================================*/
/*============================================================================
  ПРОГРАМНІ ГАМАНЦІ - МАНУАЛИ - СЛАЙДЕР /START/
============================================================================*/

.main_softwallets_manuals { background-color: #e8e7ed; background-image: url('../images/hodl-sw-manuals.png'); background-repeat: no-repeat; background-position: bottom center; border-radius: 30px; padding: 30px; margin-bottom: 50px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 30px; }

.main_softwallets_manuals_headers { display: flex; flex-direction: column; gap: 10px; }

.main_softwallets_manuals_headers h2 { text-align: center; color: #5b667a; font-size: 1.5000rem; font-weight: 500; text-transform: uppercase; }

.main_softwallets_manuals_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

/**/

.sld-slider-wrapper { position: relative; width: 100%; padding: 0; box-sizing: border-box; }

.sld-carousel { display: flex !important; flex-direction: row !important; gap: 30px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding-bottom: 25px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }

.sld-carousel::-webkit-scrollbar { display: none; }

.sld-card { flex: 0 0 calc((100% - 90px) / 4) !important; scroll-snap-align: start; display: flex; flex-direction: column; background-color: #f1f0f4; box-sizing: border-box; border-radius: 20px; box-shadow: 0px 5px 10px rgba(0,0,0,0.1);}

.sld-img-box { width: 100%; border-radius: 20px 20px 0 0; overflow: hidden; position: relative; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; background-image: radial-gradient(circle closest-side at center, rgb(217, 220, 222) 0%, rgb(190, 194, 199) 100%); height: 135px; background-image: url('../images/hodl-bg1.png'); background-repeat: no-repeat; background-position: center center; }

.undericon { background-color: #ffffff80; border-radius: 10px; margin: 10px auto; width: 115px; height: 115px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); }

.sld-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease-in-out; }

.sld-body { padding: 15px 30px 20px; flex: 1; display: flex; flex-direction: column; text-align: center; font-family: "Oswald"; font-size: 1.0000rem; color: #555; }

.sld-title-link { color: var(--HE_COLOR_ADEF); text-decoration: none; display: inline; border-bottom: 1px solid var(--HE_COLOR_ADEF); transition: color 0.25s ease, border-color 0.25s ease; }

.sld-card h3 { font-size: 1.2500rem; margin: 0 0 10px 0; line-height: 1.35; text-transform: uppercase; font-weight: 500; }

.sld-title-link:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.sld-desc { color: #666; margin: 0; }

.sld-desc strong { color: #444; font-weight: 500; }

.sld-card:hover .sld-img-box { transform: translateY(-4px); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); }

.sld-arrow { position: absolute; top: 35%; width: 80px; height: 40px; background-color: #9ea4af; border: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--HE_COLOR_WHI); font-size: 1.0000rem; cursor: pointer; z-index: 10; box-shadow: inset 0px 2px 0 0 rgba( 130, 137, 151, 1),0px 5px 10px 0px rgba(0, 0, 0, 0.1); transition: background-color 0.25s, color 0.25s, transform 0.25s; outline: none; padding: 0; }

.sld-arrow:hover { background-color: #828997; color: var(--HE_COLOR_WHI); }

.sld-arrow-left { left: -15px; }

.sld-arrow-right { right: -15px; }

.sld-hint { background-image: url('../images/hodl-slider-hint.png'); background-repeat: no-repeat; background-position: center center; width: 86px; height: 28px; margin: -5px auto 0; animation: moveSide 2s ease-in-out infinite alternate; }

@keyframes moveSide {
    0% {
        transform: translateX(0); /* Початкова позиція */
    }
    100% {
        transform: translateX(10px); /* Зсув вправо на 10 пікселів */
    }
}

@media screen and (max-width: 1120px) {  
  .sld-card { flex: 0 0 calc((100% - 60px) / 3) !important; }
  
  .sld-arrow { display: none; }
}

@media screen and (max-width: 768px) {  
  .sld-card { flex: 0 0 calc((100% - 30px) / 2) !important; }
}

@media screen and (max-width: 480px) {  
  .sld-card { flex: 0 0 82% !important; }
}

/*============================================================================
  ПРОГРАМНІ ГАМАНЦІ - МАНУАЛИ - СЛАЙДЕР /END/
============================================================================*/
/*============================================================================
  АПАРАТНІ ГАМАНЦІ ВСТУП + ОГЛЯДИ /START/
============================================================================*/

.main_hardwallets_section_bg { background-color: #e1e1e3; background-image: linear-gradient(180deg, #c0bfc6 0%, #e1e1e3 55%, #c0bfc6 100%); }

.main_hardwallets_intro_and_reviews { display: flex; gap: 50px; justify-content: space-between; }

.main_hardwallets_intro { display: flex; gap: 20px; flex-direction: column; min-width: 630px; max-width: 630px; background-color: #9ea4af; border-radius: 30px; padding: 30px 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); scroll-margin-top: 140px; }

.complex_link_icon_hw { background-image: url('../images/icon-hw-all.png'); background-repeat: no-repeat; width: 48px; height: 48px;}

.complex_link_icon_ledger { background-image: url('../images/icon-hw-ledger.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_trezor { background-image: url('../images/icon-hw-trezor.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_keystone { background-image: url('../images/icon-hw-keystone.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_onekey { background-image: url('../images/icon-hw-onekey.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.complex_link_icon_safepal { background-image: url('../images/icon-hw-safepal.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.main_hardwallets_reviews { background-color: #e8e7ed; background-image: url('../images/hodl-hardwallets.png'); background-repeat: no-repeat; background-position: right center; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; flex: 1 0 auto; gap: 40px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); }

.main_hardwallets_headers { display: flex; flex-direction: column; gap: 10px; }

.main_hardwallets_headers h2 { text-align: center; color: #5b667a; font-size: 1.5000rem; font-weight: 500; text-transform: uppercase; }

.main_hardwallets_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_hardwallets_reviews ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }

@media screen and (max-width: 1535px) {
  .main_hardwallets_intro_and_reviews { flex-direction: column; }
  
  .main_hardwallets_intro { min-width: 100%; }
}

@media screen and (max-width: 639px) {
  .main_hardwallets_reviews { background-image: none!important; }
  
  .main_hardwallets_reviews ul { margin: 0 auto; }
}

/*============================================================================
  АПАРАТНІ ГАМАНЦІ ВСТУП + ОГЛЯДИ /END/
============================================================================*/
/*============================================================================
  АПАРАТНІ ГАМАНЦІ ПЕРЕВАГИ ТА НЕДОЛІКИ /START/
============================================================================*/

.main_hardwallets_pros_and_cons { display: flex; gap: 50px; justify-content: space-between; }

.main_hardwallets_pros { min-width: 680px; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 25px; }

.main_hardwallets_cons { min-width: 680px; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 25px; }

.main_hardwallets_pros_headers { display: flex; flex-direction: column; gap: 10px; }

.main_hardwallets_pros_headers h2 { text-align: center; color: #555; font-size: 1.2500rem; font-weight: 500; text-transform: uppercase; }

.main_hardwallets_pros_headers h2 span { color: var(--HE_COLOR_GRE); }

.main_hardwallets_pros_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_hardwallets_pros_headers div { height: 10px; border-bottom: 1px solid var(--HE_COLOR_WHI); }

.main_hardwallets_pros ul { background-image: url('../images/hodl-pros.png'); background-repeat: no-repeat; background-position: center center; list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; font-size: 0.9375rem; color: #666; }

.main_hardwallets_pros ul li { background-image: linear-gradient(135deg, rgba(215, 220, 227, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%); border-radius: 10px; padding: 12px 10px 12px 25px; border-left: 5px solid var(--HE_COLOR_GRE); box-sizing: border-box; box-shadow: 0px 5px 20px rgba(0,0,0,0.1); line-height: 1.4; min-height: 92px; }

.main_hardwallets_pros ul li h4 { font-size: 1.0000rem; color: #555; text-transform: uppercase; margin-bottom: 5px; }

.main_hardwallets_cons_headers { display: flex; flex-direction: column; gap: 10px; }

.main_hardwallets_cons_headers h2 { text-align: center; color: #555; font-size: 1.2500rem; font-weight: 500; text-transform: uppercase; }

.main_hardwallets_cons_headers h2 span { color: var(--HE_COLOR_RED); }

.main_hardwallets_cons_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_hardwallets_cons_headers div { height: 10px; border-bottom: 1px solid var(--HE_COLOR_WHI); }

.main_hardwallets_cons ul { background-image: url('../images/hodl-cons.png'); background-repeat: no-repeat; background-position: center center; list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; font-size: 0.9375rem; color: #666; }

.main_hardwallets_cons ul li { background-image: linear-gradient(135deg, rgba(215, 220, 227, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%); border-radius: 10px; padding: 12px 10px 12px 25px; border-left: 5px solid var(--HE_COLOR_RED); box-sizing: border-box; box-shadow: 0px 5px 20px rgba(0,0,0,0.1); line-height: 1.4; min-height: 92px; }

.main_hardwallets_cons ul li h4 { font-size: 1.0000rem; color: #555; text-transform: uppercase; margin-bottom: 5px; }

@media screen and (max-width: 1535px) {
  .main_hardwallets_pros_and_cons { flex-direction: column; }
  
  .main_hardwallets_pros { min-width: 100%; }

  .main_hardwallets_cons { min-width: 100%; }
}

/*============================================================================
  АПАРАТНІ ГАМАНЦІ ПЕРЕВАГИ ТА НЕДОЛІКИ /END/
============================================================================*/
/*============================================================================
  ПОРІВНЯЛЬНА ТАБЛИЦЯ МІСЦЬ ЗБЕРІГАННЯ /START/
============================================================================*/

.main_wallets_comparison { background-color: #e8e7ed; background-image: url('../images/hodl-compare.png'); background-repeat: no-repeat; background-position: left center; border-radius: 30px; padding: 30px; margin-bottom: 50px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 25px; }

.main_wallets_comparison h2 { text-align: center; color: #5b667a; font-size: 1.5000rem; font-weight: 500; text-transform: uppercase; padding-left: 350px; }

.main_wallets_comparison_wrapper { padding-left: 350px; }

/* Контейнер для адаптивності (вмикає горизонтальну прокрутку на смартфонах) */

.table-container { width: 100%; overflow-x: auto; border-radius: 20px; box-shadow: 0px 5px 20px rgba(0,0,0,0.1); -webkit-overflow-scrolling: touch; /* Плавний скролл на iOS */ }

.crypto-table { width: 100%; font-family: "Oswald"; font-size: 1.1250rem; text-align: center; border-collapse: separate; border-spacing: 1px 1px; min-width: 750px; /* Захищає таблицю від занадто сильного стискання */ }

/* Шапка таблиці */

.crypto-table th { background-color: #525e73; height: 70px; color: var(--HE_COLOR_WHI); font-weight: 500; padding: 16px 20px; text-transform: uppercase; font-size: 1.1250rem; letter-spacing: 0.5px; border: none; }

.crypto-table td { padding: 16px 20px; color: #4a515e; border: none; vertical-align: middle; }

/* Перша колонка (характеристики) — ліве вирівнювання та окремий фон */

.crypto-table td.feature-title { text-align: left; padding-left: 30px; background-color: #8c97a8; color: var(--HE_COLOR_WHI); font-weight: 400; width: 25%; }

/* Чергування кольорів рядків (зебра) для колонок з даними */

.crypto-table tbody tr:nth-child(odd) td:not(.feature-title) { background-color: rgba( 82, 94, 115, 0.15); color: #555; }

.crypto-table tbody tr:nth-child(even) td:not(.feature-title) { background-color: rgba( 82, 94, 115, 0.5); color: var(--HE_COLOR_WHI); }

.backdark { background-color: rgba( 120, 129, 145, 1)!important; }

.price-cell { white-space: nowrap; } /* Окремий стиль для ціни, щоб не злітали символи */

.crypto-table tr:first-child th:first-child { border-top-left-radius: 20px; }

.crypto-table tr:first-child th:last-child { border-top-right-radius: 20px; }

.crypto-table tr:last-child td:first-child { border-bottom-left-radius: 20px; }

.crypto-table tr:last-child td:last-child { border-bottom-right-radius: 20px; }

@media screen and (max-width: 1535px) {  
  .main_wallets_comparison_wrapper { padding-left: 250px; }  
}

@media screen and (max-width: 1279px) {  
  .main_wallets_comparison h2 { text-align: center; padding-left: 0px; }
  
  .main_wallets_comparison { background-image: none; }
  
  .main_wallets_comparison_wrapper { padding-left: 0px; }  
}

/*============================================================================
  ПОРІВНЯЛЬНА ТАБЛИЦЯ МІСЦЬ ЗБЕРІГАННЯ /END/
============================================================================*/
/*============================================================================
  БЛОК ОБРАНИХ СТАТТЕЙ /START/
============================================================================*/

.main_articles_section_bg { background-color: #e1e1e3; background-image: linear-gradient(180deg, #e1e1e3 0%, #c0bfc6 55%, #e1e1e3 100%); }

.main_featured_articles { background-color: #e8e7ed; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; gap: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); margin-bottom: 50px; }

.main_featured_articles h2 { text-align: center; color: #5b667a; font-size: 1.5000rem; font-weight: 500; text-transform: uppercase; }

/**/

.art-journal-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 50px; align-items: stretch; }

.art-main-col { width: 100%; }

.art-focus-card { display: flex; flex-direction: column; height: 100%; font-family: "Oswald"; }

.art-img-link { display: block; width: 100%; }

.art-focus-img-box { width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; box-shadow: none; background-color: #f1f1f1; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; }

.art-focus-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.art-focus-card:hover .art-focus-img-box { transform: translateY(-4px); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); }

.art-card-body { background-color: #f0f0f4cc; margin-top: 20px; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); }

.art-meta { font-family: "Oswald"; font-size: 0.8750rem; color: #9f9da7; display: block; margin-bottom: 8px; }

.art-meta i { position: relative; top: -1px; font-size: 0.8750rem; margin: 0 5px 0px 0; }

.art-title-link { color: var(--HE_COLOR_ADEF); text-decoration: none; display: inline; border-bottom: 1px solid var(--HE_COLOR_ADEF); transition: color 0.25s ease, border-color 0.25s ease; }

.art-focus-card h3 { font-size: 1.3750rem; margin: 0 0 12px 0; }

.art-title-link:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.art-excerpt { color: #555; margin: 0; hyphens: auto; }

.art-side-col { width: 100%; background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); }

.art-scroll-container { width: 100%; height: 475px; overflow-y: auto; padding-right: 15px; box-sizing: border-box; }

.art-scroll-container::-webkit-scrollbar { width: 4px; }

.art-scroll-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }

.art-scroll-container::-webkit-scrollbar-thumb { background: #f09d3a; border-radius: 10px; }

.art-scroll-container::-webkit-scrollbar-thumb:hover { background: #db7c0a; }

.art-side-item { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 0px solid var(--HE_COLOR_WHI); transition: background-color 0.25s ease; }

.art-side-item:first-child { padding-top: 0; }

.art-side-item:last-child { border-bottom: none; }

.art-side-content { flex: 1; }

.art-side-item h4 { font-size: 1.1250rem; margin: 0; line-height: 1.35; }

@media screen and (max-width: 992px) {
  .art-journal-grid { grid-template-columns: 1fr; gap: 40px; }
  
  .art-scroll-container { height: auto; overflow-y: visible; padding-right: 0; }
}

@media screen and (max-width: 550px) {
  .art-focus-card h3 { font-size: 1.3rem; }
  
  .art-excerpt { font-size: 0.9rem; }
  
  .art-side-item h4 { font-size: 0.95rem; }
}

/*============================================================================
  БЛОК ОБРАНИХ СТАТТЕЙ /END/
============================================================================*/
/*============================================================================
  КЛЮЧІ БЕЗПЕКИ ТА МНЕМОНІЧНІ ПЛАНШЕТИ /START/
============================================================================*/

.main_seckeys_and_cryptosteels_bg { background-color: #e1e1e3; background-image: linear-gradient(180deg, #c0bfc6 0%, #e1e1e3 55%, #c0bfc6 100%); }

.main_seckeys_and_cryptosteels { background-color: #e8e7ed; background-image: url('../images/hodl-seckeys-and-cryptosteels.png'); background-repeat: no-repeat; background-position: center center; border-radius: 30px; padding: 30px; margin-bottom: 50px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 30px; }

.main_seckeys_and_cryptosteels_headers { display: flex; flex-direction: column; gap: 10px; }

.main_seckeys_and_cryptosteels_headers h2 { text-align: center; color: #5b667a; font-size: 1.5000rem; font-weight: 500; text-transform: uppercase; }

.main_seckeys_and_cryptosteels_headers h3 { text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; }

.main_seckeys_and_cryptosteels_wrapper { display: flex; justify-content: space-between; gap: 210px; }

.main_seckeys { background-color: #f0f0f4cc; display: flex; flex-direction: column; gap: 25px; min-width: 570px; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); border: 1px solid var(--HE_COLOR_WHI); }

.main_seckeys_headers { display: flex; gap: 20px; align-items: center; }

.seckeys_txt { color: #5b667a; font-family: "Oswald"; font-size: 1.2500rem; font-weight: 500; text-transform: uppercase; line-height: 0.85; flex: 1 0 auto; }

.seckeys_txt span { color: #777; font-size: 0.6875rem; font-weight: 400; }

.main_icon_seckeys { background-image: url('../images/icon-seckey-all.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.main_seckeys p { margin: 0; padding: 0; font-size: 0.9375rem; hyphens: auto; }

.main_seckeys ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 0.9375rem; }

.main_seckeys ul li::before { content: "🗹"; margin-right: 10px; color: #159690; font-weight: 500; }

.main_cryptosteels { background-color: #f0f0f4cc; display: flex; flex-direction: column; gap: 25px; min-width: 570px; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0,0,0,0.1); border: 1px solid var(--HE_COLOR_WHI); }

.main_cryptosteels_headers { display: flex; gap: 20px; align-items: center; }

.cryptosteels_txt { color: #5b667a; font-family: "Oswald"; font-size: 1.2500rem; font-weight: 500; text-transform: uppercase; line-height: 0.85; flex: 1 0 auto; }

.cryptosteels_txt span { color: #777; font-size: 0.6875rem; font-weight: 400; }

.main_icon_cryptosteels { background-image: url('../images/icon-cryptosteel-all.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.main_cryptosteels p { margin: 0; padding: 0; font-size: 0.9375rem; hyphens: auto; }

.main_cryptosteels ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 0.9375rem; }

.main_cryptosteels ul li::before { content: "🗹"; margin-right: 10px; color: #159690; font-weight: 500; }

.main_line_separator { border-bottom: 1px solid #cecfd5; }

@media screen and (max-width: 1535px) {  
  .main_seckeys_and_cryptosteels_wrapper { gap: 30px; }
  
  .main_seckeys { flex: 1; }
  
  .main_cryptosteels { flex: 1; }
}

@media screen and (max-width: 1279px) {  
  .main_seckeys_and_cryptosteels { background-image: none; }
  
  .main_seckeys_and_cryptosteels_wrapper { flex-direction: column; }
  
  .main_seckeys { flex: 1; min-width: 100%; }
  
  .main_cryptosteels { flex: 1; min-width: 100%; }
}

@media screen and (max-width: 639px) {
  .main_icon_seckeys { display: none; }
  
  .main_icon_cryptosteels { display: none; }
}

/*============================================================================
  КЛЮЧІ БЕЗПЕКИ ТА МНЕМОНІЧНІ ПЛАНШЕТИ /END/
============================================================================*/



.content_section_bg { background-color: #e1e1e3; background-image: linear-gradient(180deg, #c0bfc6 0%, #e1e1e3 55%, #c0bfc6 100%); }


/*============================================================================
  ПРОФІЛЬ КОРИСТУВАЧА /START/
============================================================================*/

/*.upr-page-container { width: 100%; margin: 0px auto 40px; box-sizing: border-box; }

.upr-page-header { text-align: center; margin-bottom: 50px; }

.upr-page-header h1 { font-size: var(--HE_FS_H1); letter-spacing: 0.03rem; margin: 0 0 12px 0; }

.upr-header-separator { max-width: 100%; display: block; margin: 0 auto; height: 9px; background-image: url(../images/separator-01.png); background-position: center; background-repeat: no-repeat; background-size: auto 9px; }

.upr-main-layout { display: grid; grid-template-columns: 2.1fr 0.9fr; gap: 60px; align-items: flex-start; }*/

/* ЧАСТИНА 1 — КАРТКА ПРОФІЛЮ */

/*.upr-card-wrapper, old*/
.module_card_wrapper { /*background-color: var(--HE_COLOR_WHI); border: 1px solid #e2e2e2; border-radius: 12px; padding: 40px 40px 20px; box-shadow: 0px 8px 0px 0px rgba(226, 226, 226, 1); box-sizing: border-box;*/

background-color: #e8e7ed; border-radius: 30px; padding: 30px; /*margin-bottom: 50px;*/ box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 30px; /*margin-top: 50px;*/ }

/*.upr-user-hero, old*/
.module_user_hero { display: flex; gap: 30px; align-items: center; padding-bottom: 35px; border-bottom: 1px solid #e2e2e2; /*margin-bottom: 35px;*/ background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

/*.upr-avatar-zone, old*/
.module_user_avatar_zone { position: relative; width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--HE_COLOR_WHI); box-shadow: 0px 4px 0px 0px rgba(226, 226, 226, 1), 0px 0px 0px 1px #e2e2e2; background-color: #f1f1f1; flex-shrink: 0; }

/*.upr-avatar-zone img, old*/
.module_user_avatar_zone img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/*.upr-status-dot, old*/
.module_user_status_dot { position: absolute; bottom: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--HE_COLOR_WHI); z-index: 3; }

/*.upr-online, old*/
.module_user_online { background-color: #38a169; box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.4); animation: uprPulse 2s infinite; }

/*.upr-offline, old*/
.module_user_offline { background-color: #d93838; box-shadow: 0 0 0 0 rgba(127, 56, 56, 0.4); }

/*.upr-hero-text, old*/
.module_user_hero_text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/*.upr-hero-text h2, old*/
.module_user_hero_text h2 { font-size: var(--HE_FS_H2); font-size: 1.85rem; margin: 0; }

/*.upr-name-row, old*/
.module_user_name_row { display: flex; align-items: baseline; gap: 12px; }

/*.upr-status-text, old*/
.module_user_status_text { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_SMALL); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02rem; }

.user_online { color: #38a169!important; }

.user_offline { color: #d93838!important; }

/*.upr-user-group, old*/
.module_user_group { font-size: var(--HE_FS_BODY); color: #555; margin: 0 0 8px 0; display: flex; align-items: center; gap: 6px; }

/*.upr-user-group i, old*/
.module_user_group i { position: relative; color: #525e73; top: 2px; font-size: 1.2500rem; }
/*
.upr-msg-btn { font-size: var(--HE_FS_H5); color: var(--HE_COLOR_WHI); background-color: var(--HE_MAIN_COLOR, #159690); border: 1px solid var(--HE_MAIN_COLOR, #159690); padding: 10px 25px; border-radius: 8px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.03rem; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0px 4px 0px 0px #0e6662; transition: background-color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s; outline: none; }

.upr-msg-btn:hover { background-color: #2eb8b2; border-color: #2eb8b2; }

.upr-msg-btn:active { transform: translateY(2px); box-shadow: 0px 2px 0px 0px #0e6662; }
*/
/*.upr-data-grid { display: flex; flex-direction: column; gap: 18px; margin-bottom: 40px; }*/

/*.upr-data-grid, old*/
.module_user_data_grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto); gap: 20px; background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

/*.upr-data-row, old*/
.module_user_data_row { display: grid; grid-template-columns: 0.9fr 2.1fr; align-items: center; padding-bottom: 14px; border-bottom: 1px dashed #d1d1d1; }

/*.upr-data-row:last-of-type, old*/
.module_user_data_row:is(:last-of-type, :nth-last-of-type(2)) { border-bottom: none; padding-bottom: 0; } /* прибираємо оформлення з останнього та передостаннього елемента */

/*.upr-data-label, old*/
.module_user_data_label { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_BODY); color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.02rem; }

/*.upr-data-value, old*/
.module_user_data_value { font-size: var(--HE_FS_BODY); }

/*.upr-data-value i, old*/
.module_user_data_value i { color: #525e73; margin-right: 5px; }

/*.upr-value-with-link, old*/
.module_user_value_with_link { display: flex; align-items: center; gap: 15px; }
/*
.upr-count-num { font-size: var(--HE_FS_H3); }
*/
/*.upr-inner-link, .upr-value-with-link a, old*/
.module_user_value_with_link a { font-size: 1rem; color: var(--HE_COLOR_ADEF); text-decoration: none; border-bottom: 1px dashed #c0bfc7; padding-bottom: 1px !important; transition: color 0.25s, border-color 0.25s; }

/*.upr-inner-link:hover, .upr-value-with-link a:hover, old*/
.module_user_value_with_link a:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

/*.upr-stars-box { display: flex; gap: 6px; align-items: center; }

.upr-stars-box .ph { font-size: 1.35rem !important; line-height: 1; }

.upr-star-active { color: #ffba00 !important; }

.upr-star-inactive { color: #e2e2e2 !important; }

.upr-stars-box i { font-size: 1.25rem !important; }*/

/*.upr-rating-badge, old*/
.module_user_rating { font-size: 0.8750rem; display: inline-block; /*color: #38a169; background-color: var(--HE_COLOR_WHI); padding: 5px 10px; border-radius: 6px; border: 1px solid #c6f6d5; font-weight: 600;*/ }

/*.upr-about-box, old*/
.module_user_about_box { background-color: #f0f0f4cc; /*border: 1px solid #e2e2e2;*/ border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); box-sizing: border-box; /*margin-bottom: 22px;*/ border: 1px solid var(--HE_COLOR_WHI); }

/*.upr-about-title, old*/
.module_user_about_title { font-size: 1.2500rem; text-transform: uppercase; margin: 0 0 12px 0; display: flex; align-items: center; gap: 10px; }

/*.upr-about-title i, old*/
.module_user_about_title i { position: relative; color: #525e73; top: 2px; }

/*.upr-about-text, old*/
.module_user_about_text { color: #555; margin: 0; }

@keyframes uprPulse {  
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.5); }
  
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(56, 161, 105, 0); }
  
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 161, 105, 0); }
}

/* ЧАСТИНА 2 — БЛОК РЕДАГУВАННЯ */

/*.ued-card-wrapper { background-color: var(--HE_COLOR_WHI); border: 1px solid #e2e2e2; border-radius: 12px; padding: 40px; box-shadow: 0px 8px 0px 0px rgba(226, 226, 226, 1); box-sizing: border-box; margin-top: 40px; }*/

/*.ued-card-header, old*/
.module_user_edit_header { /*margin-bottom: 35px;*/display: flex; flex-direction: column; gap: 10px; }

/*.ued-card-title, old*/
.module_user_edit_title { /*font-size: var(--HE_FS_H2); text-transform: uppercase; margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px;*/

font-size: 1.5000rem; color: #5b667a; text-transform: uppercase; text-align: center; font-weight: 500; }
/*
.ued-card-title i { color: var(--HE_MAIN_COLOR, #159690); }
*/
/*.ued-form { display: flex; flex-direction: column; gap: 24px; }*/

.module_subtitle { font-family: var(--HE_FONT_HEADINGS); text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; margin: 0; padding: 0; }

.module_subtitle a.pm_list { color: var(--HE_COLOR_ADEF); text-decoration: none; position: relative; display: inline-block; transition: color 0.25s ease; }

.module_subtitle a.pm_list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed var(--HE_COLOR_ADEF); transition: border-color 0.25s ease; }

.module_subtitle a.pm_list:hover { color: var(--HE_COLOR_AHOV)!important; }

.module_subtitle a.pm_list:hover::after { border-color: transparent; }

.module_form_wrapper { display: flex; flex-direction: column; gap: 30px; /*align-items: center;*/ /*margin-bottom: 35px;*/ background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

/*.ued-form-row, old*/
.module_user_edit_form_row { display: flex; gap: 20px; }

.module_form_buttons_row { display: flex; flex: 1; gap: 20px; }

/*.ued-row-three old*/ /*.ued-form-group old*/.row_three .module_user_edit_form_group { flex: 1; }

/*.ued-form-group, old*/
.module_user_edit_form_group { display: flex; flex-direction: column; gap: 5px; flex: 1; /*margin-bottom: 22px;*/ }

/*.ued-label, old*/
.module_form_field_label { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_BODY); color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.02rem; }

.module_form_field_label i { margin-right: 10px; color: #a55f65; position: relative; top: -2px; }

.module_form_question_label { font-family: var(--HE_FONT_HEADINGS); color: #555; display: block; margin-bottom: 10px; }

.secure-question { color: #589d89; font-weight: 500; text-transform: none!important; }

.captcha-input { max-width: 300px; }

.captcha_layout { display: flex; gap: 20px; align-items: center; }

@media screen and (max-width: 639px) {
  .module_form_buttons_row { flex-direction: column; }  
  
  .captcha_layout { flex-direction: column; }
}

.captcha_sub { background-color: #ffffff80; padding: 20px 30px; border-radius: 8px; margin: 0; }

/*.ued-input-icon-wrapper, old*/
.module_input_icon_wrapper { position: relative; width: 100%; }

.module_input_icon_wrapper select { width: 100%; background-color: #fcfcfc; border: 1px solid #e2e2e2; border-radius: 8px; padding: 13px 15px 12px 45px; font-size: 0.8750rem; color: #666; outline: none; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.03); transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #999999 50%), linear-gradient(135deg, #999999 50%, transparent 50%); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; padding-right: 40px; }

.module_input_icon_wrapper select option {
    padding: 5px 0 5px 10px;
}

.module_input_icon_wrapper select:focus { border-color: #bebdc1; background-color: var(--HE_COLOR_WHI); /*box-shadow: 0px 0px 0px 3px rgba(21, 150, 144, 0.08);*/ background-image: linear-gradient(45deg, transparent 50%, #5b667a 50%), linear-gradient(135deg, #5b667a 50%, transparent 50%); }

/*.ued-input-icon-wrapper i, old*/
.module_input_icon_wrapper i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: #999; pointer-events: none; z-index: 2; transition: color 0.25s ease; }

/*.ued-textarea-icon-wrapper i, old*/
.textarea_icon_wrapper i { top: 24px; }

/*.ued-input, old*/
.module_form_input,
/*.ued-textarea, old*/
.module_form_textarea,
.ued-select,
.timezoneselect,
.twofactorselect { width: 100%; background-color: #fcfcfc; border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 15px 12px 45px; font-size: 0.8750rem; color: #666; outline: none; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.03); transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; appearance: none; }

/*.ued-textarea old*/.module_form_textarea { resize: vertical; }

.ued-select,
.timezoneselect,
.twofactorselect { width: 100%; background-color: #fcfcfc; border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 15px 12px 45px; font-size: 0.8750rem; color: #666; outline: none; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.03); transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #999999 50%), linear-gradient(135deg, #999999 50%, transparent 50%); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; padding-right: 40px; }

.ued-select:focus, .timezoneselect:focus, .twofactorselect:focus { border-color: #bebdc1; background-color: var(--HE_COLOR_WHI); /*box-shadow: 0px 0px 0px 3px rgba(21, 150, 144, 0.08);*/ background-image: linear-gradient(45deg, transparent 50%, #5b667a 50%), linear-gradient(135deg, #5b667a 50%, transparent 50%); }

/*.ued-input:focus, old*/
.module_form_input:focus,
/*.ued-textarea:focus, old*/
.module_form_textarea:focus,
.ued-select:focus,
.timezoneselect:focus,
.twofactorselect:focus { border-color: #bebdc1; background-color: var(--HE_COLOR_WHI); /*box-shadow: 0px 0px 0px 3px rgba(21, 150, 144, 0.08);*/ }

/*.ued-input-icon-wrapper:focus-within i, old*/
.module_input_icon_wrapper:focus-within i { color: #bebdc1; }

/*.ued-field-hint, old*/
.module_form_field_hint { font-size: 0.8750rem; color: #999; margin-top: 0px; }

/*.ued-field-hint i, old*/
.module_form_field_hint i { margin: 0 5px 3px 15px; }

/*.ued-checkbox-group { display: flex; flex-direction: column; gap: 12px; }*/

/*.ued-checkbox-label { display: inline-flex; align-items: center; gap: 12px; font-size: var(--HE_FS_BODY); color: #555; cursor: pointer; line-height: 1.4; }*/

/*.ued-checkbox-label input { accent-color: var(--HE_MAIN_COLOR, #159690); width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; transition: transform 0.25s; }*/

/*.ued-checkbox-label input:active { transform: scale(0.85); }*/

/*.ued-checkbox-text { user-select: none; }*/
/*
.ued-checkbox-label input:has(+ .ued-text-danger) { accent-color: #d93838; }

.ued-text-danger { color: #d93838; font-weight: 500; }
*/
/*
.ued-text-warning { color: #dd6b20; font-weight: 500; }
*/

.form_reg_username_layout { display: flex; gap: 20px; align-items: center; width: 100%; }

@media screen and (max-width: 639px) {
  .form_reg_username_layout { flex-direction: column; }
}

.form_card_sub { background-color: #ffffff80; padding: 20px 30px; border-radius: 8px; margin: 0; font-size: 0.8750rem; color: #555; hyphens: auto; }

.form_card_sub a { color: var(--HE_COLOR_ADEF); text-decoration: none!important; position: relative; display: inline-block; transition: color 0.25s ease; }

.form_card_sub a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 1px dashed var(--HE_COLOR_ADEF); transition: border-color 0.25s ease, border-bottom-style 0.25s; }

.form_card_sub a:hover { color: var(--HE_COLOR_AHOV); }

.form_card_sub a:hover::after { border-bottom-color: transparent; }


/*.ued-file-wrapper input[type="file"], old*/
.module_form_file_wrapper input[type="file"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

/*.ued-file-custom, old*/
.module_form_file_custom { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; background-color: #fcfcfc; border: 2px dashed #e2e2e2; border-radius: 8px; padding: 25px 20px; /*box-shadow: 0px 4px 0px 0px rgba(226, 226, 226, 1);*/ cursor: pointer; transition: all 0.25s; box-sizing: border-box; }

/*.ued-file-custom i, old*/
.module_form_file_custom i { font-size: 1.8750rem; color: #999; margin-bottom: 6px; transition: all 0.25s; }

/*.ued-file-custom:hover, old*/
.module_form_file_custom:hover { background-color: var(--HE_COLOR_WHI); border-color: var(--HE_MAIN_COLOR, #159690); }

/*.ued-file-custom:hover i, old*/
.module_form_file_custom:hover i { color: var(--HE_MAIN_COLOR, #159690); transform: translateY(-2px); }

/*.ued-file-custom:active, old*/
.module_form_file_custom:active { transform: translateY(3px); box-shadow: 0px 1px 0px 0px rgba(226, 226, 226, 1); }

/*.ued-file-main-text, old*/
.module_form_file_main_text { font-family: var(--HE_FONT_HEADINGS); font-size: 1.2500rem; font-weight: 500; color: #666; }

/*.ued-file-hint-text, old*/
.module_form_file_hint_text { font-size: var(--HE_FS_BODY); color: #777; margin-top: 5px; }

/*.ued-ignore-block, old*/
.module_ignore_block { display: grid; grid-template-columns: 0.9fr 1.9fr; align-items: flex-start; gap: 20px; /*padding-bottom: 15px; border-bottom: 1px dashed #e2e2e2; margin-bottom: 22px;*/ }

/*.ued-ignore-title, old*/
.module_ignore_title { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_BODY); color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.02rem; padding-top: 5px; }

/*.ued-ignore-list-box, old*/
.module_ignore_list { display: flex; flex-wrap: wrap; gap: 10px; background-color: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 15px; box-sizing: border-box; }

/*.ued-ignore-tag { font-size: 0.85rem; font-weight: 500; color: #666; background-color: var(--HE_COLOR_WHI); border: 1px solid #e2e2e2; padding: 4px 10px; border-radius: 6px; box-shadow: 0px 2px 0px 0px rgba(226, 226, 226, 1); user-select: none; }*/

/*.ued-fieldset, old*/
.module_form_fieldset { border: 1px solid #d5d2d2; border-radius: 8px; padding: 10px 30px; box-sizing: border-box; /*margin: 10px 0;*/ /*box-shadow: 0px 5px 0px 0px rgba(226, 226, 226, 0.4);*/ /*margin-bottom: 22px;*/ }

/*.ued-fieldset-desc, old*/
.module_form_fieldset_descr { font-size: 0.9375rem; color: #777; margin: 0 0 20px 0; }

/*.ued-legend, old*/
.module_form_fieldset_legend { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_BODY); color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.02rem; padding: 0 10px; display: flex; align-items: center; gap: 10px; }

/*.ued-legend i, old*/
.module_form_fieldset_legend i { color: #525e73; }

/*.ued-social-bind-row, old*/
.module_social_bind_row { display: flex; gap: 15px; /*flex-wrap: wrap;*/ margin-bottom: 20px; }

/*
.ued-bind-btn { font-size: var(--HE_FS_H5); color: var(--HE_COLOR_WHI); text-decoration: none; padding: 10px 20px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s; }

.ued-bind-btn:active { transform: translateY(3px); box-shadow: 0px 1px 0px 0px transparent; }
*/

/*
.btn-tg { background-color: #0088cc; box-shadow: 0px 4px 0px 0px #005580; }

.btn-tg:hover { background-color: #229fd9; }
*/
/*
.btn-x { background-color: #111111; box-shadow: 0px 4px 0px 0px #000000; border: 1px solid #222; }

.btn-x:hover { background-color: #222222; }
*/
/*
.btn-google { background-color: #ea4335; box-shadow: 0px 4px 0px 0px #b32417; }

.btn-google:hover { background-color: #ef5f53; }
*/
/*.ued-connected-list, old*/
.module_social_connected_list { display: flex; flex-direction: column; gap: 15px; }

/*.ued-conn-item, old*/
.module_social_connected_item { display: flex; flex-wrap: wrap; gap: 10px; background-color: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 15px; box-sizing: border-box; }

/*.ued-conn-left { display: flex; align-items: center; gap: 10px; color: #0088cc; font-size: 1.05rem; }*/

/*.ued-conn-left i { font-size: 1.3rem; }*/

/*.ued-conn-name { color: #4a5568; }*/

/*.ued-conn-name strong { color: #1a202c; }*/

/*.ued-disconnect-btn { font-size: var(--HE_FS_H6); color: #718096; background-color: var(--HE_COLOR_WHI); border: 1px solid #cbd5e0; padding: 6px 15px; border-radius: 6px; cursor: pointer; box-shadow: 0px 3px 0px 0px #edf2f7; transition: all 0.25s; }*/

/*.ued-disconnect-btn:hover { color: #d93838; border-color: #f5c2c2; background-color: #fffafb; }*/

/*.ued-disconnect-btn:active { transform: translateY(2px); box-shadow: 0px 1px 0px 0px #edf2f7; }*/

/*.ued-no-conn-text, old*/
.module_social_connected_text { font-size: 0.8750rem; color: #999; margin: 0; }

/*.ued-final-checkboxes { display: flex; flex-direction: column; gap: 14px; }*/

/*.ued-submit-wrapper, old*/
.module_form_submit_wrapper { /*margin-top: 10px; border-top: 1px solid #e2e2e2; padding-top: 25px;*/ display: flex; gap: 20px; }
/*
.ued-save-btn { font-size: 1.15rem; color: var(--HE_COLOR_WHI); background-color: var(--HE_MAIN_COLOR, #159690); border: 1px solid var(--HE_MAIN_COLOR, #159690); padding: 12px 45px; border-radius: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.03rem; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0px 4px 0px 0px #0e6662; transition: all 0.25s; outline: none; }

.ued-save-btn i { font-size: 1.25rem; }

.ued-save-btn:hover { background-color: #2eb8b2; border-color: #2eb8b2; }

.ued-save-btn:active { transform: translateY(3px); box-shadow: 0px 1px 0px 0px #0e6662; }
*/



/*============================================================================
  ІНТЕГРАЦІЯ ТУМБЛЕРІВ ВСЕРЕДИНУ ФОРМИ РЕДАГУВАННЯ
============================================================================*/

/*.ued-toggle-row, old*/
.module_form_toggle_row { background-color: #ffffff80; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 20px 30px; border-radius: 8px; /*border-bottom: 1px dashed #e2e2e2;*/ /*margin-bottom: 22px;*/ }

/*.ued-final-toggles-box, old*/
.module_form_toggle_set { display: flex; flex-direction: column; gap: 5px; }

/*.ued-final-toggles-box old*/ /*.ued-toggle-row:last-child old*/.module_form_toggle_set .module_form_toggle_row:last-child { border-bottom: none !important; padding-bottom: 0 !important; }

/*.ued-toggle-info, old*/
.module_form_toggle_info { display: flex; flex-direction: column; gap: 4px; flex: 1; }

/*.ued-toggle-title, old*/
.module_form_toggle_title { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_BODY); color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.02rem; }

/*.ued-toggle-desc, old*/
.module_form_toggle_descr { font-size: 0.9375rem; color: #555; line-height: 1.4; }

.module_form_toggle_descr i { margin-right: 10px; color: #999; }

@media screen and (max-width: 740px) {
  /*.ued-toggle-row, old*/
  .module_form_toggle_row { gap: 15px; /*padding: 12px 0;*/ }
}

/*--- АДАПТИВНІСТЬ ---*/

@media screen and (max-width: 740px) {
  
  /*.ued-card-wrapper, .upr-card-wrapper old*/.module_card_wrapper { padding: 25px 20px !important; }
  
  /*.upr-user-hero, old*/
  .module_user_hero { flex-direction: column !important; text-align: center !important; gap: 20px !important; padding-bottom: 25px !important; margin-bottom: 25px !important; }
  
  /*.upr-hero-text, old*/
  .module_user_hero_text { align-items: center !important; }
  
  /*.upr-name-row, old*/
  .module_user_name_row{ justify-content: center !important; align-items: center !important; flex-wrap: wrap; gap: 8px !important; }
  /*
  .upr-msg-btn { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }
  */
  /*.upr-data-row, old*/
  .module_user_data_row { grid-template-columns: 1fr !important; gap: 6px !important; padding-bottom: 12px !important; }
  
  /*.upr-value-with-link, old*/
  .module_user_value_with_link { flex-wrap: wrap !important; gap: 10px !important; }
  
  /*.ued-form-row, pld*/ .module_user_edit_form_row, /*.ued-row-three*/.row_three, /*.ued-submit-wrapper old*/ .module_form_submit_wrapper { flex-direction: column !important; gap: 24px !important; }
  
  /*.ued-ignore-block, old*/
  .module_ignore_block { grid-template-columns: 1fr !important; gap: 12px !important; }
  
  /*.ued-ignore-title, old*/
  .module_ignore_title { padding-top: 0 !important; }
  
  /*.ued-social-bind-row, old*/
  .module_social_bind_row { flex-direction: column !important; gap: 15px !important; }
  
  /*.ued-social-bind-row old*//*.module_social_bind_row .ued-bind-btn { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }*/
  
  /*.ued-conn-item, old*/
  .module_social_connected_item { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; text-align: center !important; }
  
  /*.ued-conn-left { justify-content: center !important; }*/
  /*
  .ued-save-btn { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }
  */
}

@media screen and (max-width: 479px) {
  .toggle_container_fix { flex-direction: column; }
}

@media screen and (max-width: 639px) {
  .module_card_wrapper { padding: 20px 10px 10px!important; gap: 20px; }
  
  .module_form_wrapper { padding: 20px 10px; }
}

/*============================================================================
  ПРОФІЛЬ КОРИСТУВАЧА /END/
============================================================================*/













/*============================================================================
  КОНСТРУКЦІЯ ТУМБЛЕРА ЧЕРЕЗ ПРИХОВАНИЙ CHECKBOX /START/
============================================================================*/

.sw-toggle-wrapper { position: relative; width: 54px; height: 28px; flex-shrink: 0; }

/* Ховаємо дефолтний квадратний чекбокс */

.sw-checkbox-hidden { position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden; pointer-events: none; }

/* Овальна доріжка (трек) тумблера у 3D-стилі */

.sw-toggle-track { display: block; width: 100%; height: 100%; border-radius: 30px; cursor: pointer; position: relative;
  
  /* Початковий сірий "вимкнений" колір */
  background-color: #e2e2e2;
  
  /* Ефект легкої внутрішньої вдавленності доріжки */
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.08)/*, 0px 3px 0px 0px rgba(226, 226, 226, 0.5)*/;
  
  /* Плавне перетікання кольорів тла при увімкненні */
  transition: background-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s; }

/* Круглий бігунок (барель) всередині тумблера */

.sw-toggle-handle { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background-color: var(--HE_COLOR_WHI); border-radius: 50%;
  
  /* Власний мікро-об'єм бігунка, щоб він здавався опуклим */
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1), 0px 1px 0px rgba(0, 0, 0, 0.05);
  
  /* Плавний переліт зліва направо за 0.25 секунди на "гумових пружинах" */
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), width 0.25s; }

/* Тактильність: при фізичному затисканні мишкою бігунок м'яко стискається */

.sw-toggle-track:active .sw-toggle-handle { width: 28px; /* Ефект гумового розтягування при натисканні перед стрибком */ }

/*============================================================================
  Стан :checked — коли тумблер увімкнено
============================================================================*/

/* 1. Доріжка змінює колір */

.sw-checkbox-hidden:checked ~ .sw-toggle-track {
  background-color: #939cae;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.15)/*, 0px 3px 0px 0px #0e6662*/; }

/* 2. Круглий бігунок перелітає на правий край овалу */

.sw-checkbox-hidden:checked ~ .sw-toggle-track .sw-toggle-handle {
  transform: translateX(26px); }

/* Окремий ефект стискання для увімкненого стану при затисканні */

.sw-checkbox-hidden:checked ~ .sw-toggle-track:active .sw-toggle-handle {
  transform: translateX(20px); /* Компенсуємо рух назад при розтягуванні */
  width: 28px; }

/* Особливий варіант: помаранчевий тумблер */

.sw-checkbox-hidden:checked ~ .sw-track-warning {
  background-color: #dd6b20;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.15)/*, 0px 3px 0px 0px #9c4710*/; }

/* Особливий варіант: червоний тумблер */

.sw-checkbox-hidden:checked ~ .sw-track-danger {
  background-color: #d93838 !important;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.15)/*, 0px 3px 0px 0px #941e1e !important*/; }

/*============================================================================
  КОНСТРУКЦІЯ ТУМБЛЕРА ЧЕРЕЗ ПРИХОВАНИЙ CHECKBOX /END/
============================================================================*/












/*============================================================================
  ПЕРСОНАЛЬНІ ПОВІДОМЛЕННЯ /START/
============================================================================*/

.link-pm-list a, .link-pm-newpm a {
  font-size: 1.1rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; width: 100%; min-height: auto; padding: 10px 16px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI) !important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none !important; white-space: nowrap; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none !important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #3e4653, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease !important;
}
.link-pm-list a:hover, .link-pm-newpm a:hover {
  transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none;
}
.link-pm-list a:active, .link-pm-newpm a:active {
  transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #3e4653, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96);
}
.link-pm-list a:focus-visible, .link-pm-newpm a:focus-visible {
  outline: 3px solid color-mix(in srgb, #5b667a 42%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px color-mix(in srgb, #5b667a 20%, transparent);
}
.link-pm-list i, .link-pm-newpm i {
  color: var(--HE_COLOR_WHI); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); padding: 6px 10px; font-size: 1.2500rem; height: 32px; align-items: center; border-radius: 8px;
}

.pm_status { padding: 25px 30px; border-radius: 12px; background-color: #e6e5eb; border: 1px solid #d5d2d2; box-sizing: border-box; /*box-shadow: 0px 5px 0px 0px rgba(251, 211, 141, 1);*/ /*margin: 20px auto;*/ }

.pm_status_txt { width: 100%; display: inline-block; text-align: center; }

.pm_progress_bar { background-color: #ceced1; margin-bottom: 10px; border-radius: 4px; }

.pm_progress_bar span { background: #e85319; font-size: 0; height: 20px; border-radius: 4px 0 0 4px; display: block; overflow: hidden; }

.pmlist {}

.pm { width: 100%; border-collapse: collapse; background-color: var(--HE_COLOR_WHI); font-size: 0.95rem; text-align: left; border-radius: 12px; }

.pm thead { /*font-family: var(--HE_FONT_DEFAULT); font-size: var(--HE_FS_H4);*/ text-transform: uppercase; padding: 15px 20px; }

.pm tbody { color: #666 !important; }

.pm th { background-color: #525e73; font-weight: 500; text-align: left; white-space: nowrap; }

.pm tr:first-child th:first-child { border-top-left-radius: 12px; }
.pm tr:first-child th:last-child { border-top-right-radius: 12px; }

.pm th.pm_head { font-family: var(--HE_FONT_HEADINGS); font-size: 1.1250rem; color: var(--HE_COLOR_WHI); font-weight: 500; /*border-bottom: 1px solid #efefef;*/ padding: 20px 5px 20px 15px; }

.pm th.pm_head.pm_icon { border-bottom: none; }
.pm th.pm_head.pm_checkbox { border-bottom: none; }

.pm th.pm_checkbox { text-align: center; }

.pm td { padding: 15px 20px; border-bottom: 1px solid #e2e2e2; color: #555; }

.pm td.pm_list { border-bottom: 3px solid #efefef; padding: 20px 5px 20px 15px; }

.pm td.pm_list.pm_icon { /*border-bottom: none;*/ }
.pm td.pm_list.pm_checkbox { /*border-bottom: none;*/ }

.pm tr:last-child td { border-bottom: none; }

/*.pm tr:hover td { background-color: #fbfbfb; }*/

.pm_list.pm_subj, .pm_list.pm_last_user, .pm_list.pm_icon { /*cursor: pointer;*/ }

.pm_list .pm_last_message, .pm_list .pm_last_date, .pm_list .pm_with_user { color: #777; font-size: 0.8750rem; }

.pm_list.pm_icon svg { width: 1.5000rem; height: 1.5000rem; vertical-align: middle; }

.pm_list.pm_icon.pm-unread-image, .pm_list.pm_icon.pm-reply-image { color: #525e73; }

.pm_list.pm_icon.pm-read-image { color: #afafaf; }

.pm_subj { margin-bottom: 10px; padding: 0 0 10px; /*border-bottom: 1px dashed #e2e2e2;*/ }

.pm_subj:not(.pm_list):not(.pm_head)::before { content: "Тема повідомлення: "; font-family: var(--HE_FONT_HEADINGS); font-size: 1.1250rem; font-weight: 400; color: #777; }

.pm_last_message { font-size: 0.9375rem!important; color: #666 !important; padding: 10px 15px; background-color: #eeeef2; }

.pm_with_user { margin-top: 10px; padding: 10px 0 0; border-top: 1px dashed #e2e2e2; color: #666 !important; }

a.pm_list {}

a:hover.pm_list { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.pm_subj a.pm_list { font-family: var(--HE_FONT_HEADINGS); font-size: 1.1250rem; font-weight: 400; color: var(--HE_COLOR_ADEF); text-decoration: none; border-bottom: 1px dashed var(--HE_COLOR_ADEF); /*border-bottom-color: rgba(85, 85, 85, 0.5);*/ padding-bottom: 1px !important; transition: color 0.25s, border-color 0.25s; }

.pm_subj a.pm_list b { font-weight: 400; }

.pm_subj a:hover.pm_list { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.pm_with_user a.pm_list, .pm_last_user a.pm_list, .fb-card-sub a.pm_list, .title_quote a { font-family: var(--HE_FONT_HEADINGS); font-size: 0.8750rem; font-weight: 400; color: var(--HE_COLOR_ADEF); text-decoration: none; border-bottom: 1px dashed var(--HE_COLOR_ADEF); /*border-bottom-color: rgba(21, 150, 144, 0.4);*/ padding-bottom: 1px !important; transition: color 0.25s, border-color 0.25s; }

.fb-card-sub a.pm_list { font-size: var(--HE_FS_BODY); }

.pm_with_user a:hover.pm_list, .pm_last_user a:hover.pm_list, .fb-card-sub a:hover.pm_list, .title_quote a:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.title_quote { font-family: var(--HE_FONT_DEFAULT); color: #555; font-size: 0.8750rem; font-weight: 400; }

.pm_navigation { margin-top: 30px; }

.pm_navigation select#pmlist_doaction { position: relative; min-height: 41px; vertical-align: top; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; margin-right: 15px; font-size: var(--HE_FS_BODY); color: #666; background-color: #fbfbfb; border: 1px solid #cbd5e0; border-radius: 8px; padding: 8px 35px 8px 15px; cursor: pointer; outline: none; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.02); -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; }

.pm_navigation select#pmlist_doaction:hover, .pm_navigation select#pmlist_doaction:focus { background-color: var(--HE_COLOR_WHI); border-color: #bebdc1; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.02); }

.pm_navigation button.bbcodes {
  font-size: 1.1000rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; /*width: 100%;*/ min-height: auto; padding: 10px 50px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI)!important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none!important; white-space: nowrap; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none!important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #3e4653, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease!important;
}
.pm_navigation button.bbcodes:hover {
  transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none;
}
.pm_navigation button.bbcodes:active {
  transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #3e4653, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96);
}

/**/

.pm-card { display: flex; gap: 30px; align-items: flex-start; background-color: #fbfbfb; border: 1px solid #e2e2e2; border-radius: 12px; padding: 30px; box-shadow: 0px 4px 0px 0px rgba(226, 226, 226, 0.5); box-sizing: border-box; }

.pm-avatar-box { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid #e2e2e2; background-color: #eee; }

.pm-avatar-box img { width: 100%; height: 100%; object-fit: cover; }

.pm-body { flex: 1; }

.pm-header { display: flex; justify-content: space-between; align-items: center; padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px dashed #e2e2e2; }

.pm-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; margin-top: 10px; border-top: 1px dashed #e2e2e2; }

.pm-username { font-family: var(--HE_FONT_HEADINGS); font-size: 1.1250rem; }

.pm-username a { font-size: 1.1250rem; color: var(--HE_COLOR_ADEF); border-bottom: 1px solid var(--HE_COLOR_ADEF); text-decoration: none; font-weight: 500; transition: color 0.25s ease, border-color 0.25s ease; }

.pm-username a:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.pm-date { font-size: 0.8rem; color: #b3b3b3; }

.pm-text { font-family: var(--HE_FONT_DEFAULT); font-size: 0.9375rem; line-height: 1.5; color: #555; margin: 12px 0 12px 0; padding: 20px; background-color: #eeeef2; }

.pm-text p { font-family: var(--HE_FONT_DEFAULT); font-size: 0.9375rem; line-height: 1.5; color: #555; margin: 0 0 12px 0; }

.pm-text p:last-child { margin: 0; }

.pm-actions { display: flex; gap: 10px; }

.pm-actions a {
  font-size: 0.8750rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; /*width: 100%;*/ min-height: auto; padding: 10px 20px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI) !important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none !important; white-space: nowrap; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none !important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #3e4653, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease !important;
}
.pm-actions a:hover {
  transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none;
}
.pm-actions a:active {
  transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #3e4653, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96);
}

.pm-actions a i { font-size: 1rem; margin-top: -2px; }

.pm-search a { font-size: 1.1250rem; color: var(--HE_COLOR_ADEF); border-bottom: 1px dashed var(--HE_COLOR_ADEF); text-decoration: none; font-weight: 400 !important; transition: color 0.25s ease, border-color 0.25s ease; }

.pm-search a:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

#dle-pm-preview { background-color: #e8e7ed; border-radius: 30px; padding: 30px; margin-bottom: 50px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 30px; /* margin-top: 50px;*/ }

#dle-pm-preview:not(:has(*)) { display: none; /* Приховати контейнер, якщо всередині нього НЕМАЄ жодного тегу */ }

@media screen and (max-width: 959px) {
  .pm-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media screen and (max-width: 767px) {
  .pm_navigation select#pmlist_doaction { margin-right: 15px; }
  
  .pm_navigation button.bbcodes { padding: 10px 20px; }
}

@media screen and (max-width: 639px) {
  .pm th.pm_head { font-size: 0.8750rem; font-weight: 400; padding: 20px 0px 20px 0px; }
  
  .pm_navigation select#pmlist_doaction { width: 140px; margin-right: 15px; }
  
  .pm_navigation button.bbcodes { padding: 10px 20px; }
  
  .pm-avatar-box { width: 50px; height: 50px; border: 1px solid #e2e2e2; margin: 0 auto; }
  
  .pm-card { flex-direction: column; padding: 20px 10px; gap: 10px; }
  
  .pm-header { flex-direction: column; }
  
  .pm-footer { flex-direction: column; }
  
  .pm-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/*============================================================================
  ПЕРСОНАЛЬНІ ПОВІДОМЛЕННЯ /END/
============================================================================*/
/*============================================================================
  ПОПАП ПРОФІЛЬ КОРИСТУВАЧА /START/
============================================================================*/

.popup_profile_card { display: flex; gap: 25px; padding: 20px 10px; }

.popup_avatar_zone { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 2px solid #e2e2e2; }

.popup_avatar_zone img { width: 100%; height: 100%; object-fit: cover; }

.popup_info_zone { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }

.popup_info_row { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; line-height: 1.4; color: #555; border-bottom: 1px dashed #e2e2e2; padding-bottom: 8px; }

.popup_info_label { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_BODY); color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.02rem; width: 140px; }

.popup_user_status { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_BODY); font-weight: 500; text-transform: uppercase; }

.popup_info_value { color: #333; font-weight: 400; }

.popup_link_wrapper { color: #333; font-size: 0.9375rem; }

.popup_link_wrapper a { color: var(--HE_COLOR_ADEF); text-decoration: none!important; position: relative; display: inline-block; padding-bottom: 1px!important; transition: color 0.25s ease; }

.popup_link_wrapper a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 1px dashed var(--HE_COLOR_ADEF); transition: border-color 0.25s ease, border-bottom-style 0.25s; }

.popup_link_wrapper a:hover { color: var(--HE_COLOR_AHOV); }

.popup_link_wrapper a:hover::after { border-bottom-color: transparent; }

@media screen and (max-width: 639px) {
  .popup_profile_card { flex-direction: column; }
  
  .popup_avatar_zone { margin: 0 auto; border: 1px solid #e2e2e2; }
  
  .info_row_links { flex-direction: column;  gap: 5px; }
  
  .info_label_links { width: 100%; text-align: center; }
  
  .ui-dialog-buttonset { display: grid; gap: 20px; }
}

/*============================================================================
  ПОПАП ПРОФІЛЬ КОРИСТУВАЧА /END/
============================================================================*/
/*============================================================================
  СТАТИЧНІ СТОРІНКИ /START/
============================================================================*/

.static_page { background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 30px; }

.static_page_header { display: flex; flex-direction: column; gap: 10px; }

.static_page_title { font-size: 1.5000rem; color: #5b667a; text-transform: uppercase; text-align: center; font-weight: 500; }

.static_page_sub { font-family: var(--HE_FONT_HEADINGS); text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; margin: 0; padding: 0; }

.static_page_sub a { color: var(--HE_COLOR_ADEF); text-decoration: none; position: relative; display: inline-block; transition: color 0.25s ease; }

.static_page_sub a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed var(--HE_COLOR_ADEF); transition: border-color 0.25s ease; }

.static_page_sub a:hover { color: var(--HE_COLOR_AHOV)!important; }

.static_page_sub a:hover::after { border-color: transparent; }

.static_body_wrapper { display: flex; flex-direction: column; gap: 30px; background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

.static_body { hyphens: auto; }

.static_body p { font-size: var(--HE_FS_BODY); line-height: 1.65; color: #444; margin: 0 0 20px 0; }

.static_body p strong, .static_body p b { font-weight: 600; }

.static_body p:last-child { margin-bottom: 0; }

.static_body h2, .static_body h3, .static_body h4, .static_body h5, .static_body h6 { margin: 0 0 20px 0; }

.static_body ul li { padding: 5px 0 5px 25px; }

form#registration button.bbcodes {
  font-size: 1.1000rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; /*width: 100%;*/ min-height: auto; padding: 10px 50px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI)!important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none!important; white-space: nowrap; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none!important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #3e4653, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease!important;
}
form#registration button.bbcodes:hover {
  transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none;
}
form#registration button.bbcodes:active {
  transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #3e4653, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96);
}

@media screen and (max-width: 639px) {  
  .static_page { padding: 20px 10px 10px; gap: 20px; }
  
  .static_body_wrapper { gap: 20px; padding: 20px 20px; }
  
  form#registration button.bbcodes { width: 200px; margin-bottom: 10px; }
}

/*============================================================================
  СТАТИЧНІ СТОРІНКИ /END/
============================================================================*/
/*============================================================================
  СТАТИСТИКА САЙТУ /START/
============================================================================*/

.stat_time_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; box-sizing: border-box; }

.stat_time_card { background-color: var(--HE_COLOR_WHI); border: 1px solid #e2e2e2; border-radius: 12px; padding: 20px; box-sizing: border-box; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); }

.stat_time_title { font-family: var(--HE_FONT_HEADINGS); font-size: 1.0000rem; text-transform: uppercase; letter-spacing: 0.02rem; font-weight: 500; color: var(--HE_TEXT_COLOR, #333); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }

.stat_time_title i { font-size: 1.0000rem; color: #525e73; position: relative; top: -1px; }

.stat_time_metrics { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }

.stat_metric_tag { display: flex; flex-direction: column; flex: 1; font-size: 0.8750rem; background-color: #f5f5f5; border: 1px solid #e2e2e2; padding: 5px 10px; border-radius: 10px; color: #555; align-items: center; gap: 5px; }

.stat_metric_tag strong { font-weight: 500; color: #000; }

/**/

.stat_metrics_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; box-sizing: border-box; }

.stat_metrics_box { background-color: var(--HE_COLOR_WHI); border: 1px solid #e2e2e2; border-radius: 12px; padding: 20px; box-sizing: border-box; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: flex-start; }

.stat_box_header { display: flex; align-items: center; gap: 10px; width: 100%; border-bottom: 1px dashed #e2e2e2; padding-bottom: 15px; }

.stat_box_header i { font-size: 1.0000rem; color: #525e73; position: relative; /*top: -1px;*/ }

.stat_box_header h3 { font-family: var(--HE_FONT_HEADINGS); font-size: 1.0000rem; text-transform: uppercase; letter-spacing: 0.02rem; color: var(--HE_TEXT_COLOR, #333); margin: 0; }

.stat_list { list-style: none; padding: 0; margin: 15px 0 0; width: 100%; display: flex; flex-direction: column; gap: 10px; }

.stat_list li { font-size: 0.9375rem; display: flex; justify-content: space-between; align-items: center; color: #555; width: 100%; }

.stat_list li strong { font-weight: 500; color: #000; font-size: 0.9375rem; }

.stat_badge_zero { background-color: #f5f5f5; border: 1px solid #e2e2e2; padding: 2px 8px; border-radius: 5px; font-size: 0.8750rem!important; font-weight: 500!important; color: #718096!important; }

.stat_inline_link { color: var(--HE_COLOR_ADEF); text-decoration: none; position: relative; display: inline-block; transition: color 0.25s ease; }

.stat_inline_link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed var(--HE_COLOR_ADEF); transition: border-color 0.25s ease; }

.stat_inline_link:hover { color: var(--HE_COLOR_AHOV); }

.stat_inline_link:hover::after { border-color: transparent; }

/**/

.stb-db-panel { width: 100%; background-color: var(--HE_COLOR_WHI); border: 1px solid #edf2f2; border-radius: 12px; padding: 20px; box-sizing: border-box; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); }

.stb-db-wrapper { display: flex; align-items: center; gap: 12px; }

.stb-db-wrapper i { font-size: 1.3rem; color: #525e73; }

.stb-db-text { font-size: 1.0000rem; color: #444; }

.stb-db-text strong { font-family: var(--HE_FONT_HEADINGS); font-weight: 500; color: #000; margin-left: 5px; }

/**/

table.userstop { width: 100%; margin-bottom: 0; }

.userstop thead td { font-family: var(--HE_FONT_HEADINGS); font-size: 1.0000rem!important; border-bottom: 1px dashed #d1d1d1; font-weight: 500; padding: 5px 10px 15px!important; }

.userstop td { font-size: 0.8750rem; border-bottom: 1px dashed #d1d1d1; padding: 10px 10px; }

.userstop a { color: var(--HE_COLOR_ADEF); text-decoration: none; position: relative; display: inline-block; transition: color 0.25s ease; }

.userstop a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed var(--HE_COLOR_ADEF); transition: border-color 0.25s ease; }

.userstop a:hover { color: var(--HE_COLOR_AHOV); }

.userstop a:hover::after { border-color: transparent; }

@media screen and (max-width: 959px) {
  #usersratingtable { display: none; }
}

@media screen and (max-width: 639px) {
  .stat_time_grid { grid-template-columns: 1fr; gap: 10px; }
  
  .stat_metrics_grid { grid-template-columns: 1fr; gap: 10px; }
}

/*============================================================================
  СТАТИСТИКА САЙТУ /END/
============================================================================*/
/*============================================================================
  МОДУЛЬ НАВІГАЦІЇ SPEEDBAR /START/
============================================================================*/

.speedbar_section_bg { background-color: #6b7588; box-shadow: inset 0px 15px 50px rgba(0,0,0,0.1); }

.speedbar_container { width: 100%; padding: 20px 30px; }

@media screen and (max-width: 639px) {
  .speedbar_container { padding: 20px 0; }
}

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

.speedbar_wrapper i { font-size: 1.15rem; color: #ccd0d7; flex-shrink: 0; }

.speedbar_chain { font-size: 0.8750rem; line-height: 1.2; color: #babdc1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.speedbar_chain a { color: #dcdbe1; text-decoration: none; position: relative; display: inline-block; padding-bottom: 1px; transition: color 0.25s ease; }

.speedbar_chain a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed #dcdbe1; transition: border-color 0.25s ease, border-bottom-style 0.25s; }

.speedbar_chain a:hover { color: var(--HE_COLOR_WHI); }

.speedbar_chain a:hover::after { border-bottom-color: transparent; }

.speedbar_chain span, .speedbar_chain strong { font-weight: 500; color: var(--HE_TEXT_COLOR, #333); }

.speedbar_chain span.speedbar-separator,
.speedbar_chain > span:not([class]):not([strong]) { font-size: 0; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; position: relative; margin: 0 4px; }

.speedbar_chain span.speedbar-separator::before,
.speedbar_chain > span:not([class]):not([strong])::before { content: ""; position: absolute; top: 50%; left: 3px; width: 5px; height: 5px; border-top: 1.5px solid #b3b3b3; border-right: 1.5px solid #b3b3b3; transform: translateY(-50%) rotate(45deg); }

/*============================================================================
  МОДУЛЬ НАВІГАЦІЇ SPEEDBAR /END/
============================================================================*/
/*============================================================================
  ФАЙЛ-ЩАБЛОН INFO.TPL /START/
============================================================================*/

.info_card_wrapper { background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 30px; }

.info_card_header { display: flex; flex-direction: column; gap: 10px; }

.info_card_title { font-size: 1.5000rem; color: #5b667a; text-transform: uppercase; text-align: center; font-weight: 500; }

.info_text_wrapper { display: flex; flex-direction: column; gap: 30px; background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

.info_card_text { color: #666; margin: 0; }

@media screen and (max-width: 639px) {  
  .info_card_wrapper { padding: 20px 10px 10px; gap: 20px; }
  
  .info_text_wrapper { gap: 20px; padding: 20px 20px; }
}

/*============================================================================
  ФАЙЛ-ЩАБЛОН INFO.TPL /END/
============================================================================*/
/*============================================================================
  РОЗШИРЕНИЙ ПОШУК НА САЙТІ + ХАК /START/
============================================================================*/

.toggle_container_fix { width: 100%; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }

.toggle_container_fix label.form-check-label { display: inline-flex; align-items: center; position: relative; cursor: pointer; margin: 0; padding: 0; box-sizing: border-box; }

.toggle_container_fix label.form-check-label input#all_word_seach, .toggle_container_fix label.form-check-label input#exactname { position: absolute; opacity: 0; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; pointer-events: none; }

/**/

.toggle_container_fix label.form-check-label > span { font-size: 0; color: transparent; line-height: 28px; padding-left: 54px; position: relative; display: inline-block; user-select: none; }

.toggle_container_fix label.form-check-label > span::before { content: ""; position: absolute; left: 0; top: 0; width: 54px; height: 28px; background-color: #e2e2e2; border-radius: 30px; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.08)/*, 0px 3px 0px 0px rgba(226, 226, 226, 0.5)*/; transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }

.toggle_container_fix label.form-check-label > span::after { content: ""; position: absolute; width: 22px; height: 22px; background-color: var(--HE_COLOR_WHI); border-radius: 50%; left: 3px; top: 3px; box-sizing: border-box; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1), 0px 1px 0px rgba(0, 0, 0, 0.05); transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), width 0.25s ease; }

.toggle_container_fix label.form-check-label:active > span::after { width: 28px; }

.toggle_container_fix label.form-check-label:has(input:checked) > span::before { background-color: #939cae; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.15)/*, 0px 3px 0px 0px #0e6662 !important*/; }

.toggle_container_fix label.form-check-label:has(input:checked) > span::after { transform: translateX(26px); }

.toggle_container_fix label.form-check-label:has(input:checked):active > span::after { transform: translateX(20px); }

/**/

label.form-check-label:has(input[type="radio"]) { display: inline-flex; align-items: center; position: relative; cursor: pointer; font-family: var(--HE_FONT_DEFAULT); font-size: var(--HE_FS_BODY); color: #333; margin-left: 20px; user-select: none; box-sizing: border-box; }

label.form-check-label:has(input[type="radio"]) input[type="radio"].form-check-input { position: absolute; opacity: 0; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; pointer-events: none; }

label.form-check-label:has(input[type="radio"]) > span { position: relative; display: inline-block; padding-left: 28px; line-height: 20px; transition: color 0.25s ease; }

label.form-check-label:has(input[type="radio"]) > span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background-color: var(--HE_COLOR_WHI); border: 2px solid #cdccd0; border-radius: 50%; box-sizing: border-box; transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s; }

label.form-check-label:has(input[type="radio"]) > span::after { content: ""; position: absolute; width: 8px; height: 8px; background-color: #525e73; border-radius: 50%; left: 5px; top: 50%; transform: translateY(-50%) scale(0); box-sizing: border-box; transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

label.form-check-label:has(input[type="radio"]):hover > span::before { border-color: #a0aec0; }

label.form-check-label:has(input[type="radio"]):active > span::before { transform: translateY(-50%) scale(0.92); }

label.form-check-label:has(input[type="radio"]:checked) > span::before { border-color: #525e73; }

label.form-check-label:has(input[type="radio"]:checked) > span {}

label.form-check-label:has(input[type="radio"]:checked) > span::after { transform: translateY(-50%) scale(1); }

/**/

.search_form_group { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.search_form_subgroup { display: flex; flex-direction: column; gap: 5px; }

.search_options_checkbox { display: flex; gap: 10px; }

@media screen and (max-width: 639px) {
  .search_options_checkbox { flex-direction: column; }
}

.search_form_group #searchinput,
.search_form_group #searchuser,
.search_form_group #replylimit { width: 100%; background-color: #fcfcfc; border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 15px 12px 15px; font-size: 0.8750rem; color: #666; outline: none; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.03); transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; appearance: none; }

.search_form_group #titleonly,
.search_form_group #replyless,
.search_form_group #searchdate,
.search_form_group #beforeafter,
.search_form_group #sortby,
.search_form_group #resorder,
.search_form_group #catlist { width: 100%; background-color: #fcfcfc; border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 15px 12px 15px; font-size: 0.8750rem; color: #666; outline: none; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.03); transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #999999 50%), linear-gradient(135deg, #999999 50%, transparent 50%); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; padding-right: 40px; }

.search_form_group #catlist { background-image: none; height: 300px; }

.search_form_group #searchinput:focus,
.search_form_group #searchuser:focus,
.search_form_group #replylimit:focus,
.search_form_group #titleonly:focus,
.search_form_group #replyless:focus,
.search_form_group #searchdate:focus,
.search_form_group #beforeafter:focus,
.search_form_group #sortby:focus,
.search_form_group #resorder:focus,
.search_form_group #catlist:focus { border-color: #bebdc1; background-color: var(--HE_COLOR_WHI); }

/*============================================================================
  РОЗШИРЕНИЙ ПОШУК НА САЙТІ + ХАК /END/
============================================================================*/


/*============================================================================
  РОЗДІЛИ КАТЕГОРІЇ - СКЕЛЕТ /START/
============================================================================*/

/* для контентної колонки та сайдбару */
.cat_main_layout { display: grid; grid-template-columns: 2.1fr 0.9fr; gap: 50px; align-items: flex-start; }

/* для структури по 2 новини в ряд */
.cat_main_layout_2x { display: grid; gap: 50px; grid-template-columns: repeat(2, 1fr); /* Створює дві рівні колонки */ }
/* для структури по 2 новини в ряд - розтягує пагінацію на обидві колонки */
.cat_main_layout_2x .cat-pagination { grid-column: span 2; }

.cat_main_layout_2x:not(:has(*)) { display: none; /* Приховати контейнер, якщо всередині нього НЕМАЄ жодного тегу */ }

.cat_timeline { display: flex; flex-direction: column; gap: 50px; }

@media screen and (max-width: 639px) {
  .cat_timeline:not(:has(*)) { display: none; /* Приховати контейнер, якщо всередині нього НЕМАЄ жодного тегу */ }
}

.cat_sidebar { display: flex; flex-direction: column; gap: 50px; }

/**/

.cat_sidebar_wr { background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 30px; }

.cat_headers_wr { display: flex; flex-direction: column; gap: 30px; background-color: #f0f0f4cc; border-radius: 20px; padding: 30px 0 30px 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

.cat_softwallets_headers { display: flex; gap: 20px; align-items: center; }

.cat_softwallets_icon { background-image: url('../images/icon-sw-all.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.cat_exchanges_icon { background-image: url('../images/icon-ex-all.png'); background-repeat: no-repeat; width: 48px; height: 48px; }

.cat_header_txt { color: #5b667a; font-family: "Oswald"; font-size: 1.2500rem; font-weight: 500; text-transform: uppercase; line-height: 0.85; flex: 1 0 auto; }

.cat_header_txt span { color: #777; font-size: 0.6875rem; font-weight: 400; }

.cat_content_wr { display: flex; flex-direction: column; gap: 30px; background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

.cat_content_wr img { width: 100%; max-width: 100%; height: auto; display: block; }

.cat_content_wr ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }

.cat_content_wr ul li { font-size: 0.9375rem; display: flex; /*justify-content: space-between;*/ align-items: flex-start; line-height: 1.45; gap: 10px; }

.cat_content_wr ul li i { font-size: 0.9375rem;position: relative; top: 4px; width: 20px; }

.cat_content_wr ul li a { color: var(--HE_COLOR_ADEF); text-decoration: none; transition: color 0.25s ease; }

.cat_content_wr ul li a span { display: inline;  border-bottom: 1px dashed var(--HE_COLOR_ADEF); transition: border-color 0.25s ease; }

.cat_content_wr ul li a:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.cat_content_wr ul li a:hover span { border-bottom-color: transparent; }

.cat_content_wr ul li:has(a:hover) i.fa-app-store-ios { color: #0484eb; }

.cat_content_wr ul li:has(a:hover) i.fa-android { color: #3ddc84; }

.cat_content_wr ul li:has(a:hover) i.fa-windows { color: #00a4ef; }


/*--- АДАПТИВНІСТЬ ---*/

@media screen and (max-width: 1120px) {
  
  .cat_main_layout { grid-template-columns: 1fr; gap: 50px; }
  
  .cat_sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

}

@media screen and (max-width: 768px) {
  
  .cat_sidebar { grid-template-columns: 1fr; }

}

@media screen and (max-width: 959px) {
  .cat_main_layout_2x { grid-template-columns: 1fr; /* Змінено з repeat(2, 1fr) на 1fr для однієї колонки */ }
  
  .cat_main_layout_2x .cat-pagination { grid-column: span 1; }
}

@media screen and (max-width: 639px) {  
  .cat_sidebar_wr { padding: 20px 10px 10px; }
  
  .cat_headers_wr { padding: 10px 0 10px 10px; }
  
  .cat_softwallets_headers { gap: 10px; }
  
  .cat_content_wr { padding: 20px 10px; }
}

/*============================================================================
  РОЗДІЛИ КАТЕГОРІЇ - СКЕЛЕТ /END/
============================================================================*/

























/*.shortstory_t01_wrapper { background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 30px; }*/


/*.cat-news-card { display: flex; gap: 25px; align-items: flex-start; background-color: #fff; background: radial-gradient(circle,rgba(232, 232, 232, 0.5) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(227, 227, 227, 0.25) 100%); border: 1px solid #e2e2e2; border-radius: 12px; padding: 25px 25px 31px; box-sizing: border-box; box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.125); transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; }*/

.short_news_card { display: flex; flex-direction: column; /*gap: 30px;*/ /*align-items: flex-start;*/ background-color: #e8e7ed; /*background: radial-gradient(circle,rgba(232, 232, 232, 0.5) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(227, 227, 227, 0.25) 100%);*/ /*border: 1px solid #e2e2e2;*/ border-radius: 30px; padding: 30px; box-sizing: border-box; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); /*transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;*/ }

/*.cat-news-card:hover { transform: translateY(-2px); box-shadow: 0px 6px 0px 0px rgba(226, 226, 226, 1); }*/

.short_news_card:last-of-type { border-bottom: none; }

.short_img_box { /*width: 240px;*/ /*width: 350px;*/ /*aspect-ratio: 16 / 12;*/ border-radius: 20px 20px 0 0; overflow: hidden; position: relative; flex-shrink: 0; /*box-shadow: 0px 20px 10px -10px rgba(0, 0, 0, 0.125);*/ background-color: #f1f1f1; border: 1px solid var(--HE_COLOR_WHI); border-bottom: none; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; }

.short_img_box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.short_img_box:hover  { transform: translateY(-2px); box-shadow: 0px 6px 0px 0px rgba(226, 226, 226, 1); }

.short_info { flex: 1; }



.short_info_wrapper { display: flex; flex-direction: column; gap: 10px; background-color: #f0f0f4cc; border-radius: 0 0 20px 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); border-top: none; }

.short_date { font-size: 0.8125rem; color: #777; display: block; /*margin-bottom: 10px;*/ }

.short_date i { font-size: 0.8125rem; color: #525e73; margin: 0 5px 2px 0; }

.short_info h2 { font-size: 1.7500rem; margin: 0 0 20px 0; line-height: 1.45 !important; }

.short_title_link { color: var(--HE_COLOR_ADEF); text-decoration: none; display: inline; border-bottom: 1px dashed var(--HE_COLOR_ADEF); /*padding-bottom: 1px !important;*/ transition: color 0.25s ease, border-color 0.25s ease; }

.short_title_link:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }



.short_desc { /*font-size: var(--HE_FS_BODY);*/ font-size: 1rem; /*line-height: 1.55;*/ color: #333; margin: 0; hyphens: auto; }

.short_desc a { color: var(--HE_MAIN_COLOR, #159690); text-decoration: none; border-bottom: 1px dashed rgba(21, 150, 144, 0.4); transition: color 0.2s, border-color 0.2s; }

.short_desc a:hover { color: #2eb8b2; border-bottom-color: transparent; }

/**/

.short_platforms { display: flex; align-items: center; gap: 5px; margin-top: 15px; font-family: var(--HE_FONT_HEADINGS); }
  
i.fa-app-store-ios { font-size: 1.125rem; color: #1c1c1e; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border: 1px solid #e2e2e2; border-radius: 5px; color: color-mix(in srgb, #e2e2e2 30%, #1c1c1e); line-height: 1; transition: color 0.2s ease; }
i.fa-app-store-ios:hover { color: #0484eb; }
  
i.fa-android { font-size: 1.125rem; color: #1c1c1e; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border: 1px solid #e2e2e2; border-radius: 5px; color: color-mix(in srgb, #e2e2e2 30%, #1c1c1e); line-height: 1; transition: color 0.2s ease; }
i.fa-android:hover { color: #3ddc84; }
  
i.fa-windows { font-size: 1.125rem; color: #1c1c1e; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border: 1px solid #e2e2e2; border-radius: 5px; color: color-mix(in srgb, #e2e2e2 30%, #1c1c1e); line-height: 1; transition: color 0.2s ease; }
i.fa-windows:hover { color: #00a4ef; }
  
i.fa-apple { font-size: 1.125rem; color: #1c1c1e; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border: 1px solid #e2e2e2; border-radius: 5px; color: color-mix(in srgb, #e2e2e2 30%, #1c1c1e); line-height: 1; transition: color 0.2s ease; }
i.fa-apple:hover { color: #000000; }
  
i.fa-linux { font-size: 1.125rem; color: #1c1c1e; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border: 1px solid #e2e2e2; border-radius: 5px; color: color-mix(in srgb, #e2e2e2 30%, #1c1c1e); line-height: 1; transition: color 0.2s ease; }
i.fa-linux:hover { color: #d97706; }
  
i.fa-puzzle-piece { font-size: 1.125rem; color: #1c1c1e; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border: 1px solid #e2e2e2; border-radius: 5px; color: color-mix(in srgb, #e2e2e2 30%, #1c1c1e); line-height: 1; transition: color 0.2s ease; }
i.fa-puzzle-piece:hover { color: #ff20ff; }
/* тимчасово закоментував тому, що i.fa-globe використовується в редагуванні профілю користувача і, якщо код, який нижче - незакоментований, то виникає конфлікт
i.fa-globe { font-size: 1.125rem; color: #1c1c1e; position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border: 1px solid #e2e2e2; border-radius: 5px; color: color-mix(in srgb, #e2e2e2 30%, #1c1c1e); line-height: 1; transition: color 0.2s ease; }
i.fa-globe:hover { color: #2563eb; }
*/

@media screen and (max-width: 639px) {
  .short_news_card { padding: 10px; }
  
  .short_info_wrapper { padding: 20px; }
}

































.full_art_card { display: flex; flex-direction: column; gap: 30px; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-sizing: border-box; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); }

.full_date { font-size: 0.8125rem; color: #ccd0d7; display: block; padding-left: 2px; }

.full_date i { font-size: 0.8125rem; color: var(--HE_COLOR_WHI); margin: 0 10px 2px 0; }

.full_art_header { display: flex; flex-direction: column; gap: 5px; padding: 50px 30px; background-color: #687285; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); border-radius: 20px 20px 0 0; margin-bottom: -30px; box-shadow: inset 0px 15px 50px rgba(0, 0, 0, 0.1); }

.full_art_header h1 { font-size: 2.2500rem; line-height: 1.25; color: var(--HE_COLOR_WHI); }

.full_info_wrapper { display: flex; flex-direction: column; /*gap: 10px;*/ background-color: #f0f0f4cc; border-radius: 0 0 20px 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); border-top: none; }

.full_info_wrapper2 { display: flex; flex-direction: column; /*gap: 10px;*/ background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); border-top: none; }

.full-article-body { display:  flex; flex-direction: column; gap: 40px; hyphens: auto; }

/*.full-article-body p { font-size: var(--HE_FS_BODY); line-height: 1.65; color: #444; margin: 0 0 20px 0; }

.full-article-body p:last-child { margin: 0; }
*/
.full-article-body p strong, .full-article-body p b { font-weight: 700; }

.full-article-body h2, .full-article-body h3, .full-article-body h4, .full-article-body h5, .full-article-body h6 { font-family: var(--HE_FONT_HEADINGS); }
/*
.full-article-body h2.underlined, .full-article-body h3.underlined, .full-article-body h4.underlined, .full-article-body h5.underlined, .full-article-body h6.underlined { padding: 0 0 15px 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.2); }

.full-article-body h3.underlined::before { content: "⏺"; color: var(--HE_MAIN_COLOR, #159690); margin-right: 15px; }

.full-article-body h3.underlined { margin: 40px 0 15px; }

.full-article-body h2 { position: relative; text-transform: uppercase; font-weight: 600; margin: 45px 0 45px 0; scroll-margin-top: 30px; padding-left: 18px; font-size: 1.8rem; border-left: 5px solid #f7931a; }
*/

.full_art_quote { font-family: var(--HE_FONT_TEXT); font-size: 1.0000rem; line-height: 1.6; color: #159690; background-color: #f4faf9; border-left: 4px solid var(--HE_MAIN_COLOR, #159690); padding: 20px 30px; margin: 0; border-radius: 0 12px 12px 0; box-sizing: border-box; }

/* кастомізовані класи для тегів вставлення коду */

div.code-toolbar { /*margin-bottom: 20px;*/ }

:not(pre)>code[class*=language-], pre[class*=language-] { border-radius: 8px; }

div.code-toolbar>.toolbar>.toolbar-item>button svg { display: inline-block; vertical-align: middle; margin-top: -3px; }

code:not(.language-markup) { display: inline-block; line-height: 1.5; overflow-wrap: break-word; box-sizing: border-box; border-radius: .4rem; font-size: 0.9375rem; white-space: pre-wrap; color: #8d2525; padding: 5px 10px; margin: 3px; background-color: #f6f6f6; border: 1px solid #d7d7d7; }



/**/

.img-bento-section {
  width: 100%; /*margin: 40px auto 40px;*/ box-sizing: border-box;
}
.img-matrix {
  display: grid; grid-template-columns: repeat(2, 1fr); /* Дві рівні колонки */ gap: 20px; width: 100%; /*margin-bottom: 20px;*/
}

.img-matrix3 {
  display: grid; grid-template-columns: repeat(3, 1fr); /* Три рівні колонки */ gap: 20px; width: 100%; /*margin-bottom: 20px;*/
}

.img-matrix-card {
  background-color: var(--HE_COLOR_WHI); /*border: 1px solid #e2e2e2;*/ border-radius: 20px; padding: 0 24px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.img-matrix-card p img {
  max-width: 100%!important; height: auto!important; display: block; margin: 10px auto!important; border: none; border-radius: 12px; box-shadow: 0px 20px 10px -10px rgba(0, 0, 0, 0.125); transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
}
.img-matrix-card p img:hover {
  transform: translateY(-2px); border-color: #e2e2e2; box-shadow: 0px 5px 0px 0px rgba(226, 226, 226, 1);
}
.img-matrix-card:hover {
  transform: translateY(-2px); border-color: #e2e2e2; box-shadow: 0px 4px 0px 0px rgba(226, 226, 226, 1);
}
@media screen and (max-width: 727px) {
  .img-matrix {
    grid-template-columns: 1fr; /* Сітка падає в одну колонку */ gap: 15px;
  }
  .img-matrix3 {
    grid-template-columns: 1fr; /* Сітка падає в одну колонку */ gap: 15px;
  }
  .img-matrix-card {
    padding: 0 20px; /*border-radius: 8px;*/
  }
}

/**/

.article-component { display: grid; gap: 30px; background-color: var(--HE_COLOR_WHI); /*border: 1px dashed #e2e2e2;*/ border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); /*box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.075); box-sizing: border-box; margin-bottom: 24px;*/ }

.article-component h2 { display: flex; align-items: center; gap: 15px; color: #3a3a3a; position: relative; text-transform: none; font-weight: 500; margin: 0; scroll-margin-top: 140px; padding: 15px 20px; font-size: 1.7500rem; /*border-bottom: 1px dashed #d1d1d1;*/ background-color: #ececf1; border-radius: 15px; }

/*.article-component h2::after { content: ""; position: absolute; left: 18px; bottom: -8px; left: 18px; right: 0; height: 0px; background-color: #999; }*/

/*.article-component h2 i { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; min-width: 46px; flex: 0 0 46px; border: 1px solid #e2e2e2; border-radius: 10px; color: color-mix(in srgb, #e2e2e2 20%, #159690); font-size: 1.45rem; line-height: 1; }*/

.article-component h2 i { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; min-width: 48px; flex: 0 0 48px; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); /*border: 1px solid #d5dae0;*/ border-radius: 10px; color: var(--HE_COLOR_WHI); font-size: 1.6250rem; line-height: 1; }

.article-component h3 { font-size: 1.2500rem; margin: 0; font-weight: 500; color: #3a3a3a; }

.article-component h3:not(:has(i))::before { content: "\e27e"; font-family: "Font Awesome 6 Pro"; font-size: 1.2500rem; margin: 0 10px 0 20px; font-weight: 600; color: #d88b2f; }

.article-component h3.underlined { padding: 0 0 15px 0; margin: 0; border-bottom: 1px dashed #d1d1d1; }

.article-component h3.underlined::before { content: "★"; color: var(--HE_COLOR_AHOV); position: relative; bottom: 1px; }

.article-component h4 { font-size: 1.1250rem; font-weight: 500; margin: 0; color: #3a3a3a; }

.article-component h4::before { content: "\e27e"; font-family: "Font Awesome 6 Pro"; font-size: 1.2500rem; margin: 0 10px 0 20px; font-weight: 600; color: #9ea4af; }

.article-component h5 { font-size: 1.0000rem; margin: 0 0 0 20px; font-weight: 500; color: #3a3a3a; }

/*.article-component h5::before { content: "\e122"; font-family: "Font Awesome 6 Pro"; font-size: 1.2500rem; margin: 0 10px 0 20px; font-weight: 600; color: #1bc4bc; }*/

.article-component h6 { font-size: 0.875rem; margin: 0; font-weight: 500; color: #3a3a3a; }

.article-component p { font-size: 1.0000rem; line-height: 1.8; color: #2d2d2d; margin: 0; padding: 20px; border-radius: 15px; background-color: #f7f7f9; }

.article-component p+p { margin: -10px 0 0; }

.article-component p.read_next { margin: 0; padding: 20px 0 0 20px; border-top: 1px dashed #d1d1d1; border-radius: 0; background-color: transparent; }

.article-component p.read_next i { margin: 0 10px 0 0; color: var(--HE_COLOR_AHOV); }
/*
.article-component p a img { border-radius: 10px; }

.article-component p a:has(img) { display: block; width: max-content; margin: 0 auto; }

.article-component p a:has(img) img { display: block; }
*/

.art_edit {}

a:has(span.art_edit) { color: #f0f0f0; margin-right: 20px; text-decoration: none; position: relative; display: inline-block; transition: color 0.25s ease; }

a:has(span.art_edit)::before { content: "\f044"; font-family: "Font Awesome 6 Pro"; font-weight: 300; color: var(--HE_COLOR_WHI); margin-right: 10px; }

a:has(span.art_edit)::after { content: ""; position: absolute; left: 23px; right: 0; bottom: 0; border-bottom: 1px dashed #dcdbe1; transition: border-color 0.25s ease, border-bottom-style 0.25s; }

a:has(span.art_edit):hover { color: var(--HE_COLOR_WHI); }

a:has(span.art_edit):hover::after { border-bottom-color: transparent; }

/**/

.error_note { background-color: var(--HE_COLOR_ADEF); color: var(--HE_COLOR_WHI); font-size: 0.8750rem; text-align: center; border-radius: 20px; padding: 20px 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); }

.error_note a { color: #f0f0f0; text-decoration: none; position: relative; display: inline-block; transition: color 0.25s ease; }

.error_note a::after { content: ""; position: absolute; left: 0px; right: 0; bottom: 0; border-bottom: 1px dashed #dcdbe1; transition: border-color 0.25s ease, border-bottom-style 0.25s; }

.error_note a:hover { color: var(--HE_COLOR_WHI); }

.error_note a:hover::after { border-bottom-color: transparent; }

/**/

.article-component p img { max-width: 100% !important; height: auto !important; display: block; margin: 0px auto !important; border: none; border-radius: 12px; box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.125); transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease; }

.article-component p img:hover { transform: translateY(-2px); border-color: #cbd5e0; box-shadow: 0px 6px 0px 0px rgba(226, 226, 226, 1); }

.article-component p a.highslide { display: flex; justify-content: center; width: fit-content; margin: 0 auto; /*width: max-content;*/ }

@media screen and (max-width: 740px) {
  
  .article-component p img { margin: 0px auto !important; border-radius: 8px; box-shadow: 0px 3px 0px 0px rgba(226, 226, 226, 1); }
  
  .article-component p img:hover { transform: none; }

}





.article-component ul { margin: 0; }

.article-component ul, .article-component li { font-size: 1.0000rem; line-height: 1.65; }

.article-component li { padding: 5px 0; }

.article-component a:not(:has(img)) { color: var(--HE_COLOR_ADEF); text-decoration: none; display: inline; border-bottom: 1px dashed var(--HE_COLOR_ADEF); transition: color 0.25s ease, border-color 0.25s ease; }

.article-component a:not(:has(img)):hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

/**/

.article-component .pros-cons .content {
  display: flex; gap: 30px;
}
.article-component .pros-cons>* {
  flex-basis: 50%;
}
.article-component .pros-cons>.content * {
  flex-basis: 50%;
}
.article-component .pros-cons h3 {
  font-size: 1.2500rem; margin-bottom: 20px !important; color: #9e7a60; line-height: 1.25; font-weight: 500;
}

/*.article-component .pros-cons h3::before {
  content: ""!important; margin: 0!important;
}*/

.article-component .pros-cons .pros h3 { color: var(--HE_COLOR_GRE); }

.article-component .pros-cons .pros h3::before { color: var(--HE_COLOR_GRE); }

.article-component .pros-cons .cons h3 { color: var(--HE_COLOR_RED); }

.article-component .pros-cons .cons h3::before { color: var(--HE_COLOR_RED); }

.article-component .pros-cons ul {
  padding-left: 0; margin-bottom: 0;
}
.article-component .pros ul, .article-component .cons ul {
  list-style: none; display: grid; gap: 20px; margin: 0; background-color: #f7f7f9; border-radius: 15px; padding: 20px;
}
.article-component .pros-cons ul li {
  list-style-type: none; padding-left: 30px; margin-left: 0; font-size: 1.0000rem!important; line-height: 1.6; position: relative;
}  
.article-component .pros-cons .pros ul li:before {
  content: "\f055"; font-family: "Font Awesome 6 Pro"!important; color: var(--HE_COLOR_GRE); font-size: 1.0000rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.article-component .pros-cons .cons ul li:before {
  content: "\f056"; font-family: "Font Awesome 6 Pro"!important; color: var(--HE_COLOR_RED); font-size: 1.0000rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}

/**/

/* Стиль для хрестика в таблицях */
.mark-bad { color: var(--HE_COLOR_RED); font-size: 1.125rem; font-weight: 700; }

/* Стиль для галочки в таблицях */
.mark-good { color: var(--HE_COLOR_GRE); font-size: 1.125rem; font-weight: 700; }

/* Стиль для Комеджіруші в таблицях */
.mark-note { color: #eb8d00; font-size: 1.125rem; font-weight: 700; }

/**/

.full-art-toc-box2 { display: flex; flex-direction: column; gap: 20px; background-color: #fbfbfb; border: 1px solid #e2e2e2; border-radius: 10px; padding: 25px; /*margin-bottom: 45px;*/ box-shadow: 0px 4px 0px 0px rgba(226, 226, 226, 0.5); box-sizing: border-box; }

.full-art-toc-title { font-size: var(--HE_FS_H3); text-transform: uppercase; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px; }

.full-art-toc-title i { color: #525e73; position: relative; top: 2px; }

.full-art-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }

.full-art-toc-list li { line-height: 1.45!important; }

.full-art-toc-link { font-family: var(--HE_FONT_TEXT); font-size: 1rem; color: #555!important; text-decoration: none; display: inline-block; border-bottom: 1px dashed #b3b3b3!important; /*padding-bottom: 1px !important;*/ transition: color 0.25s, border-color 0.25s; }

.full-art-toc-link:hover { color: var(--HE_COLOR_AHOV)!important; border-bottom-color: transparent!important; }





/*============================================================================
  ТАБЛИЦЯ ПОРІВНЯННЯ /START/
============================================================================*/

.full-art-table-wrapper { width: 100%; overflow-x: auto; /*margin: 30px 0 40px;*/ border: 1px solid #dcdce5; border-radius: 10px; box-shadow: 0px 5px 0px 0px rgba(226, 226, 226, 1); }

.full-art-table { width: 100%; border-collapse: collapse; /*text-align: center;*/ font-size: 0.875rem; background-color: var(--HE_COLOR_WHI); }

.full-art-table th { background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); font-family: var(--HE_FONT_HEADINGS); color: var(--HE_COLOR_WHI); font-size: 1.1250rem; /*text-transform: uppercase;*/ padding: 15px 20px; border-bottom: 2px solid #dcdce5; font-weight: 400; white-space: nowrap; }

.full-art-table th+th { border-left: 1px solid var(--HE_COLOR_WHI); }

.full-art-table td { padding: 15px 20px; border-bottom: 1px solid #dcdce5; color: #444; font-size: 0.8750rem; }

.full-art-table td+td { border-left: 1px solid #dcdce5; }

.full-art-table tbody tr:nth-child(even) {
    background: #f7f7f9;
}

.full-art-table tr:last-child td { border-bottom: none; }

.full-art-table tr:hover td { background-color: #ebedf1; }

.full-art-table th:first-child,
.full-art-table td:first-child {}

/*============================================================================
  ТАБЛИЦЯ ПОРІВНЯННЯ /END/
============================================================================*/
/*============================================================================
  FLEX-ТАБЛИЦЯ /START/
============================================================================*/

.flex-table {
  display: flex; flex-direction: column; gap: 0; font-size: 0.9375rem; margin: 0 20px;
}
.flex-table .row {
  display: flex; align-items: flex-start; gap: 20px; padding: 12px 0; line-height: 1.6; border-bottom: 1px dashed #d1d1d1;
}
.flex-table .label {
  flex-basis: 30%; color: #444; font-weight: 700;
}
.flex-table .value {
  flex-basis: 70%; color: #444; font-weight: 400;
}
.flex-table .value p {
    margin: 0;
}

.flex_table_ul { list-style: none; padding: 0; }

.flex_table_ul li { font-size: 0.9375rem; }

@media (max-width: 640px) {
  .flex-table .row {
    flex-direction: column; gap: 6px;
  }

  .flex-table .label {
    flex-basis: auto;
  }
}

/*============================================================================
  FLEX-ТАБЛИЦЯ /END/
============================================================================*/



.full-article-body ul.blueli { list-style: none; padding: 0; }

.full-article-body ul.blueli li { position: relative; background-color: #f7f7f9; font-size: 0.9375rem; padding: 10px 15px 10px 22px; margin: 0 auto 10px; /*border: 1px solid #e2e2e2;*/ border-radius: 15px; }

.full-article-body ul.blueli li::before { content: "\e122"; font-family: "Font Awesome 6 Pro"; color: #3182ce; position: relative; font-size: 0.9375rem; font-weight: 600; margin: 0 15px 0 0; }

.full-article-body ul.blueli li strong { /*text-transform:  uppercase;*/ }

.full-article-body ul.blueli li:last-child { margin: 0 auto; }

/*.full-article-body ul.blueli li { border-left: 5px solid #3182ce; box-sizing: border-box; }*/


.full-article-body ul.greenli { list-style: none; padding: 0; }

.full-article-body ul.greenli li { position: relative; background-color: #f7f7f9; font-size: 0.9375rem; padding: 20px 15px 20px 25px; margin: 0 auto 20px; /*border: 1px solid #e2e2e2;*/ border-radius: 15px; }

.full-article-body ul.greenli li:not(:has(h5))::before { content: "\e122"; font-family: "Font Awesome 6 Pro"; color: var(--HE_COLOR_GRE); position: relative; font-size: 0.9375rem; font-weight: 600; margin: 0 15px 0 0; }

.full-article-body ul.greenli li .greenli_header { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }

.full-article-body ul.greenli li .greenli_header i { font-size: 1.1250rem; color: var(--HE_COLOR_GRE); }

.full-article-body ul.greenli li h5 { font-family: var(--HE_FONT_HEADINGS); font-size: 1.0000rem; color: #555; text-transform: uppercase; font-weight: 500; margin: 0; }

.full-article-body ul.greenli li strong { /*text-transform:  uppercase;*/ }

.full-article-body ul.greenli li:last-child { margin: 0 auto; }

/*.full-article-body ul.greenli li { border-left: 5px solid var(--HE_COLOR_GRE); box-sizing: border-box; }*/

.full-article-body ul.greenli li:not(:has(h5)) { position: relative; background-color: #f7f7f9; font-size: 0.9375rem; padding: 10px 15px 10px 22px; margin: 0 auto 10px; /*border: 1px solid #e2e2e2;*/ border-radius: 15px; /*border-left: 5px solid var(--HE_COLOR_GRE);*/ }


.full-article-body ul.redli { list-style: none; padding: 0; }

.full-article-body ul.redli li { position: relative; background-color: #f7f7f9; font-size: 0.9375rem; padding: 20px 15px 20px 25px; margin: 0 auto 20px; /*border: 1px solid #e2e2e2;*/ border-radius: 15px; }

.full-article-body ul.redli li:not(:has(h5))::before { content: "\e122"; font-family: "Font Awesome 6 Pro"; color: var(--HE_COLOR_RED); position: relative; font-size: 0.9375rem; font-weight: 600; margin: 0 15px 0 0; }

.full-article-body ul.redli li .redli_header { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }

.full-article-body ul.redli li .redli_header i { font-size: 1.1250rem; color: var(--HE_COLOR_RED); }

.full-article-body ul.redli li h5 { font-family: var(--HE_FONT_HEADINGS); font-size: 1.0000rem; color: #555; text-transform: uppercase; font-weight: 500; margin: 0; }

.full-article-body ul.redli li strong { /*text-transform:  uppercase;*/ }

.full-article-body ul.redli li:last-child { margin: 0 auto; }

/*.full-article-body ul.redli li { border-left: 5px solid var(--HE_COLOR_RED); box-sizing: border-box; }*/

.full-article-body ul.redli li:not(:has(h5)) { position: relative; background-color: #f7f7f9; font-size: 0.9375rem; padding: 10px 15px 10px 22px; margin: 0 auto 10px; /*border: 1px solid #e2e2e2;*/ border-radius: 15px; /*border-left: 5px solid var(--HE_COLOR_RED);*/ }


.full-article-body ol.hd-numbered-list { list-style: none !important; counter-reset: hd-counter; padding-left: 0 !important; margin: 0 0 0 20px; }

.full-article-body ol.hd-numbered-list li { position: relative; padding-left: 45px !important; counter-increment: hd-counter; padding: 5px 0 5px 45px; }

.full-article-body ol.hd-numbered-list li strong { color: #1a1a1a; }

.full-article-body ol.hd-numbered-list li::before { content: counter(hd-counter); position: absolute; left: 0; width: 25px; height: 25px; background-color: var(--HE_COLOR_WHI); border: 1px solid #ababab; color: #555; font-size: 0.95rem; font-weight: 500; border-radius: 5px; display: flex; align-items: center; justify-content: center; }



.artp-note-box { border: 1px solid #e2e2e2; border-radius: 15px; padding: 20px 15px 20px 25px; margin: 0; box-sizing: border-box; }

.artp-note-header { display: flex; align-items: center; gap: 10px; font-family: var(--HE_FONT_HEADINGS); font-size: 1.0000rem; text-transform: uppercase; margin-bottom: 5px; }

.artp-note-header i { font-size: 1.1250rem; margin: 0; }

.artp-note-box p { font-size: 0.9375rem; line-height: 1.4; margin: 0; padding: 0; }

/*.artp-note-box ul { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.artp-note-box ul li { font-size: 1rem; line-height: 1.4; padding: 12px 10px 12px 25px; }*/

.artp-note-info { background-color: #f9f9f9; /*border-color: #d2e1f7;*/ /*box-shadow: 0px 5px 0px 0px rgba(210, 225, 247, 1);*/ }

.artp-note-info .artp-note-header { color: #5d687c; font-weight: 500; }




@media screen and (max-width: 1279px) {
  .full_art_card { gap: 20px; padding: 20px; }
  
  .full_art_header { padding: 40px 20px; margin-bottom: -20px; }
  
  .full_info_wrapper { padding: 20px; }
  
  .article-component { padding: 20px; }
}

@media screen and (max-width: 639px) {
  .full_art_card { padding: 20px 10px 10px; }
  
  .full_art_header { padding: 30px 20px; /*margin-bottom: -10px;*/ }
  
  .full_info_wrapper { padding: 20px 10px; }
  
  .article-component { gap: 20px; padding: 20px 10px; }
  
  .full_art_header h1 { font-size: 1.8750rem; }
  
  .article-component .pros-cons .content { flex-direction: column; }
  
  .article-component .pros-cons h3 { font-size: 1.1250rem; }
  
  .article-component h2 { gap: 10px; padding: 10px 10px; font-size: 1.1250rem; }
  
  .article-component h2 i { width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; font-size: 1.2500rem; }
  
  .article-component h3 { font-size: 1.1250rem; }

  .article-component h3:not(:has(i))::before { font-size: 1.1250rem; margin: 0 10px 0 10px; }
  
  .article-component h4 { font-size: 1.0000rem; }
  
  .article-component h4::before { font-size: 1.1250rem; margin: 0 10px 0 10px; }
  
  .article-component h5 { font-size: 0.8750rem; margin: 0 0 0 10px; }
  
  .article-component p { padding: 15px 10px; }
  
  .flex-table { margin: 0 10px; }
  
  .full_info_wrapper2 { padding: 20px 10px; }
  
  
  .full-article-body ul.blueli li { padding: 10px 15px 10px 10px; }
  
  .full-article-body ul.blueli li::before { margin: 0 10px 0 0; }
  
  
  .full-article-body ul.greenli li:not(:has(h5)) { padding: 10px 15px 10px 10px; }
  
  .full-article-body ul.greenli li:not(:has(h5))::before { margin: 0 10px 0 0; }
  
  
  .full-article-body ul.redli li:not(:has(h5)) { padding: 10px 15px 10px 10px; }
  
  .full-article-body ul.redli li:not(:has(h5))::before { margin: 0 10px 0 0; }
}




/*============================================================================
  СПОЙЛЕР ДЛЯ ЗМІСТУ СТАТТІ /START/
============================================================================*/

.spoiler-container { max-width: 600px; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 15px; background-color: #f9f9f9; overflow: hidden; }

.spoiler-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: var(--HE_COLOR_WHI); cursor: pointer; user-select: none; transition: background-color 0.25s ease; }

.spoiler-header:hover { background-color: #f5f5f5; }

.spoiler-title { font-family: var(--HE_FONT_HEADINGS); font-weight: 500; font-size: 1.2500rem; color: #333; }

.spoiler-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8750rem; color: var(--HE_COLOR_AHOV); font-weight: 500; }

.spoiler-btn .btn-text { text-decoration: underline; }

/* Іконка та її плавний поворот */
.spoiler-icon { font-size: 0.7500rem; transition: transform 0.25s ease-out; display: inline-block; }

.spoiler-container.open .spoiler-icon { transform: rotate(180deg); }

/* Плавне відкриття блоку */
.spoiler-container .spoiler-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease-out; }

.spoiler-container.open .spoiler-wrapper { grid-template-rows: 1fr; }

.spoiler-inner { overflow: hidden; }

.content-list { margin: 0; padding: 15px 20px 20px 20px; /*list-style-type: decimal;*/ list-style-type: none; }

.content-list li {}

.content-list li:last-child { margin-bottom: 0; }

.content-list a { text-decoration: none; }

.content-list a:hover {}

#zmist { display: none; }

/*============================================================================
  СПОЙЛЕР ДЛЯ ЗМІСТУ СТАТТІ /END/
============================================================================*/
/*============================================================================
  ПОСИЛАННЯ/КНОПКИ ДОДАВАННЯ/ВИДАЛЕННЯ В/З ЗАКЛАДОК DLE /START/
============================================================================*/

.fav_pure_container { width: 100%; display: flex; justify-content: center; align-items: center; margin: 0 0 20px; box-sizing: border-box; }

.fav_pure_container a { width: 350px; font-size: 1.1000rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; min-height: auto; padding: 10px 16px; border-radius: 8px; font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none!important; white-space: nowrap; isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; cursor: pointer; font-family: var(--HE_FONT_HEADINGS); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease!important; }

.fav_pure_container a i { color: var(--HE_COLOR_WHI); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); padding: 6px 10px; font-size: 1.2500rem; height: 32px; align-items: center; border-radius: 8px; }

/**/

.fav_pure_container a[onclick*="plus"] { color: var(--HE_COLOR_WHI)!important; background: linear-gradient(180deg, #1bc4bc 0%, #159690 100%); border: none!important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #0d5e5a, 0 4px 8px 0 rgba(0, 0, 0, 0.15); }

.fav_pure_container a[onclick*="plus"]:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #0d5e5a, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none; }

.fav_pure_container a[onclick*="plus"]:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #0d5e5a, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96); }

.fav_pure_container a[onclick*="plus"]:focus-visible { outline: 3px solid color-mix(in srgb, #159690 42%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #0d5e5a, 0 12px 20px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px color-mix(in srgb, #159690 20%, transparent); }

/**/

.fav_pure_container a[onclick*="minus"] { color: var(--HE_COLOR_WHI)!important; background: linear-gradient(180deg, #eb7474 0%, #b32222 100%); border: none!important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #740808, 0 4px 8px 0 rgba(0, 0, 0, 0.15); }

.fav_pure_container a[onclick*="minus"]:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #740808, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none; }

.fav_pure_container a[onclick*="minus"]:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #740808, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96); }

.fav_pure_container a[onclick*="minus"]:focus-visible { outline: 3px solid color-mix(in srgb, #b32222 42%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #740808, 0 12px 20px 0 rgba(0, 0, 0, 0.25), 0 0 0 5px color-mix(in srgb, #b32222 20%, transparent); }

@media screen and (max-width: 600px) {
  
  .fav_pure_container a { width: 100%; justify-content: center; }

}

/*============================================================================
  ПОСИЛАННЯ/КНОПКИ ДОДАВАННЯ/ВИДАЛЕННЯ В/З ЗАКЛАДОК DLE /END/
============================================================================*/

.full_article_footer { display: flex; gap: 20px; width: 100%; background-color: #9ea4af; border-radius: 20px; padding: 20px 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); }

@media screen and (max-width: 639px) {
  .full_article_footer { flex-direction: column; padding: 20px 10px; }
}

/*============================================================================
  БЛОК ХМАРИ ТЕГІВ /START/
============================================================================*/

.full_art_tags_header { font-family: var(--HE_FONT_HEADINGS); text-align: center; color: var(--HE_COLOR_WHI); font-size: 1.2500rem; font-weight: 400; text-transform: uppercase; }

.full_art_tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 280px; }

@media screen and (max-width: 639px) {
  .full_art_tags { justify-content: center; }
}

.full_art_tags a { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; white-space: nowrap; background-color: #f5f5f5; border-radius: 6px; color: #5a5a5a; font-family: var(--HE_FONT_HEADINGS); font-size: 0.9375rem; text-decoration: none; box-sizing: border-box; transition: background-color 0.25s, color 0.25s, transform 0.25s; }

.full_art_tags a:hover { background-color: #3f4a60; color: var(--HE_COLOR_WHI); }

/*.full_art_tags a:active, .clouds_xsmall a:active, .clouds_xlarge a:active { transform: scale(0.96); }*/

.full_art_tags a::before { content: "\f02b"; font-family: "Font Awesome 6 Pro"!important; color: #b3b3b3; margin: 3px 4px 0 0; font-weight: 500; }

.full_art_tags a:hover::before { color: var(--HE_COLOR_WHI); }

/**/

.tags_cloud { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex: 1; min-width: 280px; }

.clouds_xsmall a,
.clouds_small a,
.clouds_medium a,
.clouds_large a,
.clouds_xlarge a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; white-space: nowrap; background-color: #f5f5f5; border-radius: 6px; color: #5a5a5a; font-family: var(--HE_FONT_HEADINGS); font-size: 0.9375rem; text-decoration: none; box-sizing: border-box; transition: background-color 0.25s, color 0.25s, transform 0.25s; }

.clouds_xsmall a:hover,
.clouds_small a:hover,
.clouds_medium a:hover,
.clouds_large a:hover,
.clouds_xlarge a:hover { background-color: #3f4a60; color: var(--HE_COLOR_WHI); }

.clouds_xsmall a::before,
.clouds_small a::before,
.clouds_medium a::before,
.clouds_large a::before,
.clouds_xlarge a::before { content: "\f02b"; font-family: "Font Awesome 6 Pro"!important; font-size: 0.9375rem!important; color: #b3b3b3; margin: 3px 4px 0 0; font-weight: 500; }

.clouds_xsmall a:hover::before,
.clouds_small a:hover::before,
.clouds_medium a:hover::before,
.clouds_large a:hover::before,
.clouds_xlarge a:hover::before { color: var(--HE_COLOR_WHI); }

.clouds_xsmall a { font-size: 0.9375rem; padding: 0 12px; }
.clouds_small a { font-size: 1.1875rem; padding: 4px 12px; }
.clouds_medium a { font-size: 1.4375rem; padding: 8px 12px; }
.clouds_large a { font-size: 1.6875rem; padding: 12px 12px; }
.clouds_xlarge a { font-size: 1.9375rem; padding: 16px 12px; }

/*============================================================================
  БЛОК ХМАРИ ТЕГІВ /END/
============================================================================*/
/*============================================================================
  ГОЛОСУВАННЯ ЗА МАТЕРІАЛ (ЛАЙКИ/ДИЗЛАЙКИ) /START/
============================================================================*/

.full_voting_zone { display: flex; flex-direction: column; align-items: center; gap: 15px; /*padding: 30px 0; margin-top: 25px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;*/ }

.full_vote_title { font-family: var(--HE_FONT_HEADINGS); font-size: 1.2500rem; font-weight: 400; color: #555; text-align: center; text-transform: uppercase; }

.full_vote_buttons { display: flex; gap: 15px; }

.full_vote_buttons a { text-decoration: none; }

.full_vote_btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 80px; height: 42px; background-color: var(--HE_COLOR_WHI); border: 1px solid #e2e2e2; border-radius: 20px; font-family: var(--HE_FONT_HEADINGS); font-size: 1.05rem; color: #5a5a5a; cursor: pointer; box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.125); transition: all 0.25s ease-in-out; outline: none; padding: 0 15px; }

.full_vote_btn i { font-size: 1.2500rem; }

.full_like:hover { color: var(--HE_COLOR_GRE); border-color: var(--HE_COLOR_GRE); transform: translateY(-2px); box-shadow: 0px 4px 0px 0px rgba(226, 226, 226, 1); }

.full_dislike:hover { color: var(--HE_COLOR_RED); border-color: var(--HE_COLOR_RED); transform: translateY(-2px); box-shadow: 0px 4px 0px 0px rgba(226, 226, 226, 1); }

.full_vote_btn:active { transform: translateY(3px); box-shadow: 0px 4px 0px 0px rgba(226, 226, 226, 1); }

/*============================================================================
  ГОЛОСУВАННЯ ЗА МАТЕРІАЛ (ЛАЙКИ/ДИЗЛАЙКИ) /END/
============================================================================*/
/*============================================================================
  НАВІГАЦІЯ В ПОВНІЙ ВЕРСІЇ СТАТТІ: PREV/NEXT /START/
============================================================================*/

.full_nav_container { /*width: 100%;*/ display: flex; align-items: center; margin: 10px 30px 0; box-sizing: border-box; }

.full_nav_container:not(:has(*)) { display: none; /* Приховати контейнер, якщо всередині нього НЕМАЄ жодного тегу */ }

.full_nav_link { display: inline-flex; align-items: center; text-decoration: none!important; font-family: var(--HE_FONT_HEADINGS); color: var(--HE_TEXT_COLOR, #333); font-size: 1.0000rem; text-transform: uppercase; letter-spacing: 0.03rem; font-weight: 400; box-sizing: border-box; transition: color 0.25s ease; }

.full_nav_text { position: relative; display: inline-block; padding-bottom: 1px!important; line-height: 1.2; }

.full_nav_text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; border-bottom: 1px dashed #777; transition: border-color 0.25s ease, border-bottom-style 0.25s; }

.full_nav_arrow { font-size: 1.2500rem; line-height: 1; color: var(--HE_COLOR_AHOV); font-weight: bold; transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); }

.full_link_next { margin-left: auto; }

.full_link_prev .full_nav_arrow { margin-right: 12px; }

.full_link_next .full_nav_arrow { margin-left: 12px; }

.full_nav_link:hover { color: var(--HE_COLOR_AHOV); }

.full_nav_link:hover .full_nav_text::after { border-bottom-style: solid; border-bottom-color: var(--HE_COLOR_AHOV); }

.full_link_prev:hover .full_nav_arrow { transform: translateX(-5px); }

.full_link_next:hover .full_nav_arrow { transform: translateX(5px); }

@media screen and (max-width: 639px) {  
  .full_nav_link { font-size: 0.7500rem; }
  
  .full_nav_arrow { display: none!important; }
  
  .full_nav_container { margin: 10px 10px 0; padding: 18px 0; }
}

/*============================================================================
  НАВІГАЦІЯ В ПОВНІЙ ВЕРСІЇ СТАТТІ: PREV/NEXT /END/
============================================================================*/
/*============================================================================
  ПРИЄДНАНІ ФАЙЛИ В ПОВНІЙ СТАТТІ/НОВИНІ /START/
============================================================================*/

span.attachment { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; width: 100%; padding: 22px 28px; background-color: #f5f5f5; border: 1px solid #edf2f2; border-radius: 12px; box-sizing: border-box; box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.02); position: relative; font-family: var(--HE_FONT_TEXT); font-size: 0.95rem; color: #555; font-family: var(--HE_FONT_HEADINGS); }

span.attach-download { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; width: 100%; }

span.attach-online { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; width: 100%; }

/*============================================================================
  ГРАФІЧНИЙ ПЕРЕХОПЛЮВАЧ: ПЕРЕТВОРЮЄМО СЛОВО «СКАЧАТИ ФАЙЛ:» НА ІКОНКУ
============================================================================*/

span.attachment { font-size: 0; }

span.attach-title { min-width: 165px; }

span.attach-download::before { content: "\f019"; font-family: "Font Awesome 6 Pro"; font-size: 1.0000rem; font-weight: 400; width: 20px; margin: 0 -15px 0 0; color: #525e73; line-height: 1; flex-shrink: 0; display: inline-block; transition: color 0.25s ease, transform 0.25s ease; }

span.attach-download:hover::before { color: var(--HE_MAIN_COLOR, #159690); }

span.attach-online::before { content: "\f06e"; font-family: "Font Awesome 6 Pro"; font-size: 1.0000rem; font-weight: 400; width: 20px; margin: 0 -15px 0 0; color: #525e73; line-height: 1; flex-shrink: 0; display: inline-block; transition: color 0.25s ease, transform 0.25s ease; }

span.attach-online:hover::before { color: var(--HE_MAIN_COLOR, #159690); }

/*============================================================================
  СТИЛІЗАЦІЯ КНОПКИ СКАЧУВАННЯ (ПОСИЛАННЯ <a>)
============================================================================*/

span.attach-download a,
span.attach-online a { font-size: 0.9375rem; font-weight: 400; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }

span.attach-download a:hover,
span.attach-online a:hover { }

span.attach-download a:active,
span.attach-online a:active { transform: translateY(3px); }

/*============================================================================
  ТЮНІНГ МЕТАДАНИХ (ВАГА ТА ЛІЧИЛЬНИК СКАЧУВАНЬ)
============================================================================*/

span.attachment { font-size: 0.9375rem; }

span.attachment { color: #555; font-weight: 500; }

/*============================================================================
  АДAПТИВНІСТЬ ДЛЯ СМAРТФОНІВ (ПЕРЕТВОРЮЄМО В МОБІЛЬНУ КAРТКУ)
============================================================================*/

@media screen and (max-width: 580px) {
  
  span.attachment { flex-direction: column; align-items: center; text-align: center; padding: 25px 20px; gap: 15px; }
  
  span.attachment::before { font-size: 2.5rem; }
  
  span.attachment a { width: 100%; justify-content: center; margin-right: 0; }

}

/*============================================================================
  ПРИЄДНАНІ ФАЙЛИ В ПОВНІЙ СТАТТІ/НОВИНІ /END/
============================================================================*/
















/*============================================================================
  КОРОТКА СПЕЦИФІКАЦІЯ ГАМАНЦЯ /START/
============================================================================*/

.overview_card_wrapper { background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 30px; }

.overview_card_header { display: flex; flex-direction: column; gap: 10px; }

.overview_card_title { font-size: 1.5000rem; color: #5b667a; text-transform: uppercase; text-align: center; font-weight: 500; }

.overview_card_subtitle { font-family: var(--HE_FONT_HEADINGS); text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; margin: 0; padding: 0; }

.overview_card_subtitle a { color: var(--HE_COLOR_ADEF); text-decoration: none; position: relative; display: inline-block; transition: color 0.25s ease; }

.overview_card_subtitle a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed var(--HE_COLOR_ADEF); transition: border-color 0.25s ease; }

.overview_card_subtitle a:hover { color: var(--HE_COLOR_AHOV)!important; }

.overview_card_subtitle a:hover::after { border-color: transparent; }

.overview_wrapper { display: flex; gap: 50px; align-items: flex-start; background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

.overview_img_box { width: 250px; border-radius: 10px; overflow: hidden; position: relative; flex-shrink: 0; box-shadow: 0px 6px 0px 0px rgba(226, 225, 231, 1); /*background-color: #f1f1f1;*/ /*transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;*/ }

.overview_img_box img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*.overview_img_box:hover  { transform: translateY(-2px); box-shadow: 0px 6px 0px 0px rgba(226, 226, 226, 1); }*/

.overview-info-box {
  display: grid; gap: 20px; font-size: 0.8750rem; line-height: 1.45; font-family: var(--HE_FONT_DEFAULT); flex-grow: 1;
}

.overview-info-box__summary,
.overview-info-box__details {
  display: grid; min-width: 0;
}

.overview-info-box__summary {
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 52px;
}
	
h3.overview-info-box__group-heading {
  grid-column: 1/-1; color: #999; font-size: 0.8750rem!important; font-weight: 500!important; line-height: 1.2; margin: 0; text-transform: uppercase;
}

h3.overview-info-box__group-heading::before {
  content: ""!important; margin: 0!important;
}

.overview-info-box__summary .overview-info-box__group-heading {
  padding: 0; margin-bottom: 15px;
}	
	
.overview-info-box__details .overview-info-box__group-heading {
  padding: 0; margin-bottom: 15px;
}	

.overview-info-box__summary .item,
.overview-info-box__details .item {
  display: flex; align-items: flex-start; padding-bottom: 12px; gap: 12px; padding-right: 20px;
}

.overview-info-box .overview-info-box__item {
  display: grid; grid-template-columns: minmax(160px, 36%) minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; min-height: 42px; border-bottom: 1px dashed #d1d1d1; padding: 12px 0;
}
.overview-info-box__summary .overview-info-box__item {
  grid-template-columns: minmax(210px, 40%) minmax(0, 1fr); min-height: 38px; padding-top: 10px; padding-bottom: 10px;
}
.overview-info-box__details .overview-info-box__item {
  grid-template-columns: minmax(210px, 22%) minmax(0, 1fr); border-bottom: 1px dashed #d1d1d1; min-height: 48px; padding-right: 0;
}	
	
.overview-info-box__summary .overview-info-box__item .label,
.overview-info-box__details .overview-info-box__item .label {
  display: inline-flex; color: #666; font-weight: 500; min-width: 150px; flex-basis: 50%; line-height: 1.25; align-content: center; align-items: center; gap: 10px;
}
.overview-info-box__summary .overview-info-box__item .label i,
.overview-info-box__details .overview-info-box__item .label i {
  flex: 0 0 25px; text-align: center; color: #525e73; font-size: 0.8750rem;
}
.overview-info-box__summary .overview-info-box__item .value {
  color: #444; font-weight: 700; display: inline-block; flex-basis: 50%;
}
.overview-info-box__details .overview-info-box__item .value {
  color: #444; font-weight: 400; display: inline-block; flex-basis: 50%; font-size: 0.8750rem;
}	
.overview-info-box__summary .overview-info-box__item .value a i,
.overview-info-box__details .overview-info-box__item .value a i {
  margin-left: 3px;
}

@media screen and (max-width: 1100px) {
  .overview-info-box__summary {
    grid-template-columns: 1fr;
  }
  .overview-info-box__summary .overview-info-box__item, .overview-info-box__details .overview-info-box__item {
    grid-template-columns: minmax(150px, 30%) minmax(0, 1fr); padding-right: 0;
  }
  .overview-info-box__summary .label {
    white-space: normal;
  }
}

@media screen and (max-width: 767px) {
  .overview-info-box {
    gap: 10px;
  }
  h3.overview-info-box__group-heading {
    font-size: 10px; letter-spacing: .055em;
  }
  .overview-info-box__summary .overview-info-box__item {
    grid-template-columns: minmax(122px, 42%) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; padding-top: 9px; padding-bottom: 9px;
  }
  .overview-info-box__summary .label {
    gap: 7px; line-height: 1.18;
  }
  .overview-info-box__summary .label i {
    width: 14px; flex-basis: 14px; font-size: 12px; opacity: .7;
  }
  .overview-info-box__summary .value {
    justify-self: end; max-width: 100%; text-align: right;
  }
  .overview-info-box__summary .value a {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  }
  .overview-info-box__details .overview-info-box__item {
    grid-template-columns: 1fr; gap: 6px; min-height: 0; padding-top: 12px; padding-bottom: 12px;
  }
  .overview-info-box__details .label {
    gap: 7px; line-height: 1.22;
  }
  .overview-info-box__details .label i {
    width: 14px; flex-basis: 14px;
  }
  .overview-info-box__details .value {
    line-height: 1.45;
  }
}

@media screen and (max-width: 767px) {
  .overview_card_wrapper { padding: 20px 10px 10px; gap: 20px; }
  
  .overview_wrapper { flex-direction: column; gap: 30px; padding: 10px; }
  
  .overview_img_box { margin: 0 auto; }
}

/*============================================================================
  КОРОТКА СПЕЦИФІКАЦІЯ ГАМАНЦЯ /END/
============================================================================*/















/*============================================================================
  ФОРМА ДОДАВАННЯ КОМЕНТАРЯ /START/
============================================================================*/

.add_comment_form_box { display: flex; flex-direction: column; gap: 20px; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-sizing: border-box; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); }

.comment_form_header { display: flex; flex-direction: column; gap: 10px; }

.comment_form_title { font-size: 1.5000rem; color: #5b667a; text-transform: uppercase; text-align: center; font-weight: 500; }

.comment_form_subtitle { font-family: var(--HE_FONT_HEADINGS); text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; margin: 0; padding: 0; }

.comment_form_wrapper { display: flex; flex-direction: column; gap: 30px; background-color: #f0f0f4cc; border-radius: 20px; padding: 30px; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); border: 1px solid var(--HE_COLOR_WHI); }

.comments-image-uploader-area a { text-decoration: none!important; color: var(--HE_TEXT_COLOR, #333); font-size: 1rem; border-bottom: 1px dashed #777; transition: color 0.25s ease; }

.comments-image-uploader-area a:hover { color: var(--HE_COLOR_AHOV); border-bottom-style: solid; border-bottom-color: var(--HE_COLOR_AHOV); }

@media screen and (max-width: 639px) {
  .add_comment_form_box { padding: 20px 10px 10px; }
  
  .comment_form_wrapper { padding: 20px 10px; }
}

/*============================================================================
  ФОРМА ДОДАВАННЯ КОМЕНТАРЯ /END/
============================================================================*/
/*============================================================================
  КОМЕНТАРІ /START/
============================================================================*/

.comm_avatar_box { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid #e2e2e2; background-color: #eee; }

.comm_avatar_box img { width: 100%; height: 100%; object-fit: cover; }

.comm_card { display: flex; gap: 30px; align-items: flex-start; background-color: #fbfbfb; border: 1px solid #e2e2e2; border-radius: 12px; padding: 30px; box-shadow: 0px 4px 0px 0px rgba(226, 226, 226, 0.5); box-sizing: border-box; }

.comm_body { flex: 1; }

.comment_search a { font-size: 1.1250rem; color: var(--HE_COLOR_ADEF); border-bottom: 1px dashed var(--HE_COLOR_ADEF); text-decoration: none; font-weight: 400!important; transition: color 0.25s ease, border-color 0.25s ease; }

.comment_search a:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.comm_header { display: flex; justify-content: space-between; align-items: center; padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px dashed #e2e2e2; }

.comm_username { font-family: var(--HE_FONT_HEADINGS); font-size: 1.1250rem; }

.comm_username a { font-size: 1.1250rem; color: var(--HE_COLOR_ADEF); border-bottom: 1px solid var(--HE_COLOR_ADEF); text-decoration: none; font-weight: 500; transition: color 0.25s ease, border-color 0.25s ease; }

.comm_username a:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.comm_date { font-size: 0.8rem; color: #b3b3b3; }

.comm_text { font-family: var(--HE_FONT_DEFAULT); font-size: 0.9375rem; line-height: 1.5; color: #555; margin: 12px 0 12px 0; padding: 20px; background-color: #eeeef2; }

.comm_text p { font-family: var(--HE_FONT_DEFAULT); font-size: 0.9375rem; line-height: 1.5; color: #555; margin: 0 0 12px 0; }

.comm_text p:last-child { margin: 0; }

.comm_footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; margin-top: 10px; border-top: 1px dashed #e2e2e2; }

.comment_vote { display: flex; gap: 10px; }

.comment_vote a { text-decoration: none; }

.comm_vote_like { background: transparent; border: none; font-size: 0.9rem; color: #999; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 0; transition: color 0.25s; }

.comm_vote_like i { font-size: 1rem; }

.comm_vote_like:hover { color: var(--HE_MAIN_COLOR, #159690); }

.comm_vote_dislike { background: transparent; border: none; font-size: 0.9rem; color: #999; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 0; transition: color 0.25s; }

.comm_vote_dislike i { font-size: 1rem; }

.comm_vote_dislike:hover { color: #d93838; }

.comm_actions { display: flex; gap: 10px; align-items: center; }

.comm_actions a {
  font-size: 0.8750rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; /*width: 100%;*/ min-height: auto; padding: 10px 20px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI) !important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none !important; white-space: nowrap; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none !important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #3e4653, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease !important;
}
.comm_actions a:hover {
  transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none;
}
.comm_actions a:active {
  transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #3e4653, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96);
}

.comm_actions a i { font-size: 1rem; margin-top: -2px; }

.votes_count { font-family: var(--HE_FONT_HEADINGS); }

.sw-moderation-wrapper { display: inline-flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; vertical-align: middle; width: 44px; height: 24px; margin-left: auto; }

.sw-moderation-wrapper input.sw-checkbox-hidden { position: absolute; opacity: 0; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; pointer-events: none; }

.sw-moderation-wrapper .sw-toggle-track { display: block; width: 44px; height: 24px; background-color: #e2e2e2; border-radius: 14px; position: relative; cursor: pointer; box-sizing: border-box; margin: 0; padding: 0; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.08)/*, 0px 3px 0px 0px rgba(226, 226, 226, 0.5)*/; transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }

.sw-moderation-wrapper .sw-toggle-handle { display: block; width: 18px; height: 18px; background-color: var(--HE_COLOR_WHI); border-radius: 50%; position: absolute; top: 3px; left: 3px; box-sizing: border-box; transform: none; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1), inset 0px 1px 0 rgba(0, 0, 0, 0.05); transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), width 0.25s ease; }

.sw-moderation-wrapper .sw-toggle-track:active .sw-toggle-handle { width: 22px; }

.sw-moderation-wrapper input.sw-checkbox-hidden:checked ~ .sw-toggle-track { background-color: var(--HE_COLOR_AHOV); box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.15)/*, 0px 3px 0px 0px #0e6662*/; }

.sw-moderation-wrapper input.sw-checkbox-hidden:checked ~ .sw-toggle-track .sw-toggle-handle { transform: translateX(20px); }

.sw-moderation-wrapper input.sw-checkbox-hidden:checked ~ .sw-toggle-track:active .sw-toggle-handle { transform: translateX(14px); }

/**/

.mass_comments_action { position: relative; width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 15px; margin-top: 30px; box-sizing: border-box; }

.mass_comments_action select#mass_action { position: relative; min-height: 41px; vertical-align: top; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; /*margin-right: 10px;*/ font-size: var(--HE_FS_BODY); color: #666; background-color: #fbfbfb; border: 1px solid #cbd5e0; border-radius: 8px; padding: 8px 35px 8px 15px; cursor: pointer; outline: none; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.02); -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; }

.mass_comments_action select#mass_action:hover, .mass_comments_action select#mass_action:focus { background-color: var(--HE_COLOR_WHI); border-color: #bebdc1; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.02); }

.mass_comments_action label[for="mass_action"] { font-family: var(--HE_FONT_HEADINGS); font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.02rem; font-weight: 500; color: #333; user-select: none; }

.mass_comments_action button.bbcodes {
  font-size: 1.1000rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; /*width: 100%;*/ min-height: auto; padding: 10px 50px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI)!important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none!important; white-space: nowrap; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none!important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #3e4653, 0 4px 8px 0 rgba(0, 0, 0, 0.15); top: -2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease!important;
}
.mass_comments_action button.bbcodes:hover {
  transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none;
}
.mass_comments_action button.bbcodes:active {
  transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #3e4653, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96);
}

#dle-ajax-comments:not(:has(*)) { display: none; /* Приховати контейнер, якщо всередині нього НЕМАЄ жодного тегу */ }

@media screen and (max-width: 1023px) {
  .comm_avatar_box { width: 50px; height: 50px; border: 1px solid #e2e2e2; margin: 0 auto; }
  
  .comm_footer { flex-direction: column; }
  
  .comment_vote { margin-bottom: 20px; }
}


@media screen and (max-width: 959px) {
  .comm_actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  
  .comm_actions .sw-moderation-wrapper { grid-column-start: 2; }
}


@media screen and (max-width: 639px) {
  .comm_avatar_box { width: 50px; height: 50px; border: 1px solid #e2e2e2; margin: 0 auto; }
  
  .comm_card { flex-direction: column; padding: 20px 10px; gap: 10px; }
  
  .comm_header { flex-direction: column; }
  
  .comm_footer { flex-direction: column; }
  
  .comment_vote { margin-bottom: 20px; }
  
  .comm_vote_like i { font-size: 1.5000rem; }
  
  .comm_vote_dislike i { font-size: 1.5000rem; }
  
  .comm_actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  
  .mass_comments_action { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 20px; }
  
  .mass_comments_action::after { display: none; }
  
  .mass_comments_action label[for="mass_action"] { text-align: center; margin-bottom: 2px; }
  
  .mass_comments_action select#mass_action, .mass_comments_action button.bbcodes { width: 100%; justify-content: center; text-align: center; }
  
  .comm_actions .sw-moderation-wrapper { grid-column-start: 2; }
}

/*============================================================================
  КОМЕНТАРІ /END/
============================================================================*/








.related_news_box { display: flex; flex-direction: column; gap: 30px; background-color: #e8e7ed; border-radius: 30px; padding: 30px; box-sizing: border-box; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); }

.related_news_header { display: flex; flex-direction: column; gap: 10px; }

.related_news_title { font-size: 1.5000rem; color: #5b667a; text-transform: uppercase; text-align: center; font-weight: 500; }

.related_news_subtitle { font-family: var(--HE_FONT_HEADINGS); text-align: center; color: #777; font-size: 0.6875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02rem; margin: 0; padding: 0; }

.related_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.related_h { font-size: 1.500rem!important; margin: 0!important; height: 75px; overflow: hidden; }

@media screen and (max-width: 1023px) {  
  .related_news_box { gap: 20px; padding: 20px; }
  
  .related_list { grid-template-columns: 1fr; }
}


@media screen and (max-width: 639px) {  
  .related_news_box { gap: 20px; padding: 20px 10px 10px; }
  
  .related_list { grid-template-columns: 1fr; }
}

























/*============================================================================
  ГОРИЗОНТАЛЬНА ПАГІНАЦІЯ /START/
============================================================================*/

.cat-pagination a, .cat-pag-btn a {
  font-size: 0.8750rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; min-height: auto; padding: 11px 15px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI)!important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none!important; white-space: nowrap; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none!important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #3e4653, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease, outline-color 0.25s ease!important;
}

.cat-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; }

.cat-pag-numbers { display: flex; align-items: center; gap: 8px; }

.cat-pagination span {
  font-size: 0.8750rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; /*height: 40px;*/ padding: 11px 15px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI)!important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none!important; white-space: nowrap; background-color: #db7c0a; isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none!important; font-family: var(--HE_FONT_HEADINGS); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #ab6007, 0 4px 8px 0 rgba(0, 0, 0, 0.15); transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.cat-pag-btn span {
  font-size: 0.8750rem; position: relative; display: inline-flex; justify-content: center; gap: 8px; align-items: center; height: 40px; padding: 11px 15px; border-radius: 8px; font-weight: 400; line-height: 1; color: var(--HE_COLOR_WHI)!important; text-transform: uppercase; letter-spacing: 0.03rem; text-align: center; text-decoration: none!important; white-space: nowrap; background: linear-gradient(180deg, #717d94 0%, #5b667a 100%); isolation: isolate; overflow: hidden; outline: 0 solid transparent; outline-offset: 3px; border: none!important; font-family: var(--HE_FONT_HEADINGS); cursor: default; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 0 0 #3e4653, 0 4px 8px 0 rgba(0, 0, 0, 0.15); transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.cat-pag-numbers a { min-width: 40px; }

.cat-pag-numbers span { min-width: 40px; cursor: default; }

.cat-pag-numbers span.nav_ext { font-family: var(--HE_FONT_DEFAULT); font-size: 1.1250rem; background-color: transparent; padding: 0; box-shadow: none; color: #333!important; user-select: none; }

.cat-pag-btn i { font-size: 1.1250rem; transition: transform 0.25s ease; }

.cat-pagination a:hover {
  transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 0 0 #3e4653, 0 12px 20px 0 rgba(0, 0, 0, 0.25); filter: brightness(1.05); text-decoration: none;
}

.cat-pag-prev a:hover i { transform: translateX(-3px); }

.cat-pag-next a:hover i { transform: translateX(3px); }

.cat-pagination a:active {
  transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 0 #3e4653, 0 4px 8px rgba(0, 0, 0, 0.2); filter: brightness(0.96);
}

.cat-pag-btn span { transform: none; opacity: 0.6; }

.cat-pag-btn span i { color: #a0aec0; }


@media screen and (max-width: 680px) {
  
  .cat-pagination { flex-wrap: wrap; gap: 10px; }
  
  .cat-pag-btn { width: 40px; height: 40px; }
  
  .cat-pag-btn a, .cat-pag-btn span { width: 40px; padding: 0; }
  
  .cat-pag-btn span:not([class]), .cat-pag-btn a { font-size: 0; min-height: 40px; }
  
  .cat-pag-btn i { margin: 0; font-size: 1.3125rem; }
  
  .cat-pag-prev i { margin: 0 0 0 15px; }
  
  .cat-pag-next i { margin: 0 15px 0 0; }
}

/*============================================================================
  ГОРИЗОНТАЛЬНА ПАГІНАЦІЯ /END/
============================================================================*/
/*============================================================================
  MAIN /END/
============================================================================*/
/*============================================================================
  FOOTER /START/
============================================================================*/

.hex_footer { width: 100%; background-color: #b4b3ba; box-sizing: border-box; position: relative; z-index: 10; box-shadow: inset 0px 15px 50px rgba(0,0,0,0.1); border-top: 1px solid #c7c6cb; }

@media screen and (min-width: 740px) {  
  .hex_footer { padding: 0 !important; }
}

.ft_container { max-width: 1440px; margin: 0 auto; padding: 60px 40px 50px; display: grid; grid-template-columns: 1.2fr 0.7fr 0.7fr 0.7fr; gap: 50px; box-sizing: border-box; }

.ft_logo { margin-bottom: 20px; }

.ft_logo picture { display: block; }

.ft_logo picture img { max-width: 250px; }

.ft_brand_desc { font-size: 0.8750rem; color: #525e73; margin: 0 0 25px 0; /*max-width: 350px;*/ hyphens: auto; border-radius: 20px 0px 20px 20px; padding: 20px 30px 20px 30px; background-color: #ffffff5e; border: 1px solid #e4e4e5; }

.ft_socials { display: flex; gap: 12px; }

.ft_soc_btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #525e73; border: 1px solid #6d798f; border-radius: 50%; color: var(--HE_COLOR_WHI); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: background-color 0.25s, transform 0.25s, box-shadow 0.25s; }

.ft_soc_btn:hover { background-color: #db7c0a; border-color: #db7c0a; color: var(--HE_COLOR_WHI); }

.ft_soc_btn:active { transform: translateY(2px); box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.1); }

.ft_title { font-size: 1.3750rem; color: var(--HE_COLOR_WHI); text-transform: uppercase; letter-spacing: 0.04rem; margin: 0 0 25px 0; font-weight: 400; }

.ft_links { list-style: none; padding: 20px 20px 20px 30px; margin: 0; display: grid; grid-template-columns: 1fr; /*gap: 5px;*/ border-radius: 0px 20px 20px 20px; background-color: #ffffff5e; border: 1px solid #e4e4e5; box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.1); }

.ft_links li { border-bottom: 1px dashed #b4b3ba; padding: 5px 0; }

.ft_links li a { font-size: 0.9375rem; color: var(--HE_COLOR_ADEF); text-decoration: none; display: inline-flex; align-items: center; position: relative; padding-left: 18px; transition: color 0.25s ease; border-bottom: none !important; }

/*.ft_links li a::after { content: ""; position: absolute; left: 18px; right: 0; bottom: 3px; border-bottom: 1px dashed #3f4a60; transition: border-color 0.25s ease; }*/

.ft_links li a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--HE_COLOR_ADEF); background: transparent; transition: background-color 0.25s ease, border-color 0.25s ease; }

.ft_links li a:hover { color: var(--HE_COLOR_AHOV); }

.ft_links li a:hover::before { background: var(--HE_COLOR_AHOV); border-color: var(--HE_COLOR_AHOV); }

/*.ft_links li a:hover::after { border-bottom-style: solid; border-bottom-color: var(--HE_MAIN_COLOR, #159690); }*/

.ft_sub_text { color: #999; margin: 0 0 20px 0; }

.ft_bottom_bar { width: 100%; border-top: 1px solid #c5c4c9; background-color: #a1a0a5; padding: 20px 0; box-shadow: inset 0px 15px 50px rgba(0 ,0 ,0 ,0.1); }

.ft_bottom_container { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; }

.ft_copyright { font-size: 0.85rem; color: var(--HE_COLOR_WHI); margin: 0; }

.ft_bottom_links a { font-size: 0.85rem; color: #e0e2e5; text-decoration: none; margin-left: 20px; transition: color 0.25s ease; }

.ft_bottom_links a:hover { color: var(--HE_COLOR_WHI); }

.ft_bottom_links a i { font-size: 0.75rem; transition: transform 0.25s ease; }

.ft_bottom_links a:hover i { transform: translate(0.12rem, -0.12rem); }

@media screen and (max-width: 1120px) {  
  .ft_container { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 30px; }
}

@media screen and (max-width: 992px) {  
  .ft_container { grid-template-columns: 1fr 1fr; gap: 40px; }
  
  .ft_col_brand, .ft_col_sub { grid-column: span 2; max-width: 100%; }
  
  .ft_form { max-width: 100%; }
}

@media screen and (max-width: 600px) {  
  .ft_container { grid-template-columns: 1fr; gap: 35px; padding: 40px 20px 30px; }
  
  .ft_col_brand, .ft_col_sub { grid-column: span 1; }
  
  .ft_bottom_container { flex-direction: column; gap: 12px; text-align: center; }
  
  .ft_bottom_links a { margin: 0 10px; }
}

/*============================================================================
  FOOTER /END/
============================================================================*/
/*============================================================================
  МОДАЛЬНИЙ ПОШУК З ПЛАВАЮЧИМ ТРИГЕРОМ /START/
============================================================================*/

.search-toggle-checkbox { display: none !important; }

.search-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(20, 20, 20, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 9998; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }

.search-backdrop-close-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }

body:has(.search-toggle-checkbox:checked) .search-backdrop { opacity: 1; visibility: visible; }

.search-window-card { position: absolute; z-index: 5; width: 100%; max-width: 50%; background-color: #e8e7ed; border: 1px solid #e2e2e2; border-radius: 20px; padding: 45px 35px; box-shadow: 0px 15px 50px rgba(0,0,0,0.25); box-sizing: border-box; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); top: 20px; }

body:has(.search-toggle-checkbox:checked) .search-window-card { transform: translateY(0); }

.search-close-btn { position: absolute; top: 15px; right: 20px; font-size: 1.1rem; color: #999; cursor: pointer; user-select: none; transition: color 0.25s; }

.search-close-btn:hover { color: #d93838; }

.search-card-header { text-align: center; margin-bottom: 30px; }

.search-magnifying-glass-icon { width: 50px; height: 50px; background-color: #f1f1f5; border: 1px solid #d7d7d7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #7d7d7e; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05); }

.search-magnifying-glass-icon i { font-size: 1.6rem !important; }

.search-card-header h2 { font-size: 1.5000rem; text-transform: uppercase; margin: 0 0 5px 0; color: #5b667a; }

.search-card-header p { font-family: "Oswald"; font-size: 0.6875rem; text-transform: uppercase; color: #777; margin: 0; }

.search-form { display: flex; flex-direction: column; gap: 20px; }

.search-form-group { display: flex; /*flex-direction: column;*/ gap: 20px; justify-content: space-between; align-items: center; }

.search-label { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_H6); color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.02rem; width: 75px; }

.search-input-wrapper { position: relative; width: 100%; display: inline-flex; align-items: center; }

.search-input-wrapper i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: #999; pointer-events: none; z-index: 2; transition: color 0.25s ease; }

.search-input { width: 100%; background-color: #fcfcfc; border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 15px 12px 42px; font-size: var(--HE_FS_BODY); color: #333; outline: none; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.03); transition: border-color 0.25s, background-color 0.25s; }

.search-input:focus { border-color: #bebdc1; background-color: var(--HE_COLOR_WHI); }

.search-input-wrapper:focus-within i { color: #bebdc1; }

.search-footer-links { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 15px; border-top: 1px solid #d1d1d1; }

.search-footer-link { font-size: 0.95rem; color: #888; text-decoration: none; border-bottom: 1px dashed #b3b3b3; padding-bottom: 1px !important; transition: color 0.25s, border-color 0.25s; }

.search-footer-link:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

@media screen and (max-width: 480px) {  
  .search-window-card { max-width: 90%; padding: 35px 20px; }

  .search-footer-links { flex-direction: column; gap: 12px; text-align: center; }
}

/*============================================================================
  МОДАЛЬНИЙ ПОШУК З ПЛАВАЮЧИМ ТРИГЕРОМ /END/
============================================================================*/

.search_results { display: grid; gap: 50px; grid-template-columns: repeat(2, 1fr); /* Створює дві рівні колонки */ }

.search_results #fullsearch { grid-column: span 2; /* Розтягує форму на обидві колонки */ }

.search_results .cat-pagination { grid-column: span 2; /* Розтягує форму на обидві колонки */ }

.search_results .info_card_wrapper { grid-column: span 2; /* Розтягує форму на обидві колонки */ }

@media screen and (max-width: 639px) {
  .search_results { grid-template-columns: 1fr; }
  
  .search_results #fullsearch { grid-column: span 1; }
  
  .search_results .cat-pagination { grid-column: span 1; }
  
  .search_results .info_card_wrapper { grid-column: span 1; }
}

/*============================================================================
  РЕЗУЛЬТАТИ ШВИДКОГО ПОШУКУ НА AJAX ПІД ПОШУКОВОЮ ФОРМОЮ /START/
============================================================================*/
/*
#searchsuggestions { z-index: 99999; width: 57.85rem; border-radius: 0 0 8px 8px; background: var(--HE_COLOR_WHI); box-shadow: 0px 8px 0px 0px rgba(226, 226, 226, 1), 0px 15px 30px rgba(0, 0, 0, 0.06); border: 1px solid #e2e2e2; background-clip: padding-box; font-size: .9rem; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

#searchsuggestions a, #searchsuggestions span.notfound { padding: 20px 25px; display: block; text-decoration: none; border-bottom: 1px solid #e5e5e5; }

#searchsuggestions a {}

#searchsuggestions a:hover { background-color: #f7f7f7; }

#searchsuggestions a span { display: inline-block; color: #555; cursor: pointer; }

#searchsuggestions span.searchheading { position: relative; display: inline-flex; align-items: center; color: var(--HE_MAIN_COLOR, #159690); font-size: 1rem; padding-bottom: 1px; margin-bottom: 5px; transition: color 0.2s; }

#searchsuggestions span.searchheading::before { content: "\e076"; font-family: "Phosphor" !important; color: #555; font-size: 1.125rem; margin: 0 10px 0 0; display: inline-block; }

#searchsuggestions span.searchheading::after { content: ""; position: absolute; left: 28px; right: 0; bottom: 0; border-bottom: 1px dashed rgba(21, 150, 144, 0.5); transition: border-color 0.2s; }

#searchsuggestions span.searchheading:hover { color: #2eb8b2; }

#searchsuggestions span.searchheading:hover::after { border-bottom-color: transparent; }

#searchsuggestions span.seperator { display: block; }

#searchsuggestions span.seperator a { padding: 20px 0; text-align: center; border: 0 none; background-color: transparent; color: #555; }

#searchsuggestions span.notfound { display: block; font-size: 1rem; }

#searchsuggestions .break { display: none; }

@media screen and (max-width: 960px) {
  
  #searchsuggestions { width: 23.15rem; }

}
*/
/*============================================================================
  РЕЗУЛЬТАТИ ШВИДКОГО ПОШУКУ НА AJAX ПІД ПОШУКОВОЮ ФОРМОЮ /END/
============================================================================*/
/*============================================================================
  МОДАЛЬНА АВТОРИЗАЦІЯ З ПЛАВАЮЧИМ ТРИГЕРОМ /START/
============================================================================*/

.auth-toggle-checkbox { display: none !important; }

.auth-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(20, 20, 20, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 9998; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }

.auth-backdrop-close-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }

body:has(.auth-toggle-checkbox:checked) .auth-backdrop { opacity: 1; visibility: visible; }

.auth-window-card { position: relative; z-index: 5; width: 100%; max-width: 420px; background-color: #e8e7ed; border: 1px solid #e2e2e2; border-radius: 20px; padding: 45px 35px; box-shadow: 0px 15px 50px rgba(0,0,0,0.25); box-sizing: border-box; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }

body:has(.auth-toggle-checkbox:checked) .auth-window-card { transform: translateY(0); }

.auth-close-btn { position: absolute; top: 15px; right: 20px; font-size: 1.1rem; color: #999; cursor: pointer; user-select: none; transition: color 0.25s; }

.auth-close-btn:hover { color: #d93838; }

.auth-card-header { text-align: center; margin-bottom: 30px; }

.auth-fingerprint-icon { width: 50px; height: 50px; background-color: #f1f1f5; border: 1px solid #d7d7d7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #7d7d7e; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05); }

.auth-fingerprint-icon i { font-size: 1.6rem !important; }

.auth-card-header h2 { font-size: 1.5000rem; text-transform: uppercase; margin: 0 0 5px 0; color: #5b667a; }

.auth-card-header p { font-family: "Oswald"; font-size: 0.6875rem; text-transform: uppercase; color: #777; margin: 0; }

.auth-form { display: flex; flex-direction: column; gap: 20px; }

.auth-form-group { display: flex; /*flex-direction: column;*/ gap: 20px; justify-content: space-between; align-items: center; }

.auth-label { font-family: var(--HE_FONT_HEADINGS); font-size: var(--HE_FS_BODY); color: #5a5a5a; text-transform: uppercase; letter-spacing: 0.02rem; width: 75px; }

.auth-input-wrapper { position: relative; width: 100%; display: inline-flex; align-items: center; }

.auth-input-wrapper i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: #999; pointer-events: none; z-index: 2; transition: color 0.25s ease; }

.auth-input { width: 100%; background-color: #fcfcfc; border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 15px 12px 42px; font-size: var(--HE_FS_BODY); color: #333; outline: none; box-sizing: border-box; box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.03); transition: border-color 0.25s, background-color 0.25s; }

.auth-input:focus { border-color: #bebdc1; background-color: var(--HE_COLOR_WHI); }

.auth-input-wrapper:focus-within i { color: #bebdc1; }

.auth-footer-links { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 15px; border-top: 1px solid #d1d1d1; }

.auth-footer-link { font-size: 0.95rem; color: #888; text-decoration: none; border-bottom: 1px dashed #b3b3b3; padding-bottom: 1px !important; transition: color 0.25s, border-color 0.25s; }

.auth-footer-link:hover { color: var(--HE_COLOR_AHOV); border-bottom-color: transparent; }

.auth-link-reg { color: var(--HE_COLOR_ADEF); border-bottom-color: var(--HE_COLOR_ADEF); }

.auth-link-reg:hover { color: var(--HE_COLOR_AHOV); }

@media screen and (max-width: 480px) {  
  .auth-window-card { max-width: 90%; padding: 35px 20px; }

  .auth-footer-links { flex-direction: column; gap: 12px; text-align: center; }
}

/*============================================================================
  МОДАЛЬНА АВТОРИЗАЦІЯ З ПЛАВАЮЧИМ ТРИГЕРОМ /END/
============================================================================*/
/*============================================================================
  МОДАЛЬНИЙ КАБІНЕТ АВТОРИЗОВАНОГО КОРИСТУВАЧА /START/
============================================================================*/

.prof-toggle-checkbox { display: none !important; }

.prof-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(20, 20, 20, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 9998; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }

.prof-backdrop-close-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }

body:has(.prof-toggle-checkbox:checked) .prof-backdrop { opacity: 1; visibility: visible; }

.prof-window-card { position: relative; z-index: 5; width: 100%; max-width: 420px; background-color: #e8e7ed; border: 1px solid #e2e2e2; border-radius: 20px; padding: 45px 35px 40px; box-shadow: 0px 15px 50px rgba(0,0,0,0.25); box-sizing: border-box; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }

body:has(.prof-toggle-checkbox:checked) .prof-window-card { transform: translateY(0); }

.prof-close-btn { position: absolute; top: 15px; right: 20px; font-size: 1.1rem; color: #999; cursor: pointer; user-select: none; transition: color 0.25s; }

.prof-close-btn:hover { color: #d93838; }

.prof-user-anchor-block { display: flex; flex-direction: column; align-items: center; text-decoration: none; outline: none; margin-bottom: 25px; background-color: var(--HE_COLOR_WHI); background-image: url('../images/hodl-bg1.png'); background-repeat: no-repeat; background-position: center center; border-radius: 15px; padding: 20px; }

.prof-avatar-box { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; border: 3px solid var(--HE_COLOR_WHI); background-color: #f1f1f1; margin-bottom: 15px; transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s; }

.prof-avatar-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prof-username { font-size: 1.5000rem; text-transform: uppercase; margin: 0; display: flex; align-items: center; gap: 6px; transition: color 0.25s; }

.prof-username i { font-size: 1.35rem; color: #159690; position: relative; top: 1px; }

.prof-user-anchor-block:hover .prof-avatar-box { transform: translateY(-4px); box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15); }

.prof-user-anchor-block:hover .prof-username { color: var(--HE_COLOR_AHOV); }

.prof-admin-zone { display: flex; justify-content: center; width: 100%; margin-bottom: 20px; }

.prof-menu-links { list-style: none; padding: 0; margin: 0 10px; display: flex; flex-direction: column; gap: 10px; }

.prof-menu-links li { position: relative; width: 100%; margin-top: 5px; }

.prof-menu-links li a { font-size: 0.95rem; color: var(--HE_COLOR_ADEF); text-decoration: none; display: inline-flex; align-items: center; position: relative; /*padding-left: 20px;*/ transition: color 0.25s ease; width: inherit; }

.prof-menu-links li a i { font-size: 1.15rem !important; margin-right: 8px; color: #999; transition: color 0.25s; width: 30px; }

.prof-msg-count { font-weight: 600; color: #555; margin-left: 4px; }

.prof-menu-links li a::after { content: ""; position: absolute; left: 40px; right: 0; bottom: -4px; border-bottom: 1px dashed #c0bfc7; transition: border-color 0.25s ease; }

.prof-menu-links li a:hover { color: var(--HE_COLOR_AHOV); }

.prof-menu-links li a:hover i { color: var(--HE_COLOR_AHOV); }

.prof-menu-links li a:hover::after { border-bottom-style: solid; border-bottom-color: #c0bfc7; }

.prof-logout-zone { display: flex; justify-content: center; width: 100%; margin-top: 20px; }

@media screen and (max-width: 480px) {  
  .prof-window-card { max-width: 90%; padding: 35px 20px; }
}

/*============================================================================
  МОДАЛЬНИЙ КАБІНЕТ АВТОРИЗОВАНОГО КОРИСТУВАЧА /END/
============================================================================*/
/*============================================================================
  КНОПКИ "ВГОРУ САЙТУ" ТА "ВНИЗ САЙТУ" /START/
============================================================================*/

.scroll-buttons { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }

.scroll-buttons button { display: inline-block; width: 45px; height: 45px; background-color: #3f4a60; color: var(--HE_COLOR_WHI); border: none; border-radius: 50%; font-size: 16px; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); transform: translateY(0);
    /* Синхронна плавна анімація для ховер-ефектів */
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }

.scroll-buttons button:hover { background-color: #d1a153; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(209, 161, 83, 0.4); }

/* Кнопка "Вгору" за замовчуванням прихована, поки користувач не прокрутить сторінку */
#scrollTopBtn { opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.25s ease, background-color 0.25s ease; }

/* Клас, який додаватиметься через JS для появи кнопки Вгору */
#scrollTopBtn.show { opacity: 1; pointer-events: auto; }

/*============================================================================
  КНОПКИ "ВГОРУ САЙТУ" ТА "ВНИЗ САЙТУ" /END/
============================================================================*/
/*============================================================================
  COOKIE-ПЛАШКА В КУТКУ ЕКРАНА /START/
============================================================================*/

.ckb-cookie-banner { position: fixed; bottom: 20px; right: 20px; width: 380px; background-color: var(--HE_COLOR_WHI); border: 1px solid #e2e2e2; border-radius: 12px; padding: 20px; box-sizing: border-box; z-index: 100000; box-shadow: 0px 10px 25px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateY(30px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s; }

.ckb-cookie-banner.ckb-show { opacity: 1; visibility: visible; transform: translateY(0); }

.ckb-banner-wrapper { display: flex; flex-direction: column; gap: 15px; }

.ckb-info-zone { display: flex; align-items: flex-start; gap: 10px; }

.ckb-info-zone i { font-size: 1.2500rem; position: relative; top: 4px; color: #db7c0a; }

.ckb-cookie-icon { font-size: 1.6rem !important; color: #159690; margin-top: 2px; flex-shrink: 0; }

.ckb-text-box { display: flex; flex-direction: column; gap: 2px; }

.ckb-text-box span { font-family: var(--HE_FONT_HEADINGS); font-size: 0.95rem; font-weight: 600; color: #525e73; text-transform: uppercase; letter-spacing: 0.02rem; }

.ckb-text-box p { font-family: var(--HE_FONT_DEFAULT); font-size: 0.8rem; line-height: 1.4; color: #666; margin: 0; }

.ckb-action-zone { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.ckb-btn { font-family: var(--HE_FONT_DEFAULT); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02rem; border: none; cursor: pointer; box-sizing: border-box; outline: none; transition: all 0.25s ease; }

.ckb-btn-link { color: #777; background: transparent; text-decoration: none; padding: 8px 12px; border-bottom: 1px dashed rgba(0, 0, 0, 0.1); }

.ckb-btn-link:hover { color: #555; border-bottom-color: transparent; }

@media screen and (max-width: 480px) {  
  .ckb-cookie-banner { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 12px 12px 0 0; box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.08); padding: 20px 15px; }
}

/*============================================================================
  COOKIE-ПЛАШКА В КУТКУ ЕКРАНА /END/
============================================================================*/
/*============================================================================
  БЕЙДЖІ З ЛОГОТИПАМИ ДЛЯ ПОСИЛАНЬ НА СКАЧУВАННЯ ЗАСТОСУНКІВ /START/
============================================================================*/

.download_badge { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 16px; padding-inline-end: 16px; flex-grow: 0; width: max-content; }

.download_badge_txt { display: flex; flex-direction: column; white-space: pre; }

.db_txt1 { font-size: 0.7500rem; font-weight: 500; line-height: 16px; letter-spacing: 0px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.db_txt2 { font-size: 1.2500rem; font-weight: 600; line-height: 28px; letter-spacing: -1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-width: 84px; }

.download_badge_svg { fill: #333; width: 60px; height: 60px; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.app_download_link { color: #333; text-decoration: none; border: 1px solid #e5e5e5; border-radius: 4px; display: inline-block; width: max-content; transition: all 0.25s ease; }

.app_download_link:hover { color: #333; border-color: #a3a3a3; }

/*============================================================================
  БЕЙДЖІ З ЛОГОТИПАМИ ДЛЯ ПОСИЛАНЬ НА СКАЧУВАННЯ ЗАСТОСУНКІВ /END/
============================================================================*/