/* BREAKPOINTS */
/* MEDIA QUERIES */
/* Helpers */
.is-xs, .is-s, .is-m, .is-l, .is-xl {
  display: none;
}

@media only screen and (min-width: 576px) {
  .is-xs {
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  .is-s {
    display: block;
  }
}

@media only screen and (min-width: 992px) {
  .is-m {
    display: block;
  }
}

@media only screen and (min-width: 1200px) {
  .is-l {
    display: block;
  }
}

@media only screen and (min-width: 1600px) {
  .is-xl {
    display: block;
  }
}

.only-xs, .only-s, .only-m, .only-l, .only-xl {
  display: none;
}

@media only screen and (min-width: 0px) and (max-width: 576px) {
  .only-xs {
    display: block;
  }
}

@media only screen and (min-width: 577px) and (max-width: 768px) {
  .only-s {
    display: block;
  }
}

@media only screen and (min-width: 769px) and (max-width: 992px) {
  .only-m {
    display: block;
  }
}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
  .only-l {
    display: block;
  }
}

@media only screen and (min-width: 1201px) {
  .only-xl {
    display: block;
  }
}

:root {
  --x: 50vw;
  --y: 50vw;
  --wrapper-width: 100%;
  --wrapper-max-width: 1400px;
  --color-white: 255, 255, 255;
  --color-black: 0, 0, 0;
  --color-link: 204, 51, 102;
  --color-main: 39, 48, 95;
  --font-title: "range-sans-variable";
  --font-content: "range-sans-variable";
  --gutter-grid: 2em;
  --gutter: 2rem;
  --gutter-w: clamp(1rem, 20vw, 4rem);
  --gutter-h: clamp(1rem, 20vh, 6rem);
  --gutter-padding: clamp(1em, var(--gutter-h), 4em) clamp(1em, var(--gutter-w), 4em);
}
@media only screen and (max-width: 992px) {
  :root {
    --gutter: 1rem;
  }
}

/*
.form-panel{
  @include form-field;
  .form-label{
    line-height: 40px !important;
    padding-right: 40px;
  }
  .form-input{
    .form-input-wrapper{
      position: relative;

      i{
        position: absolute;
        bottom: 100%;
        right: 10px;
        color: #555;
        font-size: 12px;
        line-height: 40px;
        border: 0;
      }

    }
  }

  .filter-panel{
    $header-height: 60px;

    position: fixed;
    top: 100%;
    left: 50%;
    //bottom: 0;
    max-height: 600px;
    height: 80vh;
    width: 80vw;
    max-width: 600px;
    background: rgba(255,255,255,1);
    z-index: 20000;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    flex-direction: column;
    justify-content: stretch;
    transform: translateX(-50%) translateY(50%);
    display: flex;
    overflow: hidden;
    @include rem(font-size, 16px);

    .form-panel.active &{
      //display: block;
    }

    > *{
      padding: var(--gutter);
      position: relative;
    }

    header{
      padding: 0;
      border-bottom: 1px solid #eee;
      h6{
        text-transform: uppercase;
        @include rem(font-size, 14px);
        line-height: $header-height;
        padding-left: var(--gutter);
        @include animate;
      }

      .bt-close{
        @include animate;
        position: absolute;
        top: 0;
        right: 0;
        background: none;
        border: 0;
        @include rem(font-size, 20px);
        line-height: $header-height;
        width: $header-height;
      }

      .bt-back{
        @include animate;
        position: absolute;
        top: 0;
        left: 0;
        background: none;
        border: 0;
        @include rem(font-size, 20px);
        line-height: $header-height;
        width: $header-height;
      }
    }

    footer{
      button{
        @extend %button;
      }
    }

    label{
      padding: calc(var(--gutter)/4);
      display: block;
      &:hover{
        background: #eee;
      }
    }

    &[data-index="0"]{
      [data-index="0"]{
        left: 0%;
      }
      [data-index="1"]{
        left: 100%;
      }
      .bt-back{
        transform: translateX(-100%);
      }
      h6{
        transform: translateX(0px);
      }
    }

    &[data-index="1"]{
      [data-index="0"]{
        left: -100%;
      }
      [data-index="1"]{
        left: 0%;
      }
      .bt-back{
        transform: translateX(0%);
      }
      h6{
        transform: translateX($header-height/2);
      }
    }

    .wrapper-main{
      height: 100%;
      max-height: 100%;
      min-width: 100%;
      position: relative;
    }

    .wrapper{
      @include animate;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: auto;

      &[data-index="0"]{
        > div{
          > ul{
            display: none;
          }
        }
      }

      &[data-index="1"]{
        > div{
          > label{
            display: none;
          }
          > ul{
            display: block;
          }
        }
      }

      > div{
        label{
          font-weight: 300;
          padding: 0 calc(2 * var(--gutter));
          border-bottom: 1px solid #eee;
          position: relative;
          display: flex;
          align-items: center;
          min-height: 60px;
          i.color{
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 0.5em;
            transform: translateY(4px);
            border: 2px solid #fff;
            box-shadow: 0px 0px 2px #aaa;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            overflow: hidden;
          }
          figure{
            width: 80px;
            display: block;
            margin-right: 1em;
            img{
              width: 100%;
            }
          }
          span{
            display: block;
          }
          i.tick{
            opacity: 0.1;
            float: left;
            margin-right: 1em;
          }
          input{
            position: absolute;
            visibility: hidden;
            opacity: 0;

            &:checked ~ i{
              opacity: 1;
            }
            &:checked ~ span{
              font-weight: bold;
            }
          }
        }
        > label{
          font-weight: 600;
          .count{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 1em;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            background: rgba(0,0,0,0.05);
            font-size: 13px;
            font-style: normal;
            opacity: 1;

            &[rel="0"]{
              opacity: 0;
            }
          }
        }
        ul{
          @include clearlist;
          li{
            &.all{
              background: #f7f7f7;
              label{
                border-color: #aaa;
                i.tick{
                  position: relative;
                  &:after{
                    content:"";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateY(-50%) translateX(-50%);
                    width: 24px;
                    height: 24px;
                    border: 1px solid #000;
                  }
                }
              }
            }
          }
          &.has-all{
            li{
              input ~ .tick{
                opacity: 1;
              }
            }
          }
        }
        &.active ul{
          display: block;
        }
      }
    }
  }
}
*/
#page-footer > .wrapper, .navigation .navigation-wrapper, section > .wrapper, section > header, .homepage-hero .wrapper, .homepage-block header, .blog-item .wrapper, .blog-related > header, .modular-features header, .modular-hero header {
  width: calc(var(--wrapper-width) - var(--gutter-w));
  max-width: var(--wrapper-max-width);
  margin-left: auto;
  margin-right: auto;
}

[data-scroll-animation] {
  transition: all 200ms ease-in-out;
  transform: translateY(20%);
  opacity: 0;
}
[data-scroll-animation].fade-up {
  opacity: 1;
  transform: translateY(0);
}

@font-face {
  font-family: "range-sans-variable";
  src: url("https://use.typekit.net/af/a9e279/00000000000000007753f6d1/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff2"), url("https://use.typekit.net/af/a9e279/00000000000000007753f6d1/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff"), url("https://use.typekit.net/af/a9e279/00000000000000007753f6d1/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 100;
  font-stretch: normal;
}
/*
 * Ripple material animation
 */
span.ripple {
  position: absolute; /* The absolute position we mentioned earlier */
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(var(--color-main), 0.1);
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
@keyframes loader-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
/*
 * Button
 */
.wbx-button-container {
  font-size: 0px;
}
.wbx-button-container ~ .wbx-button-container {
  margin-left: 0.5rem;
}

.button-action {
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font-content);
  min-height: 40px;
  min-width: 40px;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0 0.75em;
  font-weight: var(--fw-regular);
  background: rgba(0, 0, 0, 0.05);
  border: none;
  white-space: nowrap;
  transition: all 200ms ease-in-out;
}
.button-action:has(span) span {
  transition: all 200ms ease-in-out;
  margin-left: 0.5em;
}
.button-action .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  opacity: 0;
}
.button-action .loader svg {
  animation: loader-rotation 2s infinite linear;
}
.is-loading.button-action span {
  opacity: 0;
}
.is-loading.button-action figure {
  opacity: 0;
}
.is-loading.button-action .loader {
  opacity: 1;
}
.is-done.button-action {
  display: none;
}
.button-action:hover {
  background: rgba(var(--color-link), 0.2);
  color: rgba(var(--color-link), 1);
}
.button-action figure {
  transition: all 200ms ease-in-out;
  width: 1.5em;
  height: 1.5em;
}
.button-action svg {
  width: 1.5em;
  height: 1.5em;
}

.button-shortcut {
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font-content);
  min-height: 40px;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0 0.75em;
  font-size: 0.8em;
  font-weight: var(--fw-regular);
  background: none;
  border: none;
  white-space: nowrap;
}
.button-shortcut:hover {
  background: rgb(var(--color-black));
  color: #fff;
}
.button-shortcut:hover select {
  color: #fff;
}
.button-shortcut i {
  font-size: 1.5em;
  margin-right: 0.25em;
}
.button-shortcut svg {
  width: 1.5em;
  height: 1.5em;
}

.navigation .navigation-menus li.as-button a, .button, .button-outline, .button-third, .button-secondary, .button-primary {
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  font-variation-settings: "wght" 600 !important;
  border-radius: 4px;
  font-family: var(--font-content);
  background: rgb(var(--color-main));
  color: rgb(var(--color-white));
  border: 2px solid rgb(var(--color-main));
  padding: 0 1em;
  margin: 0;
  min-height: 48px;
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  transition: all 0.3s ease-in;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
.navigation .navigation-menus li.as-button a span.ripple, .button span.ripple, .button-outline span.ripple, .button-third span.ripple, .button-secondary span.ripple, .button-primary span.ripple {
  background: rgba(var(--color-white), 0.2);
}
.navigation .navigation-menus li.as-button a span:not(.ripple), .button span:not(.ripple), .button-outline span:not(.ripple), .button-third span:not(.ripple), .button-secondary span:not(.ripple), .button-primary span:not(.ripple) {
  position: relative;
  z-index: 5;
}
.navigation .navigation-menus li.as-button a span:not(.ripple) ~ svg, .button span:not(.ripple) ~ svg, .button-outline span:not(.ripple) ~ svg, .button-third span:not(.ripple) ~ svg, .button-secondary span:not(.ripple) ~ svg, .button-primary span:not(.ripple) ~ svg {
  margin-left: 0.25em;
}
.navigation .navigation-menus li.as-button a i, .button i, .button-outline i, .button-third i, .button-secondary i, .button-primary i {
  position: relative;
  font-size: 1.5em;
  margin-right: 0.5em;
  text-align: center;
  transform: translateY(-0.1em);
}
.navigation .navigation-menus li.as-button a svg, .button svg, .button-outline svg, .button-third svg, .button-secondary svg, .button-primary svg {
  position: relative;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
}
.navigation .navigation-menus li.as-button a svg ~ span, .button svg ~ span, .button-outline svg ~ span, .button-third svg ~ span, .button-secondary svg ~ span, .button-primary svg ~ span {
  margin-left: 0.25em;
}
.navigation .navigation-menus li.as-button a:hover, .button:hover, .button-outline:hover, .button-third:hover, .button-secondary:hover, .button-primary:hover {
  background: rgb(var(--color-black));
  color: rgb(var(--color-white));
  border-color: rgb(var(--color-black));
}
.button-primary {
  color: rgb(var(--color-white));
  background: rgb(var(--color-main));
  border: 2px solid rgb(var(--color-main));
}
.button-primary span.ripple {
  background: rgba(var(--color-white), 0.2);
}
.button-primary:hover {
  background: rgb(var(--color-black));
  color: rgb(var(--color-white));
  border-color: rgb(var(--color-black));
}

.button-secondary {
  color: rgb(var(--color-secondary));
  background: none;
  border: rgb(var(--color-secondary)) solid 2px;
}
.button-secondary:hover {
  background: rgb(var(--color-secondary-dark));
  color: rgb(var(--color-white));
  border-color: rgb(var(--color-secondary-dark));
}

.button-third {
  color: rgb(var(--color-black));
  background: none;
  border: 2px solid rgba(255, 255, 255, 0);
}
.button-third:hover {
  background: none;
  color: rgb(var(--color-secondary-dark));
  border-color: rgba(255, 255, 255, 0);
}

.button-outline {
  color: rgb(var(--color-black));
  background: none;
  border: 2px solid rgb(var(--color-black));
}
.button-outline span.ripple {
  background: rgba(var(--color-main), 0.1);
}
.button-outline:hover {
  background: none;
  color: rgb(var(--color-main));
  border-color: rgb(var(--color-main));
}

.navigation {
  position: sticky;
  top: 0px;
  transition: transform 250ms ease-in-out;
  background: #fff;
  --navigation-logo-height: 80px;
  --navigation-logo-padding: 20px;
}
.navigation-minified .navigation {
  --navigation-logo-height: 50px;
  --navigation-logo-padding: 20px;
}
.navigation-hide .navigation {
  transform: translateY(-100%);
}
.navigation-hide.scroll-up .navigation {
  transform: translateY(0%);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.navigation .navigation-wrapper {
  position: relative;
  width: calc(var(--wrapper-width) - 40px);
  margin: auto;
  display: grid;
  grid-template-areas: "navSecondary navSecondary navSecondary navSecondary" "navInfo navLogo navCustom navToggle" "navMain navMain navMain navMain";
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}
.navigation .navigation-toggle {
  position: relative;
  align-items: center;
  justify-content: center;
  align-self: end;
  height: 100%;
  grid-area: navToggle;
  display: none;
  z-index: 200;
}
.navigation-minified .navigation .navigation-toggle {
  display: flex;
}
.navigation .navigation-info {
  display: flex;
  align-items: center;
  justify-content: start;
  grid-area: navInfo;
}
.navigation .navigation-custom {
  display: flex;
  align-items: center;
  justify-content: end;
  grid-area: navCustom;
}
.navigation .navigation-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: navLogo;
  padding: var(--navigation-logo-padding) 0;
  z-index: 200;
}
.navigation .navigation-logo a {
  display: block;
}
.navigation .navigation-logo img {
  height: var(--navigation-logo-height);
  width: auto;
  display: block;
  transition: all 200ms ease-in-out;
}
#navigation-open:checked ~ .navigation img {
  filter: brightness(0) invert(1);
}
.navigation .navigation-main {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: navMain;
}
.navigation-minified .navigation .navigation-main {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}
.navigation .navigation-secondary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: end;
  grid-area: navSecondary;
  font-size: 0.75em;
  padding: 0.5em 0;
}
.navigation .navigation-secondary:before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: rgba(0, 0, 0, 0.05);
}
.navigation .navigation-icons {
  display: inline-flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
}
.navigation .navigation-icons li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  padding: 5px;
}
.navigation .navigation-icons li svg {
  width: 30px;
  height: 30px;
}
.navigation .navigation-menus {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1em;
  height: 100%;
}
.navigation .navigation-menus li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}
.navigation .navigation-menus li a {
  color: inherit;
  text-decoration: none;
}
.navigation .navigation-menus li.as-button a {
  padding: 0.5em 1.5em;
}
.navigation.style1 .navigation-wrapper {
  grid-template-areas: "navSecondary navSecondary navSecondary navSecondary" "navLogo navMain navCustom navToggle";
  grid-template-columns: auto 1fr;
}

html.navigation-minified .navigation-main {
  background: red;
}

#navigation-open {
  position: fixed;
  z-index: 10000;
  top: -100px;
  left: -100px;
}

[for=navigation-open] {
  width: 40px;
  height: 40px;
  cursor: pointer;
  order: 10 !important;
  margin-left: 0;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 12px;
  display: flex;
}
[for=navigation-open] span {
  display: block;
  position: relative;
  width: 26.6666666667px;
  height: 16px;
}
[for=navigation-open] i {
  background: rgba(var(--color-black), 1);
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 3px;
  transition: all 100ms ease-in-out;
}
[for=navigation-open] i:nth-child(1) {
  top: 0;
}
[for=navigation-open] i:nth-child(2) {
  top: 50%;
  margin-top: -1px;
}
[for=navigation-open] i:nth-child(3) {
  bottom: 0;
}
#navigation-open:checked ~ .navigation [for=navigation-open] i {
  background: rgba(var(--color-white), 1);
}
#navigation-open:checked ~ .navigation [for=navigation-open] i:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}
#navigation-open:checked ~ .navigation [for=navigation-open] i:nth-child(2) {
  opacity: 0;
}
#navigation-open:checked ~ .navigation [for=navigation-open] i:nth-child(3) {
  bottom: calc(50% - 1px);
  transform: rotate(-45deg);
}

.navigation-mobile {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100vh;
  width: 100vw;
  z-index: 100;
  background: rgba(var(--color-main));
  user-select: none;
  animation: none;
  transition: none;
  visibility: hidden;
  clip-path: circle(0% at 90% calc(var(--navigation-height) / 2));
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  will-change: clip-path;
  transform: translateX(-50%);
  display: flex;
  align-items: end;
  color: rgba(var(--color-white));
}
.navigation-mobile .navigation-menus {
  flex-direction: column;
  font-size: 30px;
}
.navigation-mobile .navigation-menus .as-button a {
  background: rgba(var(--color-white)) !important;
  border-color: rgba(var(--color-white)) !important;
  color: rgba(var(--color-main)) !important;
}
.navigation-mobile > .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - var(--navigation-height));
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#navigation-open:checked ~ .navigation .navigation-mobile {
  visibility: visible;
  animation: clip 1s forwards;
}
#navigation-open:checked ~ .navigation .navigation-mobile:before {
  animation: clip-fade 1s forwards;
}

@keyframes clip-fade {
  0% {
    opacity: 1;
  }
  100% {
    background: #fff;
    opacity: 0;
  }
}
@keyframes clip {
  0% {
    clip-path: circle(0% at 90% calc(var(--navigation-height) / 2));
  }
  100% {
    clip-path: circle(200% at 90% calc(var(--navigation-height) / 2));
  }
}
select:-webkit-autofill,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}

.form-text input::placeholder, .form-textarea input::placeholder, .form-dropdown input::placeholder, .form-autocomplete input::placeholder, .form-accordeon input::placeholder, .form-select input::placeholder, .form-birthdate input::placeholder, .form-radio input::placeholder, .form-checkbox input::placeholder,
.form-text textarea::placeholder,
.form-textarea textarea::placeholder,
.form-dropdown textarea::placeholder,
.form-autocomplete textarea::placeholder,
.form-accordeon textarea::placeholder,
.form-select textarea::placeholder,
.form-birthdate textarea::placeholder,
.form-radio textarea::placeholder,
.form-checkbox textarea::placeholder,
.form-text select::placeholder,
.form-textarea select::placeholder,
.form-dropdown select::placeholder,
.form-autocomplete select::placeholder,
.form-accordeon select::placeholder,
.form-select select::placeholder,
.form-birthdate select::placeholder,
.form-radio select::placeholder,
.form-checkbox select::placeholder, .form-text input, .form-textarea input, .form-dropdown input, .form-autocomplete input, .form-accordeon input, .form-select input, .form-birthdate input, .form-radio input, .form-checkbox input,
.form-text textarea,
.form-textarea textarea,
.form-dropdown textarea,
.form-autocomplete textarea,
.form-accordeon textarea,
.form-select textarea,
.form-birthdate textarea,
.form-radio textarea,
.form-checkbox textarea,
.form-text select,
.form-textarea select,
.form-dropdown select,
.form-autocomplete select,
.form-accordeon select,
.form-select select,
.form-birthdate select,
.form-radio select,
.form-checkbox select {
  font-family: var(--font-content);
  font-variation-settings: "wght" 500 !important;
  color: inherit;
  font-size: 100%;
}

.form-text > .form-label, .form-textarea > .form-label, .form-dropdown > .form-label, .form-autocomplete > .form-label, .form-accordeon > .form-label, .form-select > .form-label, .form-birthdate > .form-label, .form-radio > .form-label, .form-checkbox > .form-label {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  z-index: 1;
  transform: translateY(-50%);
  transition: 150ms ease-in-out all;
  pointer-events: none;
  opacity: 1;
  background: rgba(var(--color-main), 1);
  color: rgba(var(--color-white));
  left: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0;
}
.form-text > .form-label.form-required, .form-textarea > .form-label.form-required, .form-dropdown > .form-label.form-required, .form-autocomplete > .form-label.form-required, .form-accordeon > .form-label.form-required, .form-select > .form-label.form-required, .form-birthdate > .form-label.form-required, .form-radio > .form-label.form-required, .form-checkbox > .form-label.form-required {
  color: red;
}
.form-text .form-input, .form-textarea .form-input, .form-dropdown .form-input, .form-autocomplete .form-input, .form-accordeon .form-input, .form-select .form-input, .form-birthdate .form-input, .form-radio .form-input, .form-checkbox .form-input {
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  border-color: inherit;
}
.form-text .form-input .form-input-wrapper, .form-textarea .form-input .form-input-wrapper, .form-dropdown .form-input .form-input-wrapper, .form-autocomplete .form-input .form-input-wrapper, .form-accordeon .form-input .form-input-wrapper, .form-select .form-input .form-input-wrapper, .form-birthdate .form-input .form-input-wrapper, .form-radio .form-input .form-input-wrapper, .form-checkbox .form-input .form-input-wrapper {
  z-index: 10;
}
.form-text:has(input:placeholder-shown) .form-label, .form-textarea:has(input:placeholder-shown) .form-label, .form-dropdown:has(input:placeholder-shown) .form-label, .form-autocomplete:has(input:placeholder-shown) .form-label, .form-accordeon:has(input:placeholder-shown) .form-label, .form-select:has(input:placeholder-shown) .form-label, .form-birthdate:has(input:placeholder-shown) .form-label, .form-radio:has(input:placeholder-shown) .form-label, .form-checkbox:has(input:placeholder-shown) .form-label, .form-text:has(textarea:placeholder-shown) .form-label, .form-textarea:has(textarea:placeholder-shown) .form-label, .form-dropdown:has(textarea:placeholder-shown) .form-label, .form-autocomplete:has(textarea:placeholder-shown) .form-label, .form-accordeon:has(textarea:placeholder-shown) .form-label, .form-select:has(textarea:placeholder-shown) .form-label, .form-birthdate:has(textarea:placeholder-shown) .form-label, .form-radio:has(textarea:placeholder-shown) .form-label, .form-checkbox:has(textarea:placeholder-shown) .form-label {
  transform: translateY(-50%);
  font-size: 1em;
  top: 24px;
}
.form-text:has(input:focus-visible) .form-label, .form-textarea:has(input:focus-visible) .form-label, .form-dropdown:has(input:focus-visible) .form-label, .form-autocomplete:has(input:focus-visible) .form-label, .form-accordeon:has(input:focus-visible) .form-label, .form-select:has(input:focus-visible) .form-label, .form-birthdate:has(input:focus-visible) .form-label, .form-radio:has(input:focus-visible) .form-label, .form-checkbox:has(input:focus-visible) .form-label, .form-text:has(textarea:focus-visible) .form-label, .form-textarea:has(textarea:focus-visible) .form-label, .form-dropdown:has(textarea:focus-visible) .form-label, .form-autocomplete:has(textarea:focus-visible) .form-label, .form-accordeon:has(textarea:focus-visible) .form-label, .form-select:has(textarea:focus-visible) .form-label, .form-birthdate:has(textarea:focus-visible) .form-label, .form-radio:has(textarea:focus-visible) .form-label, .form-checkbox:has(textarea:focus-visible) .form-label {
  transform: translateY(-50%);
  font-size: 1rem;
  top: 0;
}
.form-text:has(input:focus-visible) .form-input, .form-textarea:has(input:focus-visible) .form-input, .form-dropdown:has(input:focus-visible) .form-input, .form-autocomplete:has(input:focus-visible) .form-input, .form-accordeon:has(input:focus-visible) .form-input, .form-select:has(input:focus-visible) .form-input, .form-birthdate:has(input:focus-visible) .form-input, .form-radio:has(input:focus-visible) .form-input, .form-checkbox:has(input:focus-visible) .form-input, .form-text:has(textarea:focus-visible) .form-input, .form-textarea:has(textarea:focus-visible) .form-input, .form-dropdown:has(textarea:focus-visible) .form-input, .form-autocomplete:has(textarea:focus-visible) .form-input, .form-accordeon:has(textarea:focus-visible) .form-input, .form-select:has(textarea:focus-visible) .form-input, .form-birthdate:has(textarea:focus-visible) .form-input, .form-radio:has(textarea:focus-visible) .form-input, .form-checkbox:has(textarea:focus-visible) .form-input {
  border-color: rgba(var(--color-white));
  border-width: 1px;
}
.form-text:has(input:focus-visible) .form-input .form-input-wrapper, .form-textarea:has(input:focus-visible) .form-input .form-input-wrapper, .form-dropdown:has(input:focus-visible) .form-input .form-input-wrapper, .form-autocomplete:has(input:focus-visible) .form-input .form-input-wrapper, .form-accordeon:has(input:focus-visible) .form-input .form-input-wrapper, .form-select:has(input:focus-visible) .form-input .form-input-wrapper, .form-birthdate:has(input:focus-visible) .form-input .form-input-wrapper, .form-radio:has(input:focus-visible) .form-input .form-input-wrapper, .form-checkbox:has(input:focus-visible) .form-input .form-input-wrapper, .form-text:has(textarea:focus-visible) .form-input .form-input-wrapper, .form-textarea:has(textarea:focus-visible) .form-input .form-input-wrapper, .form-dropdown:has(textarea:focus-visible) .form-input .form-input-wrapper, .form-autocomplete:has(textarea:focus-visible) .form-input .form-input-wrapper, .form-accordeon:has(textarea:focus-visible) .form-input .form-input-wrapper, .form-select:has(textarea:focus-visible) .form-input .form-input-wrapper, .form-birthdate:has(textarea:focus-visible) .form-input .form-input-wrapper, .form-radio:has(textarea:focus-visible) .form-input .form-input-wrapper, .form-checkbox:has(textarea:focus-visible) .form-input .form-input-wrapper {
  position: relative;
  z-index: 20;
}
.form-text input[type=password]::placeholder, .form-textarea input[type=password]::placeholder, .form-dropdown input[type=password]::placeholder, .form-autocomplete input[type=password]::placeholder, .form-accordeon input[type=password]::placeholder, .form-select input[type=password]::placeholder, .form-birthdate input[type=password]::placeholder, .form-radio input[type=password]::placeholder, .form-checkbox input[type=password]::placeholder,
.form-text input[type=text]::placeholder,
.form-textarea input[type=text]::placeholder,
.form-dropdown input[type=text]::placeholder,
.form-autocomplete input[type=text]::placeholder,
.form-accordeon input[type=text]::placeholder,
.form-select input[type=text]::placeholder,
.form-birthdate input[type=text]::placeholder,
.form-radio input[type=text]::placeholder,
.form-checkbox input[type=text]::placeholder,
.form-text input[type=email]::placeholder,
.form-textarea input[type=email]::placeholder,
.form-dropdown input[type=email]::placeholder,
.form-autocomplete input[type=email]::placeholder,
.form-accordeon input[type=email]::placeholder,
.form-select input[type=email]::placeholder,
.form-birthdate input[type=email]::placeholder,
.form-radio input[type=email]::placeholder,
.form-checkbox input[type=email]::placeholder,
.form-text textarea::placeholder,
.form-textarea textarea::placeholder,
.form-dropdown textarea::placeholder,
.form-autocomplete textarea::placeholder,
.form-accordeon textarea::placeholder,
.form-select textarea::placeholder,
.form-birthdate textarea::placeholder,
.form-radio textarea::placeholder,
.form-checkbox textarea::placeholder {
  color: transparent !important;
}
.form-text input[type=password], .form-textarea input[type=password], .form-dropdown input[type=password], .form-autocomplete input[type=password], .form-accordeon input[type=password], .form-select input[type=password], .form-birthdate input[type=password], .form-radio input[type=password], .form-checkbox input[type=password],
.form-text input[type=text],
.form-textarea input[type=text],
.form-dropdown input[type=text],
.form-autocomplete input[type=text],
.form-accordeon input[type=text],
.form-select input[type=text],
.form-birthdate input[type=text],
.form-radio input[type=text],
.form-checkbox input[type=text],
.form-text input[type=email],
.form-textarea input[type=email],
.form-dropdown input[type=email],
.form-autocomplete input[type=email],
.form-accordeon input[type=email],
.form-select input[type=email],
.form-birthdate input[type=email],
.form-radio input[type=email],
.form-checkbox input[type=email],
.form-text textarea,
.form-textarea textarea,
.form-dropdown textarea,
.form-autocomplete textarea,
.form-accordeon textarea,
.form-select textarea,
.form-birthdate textarea,
.form-radio textarea,
.form-checkbox textarea, .form-text select, .form-textarea select, .form-dropdown select, .form-autocomplete select, .form-accordeon select, .form-select select, .form-birthdate select, .form-radio select, .form-checkbox select {
  padding-left: 15px !important;
  min-height: 48px;
}

.form-required .form-text .form-input .form-input-wrapper, .form-required .form-textarea .form-input .form-input-wrapper, .form-required .form-dropdown .form-input .form-input-wrapper, .form-required .form-autocomplete .form-input .form-input-wrapper, .form-required .form-accordeon .form-input .form-input-wrapper, .form-required .form-select .form-input .form-input-wrapper, .form-required .form-birthdate .form-input .form-input-wrapper, .form-required .form-radio .form-input .form-input-wrapper, .form-required .form-checkbox .form-input .form-input-wrapper, .form-text .form-required .form-input .form-input-wrapper, .form-textarea .form-required .form-input .form-input-wrapper, .form-dropdown .form-required .form-input .form-input-wrapper, .form-autocomplete .form-required .form-input .form-input-wrapper, .form-accordeon .form-required .form-input .form-input-wrapper, .form-select .form-required .form-input .form-input-wrapper, .form-birthdate .form-required .form-input .form-input-wrapper, .form-radio .form-required .form-input .form-input-wrapper, .form-checkbox .form-required .form-input .form-input-wrapper {
  position: relative;
}
.form-required .form-text .form-input .form-input-wrapper:after, .form-required .form-textarea .form-input .form-input-wrapper:after, .form-required .form-dropdown .form-input .form-input-wrapper:after, .form-required .form-autocomplete .form-input .form-input-wrapper:after, .form-required .form-accordeon .form-input .form-input-wrapper:after, .form-required .form-select .form-input .form-input-wrapper:after, .form-required .form-birthdate .form-input .form-input-wrapper:after, .form-required .form-radio .form-input .form-input-wrapper:after, .form-required .form-checkbox .form-input .form-input-wrapper:after, .form-text .form-required .form-input .form-input-wrapper:after, .form-textarea .form-required .form-input .form-input-wrapper:after, .form-dropdown .form-required .form-input .form-input-wrapper:after, .form-autocomplete .form-required .form-input .form-input-wrapper:after, .form-accordeon .form-required .form-input .form-input-wrapper:after, .form-select .form-required .form-input .form-input-wrapper:after, .form-birthdate .form-required .form-input .form-input-wrapper:after, .form-radio .form-required .form-input .form-input-wrapper:after, .form-checkbox .form-required .form-input .form-input-wrapper:after {
  font-size: 20px;
  content: "*";
  color: inherit;
  position: absolute;
  left: -2px;
  top: -7px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  line-height: 1.4em;
  padding: 0 0.5em;
}

.form-text > .form-label, .form-textarea > .form-label, .form-dropdown > .form-label, .form-autocomplete > .form-label, .form-accordeon > .form-label, .form-select > .form-label, .form-birthdate > .form-label, .form-radio > .form-label, .form-checkbox > .form-label {
  line-height: 1.2em;
  margin-bottom: 0.75em;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  color: inherit;
}
.form-error .form-text > .form-label, .form-error .form-textarea > .form-label, .form-error .form-dropdown > .form-label, .form-error .form-autocomplete > .form-label, .form-error .form-accordeon > .form-label, .form-error .form-select > .form-label, .form-error .form-birthdate > .form-label, .form-error .form-radio > .form-label, .form-error .form-checkbox > .form-label {
  color: rgb(var(--color-danger)) !important;
}

.form-error.form-text .form-input, .form-error.form-textarea .form-input, .form-error.form-dropdown .form-input, .form-error.form-autocomplete .form-input, .form-error.form-accordeon .form-input, .form-error.form-select .form-input, .form-error.form-birthdate .form-input, .form-error.form-radio .form-input, .form-error.form-checkbox .form-input {
  border-color: rgba(var(--color-danger), 1) !important;
}
.form-error.form-text .form-input label, .form-error.form-textarea .form-input label, .form-error.form-dropdown .form-input label, .form-error.form-autocomplete .form-input label, .form-error.form-accordeon .form-input label, .form-error.form-select .form-input label, .form-error.form-birthdate .form-input label, .form-error.form-radio .form-input label, .form-error.form-checkbox .form-input label {
  color: rgba(var(--color-danger), 1);
}

.form-text .form-input, .form-textarea .form-input, .form-dropdown .form-input, .form-autocomplete .form-input, .form-accordeon .form-input, .form-select .form-input, .form-birthdate .form-input, .form-radio .form-input, .form-checkbox .form-input {
  display: flex;
  color: rgba(var(--color-white));
  position: relative;
}
.form-text .form-input .form-input-prefix, .form-textarea .form-input .form-input-prefix, .form-dropdown .form-input .form-input-prefix, .form-autocomplete .form-input .form-input-prefix, .form-accordeon .form-input .form-input-prefix, .form-select .form-input .form-input-prefix, .form-birthdate .form-input .form-input-prefix, .form-radio .form-input .form-input-prefix, .form-checkbox .form-input .form-input-prefix {
  display: flex;
  align-items: center;
}
.form-text .form-input .form-input-prefix i.icon, .form-textarea .form-input .form-input-prefix i.icon, .form-dropdown .form-input .form-input-prefix i.icon, .form-autocomplete .form-input .form-input-prefix i.icon, .form-accordeon .form-input .form-input-prefix i.icon, .form-select .form-input .form-input-prefix i.icon, .form-birthdate .form-input .form-input-prefix i.icon, .form-radio .form-input .form-input-prefix i.icon, .form-checkbox .form-input .form-input-prefix i.icon {
  line-height: 0px;
}
.form-text .form-input .form-input-suffix, .form-textarea .form-input .form-input-suffix, .form-dropdown .form-input .form-input-suffix, .form-autocomplete .form-input .form-input-suffix, .form-accordeon .form-input .form-input-suffix, .form-select .form-input .form-input-suffix, .form-birthdate .form-input .form-input-suffix, .form-radio .form-input .form-input-suffix, .form-checkbox .form-input .form-input-suffix {
  display: flex;
  align-items: center;
  padding-left: 0.5em;
}
.form-text .form-input .form-input-suffix i.icon, .form-textarea .form-input .form-input-suffix i.icon, .form-dropdown .form-input .form-input-suffix i.icon, .form-autocomplete .form-input .form-input-suffix i.icon, .form-accordeon .form-input .form-input-suffix i.icon, .form-select .form-input .form-input-suffix i.icon, .form-birthdate .form-input .form-input-suffix i.icon, .form-radio .form-input .form-input-suffix i.icon, .form-checkbox .form-input .form-input-suffix i.icon {
  line-height: 0px;
}
.form-text .form-input .form-input-wrapper, .form-textarea .form-input .form-input-wrapper, .form-dropdown .form-input .form-input-wrapper, .form-autocomplete .form-input .form-input-wrapper, .form-accordeon .form-input .form-input-wrapper, .form-select .form-input .form-input-wrapper, .form-birthdate .form-input .form-input-wrapper, .form-radio .form-input .form-input-wrapper, .form-checkbox .form-input .form-input-wrapper {
  flex: 1;
  position: relative;
  white-space: nowrap;
}
.form-text, .form-textarea, .form-dropdown, .form-autocomplete, .form-accordeon, .form-select, .form-birthdate, .form-radio, .form-checkbox {
  position: relative;
  line-height: 48px;
}
@media only screen and (max-width: 768px) {
  .form-text, .form-textarea, .form-dropdown, .form-autocomplete, .form-accordeon, .form-select, .form-birthdate, .form-radio, .form-checkbox {
    width: 100%;
  }
}
.form-text .form-hint, .form-textarea .form-hint, .form-dropdown .form-hint, .form-autocomplete .form-hint, .form-accordeon .form-hint, .form-select .form-hint, .form-birthdate .form-hint, .form-radio .form-hint, .form-checkbox .form-hint {
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.8em;
  line-height: 2em;
}
.form-fields .form-text, .form-fields .form-textarea, .form-fields .form-dropdown, .form-fields .form-autocomplete, .form-fields .form-accordeon, .form-fields .form-select, .form-fields .form-birthdate, .form-fields .form-radio, .form-fields .form-checkbox {
  margin-bottom: 0 !important;
}
.form-no-label.form-text .form-label, .form-no-label.form-textarea .form-label, .form-no-label.form-dropdown .form-label, .form-no-label.form-autocomplete .form-label, .form-no-label.form-accordeon .form-label, .form-no-label.form-select .form-label, .form-no-label.form-birthdate .form-label, .form-no-label.form-radio .form-label, .form-no-label.form-checkbox .form-label {
  display: none;
}
.form-inline.form-text, .form-inline.form-textarea, .form-inline.form-dropdown, .form-inline.form-autocomplete, .form-inline.form-accordeon, .form-inline.form-select, .form-inline.form-birthdate, .form-inline.form-radio, .form-inline.form-checkbox {
  display: flex;
}
.form-inline.form-text .form-input, .form-inline.form-textarea .form-input, .form-inline.form-dropdown .form-input, .form-inline.form-autocomplete .form-input, .form-inline.form-accordeon .form-input, .form-inline.form-select .form-input, .form-inline.form-birthdate .form-input, .form-inline.form-radio .form-input, .form-inline.form-checkbox .form-input {
  flex: 1;
  border: 1px solid #111;
}
.form-inline.form-text .form-input .form-input-item, .form-inline.form-textarea .form-input .form-input-item, .form-inline.form-dropdown .form-input .form-input-item, .form-inline.form-autocomplete .form-input .form-input-item, .form-inline.form-accordeon .form-input .form-input-item, .form-inline.form-select .form-input .form-input-item, .form-inline.form-birthdate .form-input .form-input-item, .form-inline.form-radio .form-input .form-input-item, .form-inline.form-checkbox .form-input .form-input-item {
  padding-left: 1em;
}
.form-inline.form-text .form-label, .form-inline.form-textarea .form-label, .form-inline.form-dropdown .form-label, .form-inline.form-autocomplete .form-label, .form-inline.form-accordeon .form-label, .form-inline.form-select .form-label, .form-inline.form-birthdate .form-label, .form-inline.form-radio .form-label, .form-inline.form-checkbox .form-label {
  line-height: inherit;
  margin: 0;
  padding: 0 1em;
  font-weight: var(--fw-regular);
  border: 1px solid #111;
  border-right: none;
  background: rgb(var(--color-white));
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-inline.form-text .form-label ~ div, .form-inline.form-textarea .form-label ~ div, .form-inline.form-dropdown .form-label ~ div, .form-inline.form-autocomplete .form-label ~ div, .form-inline.form-accordeon .form-label ~ div, .form-inline.form-select .form-label ~ div, .form-inline.form-birthdate .form-label ~ div, .form-inline.form-radio .form-label ~ div, .form-inline.form-checkbox .form-label ~ div {
  border-left: 0px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.form-required.form-text .form-label:after, .form-required.form-textarea .form-label:after, .form-required.form-dropdown .form-label:after, .form-required.form-autocomplete .form-label:after, .form-required.form-accordeon .form-label:after, .form-required.form-select .form-label:after, .form-required.form-birthdate .form-label:after, .form-required.form-radio .form-label:after, .form-required.form-checkbox .form-label:after {
  content: "*";
  display: inline-block;
  margin-left: 0.1em;
}
.form-error.form-text .form-label, .form-error.form-textarea .form-label, .form-error.form-dropdown .form-label, .form-error.form-autocomplete .form-label, .form-error.form-accordeon .form-label, .form-error.form-select .form-label, .form-error.form-birthdate .form-label, .form-error.form-radio .form-label, .form-error.form-checkbox .form-label {
  color: rgb(var(--color-danger)) !important;
}
.form-error.form-text .form-input .form-input-wrapper, .form-error.form-textarea .form-input .form-input-wrapper, .form-error.form-dropdown .form-input .form-input-wrapper, .form-error.form-autocomplete .form-input .form-input-wrapper, .form-error.form-accordeon .form-input .form-input-wrapper, .form-error.form-select .form-input .form-input-wrapper, .form-error.form-birthdate .form-input .form-input-wrapper, .form-error.form-radio .form-input .form-input-wrapper, .form-error.form-checkbox .form-input .form-input-wrapper {
  border-color: rgb(var(--color-danger)) !important;
}
.form-text .count, .form-textarea .count, .form-dropdown .count, .form-autocomplete .count, .form-accordeon .count, .form-select .count, .form-birthdate .count, .form-radio .count, .form-checkbox .count {
  position: relative;
  display: inline-block;
  color: black;
  text-align: center;
  font-weight: var(--fw-thin);
  font-size: 0.9em;
  font-style: normal;
  opacity: 0.5;
}
.form-text .count i, .form-textarea .count i, .form-dropdown .count i, .form-autocomplete .count i, .form-accordeon .count i, .form-select .count i, .form-birthdate .count i, .form-radio .count i, .form-checkbox .count i {
  font-style: normal;
  position: relative;
  z-index: 1;
}
.form-text .count:before, .form-textarea .count:before, .form-dropdown .count:before, .form-autocomplete .count:before, .form-accordeon .count:before, .form-select .count:before, .form-birthdate .count:before, .form-radio .count:before, .form-checkbox .count:before {
  top: 50%;
  left: 50%;
  position: absolute;
  z-index: -1;
  background: black;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.form-text input, .form-textarea input, .form-dropdown input, .form-autocomplete input, .form-accordeon input, .form-select input, .form-birthdate input, .form-radio input, .form-checkbox input,
.form-text textarea,
.form-textarea textarea,
.form-dropdown textarea,
.form-autocomplete textarea,
.form-accordeon textarea,
.form-select textarea,
.form-birthdate textarea,
.form-radio textarea,
.form-checkbox textarea,
.form-text select,
.form-textarea select,
.form-dropdown select,
.form-autocomplete select,
.form-accordeon select,
.form-select select,
.form-birthdate select,
.form-radio select,
.form-checkbox select {
  font-size: 1rem;
  outline: none;
  width: 100%;
  border: none;
  background: none;
  transition: all 0.3s ease-in;
  padding: 0 0.5em;
  display: block;
}
.form-text input:-webkit-autofill, .form-textarea input:-webkit-autofill, .form-dropdown input:-webkit-autofill, .form-autocomplete input:-webkit-autofill, .form-accordeon input:-webkit-autofill, .form-select input:-webkit-autofill, .form-birthdate input:-webkit-autofill, .form-radio input:-webkit-autofill, .form-checkbox input:-webkit-autofill,
.form-text textarea:-webkit-autofill,
.form-textarea textarea:-webkit-autofill,
.form-dropdown textarea:-webkit-autofill,
.form-autocomplete textarea:-webkit-autofill,
.form-accordeon textarea:-webkit-autofill,
.form-select textarea:-webkit-autofill,
.form-birthdate textarea:-webkit-autofill,
.form-radio textarea:-webkit-autofill,
.form-checkbox textarea:-webkit-autofill,
.form-text select:-webkit-autofill,
.form-textarea select:-webkit-autofill,
.form-dropdown select:-webkit-autofill,
.form-autocomplete select:-webkit-autofill,
.form-accordeon select:-webkit-autofill,
.form-select select:-webkit-autofill,
.form-birthdate select:-webkit-autofill,
.form-radio select:-webkit-autofill,
.form-checkbox select:-webkit-autofill {
  -webkit-box-shadow: none !important;
  border: none;
}
.form-text input:-webkit-autofill:hover, .form-textarea input:-webkit-autofill:hover, .form-dropdown input:-webkit-autofill:hover, .form-autocomplete input:-webkit-autofill:hover, .form-accordeon input:-webkit-autofill:hover, .form-select input:-webkit-autofill:hover, .form-birthdate input:-webkit-autofill:hover, .form-radio input:-webkit-autofill:hover, .form-checkbox input:-webkit-autofill:hover,
.form-text textarea:-webkit-autofill:hover,
.form-textarea textarea:-webkit-autofill:hover,
.form-dropdown textarea:-webkit-autofill:hover,
.form-autocomplete textarea:-webkit-autofill:hover,
.form-accordeon textarea:-webkit-autofill:hover,
.form-select textarea:-webkit-autofill:hover,
.form-birthdate textarea:-webkit-autofill:hover,
.form-radio textarea:-webkit-autofill:hover,
.form-checkbox textarea:-webkit-autofill:hover,
.form-text select:-webkit-autofill:hover,
.form-textarea select:-webkit-autofill:hover,
.form-dropdown select:-webkit-autofill:hover,
.form-autocomplete select:-webkit-autofill:hover,
.form-accordeon select:-webkit-autofill:hover,
.form-select select:-webkit-autofill:hover,
.form-birthdate select:-webkit-autofill:hover,
.form-radio select:-webkit-autofill:hover,
.form-checkbox select:-webkit-autofill:hover {
  -webkit-box-shadow: none !important;
}
.form-text input::placeholder, .form-textarea input::placeholder, .form-dropdown input::placeholder, .form-autocomplete input::placeholder, .form-accordeon input::placeholder, .form-select input::placeholder, .form-birthdate input::placeholder, .form-radio input::placeholder, .form-checkbox input::placeholder,
.form-text textarea::placeholder,
.form-textarea textarea::placeholder,
.form-dropdown textarea::placeholder,
.form-autocomplete textarea::placeholder,
.form-accordeon textarea::placeholder,
.form-select textarea::placeholder,
.form-birthdate textarea::placeholder,
.form-radio textarea::placeholder,
.form-checkbox textarea::placeholder,
.form-text select::placeholder,
.form-textarea select::placeholder,
.form-dropdown select::placeholder,
.form-autocomplete select::placeholder,
.form-accordeon select::placeholder,
.form-select select::placeholder,
.form-birthdate select::placeholder,
.form-radio select::placeholder,
.form-checkbox select::placeholder {
  opacity: 0.6;
  font-weight: var(--fw-regular) !important;
  color: rgba(var(--color-unisante-grey), 1);
}
.form-error .form-text input::placeholder, .form-error .form-textarea input::placeholder, .form-error .form-dropdown input::placeholder, .form-error .form-autocomplete input::placeholder, .form-error .form-accordeon input::placeholder, .form-error .form-select input::placeholder, .form-error .form-birthdate input::placeholder, .form-error .form-radio input::placeholder, .form-error .form-checkbox input::placeholder,
.form-error .form-text textarea::placeholder,
.form-error .form-textarea textarea::placeholder,
.form-error .form-dropdown textarea::placeholder,
.form-error .form-autocomplete textarea::placeholder,
.form-error .form-accordeon textarea::placeholder,
.form-error .form-select textarea::placeholder,
.form-error .form-birthdate textarea::placeholder,
.form-error .form-radio textarea::placeholder,
.form-error .form-checkbox textarea::placeholder,
.form-error .form-text select::placeholder,
.form-error .form-textarea select::placeholder,
.form-error .form-dropdown select::placeholder,
.form-error .form-autocomplete select::placeholder,
.form-error .form-accordeon select::placeholder,
.form-error .form-select select::placeholder,
.form-error .form-birthdate select::placeholder,
.form-error .form-radio select::placeholder,
.form-error .form-checkbox select::placeholder {
  color: rgb(var(--color-danger)) !important;
}
.form-text input:focus, .form-textarea input:focus, .form-dropdown input:focus, .form-autocomplete input:focus, .form-accordeon input:focus, .form-select input:focus, .form-birthdate input:focus, .form-radio input:focus, .form-checkbox input:focus,
.form-text textarea:focus,
.form-textarea textarea:focus,
.form-dropdown textarea:focus,
.form-autocomplete textarea:focus,
.form-accordeon textarea:focus,
.form-select textarea:focus,
.form-birthdate textarea:focus,
.form-radio textarea:focus,
.form-checkbox textarea:focus,
.form-text select:focus,
.form-textarea select:focus,
.form-dropdown select:focus,
.form-autocomplete select:focus,
.form-accordeon select:focus,
.form-select select:focus,
.form-birthdate select:focus,
.form-radio select:focus,
.form-checkbox select:focus {
  border-bottom-color: rgb(var(--color-secondary));
}
.form-text input, .form-textarea input, .form-dropdown input, .form-autocomplete input, .form-accordeon input, .form-select input, .form-birthdate input, .form-radio input, .form-checkbox input,
.form-text select,
.form-textarea select,
.form-dropdown select,
.form-autocomplete select,
.form-accordeon select,
.form-select select,
.form-birthdate select,
.form-radio select,
.form-checkbox select {
  line-height: inherit;
}
.form-text select, .form-textarea select, .form-dropdown select, .form-autocomplete select, .form-accordeon select, .form-select select, .form-birthdate select, .form-radio select, .form-checkbox select {
  -webkit-appearance: none;
  appearance: none;
}
.form-text textarea, .form-textarea textarea, .form-dropdown textarea, .form-autocomplete textarea, .form-accordeon textarea, .form-select textarea, .form-birthdate textarea, .form-radio textarea, .form-checkbox textarea {
  padding: 1em 0.5em;
}

form input[type=checkbox],
form input[type=radio],
[class*=form-] input[type=checkbox],
[class*=form-] input[type=radio] {
  opacity: 0;
  position: absolute;
  max-width: 1px;
  max-height: 1px;
}
form input[type=checkbox] ~ *,
form input[type=radio] ~ *,
[class*=form-] input[type=checkbox] ~ *,
[class*=form-] input[type=radio] ~ * {
  position: relative;
  padding-left: 2em;
}
form input[type=checkbox] ~ *:before,
form input[type=radio] ~ *:before,
[class*=form-] input[type=checkbox] ~ *:before,
[class*=form-] input[type=radio] ~ *:before {
  content: "";
  background: #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1) inset;
  border: 1px solid #000;
  font-size: inherit;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
form input[type=checkbox]:checked ~ *:after,
form input[type=radio]:checked ~ *:after,
[class*=form-] input[type=checkbox]:checked ~ *:after,
[class*=form-] input[type=radio]:checked ~ *:after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  position: absolute;
  margin-top: 0.2em;
  left: 0.2em;
  border: 1px solid transparent;
  background: #000;
}

form input[type=checkbox] ~ *:before,
[class*=form-] input[type=checkbox] ~ *:before {
  border-radius: 4px;
}
form input[type=checkbox]:checked ~ *:before,
[class*=form-] input[type=checkbox]:checked ~ *:before {
  color: #fff;
  background: #000;
  line-height: 1em;
  text-align: center;
  border: 1px solid #fff;
}
form input[type=checkbox]:checked ~ *:after,
[class*=form-] input[type=checkbox]:checked ~ *:after {
  display: none;
}

.form {
  outline: none;
  background: rgba(var(--color-black), 0.075);
  border-radius: 10px;
  padding: var(--gutter);
}

.form-fields {
  display: flex;
  gap: calc(var(--gutter) / 2) 0;
  margin-bottom: calc(var(--gutter) / 2);
  flex-wrap: wrap;
  justify-content: space-between;
}

html {
  height: 100vh;
  width: 100vw;
}

body {
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--font-content);
  font-variation-settings: "wght" 300;
  color: rgba(var(--color-main));
}
body:has(#navigation-open:checked) {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  font-variation-settings: "wght" 500 !important;
  font-size: clamp(16px, 10vw, 96px);
  line-height: 1.2em;
  margin: 0;
  padding: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  padding: 0;
  margin-bottom: 0.5em;
  line-height: 1.3em;
  text-wrap: balance;
}
p > a {
  color: rgba(var(--color-link));
  text-decoration: none;
}
p > a:hover {
  text-decoration: underline;
}
p.email a, p.phone a {
  color: inherit;
  text-decoration: none;
}

#page-wrapper {
  position: relative;
  max-width: 100vw;
}

#page-footer > .wrapper {
  padding: var(--gutter) 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media only screen and (max-width: 768px) {
  #page-footer > .wrapper {
    gap: 1em;
  }
}
#page-footer > .wrapper:first-child {
  border-bottom: 1px solid rgba(var(--color-main), 0.3);
}
#page-footer > .wrapper:first-child > * {
  flex: 1;
}
@media only screen and (max-width: 768px) {
  #page-footer > .wrapper:first-child > * {
    flex: inherit;
    width: 100%;
  }
}
#page-footer .footer-navigation {
  text-align: right;
}
@media only screen and (max-width: 992px) {
  #page-footer .footer-navigation {
    text-align: center;
  }
}
#page-footer .footer-navigation ul {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1em;
}
#page-footer .footer-navigation ul li a {
  color: rgba(var(--color-main));
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
#page-footer .logo img {
  height: 60px;
  width: auto;
  display: block;
}
#page-footer .copyright {
  font-size: 13px;
}

.sticky {
  position: sticky;
  top: 0px;
}

.notice {
  background: #0a001f;
  color: #fff;
  padding: 1em;
  z-index: 1000;
}

.navigation {
  font-size: 22px;
  font-variation-settings: "wght" 400;
}
.navigation .navigation-secondary,
.navigation .navigation-custom {
  display: none;
}
.navigation .navigation-main {
  min-height: 50px;
  justify-content: end;
}
.navigation .navigation-main .navigation-menus {
  gap: 2em;
}
.navigation .navigation-main .navigation-menus li:before {
  content: "";
  width: 0px;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: #000;
  transition: all 200ms ease-in-out;
}
.navigation .navigation-main .navigation-menus li:not(.as-button):hover:before {
  width: 100%;
}

section {
  position: relative;
}
section > .wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gutter-w);
  padding: var(--gutter-h) 0;
}
section > .wrapper .column-50 {
  flex: 1;
}
@media only screen and (max-width: 992px) {
  section > .wrapper .column-50 {
    width: 100%;
    flex: inherit;
  }
}
section > .wrapper .column-33 {
  flex: 1;
}
@media only screen and (max-width: 992px) {
  section > .wrapper .column-33 {
    width: 100%;
    flex: inherit;
  }
}
section > .wrapper .vertical-center {
  align-self: center;
}
section > .wrapper .center {
  text-align: center;
}
section > .wrapper > p {
  font-size: 1.25em;
  margin-bottom: 1em;
}
section > .wrapper figure {
  padding: 0;
  margin: 0;
}
section > .wrapper figure.mozaic {
  width: 60%;
  border: 10px solid #fff;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
}
section > .wrapper figure.mozaic ~ .mozaic {
  margin-left: auto;
  transform: translateY(-15%);
}
section > .wrapper figure img {
  width: 100%;
  height: auto;
  display: block;
}
section > header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -10;
  background: #000;
}
.bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.3;
}

.homepage-hero {
  position: relative;
}
.homepage-hero .wrapper {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--gutter-h) 0;
}
@media only screen and (max-width: 992px) {
  .homepage-hero .wrapper {
    min-height: 30vh;
  }
}
.homepage-hero .wrapper h1 {
  color: #fff;
  font-size: clamp(22px, 5vw, 46px);
}

.homepage-block .wrapper p {
  font-size: 1.4em;
  font-variation-settings: "wght" 300 !important;
}
.homepage-block .wrapper figure {
  margin: auto;
  padding: 0;
  width: 60px;
  margin-bottom: 2em;
}
.homepage-block .wrapper figure svg {
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
}
.homepage-block .wrapper figure svg path {
  fill: rgba(var(--color-main));
}
.homepage-block .wrapper h3 {
  font-size: 2em;
  margin-bottom: 0.5em;
  font-variation-settings: "wght" 300 !important;
}
.homepage-block .wrapper h3 ~ p {
  font-size: 1.1em;
}
.homepage-block:has(.bg) {
  text-align: center;
  color: #fff;
}
.homepage-block:has(.bg) .wrapper {
  min-height: 70vh;
  align-items: center;
}
.homepage-block:has(.bg) .wrapper p {
  font-variation-settings: "wght" 500 !important;
}
.homepage-block header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.homepage-block header h2 {
  font-size: 2rem;
  color: #fff;
  text-transform: uppercase;
}
.homepage-block header:before {
  content: "";
  background: rgba(var(--color-main));
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
}

.contact {
  background: rgba(var(--color-main));
  color: #fff;
}
.contact .wrapper {
  flex-direction: column;
}
.contact .wrapper > p {
  text-align: center;
}
.contact .rgpd-form-consent-checkbox .form-input-wrapper label span {
  color: rgba(var(--color-white)) !important;
}
.contact .form-buttons button {
  background: rgba(var(--color-black));
  border-color: rgba(var(--color-black));
  width: 100%;
}
.contact .form-buttons button:hover {
  background: rgba(var(--color-white));
  border-color: rgba(var(--color-white));
  color: rgba(var(--color-main));
}
.contact [rel=firstname],
.contact [rel=lastname] {
  width: calc(50% - var(--gutter) / 2);
}
.contact [rel=email] {
  width: 100%;
}
.contact form {
  max-width: 600px;
  margin: auto;
}

.career {
  background: rgba(var(--color-main));
  color: #fff;
}

.team {
  background: rgba(var(--color-main));
  color: #fff;
}
.team ul {
  list-style: none;
  padding: 0;
  margin: 0;
  --min: 250px;
  --max: 1fr;
  --gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--min, 350px), var(--max, 1fr)));
  gap: var(--gap, 1rem);
  max-width: 100%;
}
@media only screen and (max-width: 768px) {
  .team ul {
    grid-template-columns: repeat(1, minmax(var(--min, 350px), var(--max, 1fr)));
  }
}
.team .team-person figure {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 50%;
  width: 80%;
  margin: auto;
  margin-bottom: 2em;
}
.team .team-person figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team .team-person h2 {
  font-size: 32px;
  font-variation-settings: "wght" 600 !important;
  text-align: center;
}
.team .team-person h3 {
  font-size: 22px;
  font-variation-settings: "wght" 500 !important;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 1em;
}
.team .team-person p {
  font-size: 14px;
  line-height: 1.4em;
}
.team .team-person p strong {
  font-variation-settings: "wght" 600 !important;
}

time {
  display: block;
  text-transform: uppercase;
  color: rgba(var(--color-main), 0.5);
  font-variation-settings: "wght" 600;
  font-size: 0.75em;
  margin-bottom: 0.5rem;
}

.blog-main-listing {
  list-style: none;
  margin: 0;
  padding: 0;
  --min: 250px;
  --max: 1fr;
  --gap: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--min, 350px), var(--max, 1fr)));
  gap: var(--gap, 1rem);
  max-width: 100%;
}
@media only screen and (max-width: 768px) {
  .blog-main-listing {
    grid-template-columns: repeat(1, minmax(var(--min, 350px), var(--max, 1fr)));
  }
}

.blog-article {
  background: rgba(var(--color-white));
  gap: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.blog-article figure {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.blog-article figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-article .content {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: rgba(var(--color-main));
}
.blog-article .content main {
  flex: 1;
}
.blog-article .content footer {
  display: flex;
  justify-content: end;
}
.blog-article h2 {
  font-size: 24px;
}
.blog-article h2 a {
  color: inherit;
  text-decoration: none;
}
.blog-article p {
  font-size: 14px;
}

.blog-item .blog-item-content {
  max-width: 1000px;
  margin: auto;
  padding: var(--gutter-h) 0;
}

.blog-main {
  background: rgba(var(--color-main));
}
.blog-main .blog-main-content {
  display: flex;
  flex-wrap: wrap;
}

.blog-related {
  background: rgba(var(--color-main));
  color: rgba(var(--color-white));
}
.blog-related > header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter-h) 0 calc(var(--gutter-h) / 2) 0;
}
.blog-related > header h2 {
  font-size: 2rem;
  color: #fff;
}
.blog-related > .wrapper {
  padding-top: 0;
}

blockquote {
  position: relative;
  text-align: center;
}
blockquote p {
  font-size: 2em;
}

.stats {
  display: flex;
  align-items: center;
  gap: 2em;
  margin-bottom: 2em;
}
.stats figure {
  margin: 0;
  padding: 0;
}
.stats p {
  flex: 1;
  margin: 0 !important;
}
.stats p strong {
  display: block;
  font-size: 1.2em;
  font-variation-settings: "wght" 500 !important;
  margin-bottom: 0.25em;
}

.content-wysiwyg {
  text-wrap: balance;
  font-size: clamp(14px, 8vw, 18px);
  max-width: 1000px;
  margin: auto;
}
.content-wysiwyg h1, .content-wysiwyg h2, .content-wysiwyg h3 {
  font-family: var(--font-title);
  text-wrap: balance;
  line-height: 1em;
  font-weight: 800;
  margin-bottom: 0.5em;
  margin-top: 1.5rem;
}
.content-wysiwyg h1:first-child, .content-wysiwyg h2:first-child, .content-wysiwyg h3:first-child {
  margin-top: 0;
}
.content-wysiwyg h1 span, .content-wysiwyg h2 span, .content-wysiwyg h3 span {
  font-weight: var(--fw-light);
  display: block;
  font-size: 0.8em;
  color: rgba(var(--page-theme-color-text));
  margin-top: -0.1em;
}
.content-wysiwyg h1 {
  font-size: clamp(28px, 2vw, 42px);
}
.content-wysiwyg h2 {
  font-size: clamp(20px, 2vw, 36px);
}
.content-wysiwyg h3 {
  font-size: clamp(18px, 2vw, 26px);
}
.content-wysiwyg h4 {
  font-size: clamp(16px, 2vw, 20px);
}
.content-wysiwyg > h1:first-child,
.content-wysiwyg > h2:first-child,
.content-wysiwyg > h3:first-child {
  text-wrap: balance;
  line-height: 1em;
  font-size: clamp(36px, 5vw, 80px);
  font-weight: 800;
}
.content-wysiwyg p {
  line-height: 1.4em;
  margin-bottom: 1em;
  text-wrap: pretty;
}
.content-wysiwyg p:has(.float-left)::after, .content-wysiwyg p:has(.float-right)::after {
  content: "";
  display: table;
  clear: both;
}
.content-wysiwyg p:last-child, .content-wysiwyg p:last-of-type {
  margin-bottom: 0;
}
.content-wysiwyg p a {
  color: rgba(var(--color-link));
}
.content-wysiwyg p a:hover {
  text-decoration: underline;
}
.content-wysiwyg ul {
  list-style: square;
  margin-left: 2em;
  margin-bottom: 1em;
}
.content-wysiwyg ul li {
  margin-bottom: 0.25em;
}
.content-wysiwyg strong {
  font-weight: var(--fw-bold);
}
.content-wysiwyg img.auto {
  max-width: 100%;
  height: auto;
}
.content-wysiwyg img.img-full-width {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.content-wysiwyg img.float-left {
  float: left;
  margin-right: 2em;
}

.form-success .wrapper,
.form-error .wrapper {
  display: flex;
  flex-direction: row;
}
.form-success .wrapper .icon,
.form-error .wrapper .icon {
  background: rgba(var(--color-white), 0.1);
  border-radius: 50%;
  margin-right: 2em;
}

/*
 * FORMS
 */
.form-text .form-input .form-input-wrapper {
  display: flex;
  width: 100%;
}

.form-textarea {
  width: 100%;
}
.form-textarea textarea {
  min-height: 180px;
  resize: vertical;
}

.form-dropdown {
  cursor: pointer;
}
.form-dropdown .form-input {
  position: relative;
}
.form-dropdown .form-input:hover {
  background: rgba(0, 0, 0, 0.05);
}
.form-dropdown .form-input-wrapper {
  position: relative;
  padding-right: calc(20px + 1.5rem);
  font-weight: var(--fw-regular);
  line-height: inherit;
}
.form-dropdown .form-input-wrapper svg {
  width: 20px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
}
.form-dropdown .form-input-selected-count i {
  font-style: normal;
  display: inline-block;
  border-radius: var(--border-radius);
  padding: 0 0.5em;
  background: rgba(var(--color-black), 1);
  color: rgba(var(--color-white), 1);
  line-height: 1.8em;
  font-size: 0.9em;
}
.form-dropdown .form-modal {
  visibility: hidden;
  opacity: 0;
  transition: opacity 259ms ease;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  color: #000;
}
.form-dropdown .form-modal .form-modal-footer {
  width: 100%;
  display: flex;
  gap: 0.25em;
  padding: 0.25em;
}
.form-dropdown .form-modal .form-modal-footer button {
  width: 100%;
}
.form-dropdown .form-modal .form-modal-body {
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0.5em;
  width: 100%;
}
.form-dropdown .form-modal .form-modal-body label {
  display: block;
  position: relative;
  white-space: nowrap;
  padding: 0.25em;
  opacity: 1;
}
.form-dropdown .form-modal .form-modal-body label[disabled] {
  opacity: 0.3;
  pointer-events: none;
  display: none;
}
.form-dropdown .form-modal .form-modal-body label:hover {
  background: rgba(0, 0, 0, 0.05);
}
.form-dropdown .form-modal .form-modal-body label span {
  padding-left: calc(0.25em + 30px);
  position: relative;
  display: block;
}
.form-dropdown .form-modal .form-modal-body label input[type=checkbox] ~ *:before,
.form-dropdown .form-modal .form-modal-body label input[type=checkbox] ~ *:after {
  margin-top: 0.15em;
}
.form-dropdown.open .form-modal {
  visibility: visible;
  opacity: 1;
}

.form-autocomplete .form-input {
  display: flex;
  align-items: center;
}
.form-autocomplete .form-input-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
}
.form-autocomplete .form-input-wrapper {
  padding-bottom: 1px;
}
.form-autocomplete .form-input-wrapper .multiselect__tags {
  border: none;
  padding: 0;
  border-radius: 0px;
  background: none;
}
.form-autocomplete .form-input-wrapper .multiselect__tags > input {
  margin-bottom: 0;
  padding-left: 0.5em;
}
.form-autocomplete .form-input-wrapper .multiselect__placeholder {
  margin-bottom: 0;
  padding-top: 0;
  padding-left: 0.5em;
}
.form-autocomplete .form-input-wrapper .multiselect__single {
  min-height: 48px;
  margin: 0;
  padding: 0;
  display: inline-flex;
}
.form-autocomplete .form-input-wrapper li:has(.hide-parent) {
  display: none !important;
}
.form-autocomplete .form-input-wrapper .autocomplete-option {
  display: flex;
  align-items: center;
  padding: 0 0.5em;
}
.form-autocomplete .form-input-wrapper .autocomplete-option figure {
  margin-right: 0.5em;
}

.form-accordeon {
  cursor: pointer;
  flex-direction: column;
  width: 100%;
}
.form-accordeon .form-input {
  position: relative;
  flex-direction: column;
  border: 0;
}
.form-accordeon .form-input-wrapper {
  position: relative;
  font-weight: var(--fw-regular);
  line-height: inherit;
}
.form-accordeon .form-input-wrapper:before {
  content: "+";
  font-size: 14px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  line-height: 0px;
}
.form-accordeon .form-input-selected-count i {
  font-style: normal;
  display: inline-block;
  border-radius: var(--border-radius);
  padding: 0 0.5em;
  background: rgba(var(--color-black), 1);
  color: rgba(var(--color-white), 1);
  line-height: 1.8em;
  font-size: 0.9em;
}
.form-accordeon.form-scrollable .form-modal .form-modal-body {
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.form-accordeon .form-modal {
  display: none;
}
.form-accordeon .form-modal .form-modal-footer {
  display: flex;
  gap: 0.25em;
  padding: 0.25em;
}
.form-accordeon .form-modal .form-modal-footer button {
  width: 100%;
}
.form-accordeon .form-modal .form-modal-body {
  padding: 0 0;
  width: 100%;
}
.form-accordeon .form-modal .form-modal-body label {
  display: block;
  position: relative;
  white-space: nowrap;
  opacity: 0.3;
  padding: 0.25em;
  opacity: 1;
}
.form-accordeon .form-modal .form-modal-body label input {
  width: 1px;
  height: 1px;
}
.form-accordeon .form-modal .form-modal-body label[disabled] {
  opacity: 0.3;
  pointer-events: none;
  display: none;
}
.form-accordeon .form-modal .form-modal-body label:hover {
  background: rgba(0, 0, 0, 0.05);
}
.form-accordeon .form-modal .form-modal-body label span {
  position: relative;
  display: block;
  padding-left: calc(0.25em + 30px);
  line-height: 2em;
}
.form-accordeon .form-modal .form-modal-body label input[type=checkbox] ~ *:before,
.form-accordeon .form-modal .form-modal-body label input[type=checkbox] ~ *:after {
  margin-top: 0.15em;
}
.form-accordeon.open .form-input-wrapper:before {
  content: "-";
}
.form-accordeon.open .form-modal {
  display: block;
}

.form-select {
  width: 100%;
}
.form-select .form-input-wrapper select {
  padding-right: calc(1.5em + 14px);
  color: inherit;
}
.form-select .form-input-wrapper svg {
  width: 20px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
}

.form-birthdate .form-input {
  background: none !important;
}
.form-birthdate .form-input-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: none !important;
  background: none !important;
}
.form-birthdate .form-input-wrapper label {
  position: relative;
  width: 33.33%;
}
.form-birthdate .form-input-wrapper label:nth-child(2) {
  width: 50%;
}
.form-birthdate .form-input-wrapper label:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  height: 50%;
  width: 1px;
  background: rgba(var(--color-black), 0.3);
  transform: translateY(-50%);
}
.form-birthdate .form-input-wrapper label:last-of-type:after {
  display: none;
}
.form-birthdate .form-input-wrapper label select {
  padding-right: 30px;
}
.form-birthdate .form-input-wrapper label:before {
  font-size: 14px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) translateX(50%);
}

.form-radio .form-input {
  border: 0px;
  background: none;
  box-shadow: none !important;
}
.form-radio .form-input-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border: 0px;
  background: none;
  box-shadow: none !important;
}
.form-radio .form-input-wrapper label {
  margin-right: 1.5em;
  display: flex;
  white-space: normal;
}
.form-radio .form-input-wrapper label input {
  opacity: 0;
  position: absolute;
}
.form-radio .form-input-wrapper input ~ span {
  position: relative;
  font-weight: var(--fw-regular);
  line-height: 1.5em;
}
.form-radio .form-input-wrapper [type=radio]:checked ~ span {
  font-weight: var(--fw-extra-bold) !important;
}

.form-checkbox .form-input {
  border: 0px;
  background: none;
  box-shadow: none !important;
}
.form-checkbox .form-input-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border: 0px;
  background: none;
  box-shadow: none !important;
}
.form-checkbox .form-input-wrapper label {
  margin-right: 1.5em;
  margin-bottom: 0.5em;
  line-height: inherit;
  display: flex;
  white-space: normal;
}
.form-checkbox .form-input-wrapper label:last-of-type {
  margin-bottom: 0;
}
.form-checkbox .form-input-wrapper label input {
  opacity: 0;
  position: absolute;
}
.form-checkbox .form-input-wrapper input ~ span {
  position: relative;
  font-weight: var(--fw-regular);
  line-height: 1.5em;
}
.form-checkbox .form-input-wrapper [type=radio]:checked ~ span {
  font-weight: var(--fw-extra-bold) !important;
}

.form-notice {
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(var(--color-warning), 0.1);
}
.form-notice > .wrapper {
  display: flex;
}
.form-notice figure {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  margin-right: 1em;
}
.form-notice figure svg {
  width: 60%;
  height: 60%;
}
.form-notice.form-error {
  background: rgba(var(--color-danger), 0.1);
}
.form-notice.form-success {
  background: rgba(var(--color-success), 0.1);
}
.form-notice.form-success figure {
  background: rgba(var(--color-success), 1);
  color: rgba(var(--color-white));
}
.form-notice p {
  margin-bottom: 0;
}
.form-notice p > strong {
  display: block;
  font-size: 2em;
  margin-bottom: 0.25em;
  line-height: 1.2em;
  font-weight: var(--fw-extra-bold);
}

.modular-hero header, .modular-features header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  z-index: 10;
}
.modular-hero header h2, .modular-features header h2 {
  font-size: 2rem;
  color: #fff;
  text-transform: uppercase;
}
.modular-hero header:before, .modular-features header:before {
  content: "";
  background: rgba(var(--color-main));
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
}

.modular-features .wrapper .auto {
  flex: 1;
}
@media only screen and (max-width: 992px) {
  .modular-features .wrapper .auto {
    flex: inherit;
  }
}
.modular-features .wrapper .flex-2 {
  flex: 2;
}
.modular-features .wrapper .flex-3 {
  flex: 3;
}
.modular-features .wrapper p {
  font-size: 1.4em;
  font-variation-settings: "wght" 300 !important;
}
.modular-features .wrapper figure {
  margin: auto;
  padding: 0;
  width: 60px;
  margin-bottom: 2em;
}
.modular-features .wrapper figure svg {
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
}
.modular-features .wrapper h3 {
  font-size: 2em;
  margin-bottom: 0.5em;
  font-variation-settings: "wght" 300 !important;
}
.modular-features .wrapper h3 ~ p {
  font-size: 1.1em;
}
.modular-hero .wrapper p {
  font-size: 1.4em;
  font-variation-settings: "wght" 300 !important;
}
.modular-hero .wrapper h3 {
  font-size: 2em;
  margin-bottom: 0.5em;
  font-variation-settings: "wght" 300 !important;
}
.modular-hero .wrapper h3 ~ p {
  font-size: 1.1em;
}
.modular-hero:has(.bg) {
  text-align: center;
  color: #fff;
}
.modular-hero:has(.bg) .wrapper {
  min-height: 70vh;
  align-items: center;
}
.modular-hero:has(.bg) .wrapper p {
  font-variation-settings: "wght" 500 !important;
}