@import '../../Theme_General/css/guest_pages.css';

#headerBar #brandLogo img{
    max-width:  200px;
}

#registrationWrapper h1.wrapperHeader strong{
    font-weight:    600 !important;
}

#registrationWrapper #flowSupport,
#errorWrapper #errorBox{
  background: white;
  margin: 5vh 0 10vh;
}

#registrationWrapper .slds-scope .slds-form-element__label span {
  color: var( --primary-color-light ) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
}


#registrationWrapper .slds-scope .slds-has-error .slds-form-element__help,
#registrationWrapper .slds-scope span{
  font-weight: 500 !important;
}

#registrationWrapper .slds-scope .slds-input{
  border: 0px !important;
  border-bottom: 1px solid var(--brand-black) !important;
  border-radius: 0px !important;
}

#registrationWrapper .slds-scope .slds-has-error .slds-input {
  box-shadow: var(--lwc-colorBorderError,rgb(194, 57, 52)) 0 0 0 var(--lwc-borderWidthThin,1px) inset;
}

#registrationWrapper .slds-scope .slds-form-element__help span{
    color: var(--lwc-colorBorderError,rgb(194, 57, 52)) !important;
}

#errorWrapper h1 label,
#registrationWrapper #flowSupport .flowruntimeDisplayText:first-child p b{
  font-size: var( --h3-size ) !important;
  line-height: var( --h3-line-height ) !important;
  font-weight: 500 !important;
}

#errorWrapper h1 label {
    display: block;
    margin-bottom: 1rem !important;
}

#errorWrapper form .buttons-container {
    margin-top: 1.5rem;
    text-align: right;
}

/**
 * Registration User Details
 */
#registrationWrapper #flowSupport .slds-m-bottom_x-small:nth-child(n+2) p,
#registrationWrapper #flowSupport .slds-m-bottom_x-small:nth-child(n+2) p{
  font-size: 0.8889rem !important;
  line-height: 1.444rem !important;
}

/**
 * Registration validation
 */

#registrationWrapper .slds-scope .slds-has-error .slds-form-element__help,
#registrationWrapper .slds-scope span,
#registrationWrapper #flowSupport .slds-m-bottom_x-small .slds-form-element__help p span{
  font-size: 0.8889rem !important;
  line-height: 1.444rem !important;
}

/**
 * Registration Consent
 */
.registrationWrapperConsentFlow .interviewDisplayTextRow p span{
    color: var( --primary-color-light ) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

.flowruntimeRichTextWrapper .uiOutputRichText b {
  font-size: inherit;
  color: var( --font-color );
}

/** Force identical font to standard text components */
.slds-scope, p, .uiOutputRichText, .slds-scope .slds-form-element__label{
  color:          var( --font-color ) !important;
}

/** Set two-column approach, label-Wrappers to 30%, input-Wrappers to 70% */
.flowruntime-input .flowruntime-input-label,
.slds-form-element .slds-form-element__label{
  display:          inline-block !important;
}

/* Labels should always be in bold... */
.flowruntime-input-label,
.lightning-component .slds-form-element__label{
  font-weight:  400 !important;
  color: var( --primary-color-light ) !important;
}

.slds-button.navigation-button-back,
.slds-button.flow-button__BACK {
    padding-left: 1.6rem !important;
}

.registrationWrapperConsentFlow input[type="submit"],
.slds-scope .slds-button--brand{
  font-family: var( --font-family ) !important;
  border-radius: var( --border-radius ) !important;
  padding: 0.25rem 1rem !important;
  border: 1px solid var( --primary-color ) !important;
  color: var( --brand-white );
  font-size: 0.9rem;
  line-height: 1.833rem !important;
  font-weight: 600;
  transition: background-color 0.3s linear;
  cursor: pointer;
}

.slds-scope .slds-button_brand::after,
.slds-scope .slds-button--brand::after{
    content: '\203A';
    font-size: 1.44rem;
    display: block;
    margin-top: -4px;
    margin-left: 15px;
    font-weight: 500;
}

.registrationWrapperConsentFlow input[type="submit"]:focus,
.slds-scope .slds-button_brand:focus,
.slds-scope .slds-button--brand:focus,
.registrationWrapperConsentFlow input[type="submit"]:hover,
.slds-scope .slds-button_brand:hover,
.slds-scope .slds-button--brand:hover {
  background-color: var( --secondary-color ) !important;
  color: var( --brand-white ) !important;
}

.slds-scope .slds-button_neutral,
.slds-scope .slds-button--neutral{
  font-weight: 600;
}

@media only screen and (max-width: 1200px) {
  #registrationWrapper{
    position:       relative;
    bottom:         initial;
    right:          initial;
    left:           5%;
    margin-top:     5%;
    min-height:     auto;
    height:         auto;
  }
}

@media only screen and ( max-width: 600px ){
  #registrationWrapper, #headerBar{
    width:        95%;
    left:           2.5%;
  }
}


@media only screen and (max-width: 550px) {
  .slds-form-element label.slds-form-element__label,
  .slds-form-element .slds-form-element__label span,  {
      color: var( --primary-color-light ) !important;
      display: inline-block;
      transform-origin: left top;
      transition: transform 0.2s ease;
      position: relative;
      font-size: 15px;
      font-weight: 400;
  }

  .slds-form-element input.slds-input {
      border: 0px !important;
      border-bottom: 1px solid var(--brand-black) !important;
      border-radius: 0px !important;
      transition: border-color 0.2s ease;
      width: 100%;
      background: transparent !important;
  }
}