body[data-node-id='sn_2024']{
  position: relative;
  background-color: $solaire-black;
  .sn-content{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    // min-height: 100svh;
    .region-content{
      position: relative;
      padding: 10rem 0;
      // tabs
      #block-tabs{
        max-width: 544px;
        nav{
          margin: 0;
          width: 100%;
          &::before{
            content: '* Required fields';
            margin-bottom: .5rem;
            display: block;
            color: #fff;
            font-size: .8rem;
            font-weight: 700;
          }
          .tabs.primary{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            align-items: end;
            li{
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 1rem;
              height: 2.5rem;
              background-color: $solaire-gray2;
              a{
                display: block;
                font-size: .8rem;
                font-weight: 400;
                text-transform: none;
                text-align: center;
                color: #fff;
              }
              &::after{
                top:initial;
                height: 5px;
                background-color: #584E49;
              }
              &:nth-child(odd){
                background-color: #282727;
              }
              &.is-active{
                background-color: #B55625;
                &::after{
                  top:initial;
                  bottom: 0;
                  background-color: #DF6A2E;
                }
              }
            }
          }
        }
      }
      
      // forms
      #user-login-form,
      #user-register-form,
      #user-pass{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        #edit-user-picture-wrapper{
          width: 100%;
        }
        .js-form-item,p{
          margin: 0;
          padding: 1rem 2rem;
          width: 100%;
          height: auto;
          max-width: 30rem;
          display: flex;
          flex-direction: column;
          background-color: transparent;
          // backdrop-filter: blur(10px);
          label{
            margin: 0 0 .5rem;
            font-size: .8rem;
            font-family: $font-fig;
            font-weight: 400;
            text-transform: none;
            color: #FFF;
            &.js-form-required{
              &::after{
                content: '*';
                color: red;
              }
            }
          }
          input[type=text],
          input[type=email],
          input[type=password],
          input[type=file]{
            padding: .5rem 1rem;
            width: calc(100% - 2rem);
            border: 1px solid #FFF;
            outline: none;
            border-radius: 0;
            font-size: 1rem;
            font-family: $font-fig;
            background-color: $solaire-black;
            color: #FFF;
          }

          input[type=checkbox]{
            display: none;
          }


          label[for=edit-field-privacy-policy-value]{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
            &::before{
              content: '';
              display: block;
              left: 0;
              margin-right: .5rem;
              width: .8rem;
              height: .8rem;
              border: solid 2px var(--primary);
              border-radius: 5px;
            }
          }
          #edit-field-privacy-policy-value:checked + label[for=edit-field-privacy-policy-value]{
            &::before{
              background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="55" height="46" viewBox="0 0 55 46" fill="none"><path d="M5 26L17 38L50 5" stroke="%23DF6A2E" stroke-width="10" stroke-linecap="round"/></svg>');
              background-repeat: no-repeat;
              background-size: 77%;
              background-position: center;
            }
          }

          .description,.description a{
            margin: .5rem 0 0;
            font-size: .75rem;
            font-family: $font-fig;
            font-weight: 400;
            color: #868686;
          }

          .description a{
            text-decoration: underline;
          }

          .js-form-item-pass-pass1,
          .js-form-item-pass-pass2{
            padding: 0 0 1rem;
            .password-strength{
              .password-strength__meter{
                height: .25rem;
                background-color: #232323;
              }
              .password-strength__meter .is-weak{
                background-color: #d44e00;
              }
              .password-strength__meter .is-fair{
                background-color: #ff670f;
              }  
              .password-strength__meter .is-good{
                background-color: #ff9c3f;
              }  
              .password-strength__meter .is-strong{
                background-color: #ff9c3f;
              } 

              .password-strength__meter:has(.is-weak)+.password-strength__title .password-strength__text{
                color: #d44e00;
              }
              .password-strength__meter:has(.is-fair)+.password-strength__title .password-strength__text{
                color: #ff670f;
              }  
              .password-strength__meter:has(.is-good)+.password-strength__title .password-strength__text{
                color: #ff9c3f;
              }  
              .password-strength__meter:has(.is-strong)+.password-strength__title .password-strength__text{
                color: #ff9c3f;
              } 
            }
            .password-strength__title,
            .password-confirm-message{
              display: inline-block;
              margin-top: .5rem;
              color:#fff;
              font-size: .8rem;
              font-weight: 700;
              span{
                text-transform: uppercase;
                &.error{
                  color: #d44e00;
                }
                &.ok{
                  color: #ff9c3f;
                }
              }
            }
          }
          .password-suggestions{
            font-size: .8rem;
            color:#fff;
            ul{
              margin: .5rem 0 0;
              padding: 0;
              li{
                margin-left:2rem;
                margin-bottom: .25rem;
              }
            }
          }
        }

        p:nth-of-type(1){
          border-top: none;
        }
        
        #edit-actions,
        #edit-contact{
          width: 100%;
          max-width: 30rem;
          padding: 1rem 2rem;
          // background-color: #333;
          #edit-submit{
            width: 100%;
            padding: .8rem 2rem;
            font-size: .8rem;
            font-family: $font-fig;
            font-weight: 400;
            text-transform: uppercase;
            text-align: center;
            color: #fff;
            background-color: var(--primary);
            border: none;
            outline: none;
            cursor: pointer;

            transition: .3s all var(--ease);
            &:hover{
              color: var(--primary);
              background-color: #fff;
            }
          }
        }
        #edit-contact{
          padding: 0;
          background-color: transparent;
          summary{
            padding: 1rem 2rem;
            width: 100%;
            font-size: .8rem;
            font-family: $font-fig;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--primary);
            background-color: #333;
            border-top: solid 2px var(--primary);
            cursor: pointer;
          }
          .details-wrapper{
            .js-form-item{
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              flex-wrap: wrap;
              margin-left: 0;
              background-color: var(--primary);
              border: none;
              label{
                margin: .5rem;
              }
              .description{
                width: 100%;
              }
            }
          }
        }
      }
    }
    // &::after{
    //   content: '';
    //   position: sticky;
    //   top:10rem;
    //   display: block;
    //   margin-left: 4rem;
    //   margin-bottom: 4rem;
    //   padding: 2rem 0 2rem 3rem;
    //   width: 25rem;
    //   height: 25rem;
    //   border-left: solid 1px #484848;
    //   background-image: none;
    //   background-size: 100%;
    //   background-repeat: no-repeat;
    //   background-position: 2.5rem center;
    // }
    .captcha {
      max-width: 28.5rem;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px;
    }
    .captcha__title {
      display:none;
    }
    .captcha__image-wrapper {
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .reload-captcha-wrapper {
      a {
        font-size: 0;
        filter: invert(1);
      }
    }
    .form-item-captcha-response {
      max-width: 14rem !important;
      padding: 0.5rem 2rem 0.5rem 2rem !important;
    }
    .captcha__description {
      color: #FFF;
      font-size: small;
    }
    .messages--error {
      margin: 10px 0;
      background-color: #f86f6a;
      padding: 20px;
      color: white;
      font-size: 1rem;
      width: 503px;
      a {
        text-decoration: underline;
      }
    }
  }
}