/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all layout css inside @layer layout {}
***
* please make sure all layout css inside @layer layout {}
* please make sure all layout css inside @layer layout {}
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
/* ========================= ========================= ========================= ========================= ========================= =========================
***
* use base.css to reset the browser style and style basic tag, some class cannot be clasifiy also include in base css, color variable also set in base.css for global use
***
* then use @layer plugin to include all plugin related css
* then use @layer components to include all reusable  components such as button, modal, card, accordion, etc
* then use @layer components to include all reusable  components related to form, eg datepicker, custom select, form layout, checkbox, radio box
* then use @layer layout to put style the layout. @layer layout also inculde header footer, mobile menu and body area styling
* then use @layer pages to put style for specfic pages. eg login page has login.css with @layer pages
* then use @layer animate to put style for animation
* then use @layer inline_style for inline_style class. eg. width10p = width: 10%;
* then use @layer media_query to put style for mobile and responsive design
* last use @layer print_query to put style for print version
* last last use @layer greyscale to put style for greyscale
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
@layer layout {
  :root {
    --bg_element_color: var(--grey_100);
    --bg_element_filter: var(--grey_100_filter)
  }

  :root:has(.theme2) {
    --bg_element_color: var(--gin_200);
    --bg_element_filter: var(--gin_200_filter);
  }
}

@layer layout {

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR grid system 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .wrap {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    /*visibility: hidden;*/
    position: relative;
    z-index: 2000;
  }



  .subMenuVersion .subMenuFlex {
    margin-left: auto;
    margin-right: auto;
  }

  .subMenuVersion .subMenuFlex .container {
    display: flex;
    align-items: flex-start;
    /*padding-left: 8%;
  padding-right: 8%;*/
  }

  .main_content *:last-child {}


  .content_area {}

  .content_area .anchor:first-child+h2:nth-child(2),
  .content_area h2:first-child {
    margin-top: 0;
  }

  .subMenuVersion .content_area {
    padding-left: 8.2%;
    /*padding-right: 12%;*/
    /* margin-left: 20.9375vw; */
    width: 83%;
  }

  body:not(.indexVersion) .content_area {
    min-height: 31.25rem;
  }

  .body_area {
    background-color: #fff;
    z-index: 3000;
    position: relative;
    padding-top: 3rem;
    /*font-size: 1.125rem;*/
    font-size: 1rem;
  }

  .body_area:has(.bg_inside_page_bottom) {
    padding-bottom: 4rem;
  }

  .indexVersion .body_area {}

  body:not(.indexVersion):not(.subMenuVersion) .body_area .container {}

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR breadcrumb 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .breadcrumb_bigwrap {
    padding-top: 2.25rem;
    padding-bottom: 3.25rem;

  }

  .breadcrumb {
    font-size: 1rem;
    font-weight: 600;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    background: none;

    margin-bottom: 0;
    display: block;
  }


  .chineseVersion .breadcrumb {
    font-weight: 600;
  }

  .breadcrumb ul,
  .breadcrumb li {
    list-style: none;
  }

  .breadcrumb ul {
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: .5rem;
    column-gap: .5rem;

  }

  .breadcrumb li {
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
    margin-bottom: 0;
  }

  .breadcrumb ul>li:last-child {
    color: var(--grey_600);
  }

  .breadcrumb a:not(:hover, :focus) {
    text-decoration: none;

  }

  .breadcrumb a:hover,
  .breadcrumb a:focus {
    color: var(--tsunami_600);

  }



  .breadcrumb li>* {}

  .breadcrumb .sign {
    font-size: 0;
    display: block;
  }

  .breadcrumb .sign:before {
    content: '';
    display: block;
    width: .75rem;
    height: .75rem;
    background-image: url('../images/icon/icon_breadcrumb.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: rotate(180deg);
    filter: var(--tsunami_500_filter);
  }


  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR header 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .header_inner {
    --logo_width: 10.5625rem;
    width: 100%;
    /*height: 110px;*/
    display: grid;
    grid-template-areas: "logo nav client";
    grid-template-columns: var(--logo_width) 1fr max-content;
    justify-content: space-between;
    column-gap: 1rem;
    position: relative;
  }

  .myLogo {
    height: auto;
    padding-top: .3rem;
    padding-bottom: .3rem;
    display: flex;
    align-items: center;
    grid-area: logo;
    margin-right: 1rem;
  }

  .big_clientTool {
    display: inline-block;

    grid-area: client;
  }

  .clientTool {
    display: flex;
    justify-content: flex-end;

    height: 100%;
  }

  .clientTool>*:not(.tool_item_last, .menu_btn) {
    padding-right: 1rem;
  }

  .clientTool .langtitlestyle {
    display: none;
  }

  .tool_item {
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .tool_item_btn,
  .tool_item:not(.language, .AStyleArea)>a,
  .mobSearch a {

    min-width: var(--dpo_minimum_require_btn_size);
    min-height: var(--dpo_minimum_require_btn_size);
    max-width: var(--dpo_minimum_require_btn_size);
    max-height: var(--dpo_minimum_require_btn_size);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tool_item_btn:hover,
  .tool_item:not(.language, .AStyleArea)>a:hover,
  .mobSearch a:hover,
  .shareTool.active .share_btn {}

  .tool_item img {
    filter: var(--grey_600_filter);
    min-height: 1.4rem;
    max-width: 1.4rem;
  }

  .tool_item_btn:hover img,
  .tool_item:not(.language)>a:hover img,
  .mobSearch a:hover img,
  .shareTool.active .share_btn img {
    filter: var(--tsunami_500_filter);
  }

  .tool_item .moblang {
    display: none;
  }

  .AStyleArea a {
    color: var(--grey_600);
  }

  .AStyleArea a:hover,
  .AStyleArea a:focus {
    color: var(--tsunami_500);
    text-decoration: none;
  }

  .langTool {
    /*display: none;
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);*/
  }

  .langTool::before {
    /*content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: .5rem solid transparent;
  border-right: .5rem solid transparent;
  border-bottom: .5rem solid #000;
  top: -0.5rem;
  display: block;
  left: 50%;
  transform: translateX(-50%);*/
  }

  .langTool ul {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
    display: flex;
    column-gap: 1.2rem;
  }

  .langTool li {
    margin-bottom: 0;
    display: block;
    font-size: 1rem;
  }

  .langTool ul>li:not(:last-child) {}

  .langTool li a {
    color: var(--grey_600);
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .langTool li a:hover,
  .langTool li a:focus {
    color: var(--tsunami_500);
    text-decoration: none;
  }


  .language_btn img {
    display: inline-block;
  }

  .langtitlestyle {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .menu_plus>span:before,
  .menu_plus>span:after {
    content: "";
    display: block;
    background-color: var(--menu1_text_color);
  }

  .menu_plus>span:before {
    width: 100%;
    height: 2px;
  }

  .menu_plus>span:after {
    width: 2px;
    height: 100%;
    position: absolute;
  }

  .header_area ul {
    margin: 0;
    padding-left: 0;
  }

  .header_area {
    background-color: #fff;
    width: 100%;
    position: fixed;
    z-index: 7000;
    box-shadow: 0 3px .625rem 0 rgba(0, 0, 0, .1);
    transition: box-shadow 1s ease-in-out, transform .3s ease-in-out;
  }


  .header_area.nav_sticky {
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  }


  .header_area.hide_header {
    transform: translateY(-200%);
  }


  .headerTop {
    grid-area: nav;
  }

  .headerTop .nav_menu .menu_lv0 {
    justify-content: center;
  }

  .nav_menu {
    height: 100%;

  }


  .nav_menu .nav_link_wrap {
    position: relative;
    height: 100%;
  }

  .nav_menu .nav_item_lv0.firstLi {}


  .nav_menu .nav_item_lv0 {


    width: auto;
    text-align: left;
    background-repeat: no-repeat;
    margin-bottom: 0;
  }

  .nav_menu .menu_lv0 {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    height: 100%;
    display: flex;

  }

  .nav_menu .menu_lv0>li:not(:last-child) {
    padding-right: min(1.7vw, 2rem);
  }

  .nav_menu .extmenu_lv0 {
    --menu1_text_color: var(--tsunami_500);
    --menu1_active_text_color: var(--tsunami_600);
    --extmenu_bg_color: var(--grey_100);
    /*--extmenu_bg_color: rgb(235, 245, 232);*/

    max-height: 70dvh;
    opacity: 1;
    display: none;
    /*overflow: hidden;*/
    position: absolute;
    top: 100%;
    left: calc(var(--logo_width) + var(--container_pad_left));
    max-width: calc(100% - var(--logo_width) - var(--container_pad_left));
    border-radius: 0 0 .625rem .625rem;
    box-shadow: 0 .625rem .625rem 0 rgba(0, 0, 0, .16);

    background-color: var(--extmenu_bg_color);
  }


  .nav_menu .my_menu3 .extmenu_lv0 {
    --menu1_text_color: var(--orange_red_400);
    --extmenu_bg_color: var(--orange_red_100);
  }

  .nav_menu .nav_item_lv0.open .extmenu_lv0 {
    /*opacity: 1;
  max-height: 300px;*/
    display: block;
  }

  .menu_lv0>li.use_right_position>.extmenu {
    right: 0;
    left: auto;
  }

  .nav_menu .nav_link_lv0.firstLi {
    display: none;
  }

  .nav_menu .nav_link_lv0 {
    font-size: 1.125rem;
    font-weight: 400;
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    line-height: 1.1428;
    color: var(--menu0_text_color);
    text-align: center;
  }

  .nav_menu .nav_link_lv0:hover,
  .nav_menu .nav_link_lv0:focus {
    color: var(--tsunami_500);
  }

  .nav_menu .active_section .nav_link_lv0 {
    color: var(--tsunami_550);
    font-weight: 600;
  }

  .nav_menu .menu_plus_lv0 {
    display: none;
  }

  .nav_menu .menu_lv1 {
    display: flex;

  }

  .nav_menu .nav_item_lv1 {
    margin-bottom: 0;
    list-style: none;
    padding-top: 2rem;
    padding-right: 1.5rem;
    padding-bottom: 2.3rem;
    padding-left: 1.5rem;
    position: relative;
  }

  .nav_menu .nav_item_lv1:not(:last-child) {}

  .nav_menu .nav_item_lv1:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    /*background-image: linear-gradient(to bottom, #fff 40%, rgba(255, 255, 255, 0) 0%);*/

    /*background-image: url(../images/dot_line.svg);
    background-position: center right;
    background-size: contain;
    background-repeat: repeat-y;*/

    background-image: url(../images/dot_line.svg);
    filter: var(--white_filter);
    background-size: 100% 15px;
  }

  .nav_menu .nav_link_lv1::before {
    content: "";
    /*min-width: 8px;
  min-height: 8px;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: #007C6C;
  display: inline-block;
  position: absolute;
  left: 0;
  top:1rem;*/
  }

  .nav_menu .nav_link_lv1 {
    display: block;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--menu1_text_color);

  }

  .nav_menu .nav_link_wrap:hover .nav_link_lv1,
  .nav_menu .nav_link_wrap:has(.nav_link_lv1:focus),
  .nav_menu .nav_link_wrap:has(.menu_plus_lv1:focus),
  .nav_menu .nav_item_lv1.open .nav_link_lv1 {}

  .nav_menu .nav_link_lv1 .myText {
    display: inline-block;
  }

  .nav_menu .nav_link_lv1:hover .myText:after,
  .nav_menu .nav_link_lv1:focus .myText:after {
    /*width: 100%;*/
  }

  .nav_menu .extmenu_lv1 {
    position: relative;
    transition: max-height .3s ease-in-out;
    max-height: 0;
    overflow: hidden;
  }

  .nav_menu .nav_item_lv1.open .extmenu_lv1 {
    max-height: 10000px;
  }

  .nav_menu .nav_link_lv1 {
    position: relative;
    width: 100%;
    /*margin-bottom: 2.3rem;*/
    /*width: 33.33333%;*/
  }

  .nav_menu .menu_plus_lv1 {
    width: .75rem;
    height: 100%;
    position: absolute;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    z-index: 50;
  }

  .nav_menu .menu_plus_lv1>span {
    width: .75rem;
    height: .75rem;
    position: relative;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav_item_lv1.open .menu_plus_lv1>span:after {
    width: 0;
    height: 0;
  }

  .hidden_sub_menu>a>.menu_plus {
    display: none;
  }

  .nav_menu .extmenu_lv2 {
    display: none;
  }

  .nav_menu .menu_lv2 .nav_item {
    margin-bottom: 0;
  }

  .nav_menu .nav_link_lv2 {
    font-size: 1rem;
    display: block;
    background-color: var(--menu2_bg_color);
    color: var(--menu2_text_color);
    padding-left: 3.5rem;
    padding-right: 3rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    position: relative;
    line-height: 1.4em;
  }

  .nav_menu .nav_link_lv2::before {
    content: "";
    width: .5rem;
    height: .5rem;
    background-color: var(--menu2_text_color);
    border-radius: 50%;
    position: absolute;
    left: 2.3rem;
    top: 1.3rem;
  }

  .nav_menu .nav_link_lv2:hover,
  .nav_menu .nav_link_lv2:focus {
    background-color: var(--menu2_hover_bg_color);
    color: var(--menu2_hover_text_color);
  }

  .nav_menu .nav_link_lv2:hover::before,
  .nav_menu .nav_link_lv2:focus::before {
    background-color: var(--menu2_hover_text_color);
  }

  .nav_menu .share_btn {
    display: none;
  }

  /*header section end*/
  /*share section start*/
  .shareList {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    text-align: left;
    z-index: 9000;

    box-shadow: 0 3px .25rem rgba(29, 29, 29, .2);
    padding: .5rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
  }

  .shareList.active {
    border-top: 0;
  }

  .shareTool.active .shareList {
    display: block;
  }

  .shareTool.active .shareList:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--main-color);
    top: -7px;
  }

  .social_media_btn {
    position: relative;
    margin-top: .9375rem;
  }

  .social_media_btn {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    column-gap: .5rem;
  }

  .social_media_btn>li {
    display: block;
    margin-bottom: 0;
  }

  .social_media_btn a {
    font-size: 0;
  }

  .social_media_btn__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    width: 2.25rem;
    height: 2.25rem;
    position: relative;
  }

  .social_media_btn__btn:before {
    content: "";
    width: 1.625rem;
    height: 1.625rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-size: 100% auto;
    transition: .2s;
  }


  .social_media_btn__btn:hover::before,
  .social_media_btn__btn:focus::before {}


  .social_media_btn__btn--email {
    background: yellowgreen;
  }

  .social_media_btn__btn--email:before {
    background-image: url(../images/share/icon-social-email-white.png);
  }

  .social_media_btn__btn--fb {
    background: #3b5998;
  }

  .social_media_btn__btn--fb:before {
    background-image: url(../images/share/icon-social-facebook-white.png);
  }

  .social_media_btn__btn--wa {
    background: #1bd741;
  }

  .social_media_btn__btn--wa:before {
    background-image: url(../images/share/icon-social-whatsapp-white.png);
  }

  .social_media_btn__btn--wb {
    background: #df2029;
  }

  .social_media_btn__btn--wb:before {
    background-image: url(../images/share/icon-social-weibo-white.png);
  }

  .social_media_btn__btn--wc {
    background: #09b83e;
  }

  .social_media_btn__btn--wc:before {
    background-image: url(../images/share/icon-social-wechat-white.png);
  }

  .social_media_btn__btn--tw {
    background-color: black;
  }

  .social_media_btn__btn--tw:before {
    background-image: url(../images/share/icon-social-twitter-white.png);
  }


  .shareTool {
    position: relative;
  }

  /*share section end*/

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR footer 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .footer_area .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  body:not(.indexVersion) .footer_area {}

  .footer_area .title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--tsunami_500);
    letter-spacing: 2px;
  }

  .footer_slider_area .swiper:not(.swiper-initialized) {
    opacity: 0;
    visibility: hidden;
  }


  .footer_slider_area .swiper {
    --total_swiper_btn_size: calc(var(--swiper_btn_size) * 2);
    --total_swiper_btn_gap: calc(var(--swiper_btn_gap) * 2);
    max-width: calc(100% - var(--total_swiper_btn_size) - var(--total_swiper_btn_gap));
  }


  .footer_area .swiper-button-prev {
    left: 0;
    top: 50%;
    transform: translateY(-50%);

  }

  .footer_area .swiper-button-next {

    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .footer_slider_area {
    padding-top: 3rem;
    padding-bottom: 1.7rem;
    background-color: var(--footer_slider_area_bg_color);
  }


  .footer_area .swiper-slide a {
    width: 100%;
    display: block;
    transition: transform .5s ease;
  }

  .footer_area .swiper-slide a img {
    width: 100%;
    display: block;
  }

  .footer_area .swiper-slide a:hover,
  .footer_area .swiper-slide a:focus {
    transform: scale(1.1);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

  .footer_area .swiper_nav {
    margin-top: 1.5rem;
    justify-content: center;
  }

  .footer_area .swiperpaginwrapper {
    display: flex;
    align-items: center;
  }



  .footer_area2 {
    background-color: var(--footerarea2_bg_color);
    color: var(--tsunami_500);
    padding-bottom: 1.7rem;
    font-size: max(.875rem, 13px);
    font-weight: 600;
  }


  .footer_area .info>* {
    display: inline-block;
  }

  .footer_area .fTool {
    list-style-type: none;
    padding: 0;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: .625rem;
    column-gap: .5rem;
  }

  .footer_area .fTool>li {
    display: grid;
    grid-template-columns: 1fr max-content;
    column-gap: .5rem;
    margin-bottom: 0;
    align-items: center;
  }

  .footer_area .fTool>li:not(:last-child):after {
    content: "";
    display: block;
    width: 1px;
    height: 1rem;
    background-color: var(--tsunami_500);
    margin-top: .1rem;
  }

  .footer_area .fTool a {
    color: var(--tsunami_500);
  }


  .footer_area .copyright {}

  .footer_area .footer_row {
    display: grid;
    column-gap: 1rem;
    justify-content: space-between;
    align-items: flex-end;
    grid-template-areas: 'info1 icon_group' 'info1 update_date';
  }

  .footer_area .footer_left {
    grid-area: info1;
  }

  .footer_area .footer_icon {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.3rem;
    row-gap: .75rem;
    grid-area: icon_group;
    margin-bottom: 1rem;
  }

  .footer_area .footer_icon a {
    background: #fff;
    display: block;
  }

  .footer_area .footer_icon img {
    height: 2.75rem;

  }

  .footer_area .footer_icon>div {}

  .footer_area .footer_icon>div:last-child {}

  .footer_area .brandhk {}

  .footer_area .updateDate {
    grid-area: update_date;
    text-align: right;
  }



  /*
***
* SECTION FOR top button 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***/
  .bottom_nav {
    position: relative;
    z-index: 6000;
    text-align: right;

  }

  .bottom_nav:not(.show_topBtn) {
    overflow: hidden;
  }

  .top_btn {
    display: block;
    position: fixed;
    right: 25px;
    bottom: 20px;
    transition: opacity .4s ease-in-out, transform .3s ease-in-out;
    opacity: 0;
    transform: translateX(7rem);
  }

  .top_btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    background-color: var(--light_blue_300);
    border-radius: 50%;
    box-shadow: var(--box_shadow2);
  }

  .top_btn a:before {
    content: "";
    display: block;
    width: 35%;
    height: 35%;
    background-image: url(../images/icon/icon_top.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }

  .top_btn a:hover,
  .top_btn a:focus {
    background-color: var(--tsunami_400);
    text-decoration: none;
  }


  .top_btn a:hover:before,
  .top_btn a:focus:before {
    filter: var(--white_filter);
  }

  .show_topBtn .top_btn {
    opacity: 1;
    transform: translateX(0);
  }

  .in_view .top_btn {
    position: absolute;
    bottom: 1rem;
  }

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR left menu 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .left_menu {
    width: 22%;
    max-width: 402px;
    background-color: var(--left_menu_bg_color);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .15);
  }

  .left_menu .menu_plus {
    display: none;
  }

  .left_menu .hidden_sub_menu .arrow {
    display: none;
  }

  .left_menu .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 2.5rem;
    height: 100%;
    right: 0;
    top: 0;
  }

  .left_menu .arrow::after {
    content: "";
    background-image: url(../images/icon/icon_prev.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
    width: 1.5rem;
    aspect-ratio: 1.5/1;
    transform: rotate(-90deg);
    transition: transform .3s ease-in-out;
  }

  .left_menu .extmenu {
    transition: .3s max-height ease-in-out;
    max-height: 0;
    overflow: hidden;
  }

  .left_menu .open>.extmenu {
    max-height: 10000px;
  }

  .left_menu .open>.nav_link_wrap>.arrow::after {
    transform: rotate(90deg);
  }

  .left_menu .inner {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .left_menu .nav_link_wrap {
    position: relative;
  }

  .left_menu .nav_item_lv0 {
    display: block;
    list-style-type: none;
    margin-bottom: 0;
  }

  .left_menu .nav_link_lv0 {
    font-size: var(--left_menu_menu1_fontsize);
    font-weight: 400;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 3rem;
    color: var(--left_menu_menu0_text_color);
    border-bottom: 1px solid #cdcdcd;
    display: block;
    position: relative;
  }

  .left_menu .nav_link_lv0:hover,
  .left_menu .nav_link_lv0:focus,
  .left_menu .nav_link_wrap:has(.arrow_lv0:hover) .nav_link_lv0,
  .left_menu .nav_link_wrap:has(.arrow_lv0:focus) .nav_link_lv0 {
    text-decoration: none;
    background-color: var(--left_menu_menu0_hover_bg_color);
    border-color: transparent;
    color: var(--left_menu_menu0_hover_text_color);
  }

  .left_menu .nav_item_lv0:has(.nav_link_lv0:hover) .arrow_lv0,
  .left_menu .nav_item_lv0:has(.nav_link_lv0:focus) .arrow_lv0,
  .left_menu .arrow_lv0:hover,
  .left_menu .arrow_lv0:focus,
  .left_menu .nav_item_lv0.open .arrow_lv0 {
    filter: var(--white_filter);
  }

  .left_menu .nav_item_lv0.open .nav_link_lv0,
  .left_menu .nav_link_lv0.active_section {
    background-color: var(--left_menu_menu0_active_bg_color);
    color: var(--left_menu_menu0_active_text_color);
  }

  .left_menu .nav_item_lv0.open>a,
  .left_menu .nav_link_lv0.active_section {
    background-color: var(--left_menu_menu0_active_bg_color);
    color: var(--left_menu_menu0_active_text_color);
  }

  .left_menu .nav_item_lv0.open>a .arrow,
  .left_menu .nav_link_lv0.active_section>.arrow {
    filter: var(--white_filter);
  }

  .left_menu .menu_lv1 {
    padding-left: 0;
  }

  .left_menu .menu_lv1>li {
    list-style-type: none;
  }

  .left_menu .nav_link_lv1 {
    font-size: .98rem;
    font-weight: 400;
    display: block;
    color: var(--left_menu_menu1_text_color);
    padding-right: 1.3rem;
    padding-left: 3.5rem;
    padding-top: var(--left_menu_menu1_padding_top);
    padding-bottom: var(--left_menu_menu1_padding_bottom);
    position: relative;
  }

  .left_menu .nav_link_lv1::before {
    content: "";
    display: block;
    width: .4rem;
    height: .4rem;
    min-width: 6px;
    min-height: 6px;
    background-color: var(--left_menu_menu1_text_color);
    left: 2.2rem;
    top: calc(var(--left_menu_menu1_fontsize) / 2 + var(--left_menu_menu1_padding_top));
    position: absolute;
    border-radius: 50%;
  }

  .left_menu .nav_link_lv1.active_section::before {
    background-color: var(--left_menu_menu1_active_text_color);
  }

  .left_menu .nav_link_lv1.active_section {
    color: var(--left_menu_menu1_active_text_color);
  }

  .left_menu .arrow_lv1::after {
    width: 1.25rem;
  }

  .left_menu .menu_lv2 {
    font-size: var(--leftmenu_menu2_fontsize);
    padding-left: 5rem;
  }

  .left_menu .hidden_sub_menu>.excLi>.arrow {
    display: none;
  }

  .left_menu .hidden_sub_menu>.extmenu {
    display: none;
  }


  .mobile_left_menu {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    transition: transform .5s ease-in-out, opacity .4s;
    opacity: 0;
    transform: translateX(-100%);
    background-color: var(--grey_100);
    z-index: 3500;

    max-width: 350px;
    -webkit-box-shadow: 0 0 4px 2px rgba(40 40 40 / 20%);
    -moz-box-shadow: 0 0 4px 2px rgba(40, 40, 40, .2);
    -ms-box-shadow: 0 0 4px 2px rgba(40, 40, 40, .2);
    box-shadow: 0 0 4px 2px rgba(40 40 40 / 20%);
  }

  .mobile_left_menu.active {
    opacity: 1;
    transform: translateX(0);
  }


  .mobile_left_menu .leftMenu2 {
    width: 100%;
    max-width: none;
    opacity: 1;
    overflow-y: auto;
    max-height: 90dvh;
  }

  .mobile_left_menu .left_menu {
    width: 100%;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
  }

  .mobile_left_menu .cross_btn {
    margin-top: 1rem;
    display: block;
    padding-right: 1.3rem;
    margin-bottom: 1rem;
  }

  .mobile_left_menu .cross_btn a {
    color: #000;
    justify-content: flex-end;
  }

  .mobile_left_menu .cross_btn a>span:last-child:before,
  .mobile_left_menu .cross_btn a>span:last-child:after {
    background-color: #000;
  }

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR mobile menu
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .menu_section {}

  .menu_section:not(.row) {
    overflow-y: auto;
  }

  .menu_section.row {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 1.3rem;
    justify-content: space-between;
    align-items: flex-end;
  }

  .toggle_menu {
    color: #fff;
    transition: opacity .3s ease-in-out;
    background: var(--blue_400);
    width: 100%;
    height: 100dvh;

    position: fixed;
    z-index: 8000;
    top: 0;
    right: 0;
    display: none;
    grid-template-rows: max-content 1fr;
  }

  .ieVersion .toggle_menu {
    transition: none;
  }

  .toggle_menu .search_btn {
    filter: var(--white_filter);
  }

  .toggle_menu2 {
    color: #fff;
    background: var(--tsunami_gradient);
    width: 100%;
    position: fixed;
    z-index: 8000;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: .2s ease;
  }

  .search_menu_active .toggle_menu2 {
    opacity: 1;
    visibility: visible;
  }

  .mobile_menu_active .mobile_menu,


  .mobile_menu .share_btn {
    display: none;
  }

  .mobile_menu .shareList {
    margin-top: 1rem;
  }

  .mobile_menu .social_media_btn {
    display: flex;
    flex-wrap: wrap;
  }

  .mobile_menu .social_media_btn>li {
    margin-right: 1rem;
  }

  .mobile_menu .langTool {
    display: none;
  }

  .mobile_menu .langTool a {
    font-size: 1.4rem;
    font-weight: bold;
  }

  .mobile_menu .menuwrapper {
    overflow-y: auto;
    height: calc(100% - 5.75rem);
  }

  .mobile_menu .nav_item {
    margin-bottom: 0;
  }

  .mobile_menu .nav_link_wrap {
    position: relative;
    display: flex;

    padding-right: 1rem;
  }

  .mobile_menu .hidden_sub_menu .menu_plus {
    display: none;
  }

  .mobile_menu .menu_plus_lv0 {
    display: none;
  }

  .mobile_menu .menu_lv0 {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    border-top: 1px solid #fff;
  }

  .mobile_menu .nav_item_lv0 {
    margin-bottom: 0;
  }

  .mobile_menu .nav_item_lv0>.nav_link_wrap {
    border-bottom: 1px solid #fff;
  }

  .mobile_menu .nav_link_lv0 {
    font-size: 1rem;
    font-weight: 400;
    padding-top: 1rem;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
    padding-right: .3rem;
    text-align: left;
    text-decoration: none;
    position: relative;
    color: #fff;
    display: block;
    float: none;

  }

  .mobile_menu .nav_item_lv0.active_section .nav_link_lv0 {
    color: var(--mobile_menu_active_text_color);
    font-weight: 600;
  }

  .mobile_menu .arrow_lv0 {

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile_menu .arrow_lv0:after {
    content: "";
    display: block;
    width: 1rem;
    aspect-ratio: 1.5 / 1.25;
    filter: var(--white_filter);
    background-image: url(../images/icon/icon_prev.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transform: rotate(-180deg);
    transition: all .3s ease-in-out;
  }

  .mobile_menu .nav_item_lv0.open .arrow_lv0:after {
    
    transform: rotate(-90deg);
  }

  .mobile_menu .nav_link_lv0.excLi .menu_plus {
    display: none;
  }

  .mobile_menu .extmenu {
    position: static;
    max-height: 0;
    transition: max-height .5s;
    overflow: hidden;
    display: block;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
  }

  .mobile_menu .open>.extmenu {
    max-height: 3000px;
    box-shadow: var(--box_shadow3);
  }

  .mobile_menu .menu_lv1 {
    padding-left: 0;
  }

  .mobile_menu .nav_item_lv1 {
    color: var(--tsunami_500);
    background-color: var(--grey_100);
  }

  .mobile_menu .my_menu3 .nav_item_lv1 {
    color: var(--orange_red_400);
    background-color: var(--orange_red_100);
  }

  .mobile_menu .nav_link_lv1 {
    font-size: 1rem;
    font-weight: 800;
    padding: 1rem 1.5rem;
    text-align: left;
    text-decoration: none;

    display: block;
    position: relative;
    color: inherit;
  }



  .mobile_menu .menu_plus_lv1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    /* top: 1.3rem; */
  }

  .mobile_menu .menu_plus_lv1>span {
    position: relative;
    left: auto;
    width: .75rem;
    height: .75rem;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile_menu .menu_lv2 {
    padding-left: 0;
  }

  .mobile_menu .menu_lv2>li {
    list-style-type: none;
  }

  .mobile_menu .nav_link_lv2 {
    background-color: #0b5147;
  }

  .mobile_menu .nav_link_lv2 {
    font-size: 1rem;
    display: block;
    background-color: var(--menu2_bg_color);
    color: var(--menu2_text_color);
    padding-left: 3.5rem;
    padding-right: 3rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    position: relative;
    line-height: 1.4em;
  }

  .mobile_menu .nav_link_lv2:hover,
  .mobile_menu .nav_link_lv2:focus {
    color: #fff;
  }

  .mobile_menu .nav_link_lv2:hover:before,
  .mobile_menu .nav_link_lv2:focus:before {
    background-color: #fff;
  }

  .mobile_menu .menu_plus:before,
  .mobile_menu .menu_plus:after {
    background-color: #fff;
  }

  .search_menu .mobSearch {
    display: none;
  }

  .search_menu .search_btnwrap {
    display: none;
  }

  .search_menu .searchTool {
    height: 100%;
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
    padding-left: 3rem;
    padding-right: 3rem;
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
  }

  .search_menu .search_label {
    font-size: 0;
    display: block;
    max-height: 0;
    overflow: hidden;
    width: 0;
  }

  .search_menu form {
    display: flex;
    justify-content: center;
  }

  .search_area .search_btn {
    width: 1.3rem;
  }

  .search_area {
    width: min(100%, 826px);
    border-bottom: 1px solid #fff;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: .25rem;
    padding-right: 1rem;
    overflow: hidden;
  }

  .search_area input {

    border: 0;
    font-size: 1rem;
    padding: .75rem .75rem;
    width: calc(100% - 1.25rem);
    display: flex;
    align-items: center;
    color: var(--main_text_color);

  }

  .search_area input::-webkit-input-placeholder,
  .search_area input::placeholder,
  .search_area input::placeholder {
    color: currentColor;
  }

  .mobile_menu_active {
    overflow: hidden;
  }

  .lang_menu {
    display: none;
  }


  .lang_menu_active .lang_menu {
    display: block;
  }


  .js_scroll_blanket {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7500;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    cursor: pointer;
    font-size: 0;
  }

  .mobile_menu_active .js_scroll_blanket {
    display: block;
  }

  .search_menu_active .js_scroll_blanket {}


  /*
***
* SECTION FOR menu button
***
***
*/
  .menu_btn {
    --menu_bar_size: 1.75rem;
    padding-right: 0;
    padding-left: 0;
    z-index: 4000;
    display: none;
  }

  .menu_btn a {
    display: block;
    /*width: 5rem;
  height: 5rem;*/
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .menu_btn .border_box {
    width: var(--menu_bar_size);
    display: block;
  }

  .menu_btn .border_box>span {
    width: 100%;
    height: 2px;
    display: block;
  }

  .menu_btn .border_box>span:not(:first-child) {
    margin-top: .4rem;
  }

  .menu_btn .border_box>span::before {
    content: "";
    display: block;
    background-color: var(--grey_700);
    width: 100%;
    height: 100%;
    margin-left: auto;
    transition: width .3s ease-in-out;
  }


  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR section banner 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/

  .section_header_banner {
    height: max(23.5vw, 450px);
    display: grid;
    grid-template-areas: 'overlap3';
    grid-template-rows: 100%;
    overflow: hidden;
  }


  .section_header_banner:before {
    content: '';
    width: 100%;
    height: 80%;
    background: linear-gradient(180deg, rgba(55, 65, 85, .7), rgba(55, 61, 75, 0));
    opacity: .8;
    grid-area: overlap3;
    z-index: 60;
  }

  .section_header_banner>.container {
    display: flex;
    align-items: center;
    height: 100%;
    grid-area: overlap3;
    z-index: 500;
  }

  .section_header_banner>.container>div:first-child {}

  .section_header_banner .graphic {
    background-image: url(../images/banner-icon2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /*height: 46vw;
    width: 36.6%;
    margin-top: -5vw;
    margin-left: -10vw;
    */
    width: 700px;
    height: 887px;
    margin-left: -200px;
    margin-top: -120px;
    grid-area: overlap3;
    z-index: 90;
    align-self: center;
    opacity: .58;
  }

  .section_header_banner .bg {
    height: 100%;
    width: 100%;
    grid-area: overlap3;
    z-index: 20;
  }


  .section_header_banner .bg img {
    object-fit: cover;
    object-position: center top;
    height: 100%;
    max-width: none;
    width: 100%;
  }

  .section_header_banner h1 {
    margin-top: 0;
    margin-bottom: 0;
    

    
    /*padding-left: clamp(.5rem, 9.2vw, 11rem);*/
    padding-left: 11rem;
  }

  .section_header_banner h1 .inner{
    display: block;
    position: relative;
  }

  .section_header_banner h1 .top_element{
    color: #000;
    display: block;
    filter: var(--white_filter);
  }

  .section_header_banner h1 .bottom_element{

    text-shadow: 0 0 1rem #000;
    display: block;
    position: absolute;

    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: #000;
    z-index: -50;
  }

  .section_header_banner::after {
    content: "";
    display: block;
    width: 100%;
    height: max(4px, .25rem);
    background: linear-gradient(90deg, #5f94b1, #3b5c6e);
    opacity: .8;
    grid-area: overlap3;
    z-index: 125;
  }


  .section_header_banner .weather_row {
    grid-area: overlap3;
  }

  .section_header_banner .mobile_weather {
    display: none;
  }

  .section_header_banner .desktop_weather .container {}

  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR bg_inside_page_top 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .bg_inside_page_top {
    width: 100%;
    height: 350px;

    position: absolute;
    /* top: 23.5vw; */
    z-index: -50;

    background-image: url(../images/inside-page-top.svg);
    filter: var(--bg_element_filter);

    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;


    /*display: flex;
    align-items: flex-start;
    justify-content: center;*/
  }

  .bg_inside_page_top::before {
    content: '';
    /*width: max(1920px, 100%);
    height: 100%;
    clip-path: shape(from 25.61% 100%, hline by 0%, line to 0% 82.17%, vline to 0%, hline by 100%, vline to 73.97%, line to 25.61% 100%, close);
    background: var(--bg_element_color);
    display: block;*/
  }

  .bg_inside_page_bottom {
    width: 100%;
    /*height: 18.229vw;*/
    height: 350px;
    position: absolute;
    bottom: 0;
    z-index: -10;
    background-image: url(../images/inside-page-bottom.svg);
    filter: var(--bg_element_filter);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    /*display: flex;
    align-items: flex-end;
    justify-content: center;*/
  }

  .bg_inside_page_bottom::after {
    content: '';
    /*width: max(1920px, 100%);
    height: 100%;
    clip-path: shape(from 0% 100%, vline to 0%, line by 72.8% 61.28%, line to 100% 18.51%, vline by 81.49%, hline to 0%, close);
    background: var(--bg_element_color);
    display: block;*/
  }


  /* ========================= ========================= ========================= ========================= ========================= =========================
***
* SECTION FOR mobile left menu nav 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
 ========================= ========================= ========================= ========================= ========================= =========================*/
  .mobile_left_menu_nav {
    /*position: absolute;
        right: 0;
        top: 0;
       */
    display: none;
    position: absolute;
    right: 0;
    text-align: right;
    bottom: 0;
  }

  .mobile_left_menu_nav a {
    display: inline-block;
    background-color: var(--grey_700);
    color: #fff;
    padding-top: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: .5rem;
  }

  .mobile_left_menu_nav a>span:before {
    content: "";
    width: 1.5rem;
    height: 1.25rem;
    background-image: url("../images/icon/icon_leftmenu_nav.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
    margin-right: .5rem;
    filter: var(--white_filter);
  }

  .mobile_left_menu_nav a>span {
    display: flex;
    align-items: center;
  }

  .mobile_left_menu_nav a>span>span {
    display: inline-block;
    text-align: left;
    font-size: 1.2rem;
  }


}

@layer layout {

  .equal_height_column:not(:has(>:nth-child(2)))>* {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@layer layout {
  .card_grid {
    display: grid;
    row-gap: 2.5rem;
    column-gap: 2.5rem;
  }

  .card_grid2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@layer layout {
  .card_row {
    /*--column_gap_size: clamp(1rem, 1.7vw, 2.5rem);
    --row_gap_size: clamp(1rem, 1.7vw, 2.5rem);*/
    --column_gap_size: 1.75rem;
    --row_gap_size: 1.75rem;
    --number_of_gap_in_each_row: calc(var(--item_in_each_row) - 1);
    --total_gap: calc(var(--column_gap_size) * var(--number_of_gap_in_each_row));

    display: flex;
    flex-wrap: wrap;
    column-gap: var(--column_gap_size);
    row-gap: var(--row_gap_size);
    justify-content: center;
  }

  .card_row>* {
    --each_item_width: calc(calc(100% - var(--total_gap)) / var(--item_in_each_row));
    width: var(--each_item_width);
  }


  .card_row4 {
    --item_in_each_row: 6;
  }

  .card_row4 .card4 {
    height: 100%;
  }

  h2:has(+.card_row4) {
    margin-bottom: 4rem;
  }
}

@layer layout {
  .color_row1>*:nth-child(1) .card4 {
    --card4_bg_color: var(--red_400);
  }

  .color_row1>*:nth-child(2) .card4 {
    --card4_bg_color: var(--orange_red_400);
  }

  .color_row1>*:nth-child(3) .card4 {
    --card4_bg_color: var(--kumera_400);
  }

  .color_row1>*:nth-child(4) .card4 {
    --card4_bg_color: var(--green_400);
  }

  .color_row1>*:nth-child(5) .card4 {
    --card4_bg_color: var(--tsunami_400);
  }

  .color_row1>*:nth-child(6) .card4 {
    --card4_bg_color: var(--indigo_400);
  }
}

@layer layout {
  *:not(h2, .h2, .h2_style)+.my_section:has(+.my_section) {
    margin-top: 3rem;
  }

  .my_section:not(:last-child) {
    margin-bottom: 3rem;
  }

  .my_section *:first-child {
    margin-top: 0;
  }

  .my_section:has(.mytab_bigcontainer:last-child) {
    margin-bottom: 2rem;
  }

  .my_section .section_title {
    margin-bottom: 2rem;
  }
}

@layer layout {
  .img_row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 1srem;
  }

  .img_row img {
    width: min(100%, 12.25rem);
  }
}

@layer layout {
  .main_content_title_row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    justify-content: space-between;
    align-items: center;
  }

  .main_content_title_row>*:nth-child(2) {
    margin-bottom: 2rem;
  }
}

@layer greyscale {
  :root:has(.greyscale) {
    --grayscale_filter: grayscale(100%) grayscale(100%);
    --grayscale_filter2: grayscale(100%);
  }

  html:has(.greyscale) {}

  .greyscale :where(.header_area, .footer_area) {
    -webkit-filter: var(--grayscale_filter);
    -moz-filter: var(--grayscale_filter);

    -ms-filter: var(--grayscale_filter2);
    -o-filter: var(--grayscale_filter2);
    filter: var(--grayscale_filter2);
    filter: gray;
  }

  .greyscale :where(.swiper-button-next, .swiper-button-prev, .weather_row, .swiper_nav, .main_area1 .swiper-slide,
    .main_area2 .main_area_inner,
    .main_area3,
    .main_area4, .main_area5) {
    -webkit-filter: var(--grayscale_filter);
    -moz-filter: var(--grayscale_filter);

    -ms-filter: var(--grayscale_filter2);
    -o-filter: var(--grayscale_filter2);
    filter: var(--grayscale_filter2);
    filter: gray;
  }

  .greyscale .top_btn a {
    -webkit-filter: var(--grayscale_filter);
    -moz-filter: var(--grayscale_filter);

    -ms-filter: var(--grayscale_filter2);
    -o-filter: var(--grayscale_filter2);
    filter: var(--grayscale_filter2);
    filter: gray;
  }

  .greyscale :where(.toggle_menu, .toggle_menu2) {
    -webkit-filter: var(--grayscale_filter);
    -moz-filter: var(--grayscale_filter);

    -ms-filter: var(--grayscale_filter2);
    -o-filter: var(--grayscale_filter2);
    filter: var(--grayscale_filter2);
    filter: gray;
  }

  .greyscale .modal.popup1 {
    -webkit-filter: var(--grayscale_filter);
    -moz-filter: var(--grayscale_filter);

    -ms-filter: var(--grayscale_filter2);
    -o-filter: var(--grayscale_filter2);
    filter: var(--grayscale_filter2);
    filter: gray;
  }
}

@layer layout {
  .content_area .fake_modal_content {
    display: none;
  }
}

@layer layout {
  .popup1 .modal_box {
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-rows: 1fr max-content;
  }

  .popup1 .modal_content {
    overflow-y: auto;
  }

  .popup1 .big_accordion .accordion_item {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .popup1 .big_accordion .accordion_item .cont {
    padding-right: 2.5rem;
  }

  .popup1 .big_accordion .accordion_item:not(.active) .under_r {
    max-height: 2.5rem;
    opacity: 1;
  }

  .popup1 .big_accordion .accordion_item:not(.active) .cont {
    padding-top: 0;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 25px;
  }

  .popup1 .big_accordion .under_r {}


  .popup1 .accordion_item:not(.active) .cont>*:first-child {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .popup1 .big_accordion .accordion_item:not(:last-child) {
    --border_color: var(--grey_200);
    border-bottom-style: dashed;
    border-image: repeating-linear-gradient(to right,
        var(--border_color) 0,
        var(--border_color) 3px,
        /* dash length */
        transparent 3px,
        transparent 1rem
        /* gap length */
      ) 1;
  }

  .popup1 .big_accordion .accordion_item:last-child{
    border-bottom: 0;
  }

  .popup1 .big_accordion .accordion_item.active {
    background: var(--grey_100);
  }
}

@layer layout {
  .fundingschemes_typerow {
    border-radius: var(--border_radius1);
    overflow: hidden;
    max-width: 800px;
    min-width: inherit;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .fundingschemes_typerow>div {
    width: 100%;
  }

  .fundingschemes_typerow .generateAll {
    background: var(--tab_active_bg_color);
    color: var(--tab_active_text_color);
    text-align: center;
    align-items: center;
    height: 100%;
    justify-content: center;
    border-bottom: var(--tab_row_border_width) solid var(--tab_row_border_color);
    padding-left: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-weight: 900;
    padding-right: 1rem;
    display: flex;
  }


  .fundingschemes_typerow .generateFiltered {
    --tab_bg_color: var(--tsunami_300);
    --tab_text_color: #fff;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    font-weight: 900;
    color: var(--tab_text_color);
    background: var(--tab_bg_color);
    text-align: center;
    align-items: center;
    height: 100%;
    justify-content: center;
    border-bottom: var(--tab_row_border_width) solid var(--tab_row_border_color);
    padding-right: 1rem;
    display: flex;
  }
}

/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all layout css inside @layer layout {}
***
* please make sure all layout css inside @layer layout {}
* please make sure all layout css inside @layer layout {}
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/