* {
  margin : 0;
  padding: 0;
}

:root {
  --black           : #000000;
  --black-light     : #1b1b1b;
  --gray-black      : #2d2d2b;
  --gray            : #5e5a5a;
  --gray-light      : #ccc;
  --blue-white      : #ced7f0;
  --pale-blue       : #e3f2ff;
  --pale-blue-darker: #bcd8f0;
  --blue            : #2f3b6f;
  --blue-darker     : #1a244e;
  --blue-dark2      : #020824;
  --light           : #f8f9fa;
  --white           : #ffffff;
  --yellow          : #fe8d00;
  --yeloww-light    : #ecbe2a;
  --red             : #d20001;
}

p {
  padding-bottom: 5px;
}

a {
  text-decoration: none;
}

/* Скидання кольору для всіх станів посилань */
a:link,
/* Початковий стан посилання */
a:visited,
/* Відвідане посилання */
a:active {
  /* Активне посилання */
  color                                                 : inherit;
  /* Або можна встановити певний колір, наприклад, color: black; */
}

ul li {
  list-style-type: none;
}

body {
  font-family     : "Verdana", sans-serif;
  font-size       : 15px;
  line-height     : 1.5;
  font-weight     : normal;
  background-color: var(--white);
}

.wrapper {
  width                : 1200px;
  margin               : 0 auto;
  display              : grid;
  grid-template-columns: 1fr;
  grid-template-rows   : repeat(4, auto);
}

/* .article {
  font-family: "Times New Roman", Times, serif, "Verdana";
  font-size  : 16px;
} */

.article_alert {
  border : 1px solid #000000;
  padding: 5px 5px 5px 6px;
}

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

.wrapper .header {
  display              : grid;
  grid-template-columns: 150px minmax(150px, 1fr) auto;
  height               : auto;
  overflow             : hidden;
  margin               : 10px;
}

.wrapper .header .logo {
  align-self: center;
}

.wrapper .header .slogan {
  color     : var(--blue);
  text-align: center;
  align-self: center;
}

.wrapper .header .slogan h1 {
  font-family: "Montserrat", "Verdana", sans-serif;
  margin     : 0px;
  font-size  : 1.8em;
  color      : var(--blue-darker);
}

.wrapper .header .slogan p {
  font-size: 0.95em;
}

.wrapper .header .slogan a {
  color: var(--blue);
}

.wrapper .header .slogan a:hover {
  color: var(--blue-dark2);
}

.wrapper .header .grafic {
  font-size: 0.96em;
}

.wrapper .header .grafic .phone a {
  color          : var(--gray);
  text-decoration: none;
  vertical-align : middle;
}

.wrapper .header .grafic .phone a:before {
  content       : "";
  width         : 20px;
  height        : 20px;
  background    : url(../images/phone_icon.png) no-repeat center center;
  display       : inline-block;
  vertical-align: middle;
  margin-right  : 10px;
}

.wrapper .header .grafic .phone a:hover {
  color: var(--blue-dark2);
}

/* --------- Головна сторінка ------------------------------------------------------ */
.wrapper .border_main {
  /* text-indent: 20px; */
  border     : 1px solid var(--gray);
  padding    : 4px 8px;
}

.menu {
  display              : grid;
  grid-template-columns: auto 1fr;
  border-top           : 1px solid var(--gray);
  border-bottom        : 1px solid var(--gray);
 /*  text-transform       : uppercase; */
  justify-content      : left;
  font-size            : 18px;
  margin-bottom        : 10px;
}

.menu_list {
  display              : flex;
  /* grid-template-columns: repeat(3, minmax(min-content, 160px)); */
  align-items          : center;
}

.menu__link {
  padding        : 10px 20px;
  display        : block;
  color          : var(--black);
 /*  text-transform : uppercase; */
  position       : relative;
  text-align     : center;
  text-decoration: none;
}

.menu__link:hover {
  background: var(--pale-blue);
  color     : #1155CC;
  transition: 0.5s;
}
/* Ховати ліве меню лише на широких екранах */
.leftbar.hidden-on-desktop {
  display: none;
}

/* ---menu gamburger start----- */
@media (max-width: 750px) {
   .leftbar.hidden-on-desktop {
    display: block;
  }
  .menu__hidden-on-desktop{
    display: none;
  }
  .root-nav {
    display: none;
  }

  .root-nav.open {
    display: block;
  }

  .navbar__wrap .menu {
    display: none;
  }

  .hamb {
    display    : flex;
    align-items: center;
  }

  .hamb__field {
    padding         : 0px 10px 0px 10px;
    cursor          : pointer;
    background-color: transparent;
  }

  .hamb__field:hover {
    background-color: var(--pale-blue);
    border-radius   : 20%;
  }

  .bar {
    display         : block;
    width           : 30px;
    height          : 2px;
    margin          : 7px auto;
    background-color: var(--black-light);
    transition      : 0.2s;
  }

  .hamb__field.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamb__field.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .hamb__field.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

.hamb__field.active .bar {
  background-color: var(--blue-darker);
}

/* ---menu gamburger end----- */
.wrapper .menu div {
  display   : grid;
  text-align: center;
}

@media (max-width: 430px) {
  .wrapper .menu a {
    font-size: 0.9em;
  }
}

@media (max-width: 380px) {
  .wrapper .menu a {
    font-size    : 0.9em;
    align-content: center;
  }
}

@media (max-width: 350px) {
  .wrapper .menu a {
    padding  : 5px;
    font-size: 0.8em;
  }
}
     /* SLIDER */
    .slider {
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .slider-line {
      display: flex;
      transition: transform 0.6s ease;
    }
    .slide {
      position: relative;
      min-width: 100%;
    }
    .slide img {
      width: 100%;
      height: auto;
      display: block;
    }
    .slide-caption {
      position: absolute;
      top: 15px;
      left: 30px;
      right: 30px;
      color: white;
      /* font-weight: 600; */
      text-transform: uppercase;
      text-shadow: 0 0 10px rgba(0,0,0,0.9);
      font-size: clamp(20px, 4vw, 42px);
      line-height: 1.2;
      pointer-events: none;
    }

    /* DOTS */
    .slider-dots {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ccc;
      margin: 0 5px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .dot.active {
      background: #333;
    }
/* SLIDER === END */
.wrapper .container {
  display              : grid;
  grid-template-columns: 300px 1fr;
}

.wrapper .container .container_distance {
  padding   : 10px 0px 10px 0px;
  border-top: 1px solid var(--gray-light);
}

/* --------- Меню ліве ------------------------------------------------------ */
.wrapper .container .main_menu {
  color           : var(--black);
  margin-right    : 20px;
  background-color: var(--pale-blue);
}

.wrapper .container .main_menu a {
  font-size: 0.9em;
}

.wrapper .container .main_menu .root-nav a {
  display: block;
}

.wrapper .container .main_menu ul li {
  position       : relative;
  border-bottom  : 1px dotted var(--black);
  padding        : 10px 0px 10px 8px;
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.wrapper .container .main_menu ul li:hover {
  background: #95bff4;
  color     : var(--blue-white);
}

.wrapper .container .main_menu .root-nav ul li:hover a {
   transition: 0.2s;
}

.wrapper .article a {
  text-decoration: underline;
  color          : var(--blue-darker);
  transition     : 0.2s;
}

.wrapper .container .article hr {
  margin-bottom: 5px;
}

/* ---------під Меню першого пункта ------------------------------------------------------ */
.article_list li {
  background : url(../images/h3_bg.png) repeat-x 0 100%;
  line-height: normal;
  margin     : 10px 0px 10px 0px;
  padding    : 0px 0px 13px 0px;
}

.consumer_title_list {
  list-style-type: none;
  counter-reset  : custom-counter;
  padding-left   : 0;
}

.consumer_title_list li {
  counter-increment: custom-counter;
  margin-bottom    : 4px;
}

.consumer_title_list li::before {
  content     : counter(custom-counter) ")";
  margin-right: 5px;
}

.wrapper .container .article .article_link {
  color: var(--blue-dark2);
}

/* === details === */
details[open]{
  background-color: #f4faff;
}
summary {
  padding      : 5px;
  border-bottom: 1px solid black;
}

details[open] summary {
  border-bottom   : none;
  background-color: var(--blue-white);
}

summary {
  display              : grid;
  grid-template-columns: 1fr 20px;
  grid-gap             : 5px;
  font-weight          : 600;
  cursor               : pointer;
  position             : relative;
}

summary::after {
  content         : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
  position        : absolute;
  top             : 50%;
  right           : 0;
  width           : 20px;
  translate       : 0 -35%;
  transition      : rotate 0.2s;
  transform-origin: 50% 40%;
}

details[open] summary::after {
  rotate: -180deg;
}

.wrapper .container .article .container_distance_end {
  border-bottom : 1px solid var(--blue-white);
  padding-bottom: 5px;
}

.wrapper .container .article .manegment_top {
  margin-top: 9px;
}

.wrapper .container .article #article-1 {
  display: none;
}

.wrapper .container .article #article-1_1 {
  display: none;
}

.wrapper .container .article #article-1_2 {
  display: none;
}

.wrapper .container .article #article-1_3 {
  display: none;
}

.wrapper .container .article #article-2 {
  display: none;
}

.wrapper .container .article #article-3 {
  display: none;
}

.wrapper .container .article #article-4 {
  display: none;
}

.wrapper .container .article #article-5 {
  display: none;
}

.wrapper .container .article #article-6 {
  display: none;
}

.wrapper .container .article #article-7 {
  display: none;
}

.wrapper .container .article #article-8 {
  display: none;
}

@media only screen and (max-width: 750px) {
  .wrapper .container .article #article-1 {
    display: block;
  }

  .wrapper .container .article #article-1_1 {
    display: block;
  }

  .wrapper .container .article #article-1_2 {
    display: block;
  }

  .wrapper .container .article #article-1_3 {
    display: block;
  }

  .wrapper .container .article #article-2 {
    display: block;
  }

  .wrapper .container .article #article-3 {
    display: block;
  }

  .wrapper .container .article #article-4 {
    display: block;
  }

  .wrapper .container .article #article-5 {
    display: block;
  }

  .wrapper .container .article #article-6 {
    display: block;
  }

  .wrapper .container .article #article-7 {
    display: block;
  }

  .wrapper .container .article #article-8 {
    display: block;
  }
}

/* ================= Calculator ==========================---------- */
.wrapper .container .article .calculator-wrapper {
  display              : grid;
  grid-template-columns: 340px 1fr;
  margin-top           : 20px;
  grid-column-gap      : 20px;
}

@media (max-width: 1018px) {
  .wrapper .container .article .calculator-wrapper {
    grid-template-columns: 1fr;
    grid-row-gap         : 10px;
  }
}

.wrapper .container .article .header_calculator p {
  color      : var(--black-light);
  font-weight: 300;
}

.wrapper .container .article .result {
  display: grid;
  gap    : 10px;
  padding: 15px;
  width  : 320px;
}

.wrapper .container .article .limit_credit {
  display        : flex;
  justify-content: space-between;
  font-size      : 12px;
  font-weight    : 400;
  line-height    : 17px;
  width          : 342px;
  margin-top     : -12px;
  margin-bottom  : 10px;
  color          : var(--black-light);
}

@media (max-width: 500px) {
  .wrapper .container .article .limit_credit {
    width: 268px;
  }

  .wrapper .container .article .result {
    padding: 10px;
    width  : 250px;
  }
}

.wrapper .container .article .result .final-result-item {
  padding         : 10px 10px;
  border          : 1px solid var(--black-light);
  background-color: #fdfdd8;
  color           : var(--blue-darker);
}

.wrapper .container .article .result .final-result-item span {
  font-size: 12px;
  color    : var(--blue-darker);
}

.wrapper .container .article .result .result_note span {
  color: var(--red);
}

.wrapper .container .article .result .final-result-item .value {
  font-size  : 24px;
  line-height: 26px;
}

.wrapper .container .article .result .final-result-item .title {
  font-size    : 12px;
  font-weight  : 400;
  line-height  : 17px;
  margin-bottom: 5px;
}

.wrapper .container .article .input-wrapper .value__input {
  display         : block;
  width           : 300px;
  height          : 20px;
  padding         : 15px 20px;
  font-size       : 24px;
  line-height     : 26px;
  background-color: transparent;
  border          : 1px solid var(--black-light);
  outline         : none;
  color           : var(--black-light);
}

@media (max-width: 500px) {
  .wrapper .container .article .input-wrapper .value__input {
    width    : 228px;
    font-size: 20px;
  }
}

.wrapper .container .article .input-wrapper input {
  border-radius: 0;
  background   : transparent;
}

.wrapper .container .article .input-wrapper input[type=range] {
  -webkit-appearance: none;
  -moz-appearance   : none;
  appearance        : none;
}

.wrapper .container .article .input-wrapper input[type=range]::-webkit-slider-runnable-track {
  height: 7px;
}

.wrapper .container .article .input-wrapper input[type=range]::-webkit-slider-thumb {
  background        : var(--blue);
  border            : 1px solid var(--black-light);
  cursor            : pointer;
  width             : 15px;
  height            : 15px;
  -webkit-appearance: none;
  margin-top        : -4px;
  border-radius     : 20px;
}

.wrapper .container .article .input-wrapper input[type=range]::-moz-range-track {
  height: 5px;
}

.wrapper .container .article .input-wrapper input[type=range]::-moz-range-thumb {
  background: var(--blue);
  border    : 1px solid var(--black-light);
  cursor    : pointer;
  margin-top: 5px;
}

.wrapper .container .article .input-wrapper .input-range {
  width   : 342px;
  position: relative;
  top     : -9px;
}

@media (max-width: 500px) {
  .wrapper .container .article .input-wrapper .input-range {
    width: 270px;
  }
}

.wrapper .container .article .title_calculator p {
  color: var(--black-light);
}

@media (max-width: 500px) {
  .wrapper .container .article .title_calculator p {
    width    : 270px;
    font-size: 0.9em;
  }
}

.wrapper .container .article .input-wrapper .title_calculator {
  display      : block;
  margin-bottom: 8px;
  color        : var(--black-light);
}

@media (max-width: 500px) {
  .wrapper .container .article .input-wrapper .title_calculator {
    font-size: 0.9em;
  }
}

.wrapper .container .article table.manegment_tabl1 {
  border-collapse: collapse;
  border-spacing : 0;
  height         : auto;
}

table.manegment_tabl1,
table.manegment_tabl1 td,
table.manegment_tabl1 th {
  border: 1px solid var(--black-light);
}

table.manegment_tabl1 td,
table.manegment_tabl1 th {
  padding: 3px 3px 3px 7px;
  width  : 360px;
  height : 30px;
}

table,
th,
td {
  border-collapse: collapse;
  border-spacing : 0;
  height         : auto;
  border         : 1px solid grey;
}

th,
td {
  padding: 8px;
}

.wrapper .container .article .map {
  margin-top: 15px;
}

.wrapper .container .article .info_box {
  text-align: center;
}

.wrapper .container .article h2,
.wrapper .container .article h3,
.wrapper .container .article h4 {
  font-family: "Montserrat", "Verdana", sans-serif;
  background : url(../images/h3_bg.png) repeat-x 0 100%;
  line-height: normal;
  margin     : 0 0 10px;
  padding    : 5px 0px 13px;
}

.zbory_text {
  font-size  : 0.9em;
  line-height: inherit;
  padding-top: 5px;
}

@media (max-width: 600px) {

  .wrapper .container .article h2,
  .wrapper .container .article h3,
  .wrapper .container .article h4 {
    font-size: 1.1rem;
  }
}

.wrapper .container .article a {
  color: var(--blue);
}

.wrapper .container .article a:hover {
  color: var(--blue-dark2);
}

.wrapper .container .article .report p {
  background : url(../images/h3_bg.png) repeat-x 0 100%;
  line-height: normal;
  padding    : 5px 0;
}

.wrapper .container .article .report p a {
  display: block;
  padding: 10px 0px;
}

.wrapper .container .article .communication {
  display              : grid;
  grid-template-columns: auto;
  grid-template-rows   : repeat(5, auto);
  margin-top           : 10px;
}

.wrapper .container .article .communication #required {
  color: var(--yellow);
}

.wrapper .container .article .communication .item_in {
  font-size   : 16px;
  padding-left: 20px;
}

.wrapper .container .article .communication .item_f input {
  margin-bottom: 5px;
  color        : var(--black-light);
  padding-left : 30px;
}

.wrapper .container .article .communication .item_f span {
  color      : var(--red);
  font-size  : 14px;
  font-weight: 600;
}

.wrapper .container .article .communication input {
  width  : 250px;
  padding: 5px;
}

.wrapper .container .article .communication .name_f input {
  background: url(../images/name_icon.png) no-repeat center left 5px;
}

.wrapper .container .article .communication .email_f input {
  background: url(../images/email_icon.png) no-repeat center left 5px;
}

.wrapper .container .article .communication .phone_f input {
  background: url(../images/phone_icon.png) no-repeat center left 5px;
}

.wrapper .container .article .communication .message_f textarea {
  background  : url(../images/message_icon.png) no-repeat top left 5px;
  color       : var(--black-light);
  padding-left: 45px;
}

.wrapper .container .article .communication textarea {
  width  : 235px;
  height : 60px;
  padding: 5px;
}

.wrapper .container .article .communication #button_form {
  background-color: var(--yeloww-light);
  width           : 250px;
  padding         : 10px;
  margin-top      : 15px;
  border-radius   : 9px;
}

.wrapper .container .article .communication #button_form:hover {
  background-color: var(--yellow);
}

.wrapper .container .article .line_active {
  color    : var(--blue-dark2);
  border   : 2px solid var(--yellow);
  width    : max-content;
  padding  : 5px 10px;
  font-size: 18px;
}

.wrapper .footer {
  display         : flex;
  justify-content : space-between;
  background-color: var(--black-light);
  padding         : 10px;
  margin-top      : 20px;
}

.wrapper .footer a {
  text-decoration: none;
  color          : var(--white);
  align-self     : center;
  transition     : 0.2s;
  border         : none;
  outline        : none;
}

.wrapper .footer a:hover {
  color     : var(--yeloww-light);
  transition: 0.2s;
}

.wrapper .footer #top {
  display            : block;
  width              : 0;
  height             : 0;
  left               : 30px;
  bottom             : 30px;
  border             : 10px solid transparent;
  border-bottom-color: white;
  cursor             : pointer;
}

.wrapper .footer #top:hover {
  border-bottom-color: var(--yeloww-light);
}

@media (max-width: 1200px) {
  .wrapper {
    width: 100%;
  }

  .wrapper .article {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    /* padding-right        : 20px; */
    padding: 0 20px;
  }
}

@media (max-width: 880px) {
  .wrapper .container {
    grid-template-columns: 270px 1fr;
  }

  .wrapper .footer {
    display              : grid;
    grid-template-columns: repeat(7, auto);
    grid-gap             : 10px;
  }
}

@media (max-width: 750px) {
  .wrapper .header {
    grid-template-columns: 1fr;
    grid-template-rows   : repeat(3, auto);
    justify-items        : center;
  }

  .wrapper .container {
    grid-template-columns: 1fr;
    grid-template-rows   : repeat(2, auto);
    padding              : 0 20px 0 20px;
  }
}

@media (max-width: 500px) {
  .wrapper .container .main_menu ul li {
    padding: 5px;
  }

  .wrapper .container .main_menu {
    margin: 5px 10px;
  }

  .wrapper .container .article {
    padding: 0 10px 0 10px;
  }

  .wrapper .footer {
    display              : grid;
    grid-template-columns: 1fr;
    grid-template-rows   : repeat(7, auto);
    grid-gap             : 5px;
  }
}

/* Style the menu items - Стиль пунктів меню */
.wrapper .container .main_menu .root-nav .menu-item {
  list-style           : none;
  padding-left         : 10px;
  cursor               : pointer;
  position             : relative;
  display              : grid;
  grid-template-columns: 1fr auto;
  align-items          : center;
}

.wrapper .container .main_menu .root-nav .menu-item:hover a {
  color: var(--blue-dark2);
}

.wrapper .container .main_menu .root-nav .menu-item .submenu-label {
  cursor    : pointer;
  width     : 22px;
  height    : 100%;
  background: url(../images/right-arrow.svg) no-repeat center center;
  display   : inline-block;
  padding   : inherit;
}

.wrapper .main_menu>ul>li>ul.submenu>li>.submenu-label {
  margin-right: -9px;
  /* Відступ для підрівня */
}

/* Зміна стрілки при наведенні */
.wrapper .container .main_menu .root-nav .menu-item>label:hover {
  background-color: #1155CC;
}

/* Style the submenu */
.wrapper .container .main_menu .root-nav .menu-item .submenu {
  opacity         : 0;
  visibility      : hidden;
  background-color: var(--pale-blue-darker);
  position        : absolute;
  left            : 100%;
  top             : 0;
  transition      : opacity 0.2s ease-in-out;
  width           : 100%;
  z-index         : 50;
}
.wrapper .container .main_menu .root-nav .menu-item .submenu.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-in-out, visibility 0s linear;
}
@media (max-width: 750px) {
  .wrapper .container .main_menu .root-nav .menu-item>label {
    background: inherit;
  }

  .wrapper .container .main_menu .root-nav .menu-item .submenu {
    opacity   : 1;
    visibility: initial;
    position  : initial;
  }

  .wrapper .container .main_menu .root-nav .item-1 #item-1_one {
    border-bottom : 1px dotted var(--black);
    padding-bottom: 5px;
  }
}

/* Показуємо підменю другого рівня при наведенні на стрілку */
.wrapper .container .main_menu .root-nav .menu-item>label:hover+.submenu {
  opacity   : 1;
  visibility: visible;
}

/* Показуємо підменю третього рівня при наведенні на пункт другого рівня */
.wrapper .container .main_menu .root-nav .submenu li:hover>.submenu {
  opacity         : 1;
  visibility      : visible;
  position        : absolute;
  left            : 100%;
  top             : 0;
  width           : 100%;
  background-color: #bcd8f0;
}

/* Тримати відкрите меню другого рівня при наведенні на нього */
.wrapper .container .main_menu .root-nav .menu-item .submenu:hover {
  opacity   : 1;
  visibility: visible;
}

/* Style the submenu items */
.wrapper .container .main_menu .root-nav .submenu li {
  padding: 7px 5px 7px 20px;
}

@media (max-width: 750px) {
  .wrapper .container .main_menu .root-nav a {
    display: inline-block;
  }

  .wrapper .container .main_menu .root-nav .submenu li:hover>.submenu {
    position        : initial;
    background-color: inherit;
  }

  .wrapper .container .main_menu ul li {
    position: initial;
    display : block;
  }

  .wrapper .container .main_menu .root-nav .menu-item:hover a {
    color: var(--blue-dark2);
  }

  .wrapper .container .main_menu .root-nav .menu-item .submenu-label {
    background: inherit;
  }

  .wrapper .container .main_menu ul li:hover {
    background: inherit;
  }

  /* Зміна стрілки при наведенні */
  .wrapper .container .main_menu .root-nav .menu-item>label:hover {
    background-color: inherit;
  }

  .wrapper .container .main_menu li:hover>a {
    text-decoration      : underline;
    text-decoration-color: #1a244e;
  }

}