html,
body,
h1,
h2,
h3,
h4,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

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

:root {
  --black: #000000;
  --black-light: #1b1b1b;
  --gray-black: #2d2d2b;
  --gray: #5e5a5a;
  --gray-light: #ccc;
  --blue-white: #ced7f0;
  --pale-blue: #edf6fd;
  --pale-blue-darker: #bcd8f0;
  --blue: #2f3b6f;
  --blue-darker: #1a244e;
  --blue-dark2: #020824;
  --blue-dark3: #000f57;
  --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;
}

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 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, auto);
}

.article {
  font-size: 16px;
}

.article_border-bottom {
  border-bottom: 1px solid #727272;
  text-align: right;
  margin-bottom: 10px;
}

.article_alert {
  border: 1px solid #000000;
  padding: 0.8em;
  font-size: 0.96em;
   font-weight: 600;
}

.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;
}
/* === phone -- grafic === */
.wrapper .header .grafic .phone a {
  color: var(--gray);
  text-decoration: none;
  vertical-align: middle;
  display: flex;
  gap: 5px;
  cursor: pointer;
  font-size: 0.95rem;
}

.wrapper .header .grafic .phone:hover .icon {
  fill: #000000;
}

.wrapper .header .grafic .phone:hover a {
  color: var(--blue-dark2);
}
/* === phone -- .container .article === */
.wrapper .container .article .phone a {
  color: var(--black);
  text-decoration: none;
  vertical-align: middle;
  display: flex;
  gap: 5px;
  cursor: pointer;
  color: #3a3a3a;
}

.wrapper .container .article .phone:hover .icon {
  fill: var(--blue);
}

.wrapper .container .article .phone:hover a {
  color: var(--blue);
}
.phone_mobile {
  margin: 10px 0px;
}
.wrapper .container .article .phone_mobile a {
  color: var(--black);
  text-decoration: none;
  vertical-align: middle;
  display: flex;
  gap: 5px;
  cursor: pointer;
}

.wrapper .container .article .phone_mobile:hover .icon {
  stroke: var(--blue);
}

.wrapper .container .article .phone_mobile:hover a {
  color: var(--blue);
}
/* === email_contacts === */
.wrapper .container .article .email_contacts {
  color: var(--black);
  display: flex;
  margin-bottom: 8px;
  gap: 8px;
  align-items: end;
  padding-left: 3px;
}
.wrapper .container .article .email_contacts:hover .icon {
  stroke: var(--blue);
}

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

/* === Головна сторінка === */
.wrapper .border_main {
  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: grid;
  grid-template-columns: repeat(3, minmax(min-content, 160px));
  align-items: center;
}

.menu__link {
  padding: 10px 5px;
  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;
}
.hamb {
  display: none;
}

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


.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;
  padding: 12px 0 12px 10px;
}

.wrapper .container .main_menu ul li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid rgba(48,54,64,.1);
}

.wrapper .container .main_menu ul li:hover {
  background: #95bff4;
  color: var(--blue-white);
  border-bottom: 1px solid #55a1ff62;
}

.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;
}

/* === під Меню першого пункта === */
.article_list li {
  background: repeating-linear-gradient(
      to right,
      #999 0,
      #999 4px,
      transparent 2px,
      transparent 6px
    )
    bottom left/100% 1px no-repeat;
  line-height: normal;
  margin: 10px 0;
  padding: 0 0 13px 0;
}

.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;
}

.list-with-defis {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.list-with-defis li {
  position: relative;
  padding-left: 1em;
}

.list-with-defis li::before {
  content: "-";
  position: absolute;
  left: 0;
}

/* === details === */
details {
  margin-bottom: 12px;
}

details[open] {
  background-color: #f4f4f4;
}

summary {
  cursor: pointer;
  border-bottom: 1px solid #000;
  padding: 10px 35px 10px 8px; /* місце під стрілку */
  display: inline-flex;
  align-items: center;
  color: var(--blue-dark2);
  position: relative;
  line-height: 1.2;
}

.article_link {
  width: 100%;
  max-width: 100%;
}
 .article_link time{
  display: contents;
} 

.article_link:hover{
  color: var(--blue-dark3);
  border-bottom: 1px solid var(--blue-dark3);
}

details[open] .details-block {
  padding-left: 14px;
}

details[open] .article_title{
 color: #0778db;
 background-color: aliceblue;
}

details[open] > .article_link{
 color: #035399;
 background-color: rgb(206, 228, 247);
}

details[open] details[open]{
  background-color: rgb(255, 255, 255);
}
details[open] details[open] p{
  padding-left: 14px;
}

.article_title:hover{
  color: var(--blue-dark3);
  border-bottom: 1px solid var(--blue-dark3);
}

/* === прибираємо стандартний трикутник === */
summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  display: none;
}

/* === стрілка === */
summary::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231a244e'%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");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

/* === поворот === */
details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}
details[open] summary{
  width: 100%;
  max-width: 100%;
  margin-bottom: 10px;
}

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

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

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


.header_calculator, .title_calculator, .calculator_data{
  padding-left: 10px;
}

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

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

.result {
  max-width: max-content;
  width: 100%;
}

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

.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: 46px;
  padding: 15px 20px;
  font-size: 24px;
  line-height: 26px;
  background-color: #fff;
  border: 1px solid var(--black-light);
  outline: none;
  color: var(--black-light);
}

.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: 300px;
  position: relative;
  top: -9px;
}

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

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

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

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 {
  font-family: "Montserrat", "Verdana", sans-serif;
  line-height: normal;
  padding: 4px 0px 12px;
  border-bottom: 1px solid rgba(48,54,64,.1);
  margin-bottom: 10px;
}

.wrapper .container .article h3,
.wrapper .container .article h4 {
  font-family: "Montserrat", "Verdana", sans-serif;
  line-height: normal;
  padding: 12px 0px 12px;
  border-bottom: 1px solid rgba(48,54,64,.1);
  margin-bottom: 10px;
  border-top: 1px solid rgba(48,54,64,.1);
}

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

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

.wrapper .container .article a:hover {
  color: var(--blue-dark2);
}
.wrapper .container .article .footer_login{
  text-decoration: none;
  color: #000;
}

.wrapper .container .article .report p {
  line-height: normal;
  padding: 5px 0;
  background: repeating-linear-gradient(
      to right,
      #999 0,
      #999 4px,
      transparent 2px,
      transparent 6px
    )
    bottom left/100% 1px no-repeat;
}

.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-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20' fill='none'><path d='M8 9C10.2091 9 12 7.20914 12 5C12 2.79086 10.2091 1 8 1C5.79086 1 4 2.79086 4 5C4 7.20914 5.79086 9 8 9Z' stroke='%23888' stroke-width='2'/><path d='M3 14H13C13.2652 14 13.5196 14.1054 13.7071 14.2929C13.8946 14.4804 14 14.7348 14 15V19H16V15C16 14.2044 15.6839 13.4413 15.1213 12.8787C14.5587 12.3161 13.7956 12 13 12H3C2.20435 12 1.44129 12.3161 0.87868 12.8787C0.31607 13.4413 0 14.2044 0 15L0 19H2V15C2 14.7348 2.10536 14.4804 2.29289 14.2929C2.48043 14.1054 2.73478 14 3 14Z' fill='%23888'/></svg>");
  background-repeat: no-repeat;
  background-position: left 5px center;
  background-size: 16px 16px;
  padding-left: 30px;
}

.wrapper .container .article .communication .phone_f input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23888'><path d='m392,350c-11,-10 -23,-19 -35,-29c-13,-11 -27,-13 -41,-3c-10,8 -20,16 -30,25c-5,4 -10,5 -16,3c-25,-9 -46,-24 -64,-44c-19,-19 -34,-41 -43,-66c-2,-5 -1,-10 3,-15c8,-9 17,-19 25,-28c11,-13 11,-28 1,-43c-9,-13 -18,-26 -27,-38c-9,-13 -21,-14 -34,-5c-12,9 -24,19 -35,29c-10,10 -15,23 -15,38c1,31 11,59 25,86c18,33 41,62 70,88c28,26 59,46 95,59c17,6 34,11 52,12c16,1 29,-3 41,-14c10,-9 20,-19 30,-28c14,-13 9,-12 -2,-27l0,0z'/></svg>");
  background-repeat: no-repeat;
  background-position: left 5px center;
  background-size: 22px 22px;
  padding-left: 30px;
}

.wrapper .container .article .communication .email_f input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' fill='%23888'><path fill-rule='evenodd' clip-rule='evenodd' d='M1 1.81818V12.1818L6.7 7L1 1.81818ZM7.4433 7.67573L1.58661 13H18.4134L12.5567 7.67573L11.3453 8.77696C10.5825 9.47045 9.4175 9.47045 8.65465 8.77696L7.4433 7.67573ZM13.3 7L19 12.1818V1.81818L13.3 7ZM1 0H1.58661H18.4134H19C19.5523 0 20 0.447715 20 1V13C20 13.5523 19.5523 14 19 14H18.4134H1.58661H1C0.447715 14 0 13.5523 0 13V1C0 0.447716 0.447715 0 1 0ZM9.32733 8.03702L1.58661 1H18.4134L10.6727 8.03702C10.2913 8.38376 9.70875 8.38376 9.32733 8.03702Z'/></svg>");
  background-repeat: no-repeat;
  background-position: left 4px center;
  background-size: 20px 20px;
  padding-left: 30px;
}

.wrapper .container .article .communication .message_f textarea {
  padding-left: 33px;
  background-repeat: no-repeat;
  background-position: left 5px top 6px;
  background-size: 21px 21px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}

.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 {
  background-color: var(--black-light);
  padding: 10px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto minmax(50px, 1fr) minmax(50px, 1fr) auto;
  gap: 2px;
  justify-items: center;
}

.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;
}

/* === Style the menu items - Стиль пунктів меню === */
.wrapper .container .main_menu .root-nav .menu-item {
  list-style: none;
  cursor: pointer;
  position: relative;
}

.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 .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;
}
.wrapper .container .main_menu .root-nav .menu-item .submenu li {
  padding-left: 5px;
  border-left: 1px solid transparent;
}

/* === Показуємо підменю другого рівня при наведенні на стрілку === */
.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: var(--pale-blue-darker);
}

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

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
hr {
  border: none;
  border-top: 1px dotted;
  margin: 10px 0px;
}

#scrollTopBtn {
  position        : fixed;
  bottom          : 30px;
  right           : 30px;
  background-color: transparent;
  border          : 1px solid var(--gray-light);
  border-radius   : 50%;
  padding         : 0.6rem;
  cursor          : pointer;
  opacity         : 0;
  visibility      : hidden;
  transition      : opacity 0.3s ease, transform 0.3s ease;
  z-index         : 50;
}

#scrollTopBtn svg {
  display: block;
}

#scrollTopBtn.show {
  opacity   : 1;
  visibility: visible;
  transform : scale(1);
}
.arrow-up {
  color: var(--blue-dark3);
}

/* === left-menu a === */
.left-menu .menu-item.active > a {
  background: #0047ab;
  color: #fff;
}