:root {
  --mega-menu-height: 80dvh;
  --navbar-radius: 50px;
  /* unknown */
  --color-dropdown-hover: #fceaeb;

  --color-light-grey: #f8f8f8;
  --color-light-grey-de: #dedede;
  --color-danger: #aa0f1f;
  --color-light-grey-ed: #ededed;
  --color-light-grey-f2: #f2f2f2;

  --color-text-light-grey-de: var(--color-light-grey-de);

  --color-bg-dropdown-hover: var(--color-dropdown-hover);
  --color-bg-light-grey: var(--color-light-grey);
  --color-bg-light-grey-ed: var(--color-light-grey-ed);
  --color-bg-light-grey-f2: var(--color-light-grey-f2);

  /* default themes */
  --color-text-white: var(--bs-white);
  --color-text-black: var(--bs-black);
  --color-text-red: var(--bs-red);
  --color-text-red-50: var(--bs-red-50);
  --color-text-gray: var(--bs-gray);
  --color-text-gray-50: var(--bs-gray-50);

  --color-bg-white: var(--bs-white);
  --color-bg-black: var(--bs-black);
  --color-bg-red: var(--bs-red);
  --color-bg-red-50: var(--bs-red-50);
  --color-bg-disabled: var(--bs-disabled);
  --color-bg-gray: var(--bs-gray);
  --color-bg-light-grey-50: var(--bs-light-gray-50);
}
.document {
  min-height: 100dvh;
  main[role="main"] {
    flex: 1;
  }
}
.cursor-pointer {
  cursor: pointer !important;
}
main[role="main"] {
  overflow: hidden !important;
}
.userway_buttons_wrapper {
  display: none !important;
}
.nbtc__header {
  z-index: 5;
  background-color: var(--color-bg-white);
  .header-left {
    transition: all 300ms;
    img {
      max-width: 54px;
      width: 100%;
    }
    &:has(+ .navbar-center .navbar-collapse.scroll) {
      img {
        scale: 0.95;
      }
    }
  }
  .header-right {
    img {
      height: 30px;
      cursor: pointer;
      transition: transform 0.3s;
      &:hover {
        transform: scale(1.1);
      }
    }
    button {
      padding: unset;
      transition: scale 500ms;
      &:hover .nav-link-icon {
        scale: 0.95;
      }
      &:active .nav-link-icon {
        scale: 1;
      }
    }
  }
  .header-container {
    position: relative;
  }
  .navbar.navbar-center {
    border-radius: var(--navbar-radius);
    background-color: var(--color-bg-red-50);
    .navbar-collapse.collapse {
      transition: all 200ms;
      padding-block: 0.5rem;
      &.scroll {
        padding-block: 0.4rem;
      }
      .navbar-nav {
        .nav-item {
          display: grid;
          grid-template-columns: auto auto;
          align-items: center;
          gap: 0.25rem;
          border-bottom: 2px solid transparent;
          &:hover,
          &:has(.nav-link[aria-expanded="true"]) {
            border-bottom-color: var(--color-text-white);
          }
          .nav-link {
            color: var(--color-text-white);
            outline: unset;
            &:hover,
            &:focus {
              background-color: unset;
            }
          }
        }
        .dropdown-mega-menu {
          &.show {
            position: absolute;
            top: 100%;
            inset-inline: 0;
            margin-top: 0;
            margin-inline: auto;
            border: unset;
            border-radius: unset;
            width: calc(100% - var(--navbar-radius));
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
          }
          .mega-menu-wrapper {
            display: grid;
            grid-template-columns: 30% 70%;
            & > div {
              max-height: var(--mega-menu-height);
            }
            .mega-menu-container {
              display: grid;
              grid-template-columns: 50% 50%;
              .sub-menu-content {
                overflow-y: auto;
                &:not(:empty) {
                  background-color: var(--color-bg-light-grey);
                }
                .dropdown-menu-lv3 {
                  position: static;
                  display: block !important;
                }
              }
            }
          }
        }
        .dropdown-menu-lv2 {
          overflow-y: auto;
          .dropdown-item-lv2 {
            & > .dropdown-link {
              cursor: pointer;
              border-bottom: 2px solid transparent;
              display: grid !important;
              grid-template-columns: auto auto;
              :is(&:hover, &:has(a[aria-expanded="true"])) {
                color: var(--color-text-red-50);
                border-bottom-color: var(--color-text-red-50);
                a {
                  color: var(--color-text-red-50);
                }
                .dropdown-item-icon {
                  path {
                    stroke: var(--bs-red-50) !important;
                  }
                }
              }
              &:not(:has(.dropdown-menu-lv3)) {
                border-bottom-color: transparent !important;
              }
              a {
                outline: unset;
                text-decoration: none;
                color: var(--color-text-black);
              }
            }
          }
        }
        .dropdown-menu-lv3 {
          margin-top: 0;
          padding: 0;
          border: unset;
          border-radius: unset;
          background-color: unset;
          .dropdown-item-lv3 {
            & > .dropdown-link {
              text-decoration: none;
              color: var(--color-text-black);
              &:hover {
                color: var(--color-text-red);
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 992px) {
    .header-container {
      background-color: var(--color-bg-white);
      /* box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); */
    }
    .header-left {
      img {
        max-width: 34px;
        width: 100%;
      }
    }
    .navbar.navbar-center {
      border-radius: unset;
      background-color: var(--color-bg-white);
      position: absolute;
      top: 100%;
      inset-inline: 0;
      .navbar-collapse.collapse {
        padding-block: unset;
        .navbar-nav {
          height: 100%;
          max-height: calc(100dvh - 96px);
          overflow-y: auto;
          .nav-item {
            justify-content: space-between;
            &:not(:last-child) {
              border-bottom: 1px solid var(--color-text-light-grey-de);
            }
            .nav-link {
              color: var(--color-text-red-50);
              & + .nav-link-icon {
                justify-self: flex-end;
                margin-inline-end: 0.5rem;
                transition: rotate 200ms;
                rotate: 90deg;
                &:has(+ .dropdown-mega-menu.show) {
                  rotate: -90deg;
                }
              }
            }
          }
          .dropdown-mega-menu {
            &.show {
              position: static;
              grid-column: span 2;
              width: 100%;
              box-shadow: unset;
            }
            .mega-menu-wrapper {
              grid-template-columns: 100%;
              & > div {
                max-height: unset;
              }
              .mega-menu-container {
                grid-template-columns: 100%;
              }
            }
          }
          .dropdown-menu-lv2 {
            background-color: var(--color-bg-light-grey-50);
            .dropdown-item-lv2 {
              color: var(--color-text-black);
              border-bottom: 1px solid var(--color-text-white);

              & > .dropdown-link {
                :is(&:hover, &:has(+ .dropdown-menu-lv3.show)) {
                  color: var(--color-text-black);
                  border-bottom-color: var(--color-text-white);
                  a {
                    color: var(--color-text-black);
                  }
                  .dropdown-item-icon {
                    path {
                      stroke: var(--bs-black) !important;
                    }
                  }
                }
                .dropdown-item-icon {
                  justify-self: flex-end;
                  margin-inline-end: 0.5rem;
                  transition: rotate 200ms;
                  rotate: 90deg;
                  path {
                    stroke: var(--bs-gray-50) !important;
                  }
                  &:has(+ .dropdown-menu-lv3.show) {
                    rotate: -90deg;
                  }
                }
              }
            }
          }
          .dropdown-menu-lv3 {
            &.show {
              position: static;
              grid-column: span 2;
              width: 100%;
            }
            background-color: var(--color-bg-gray);
            .dropdown-item-lv3 {
              &:not(:last-child) {
                border-bottom: 1px solid var(--color-text-white);
              }
              &:first-child {
                border-top: 1px solid var(--color-text-white);
              }
              .dropdown-link {
                color: var(--color-text-black) !important;
              }
            }
          }
        }
      }
    }
    .mega-navbar-toggler {
      .nav-link-icon.menu {
        display: block;
      }
      .nav-link-icon.close {
        display: none;
      }
      &[aria-expanded="true"] {
        .nav-link-icon.menu {
          display: none;
        }
        .nav-link-icon.close {
          display: block;
        }
      }
    }
  }
}

.nbtc__region__header {
  background-color: var(--color-bg-red-50);

  &.header__main {
    position: relative;
    .header__left {
      .logo {
        background-color: var(--color-bg-white);
        width: 36px;
        height: 36px;
        object-position: center;
      }
      .header__info {
        .item-link {
          position: relative;
          color: var(--color-text-white);
          text-decoration: unset;
          &:not(:last-child)::after {
            content: "";
            padding-inline-start: 1rem;
            border-right: 1px solid var(--color-text-white);
          }
        }
      }
    }
    .header__right {
      .btn__back__official {
        &:hover {
          color: var(--color-text-red-50);
          svg {
            .stroke-white {
              stroke: var(--bs-red-50) !important;
            }
          }
        }
      }
      .navbar-lang,
      .navbar-search {
        .nav-link-icon {
          path {
            fill: var(--bs-white) !important;
          }
        }
        &:hover .nav-link-icon {
          scale: 0.95;
        }
        &:active .nav-link-icon {
          scale: 1;
        }
      }
      .navbar-accessibility {
        &:hover .nav-link-icon {
          scale: 0.95;
        }
        &:active .nav-link-icon {
          scale: 1;
        }
        .nav-link-icon {
          .fill-white {
            fill: transparent !important;
          }
          .fill-gray-50 {
            fill: var(--bs-white) !important;
          }
        }
      }
    }
  }
  &.header__secondary {
    position: relative;
    #navbarNavDropdown {
      z-index: 10;
      .navbar-nav {
        .nav-item {
          &.dropdown {
            outline: unset;
          }
          .nav-link {
            padding-block: 0.25rem;
            border-bottom: 2px solid transparent;
            outline: unset;
            color: var(--color-text-black);
            &.active,
            &:hover,
            &[aria-expanded="true"] {
              color: var(--color-text-red-50) !important;
              border-bottom-color: var(--color-text-red-50);
            }
            &.dropdown-toggle {
              &::after {
                all: unset !important;
              }
            }
          }
          .dropdown-menu {
            border: unset;
            padding: 0.5rem;
            margin-top: 0;
            background-color: var(--color-bg-white);
            border: 1px solid;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
            &.dropdown-menu-center {
              right: auto !important;
              left: 50% !important;
              -webkit-transform: translate(-50%, 0) !important;
              -o-transform: translate(-50%, 0) !important;
              transform: translate(-50%, 0) !important;
            }
            .dropdown-item {
              color: var(--color-text-black);
              padding-inline: 0.5rem;
              &:hover {
                border-radius: 6px;
                background-color: var(--color-bg-dropdown-hover) !important;
              }
            }
          }
        }
      }
    }
  }
  & ~ .navbar-search {
    &.show,
    &.collapsing {
      background-color: var(--color-bg-white);
      position: absolute;
      top: 0;
      z-index: 12;
      width: calc(100% - 20%);
      inset-inline: 0;
      margin-inline: auto;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    }
  }
  @media (max-width: 992px) {
    background-color: var(--color-bg-red-50);
    &.header__main {
      .header__left {
        .logo {
          width: 50px;
          height: 50px;
        }
        .header__info {
          .item-link {
            &:not(:last-child)::after {
              all: unset;
            }
          }
        }
      }
      .header__right {
        .btn__back__official {
        }
        .navbar-search {
        }
        .btn-navbar-toggler {
          .nav-link-icon.menu {
            display: block;
          }
          .nav-link-icon.close {
            display: none;
          }
          &[aria-expanded="true"] {
            .nav-link-icon.menu {
              display: none;
            }
            .nav-link-icon.close {
              display: block;
            }
          }
        }
      }
    }
    &.header__secondary {
      position: relative;
      padding: unset;
      #navbarNavDropdown {
        z-index: 10;
        &.show,
        &.collapsing {
          padding-inline: 0.75rem;
        }
        .navbar-nav {
          .nav-item {
            .nav-link {
              color: var(--color-text-white);
              border-bottom: unset;
              &.active,
              &:hover,
              &[aria-expanded="true"] {
                color: var(--color-text-white) !important;
              }
            }
            .dropdown-menu {
              background-color: unset !important;
              box-shadow: unset;
              padding: unset;
              &.dropdown-menu-center {
                right: unset !important;
                left: unset !important;
                -webkit-transform: unset !important;
                -o-transform: unset !important;
                transform: unset !important;
              }
              .dropdown-item {
                color: var(--color-text-white);
                &:hover {
                  color: var(--color-text-red-50);
                }
              }
            }
          }
        }
      }
    }
    & ~ .navbar-search {
      &.show,
      &.collapsing {
        width: 100%;
        height: fit-content;
      }
    }
  }
}

.nbtc__region__header.override__nbtc__area__header {
  background-color: var(--color-bg-white);
  &.header__main {
    .header__left {
      .header__info {
        .item-link {
          color: var(--color-text-black);
          &:not(:last-child)::after {
            border-right-color: var(--color-bg-gray-50);
          }
        }
      }
    }
    .header__right {
      .btn__back__official {
        color: var(--color-text-black);
        border-color: var(--color-text-disabled);
        svg {
          .stroke-white {
            stroke: var(--color-text-black) !important;
          }
        }
        &:hover {
          color: var(--color-text-white);
          background-color: var(--color-bg-red-50);
          svg {
            .stroke-white {
              stroke: var(--bs-white) !important;
            }
          }
        }
      }
      .navbar-lang,
      .navbar-search {
        .nav-link-icon {
          path {
            fill: var(--bs-disabled) !important;
          }
        }
      }
      .navbar-accessibility {
        .nav-link-icon {
          .fill-gray-50 {
            fill: var(--bs-disabled) !important;
          }
        }
      }
    }
  }
  & .navbar-search#navbarSearch {
    width: 80%;
  }
  @media (max-width: 992px) {
    background-color: var(--color-bg-white);
    & .navbar-search#navbarSearch {
      width: 100%;
    }
    &.header__secondary {
      #navbarNavDropdown {
        .navbar-nav {
          .nav-item {
            .nav-link {
              color: var(--color-text-black) !important;
            }
          }
        }
      }
    }
  }
}

.nbtc__region__header ~ .main__content__wrapper {
  --radius-top-content: 86px;
  --radius-top-content-mobile: 25px;
  position: relative;
  overflow: visible !important;
  flex: 1;
  &::before {
    content: "";
    inset: 0;
    position: absolute;
    background-color: var(--color-bg-red-50) !important;
    z-index: 1;
  }
  &::after {
    content: "";
    inset: 0;
    position: absolute;
    background-color: var(--color-bg-white) !important;
    z-index: 2;
    border-top-right-radius: var(--radius-top-content);
    border-top-left-radius: var(--radius-top-content);
  }
  .main__content__container {
    position: relative;
    z-index: 5;
    min-height: 100px;
    .main__content__box {
      position: relative;
      z-index: 5;
    }
  }
  @media (max-width: 992px) {
    position: relative;
    &::before {
      all: unset;
    }
    &::after {
      all: unset;
    }
    .main__content__container {
      &::before {
        content: "";
        inset: 0;
        position: absolute;
        background-color: var(--color-bg-red-50) !important;
        z-index: 1;
      }
      &::after {
        content: "";
        inset: 0;
        position: absolute;
        background-color: var(--color-bg-white) !important;
        z-index: 2;
        border-top-right-radius: var(--radius-top-content-mobile);
        border-top-left-radius: var(--radius-top-content-mobile);
      }
      .main__content__box {
      }
    }
  }
}
.nbtc__region__header.override__nbtc__area__header ~ .main__content__wrapper {
  overflow: hidden !important;
  &::before {
    all: unset;
  }
  &::after {
    inset-block: 0;
    inset-inline: -10px;
    border-top: 8px solid var(--color-text-red-50) !important;
    border-left: 8px solid var(--color-text-red-50);
    border-right: 8px solid var(--color-text-red-50);
  }
  @media (max-width: 992px) {
    .main__content__container {
      &::before {
        all: unset;
      }
      &::after {
        inset-block: 0;
        inset-inline: -6px;
        border-top: 6px solid var(--color-text-red-50);
        border-left: 6px solid var(--color-text-red-50);
        border-right: 6px solid var(--color-text-red-50);
      }
      .main__content__box {
      }
    }
  }
}

.nbtc__intro__header {
  position: relative;
  .header__right {
    .navbar-search {
      display: none;
    }
    .dropdown-group-search {
      border-radius: 18px;
      width: 324px;
      position: relative;
      box-shadow: 0px 0px 0px 1px var(--color-text-gray) inset;
      &:has(.group-search-group .input__search:focus) {
        border-bottom: unset;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        .group-search-group {
          .icon-search {
            display: block;
          }
          .input__search {
          }
          .btn-search {
            .btn-icon-search {
              display: none;
            }
          }
        }
        .popular-lists {
          display: block;
          border-top: unset;
        }
      }
      .group-search-group {
        .icon-search {
          flex: none;
          display: none;
        }
        .input__search {
          all: unset;
          width: 100%;
        }
        .btn-search {
          all: unset;
          .btn-icon-search {
            flex: none;
            display: block;
          }
        }
      }
      .popular-lists {
        position: absolute;
        text-align: start;
        width: 100%;
        max-height: 50dvh;
        overflow: auto;
        display: none;
        padding: 0.25rem 0.5rem 0.75rem;
        top: calc(100% - 2px);
        border: 1px solid var(--color-text-gray);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: var(--color-bg-white);
        z-index: 5;
      }
    }
  }
  @media (max-width: 992px) {
    .header__right {
      .navbar-search {
        display: block;
      }
      .dropdown-group-search {
        display: none !important;
      }
      .navbar-lang {
        display: block !important;
      }
    }
  }
}

.navbar-search.show,
.navbar-search.collapsing {
  z-index: 15;
  position: absolute !important;
  top: 100%;
  margin-top: unset;
  inset-inline: 0;
  margin-inline: auto;
  width: calc(100% - var(--navbar-radius));
  max-height: 400px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  .search-container {
    max-width: 50%;
    margin-inline: auto;
    max-height: 350px;
    .search-group {
      input {
        border: unset;
        box-shadow: unset;
      }
      .btn-search {
        min-width: 112px;
        height: 36px;
      }
    }
    .popular-search {
      overflow: auto;
      .popular-lists {
        overflow: auto;
        li {
          .list-link {
            /* opacity: 0.8; */
          }
        }
      }
    }
  }
  @media (max-width: 992px) {
    position: static;
    box-shadow: unset;
    width: 100%;
    height: 100dvh;
    .search-container {
      max-width: 100%;
      height: 100%;
      .popular-search {
        overflow: auto;
        .popular-lists {
          overflow: auto;
        }
      }
    }
  }
}
.dropdown-change-lang {
  min-width: fit-content;
  border: unset;
  padding: 0;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  .lang-container {
    display: flex;
    .lang-item {
      min-width: 56px;
      .lang-label {
        color: var(--color-text-black) !important;
        transition: all 300ms;
        cursor: pointer;
        background: var(--color-bg-light-grey-f2) !important;
        filter: grayscale(100%);
        opacity: 0.5;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        .flag {
          max-width: 34px;
          aspect-ratio: 1 / 1;
        }
      }
      &:hover .lang-label {
        filter: grayscale(10%);
        opacity: 0.8;
      }
      &.active .lang-label {
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        background-color: var(--color-bg-white) !important;
        filter: none;
        opacity: 1;
      }
    }
  }
  @media (max-width: 992px) {
    border: unset;
    padding: 0;
    box-shadow: none;
    .lang-container {
      padding-bottom: 0.35rem;
      .lang-item {
        min-width: 56px;
        &:not(:last-child) {
          border-right: 1px solid var(--color-text-light-grey-de);
        }
        .lang-label {
          cursor: pointer;
          background-color: unset !important;
          filter: grayscale(50%);
          opacity: 0.5;
          color: #8d8d8d !important;
        }
        &.active .lang-label {
          box-shadow: none;
          color: var(--color-text-black) !important;
          background-color: unset !important;
        }
      }
    }
  }
}
.navbar-accessibility-mobile {
  position: fixed;
  right: 0.5rem;
  bottom: 30%;
  z-index: 50;
}
.modal__accessibility {
  .modal-dialog {
    width: fit-content;
    .modal-content {
      border: unset;
    }
    .modal-body {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      .btn__close {
        position: absolute;
        right: 0.5rem;
        top: 0;
      }
      .color__contrast__wrapper,
      .font__size__wrapper {
        .choice__lists {
          .form-check {
            min-width: 88px;
            width: 100%;
            padding-inline-start: 0;
            .form-check-input {
              display: none;
            }
            .form-check-label {
              cursor: pointer;
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 0.25rem;
              background-color: var(--color-bg-light-grey-ed);
              border-radius: 8px;
              padding: 1rem;
              white-space: nowrap;
              border: 1px solid transparent;

              .btn_change_font_size {
                all: unset;
                height: 36px;
              }
            }
            .form-check-input.active + .form-check-label {
              border-color: var(--color-text-gray-50);
            }
          }
        }
      }
    }
  }
}
.dropdown-accessibility {
  --bg-dropdown-accessibility: var(--color-bg-light-grey-f2);
  --bg-accessibility-idle: #cecece;
  --bg-accessibility-active: #252628;
  background-color: var(--color-bg-light-grey-f2);
  border: unset;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  .color__contrast__wrapper,
  .font__size__wrapper {
    background-color: var(--color-bg-white);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    .icon__contrast {
      &.mix {
        display: none;
        &:not(:has(~ .color__contrast .form-check-input.active)),
        &:has(~ .color__contrast .form-check-input[value="mix"].active) {
          display: block;
        }
      }
      &.black__white {
        display: none;
        &:has(~ .color__contrast .form-check-input[value="blackWhite"].active) {
          display: block;
        }
      }
      &.black__yellow {
        display: none;
        &:has(
            ~ .color__contrast .form-check-input[value="blackYellow"].active
          ) {
          display: block;
        }
      }
    }

    .form-check {
      min-height: auto;
      padding: unset;
      .form-check-input {
        display: none;
        &.active + .form-check-label {
          color: var(--color-text-red-50);
          &::after {
            background-color: var(--bg-accessibility-active);
          }
        }
      }
      .form-check-label {
        width: 23px;
        height: 2px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 2px;
          background-color: var(--bg-accessibility-idle);
          bottom: 0;
          border-radius: 2px;
        }
      }
    }
  }
  .font__size__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: self-end;
    column-gap: 0.25rem;
    .btn_change_font_size {
      all: unset;
      cursor: pointer;
    }
    .current__font__size {
      grid-column: span 3;
    }
  }
  @media (max-width: 992px) {
    display: none !important;
  }
}