:root {
    --brandColor-1: #671e75;
    /* purple */
    --brandColor-2: #008AD8;
    /* blue & links */
    --brandColor-3: #29005f;
    /* dark purple */
    --link-btn: #5E38BE !important;
    /* button & links */
    --link-hover: #19B6FF !important;
    --link-btn-hover: #7747F0 !important;
    /* links on hover */
    --button-text: #ffffff;
    --grey-0: #242B31;
    /* text */
    --grey-3: #96a4b2;
    --grey-4: #f0f2f4;
    /* light backgrounds */
    --blue-2: #106291;
    /* button hover */
    --blue-5: #80d1ff;
    /* links - dark bg */
    --errorColor: #b01307;
    --errorColor2: #f9d1ce;
    --successColor1: #389424;
    --successbg: #d9efd4;
    --border-radius: 4px;
    --fontFace: 'Open Sans', helvetica, sans-serif;
    --borderRadius: 4px;
    /* inputs */
    --inputAutoFillBg: #E5F6FF;
    --footer-link: #ffffff !important;
}

body {
    background-color: var(--brandColor-3);
    font-family: var(--fontFace);
    .create{
      display:none;
    }
    .signup{
      .create{
        display:block;
      }
    }
    .companyLogo{
        height: 64px;
        width: 192px;
    }

    .card-default{
      background-color: var(--grey-4);
    }
    
    h1{
        text-align:left;
        font-weight: normal;
    }
    h2, .intro p{
      font-size:1rem;
      font-weight:normal;
      margin:0;
    }
    .completed{
      .intro{
        p{
          color: var(--brandColor-3);
          font-size:21px;
          font-weight: normal;
        }
      }
      .Paragraph{
        .attrEntry{
          padding-top:0;
          line-height: 1rem;
        }
      }
    }
    a{
        color: var(--link-btn);
        text-decoration: none;
        &:hover{
            color: var(--link-btn-hover);
        }
    }
    .error{
      font-size:.9rem;
      color: var(--errorColor);
      p{
        margin-bottom: 0;
      }
    }
    input, select{
        display:inline-block;
        width:100%;
        border: solid 1px var(--grey-3);
        border-radius: 4px;
        font-size:16px;
        padding:10px 15px;
    }
    /* Hides placeholder text for all other browsers */
    ::placeholder {
      color: transparent !important;
    }
    select{
      margin-bottom:1rem;
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active  {
        -webkit-box-shadow: 0 0 0 60px var(--inputAutoFillBg) inset!important;
    }
    .entry{
        .entry-item{
            margin-bottom:.5em;
            position: relative;
        }
    }

    #newPassword_label::before{
      content:'Your password can be 8 - 64 characters, with no more than two consecutive characters or two sequential numbers.';
      display: block;
      font-size:13px;
      margin:.5rem 0;
    }

    .helpLink{
      display:none;
    }

    .attr{
      ul{
        list-style: none;
        padding-left:0;
        li{
          padding-left:0;
        }
        input{
          display:inline-block;
          width:100%;
          border: solid 1px var(--grey-3);
          border-radius: 4px;
          font-size:16px;
          padding:10px 15px;
          
        }
      }
    }
    .entry-item, .attrEntry{
      padding-top:.5rem;
    }
    /* .entry-item, .attrEntry{
      padding-top:.5rem;
      .error{
        display:inline-block !important;
        margin-left:10px;
        font-size:13px;
      }
    } */
    .password-label{
      position:relative;
      
    }
    .show-hide-password{
      position:absolute;
      right:1px;
      bottom:1px !important;
      z-index:200;
      padding:14px;
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }
    .show-hide-password::after{
      display: block;
      font-family: bootstrap-icons !important;
      font-style: normal;
      font-weight: 400 !important;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing:grayscale;
      content:"\F341";

      color: var(--grey-0);

    }
    .hide-password::after{
      content:"\F340";
    };
    .required-field{
      label{
        position:relative;
      }
      label::after{
        content:"*";
        color:var(--errorColor);
        position:relative;
        right:-5px;
        top:0;
      }
    }
    label.required-field::after{
        content:"*";
        color:var(--errorColor);
        position:relative;
        right:-5px;
        top:0;
    }
    /* input[aria-required="true"]{
      border:solid 3px var(--errorColor);
    } */
    #forgotPassword{
      float:right;
    }
    .forgot-password{
        margin:15px 0;
    }
    .forgot-password, .create{
        font-size:13px;
    }
    .create{
        margin:2px 0;
        a{
            margin-left:10px;
        }
    }

    .highlightError {
      background-color: var(--errorColor2) !important;
      border: solid 1px var(--errorColor) !important;
    }

    .error.pageLevel, #emailVerificationControl_success_message[aria-hidden='false']{
      font-size:.9rem;
      margin-bottom:1rem;
      padding:1rem;
      border-radius: var(--border-radius);
    }
    .error.pageLevel {
      background-color: var(--errorColor2);
      color:var(--errorColor);
    }

    #emailVerificationControl_success_message[aria-hidden='false']{
      background-color: var(--successbg);
      color:var(--successColor1);
      display:block !important;
    }

    .buttons{
      display:flex;
      justify-content: space-evenly;
      align-content: space-between;
      gap: .5rem;
      button{
        margin-top: .8rem;
      }
    }

    button{
        background-color: var(--link-btn);
        border: none;
        border-radius: var(--borderRadius);
        color: var(--button-text);
        display: block;
        font-size: 1rem;
        font-weight: 700;
        padding: .7rem;
        width: 100%;
        &:hover{
            background-color: var(--link-btn-hover);
        }
    }

    button:focus-visible {
        outline-color: transparent;
        outline-width: 0px;
        box-shadow: 0 0 0 .25rem rgba(201, 181, 249, .5);
    }

    button:disabled, button[disabled]{
      background-color: #E8F0F4;
      border: solid 1px #CEDAE1;
      color:#CEDAE1;
    }

    .claims-provider-list-buttons{
      display:none;/* Hide social account buttons */
        button{
            margin-bottom:.5rem;
        }
        #GoogleExchange{
            &:hover{
                background-color: #c64a29;
                color:#fff;
            }
        }
        #AppleExchange{
            &:hover{
                background-color:#000;
                color:#fff;
            }
        }
    }
    

    .divider{
        height:10px;
        h2{
            display:none;
        }
    }

    .copyright{
        color: var(--footer-link);
        font-size:13px;
        text-align: center;
        margin-bottom:2rem;
        a, a:hover, a:visited{
            color: var(--footer-link);
            display: block;
            margin-top: 5px;
            text-decoration: underline;
        }
        @media screen and (min-width: 480px) {
            div {
                margin-top: 5px;
            }
            a, a:hover, a:visited {
                border-left: solid 1px #fff;
                display: inline-block;
                color: var(--footer-link);
                padding-left: 10px;
                margin-left: 10px;
                margin-top: 0;
            }
        }
    }
}

.verifying-modal #verifying_blurb{
  color: var(--blue-2);
  display:none;
  background-color:#fff;
  padding:1rem;
  margin:.5rem !important;
  border-radius:4px;
}

.readonly{
  .phoneNumber{
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:1rem;
    text-align:center;
  }
}
.phoneNumbers{
  text-align:center;
  
  .type{
    font-weight:300;
  }
  .number{
    font-weight:700;
    font-size:1.5rem;
    margin-bottom:1rem;
  }
}
.buttons{
  #cancel{
    background-color:transparent;
    display:inline-block;
    position:absolute;
    top:-150px;
    left:0;
    width:auto;
    &:before {
      content: url(https://id-cdn.prepass.com/b2c-ui/images/left-arrow-ko.svg);
      display:inline-block;
      vertical-align: middle;
      margin-top: -3px;
      margin-right: 5px;
      width:20px;
      height:20px;
    }
  }
}

.claims-provider-list-buttons button{
    background-color: #fff;
    background-position-x: 3%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: 10% 70%;
    border:solid 1px var(--grey-3);
    color: #000;
    font-weight: normal;
}

#SignInWithLogonNameExchange, #SignUpWithLogonEmailExchange, #SignUpWithLogonNameExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/local.svg);
}
#SignInWithLogonNameExchange:hover, #SignUpWithLogonEmailExchange:hover, #SignUpWithLogonNameExchange:hover {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/white/local.svg);
}
#SignUpWithLogonEmailExchange.text-link {
    background-image: none;
    background-color: transparent !important;
}
#SignUpWithLogonEmailExchange.text-link:hover {
    background-image: none;
    background-color: transparent !important;
}

#AmazonExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/amazon.svg);
  }
  #AmazonExchange:hover {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/white/amazon.svg);
  }
  #FacebookExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/facebook.svg);
  }
  #FacebookExchange:hover {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/white/facebook.svg);
  }
  #GitHubExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/github.svg);
  }
  #GitHubExchange:hover {
    background-image: url(https://identityprepass.b2clogin.com/static/tenant/templates/idp_logos/white/github.svg);
  }
  #AppleExchange,#AppleManagedExchange {
    background-image: url(https://identityprepass.b2clogin.com/static/tenant/templates/idp_logos/colored/apple.svg);
  }
  #AppleExchange:hover,#AppleManagedExchange:hover {
    background-image: url(https://identityprepass.b2clogin.com/static/tenant/templates/idp_logos//white/apple.svg);
  }
  #GoogleExchange {
    background-image: url(https://identityprepass.b2clogin.com/static/tenant/templates/idp_logos/colored/google.svg);
  }
  #GoogleExchange:hover {
    background-image: url(https://identityprepass.b2clogin.com/static/tenant/templates/idp_logos/white/google.svg);
  }
  #LinkedInExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/linkedin.svg);
  }
  #LinkedInExchange:hover {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/white/linkedin.svg);
  }
  #MicrosoftAccountExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/microsoft.svg);
  }
  #MicrosoftAccountExchange:hover {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/white/microsoft.svg);
  }
  #QQExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/qq.svg);
  }
  #QQExchange:hover {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/white/qq.svg);
  }
  #TwitterExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/twitter.svg);
  }
  #TwitterExchange:hover {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/white/twitter.svg);
  }
  #WeChatExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/wechat.svg);
  }
  #WeChatExchange:hover {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/white/wechat.svg);
  }
  #WeiboExchange {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/colored/weibo.svg);
  }
  #WeiboExchange:hover {
    background-image: url(https://login.microsoftonline.com/templates/src/idp_logos/white/weibo.svg);
  }