/* /**
 * @file
 * Visual styles for form components.
 */

 .form, form, [role="form"] {
    margin: auto;
    padding: 1.8em;
 }

 .node-landing-page-edit-form {
    max-width: none;
    padding: 0 2em;
 }


.control {
  margin-bottom: 1em;
}

fieldset {
    margin: 1.5rem 0 1rem !important;
}

.password-suggestions {
  font-size: 12px;
  margin-bottom: 5px;;
}

form#webform-submission-register-flow-add-form .control .subtitle {
  margin-top: -20px;
  margin-bottom: 40px;
}

.form-required {
  &:after {
    content: "*";
    color: var(--bulma-danger-60);
  }
}

.form-checkboxes {
    display: flex;
    gap: 0 1em;
    flex-flow: wrap;   
}

.form-type-checkbox, .form-type-radio {
  
    .control {
      display: flex;
      gap: 0.5em;
      align-items: center;

      .label, label {
        margin-bottom: 0!important;
      }
    }
}

#user-register-form,
#user-login-form, 
#user-pass, 
#user-form {
  max-width: var(--bulma-size-mobile);
}

body :is(#user-register-form,#user-login-form, #user-pass) {
    margin: 3em auto;
}


.webform-flex--container fieldset {
  margin: 0!important;
}


.progress-title {
    text-transform: uppercase;
}

.webform-progress-tracker .progress-step .progress-marker::after {
    background-color: transparent!important;
}

.progress-step.is-active .progress-marker::before, .webform-progress-tracker .progress-step.is-active:hover .progress-marker::before  {
    background-color: var(--bulma-link)!important;
}

.progress-step .progress-marker::before {
    background-color: #b6b6b6!important;
}
.progress-marker::before {
    width: 30px!important;
    height: 30px!important;
}

.progress-marker::after {
    top: 12px!important;
    right: -12px;
    height: 0px!important;
    border-bottom: 5px var(--bulma-border) dotted !important;
}

.webform-progress-tracker .progress-step.is-complete .progress-marker::before, .webform-progress-tracker .progress-step.is-complete:hover .progress-marker::before {
    background-color: var(--bulma-primary-30)!important;
}

.webform-progress-tracker .progress-step.is-complete .progress-marker::after {
    background-color: transparent;
    border-color: hsl(188deg 100% 31% / 55%) !important;
}
@media screen and (max-width: 600px) {

  .webform-progress-tracker {
    position: relative;
    
  }
  .webform-progress-tracker .progress-text {
      display: none;
  }

  .progress-step.is-active .progress-text {
      display: block;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 10px);
      font-size: 1.2rem;
      top: -80px;
      width: 100%;
  }

}

#edit-revision-log {
    min-width: 60vw;
}