@charset "UTF-8";

@font-face {
  font-family: 'Real Head Pro';
  src: url('../fonts/RealHeadPro-Regular.woff2') format('woff2'),
  url('../fonts/RealHeadPro-Regular.woff') format('woff'),
  url('../fonts/RealHeadPro-Regular.svg#RealHeadPro-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Real Head Pro';
  src: url('../fonts/RealHeadPro-RegularItalic.woff2') format('woff2'),
  url('../fonts/RealHeadPro-RegularItalic.woff') format('woff'),
  url('../fonts/RealHeadPro-RegularItalic.svg#RealHeadPro-RegularItalic') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Real Head Pro';
  src: url('../fonts/RealHeadPro-Semilight.woff2') format('woff2'),
  url('../fonts/RealHeadPro-Semilight.woff') format('woff'),
  url('../fonts/RealHeadPro-Semilight.svg#RealHeadPro-Semilight') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Real Head Pro';
  src: url('../fonts/RealHeadPro-SemilightItalic.woff2') format('woff2'),
  url('../fonts/RealHeadPro-SemilightItalic.woff') format('woff'),
  url('../fonts/RealHeadPro-SemilightItalic.svg#RealHeadPro-SemilightItalic') format('svg');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Real Head Pro';
  src: url('../fonts/RealHeadPro-Bold.woff2') format('woff2'),
  url('../fonts/RealHeadPro-Bold.woff') format('woff'),
  url('../fonts/RealHeadPro-Bold.svg#RealHeadPro-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Real Head Pro';
  src: url('../fonts/RealHeadPro-BoldItalic.woff2') format('woff2'),
  url('../fonts/RealHeadPro-BoldItalic.woff') format('woff'),
  url('../fonts/RealHeadPro-BoldItalic.svg#RealHeadPro-BoldItalic') format('svg');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

:root {
    --global-body-font-family: 'Real Head Pro', sans-serif;
    --global-body-font-size: 1.1rem;
    --global-body-font-weight: 300; /* semilight */
    --global-body-line-height: 2.4rem;
    --global-body-color: #000000;
    --global-body-small-font-size: 0.725rem;
    --global-body-small-line-height: 0.9rem;
    --global-body-smaller-font-size: 0.875rem;
    --global-body-smaller-line-height: 1.0rem;
    /*--global-font-weight-hairline:100;*/
    /*--global-font-weight-thin:150;*/
    /*--global-font-weight-ultralight:200;*/
    /*--global-font-weight-extralight:250;*/
    /*--global-font-weight-light:300;*/
    /*--global-font-weight-semilight:375;*/
    /*--global-font-weight-regular:400;*/
    /*--global-font-weight-book:450;*/
    /*--global-font-weight-medium:500;*/
    /*--global-font-weight-semi:600;*/
    /*--global-font-weight-bold:700;*/
    /*--global-font-weight-extra:800;*/
    /*--global-font-weight-heavy:900;*/
    --global-highlight-color: var(--global-color-primary-60);
    --global-highlight-font-weight: var(--global-font-weight-regular);
    /*--global-list-ul-marker:'–';*/
    /*--global-list-ul-marker-width:var(--global-space-l);*/
    /*--global-list-ol-marker-width:var(--global-space-l);*/
    /*--global-list-numeric-marker-after:'.';*/
    /*--global-list-alphanumeric-marker-after:'.';*/
    --global-link-color: #989898;
    /*--global-link-background-color:var(--global-color-white-100);*/
    /*--global-link-color-hover:var(--global-color-black-100);*/
    /*--global-link-background-color-hover:var(--global-color-primary-20);*/
    /*--global-link-color-active:var(--global-color-white-100);*/
    /*--global-link-background-color-active:var(--global-color-primary-100);*/
    /*--global-space-reset:0px;*/
    /*--global-space-xs:4px;*/
    /*--global-space-s:8px;*/
    /*--global-space-m:16px;*/
    /*--global-space-l:32px;*/
    /*--global-space-xl:64px;*/
    /*--global-space-xxl:128px;*/
    --global-color-white-20: rgba(255, 255, 255, 0.2);
    --global-color-white-40: rgba(255, 255, 255, 0.4);
    --global-color-white-60: rgba(255, 255, 255, 0.6);
    --global-color-white-80: rgba(255, 255, 255, 0.8);
    --global-color-white-100: #FFFFFF;
    --global-color-black-10: rgba(0, 0, 0, 0.1);
    --global-color-black-20: rgba(0, 0, 0, 0.2);
    --global-color-black-40: rgba(0, 0, 0, 0.4);
    --global-color-black-60: rgba(0, 0, 0, 0.6);
    --global-color-black-80: rgba(0, 0, 0, 0.8);
    --global-color-black-100: #000000;
    --global-color-primary-20: #ffe5cc;
    --global-color-primary-40: #ffcb9a;
    --global-color-primary-60: #ffb065;
    --global-color-primary-80: #ff9734;
    --global-color-primary-100: #ff7d00;
    --global-color-secondary-20: #ccd1e6;
    --global-color-secondary-40: #99a3cf;
    --global-color-secondary-60: #6675b6;
    --global-color-secondary-80: #32469f;
    --global-color-secondary-100: #001987;
    --global-color-yellow-20: #fff7dd;
    --global-color-yellow-40: #ffefb9;
    --global-color-yellow-60: #ffe795;
    --global-color-yellow-80: #ffdf73;
    --global-color-yellow-100: #ffd74f;
    --global-color-sand-20: #fcfcfa;
    --global-color-sand-40: #f9f9f5;
    --global-color-sand-60: #f5f5f1;
    --global-color-sand-80: #f2f2ec;
    --global-color-sand-100: #efefe7;
    --global-color-anthrazit-100: #333;
    --global-border-color-regular: var(--global-color-black-20);
    --global-border-color-bold: var(--global-color-black-100);
    --global-border-weight-regular: 1px;
    --global-border-weight-bold: 1px;
    --global-border-regular: var(--global-border-weight-regular) solid var(--global-border-color-regular);
    --global-border-bold: var(--global-border-weight-regular) solid var(--global-border-color-bold);
    --global-border-radius-regular: 20px;
    --global-border-radius-round: 50%;
    --global-form-elements-width: 450px;
    --global-font-color-error: #B10000;
    --global-font-color-info: #000000;
    --global-nswow-header-height: 80px;
  
  }
  
  html {
    display: flex;
    font-family: var(--global-body-font-family);
    font-size: var(--global-body-font-size);
    font-weight: var(--global-body-font-weight);
  }
  
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
  
  /* *** Layout *** */
  
  .kc-body {
    display: flex;
    border-left: 4px solid var(--global-color-primary-100);
    background: var(--global-color-sand-80);
    color: var(--global-color-anthrazit-100);
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
  }
  
  .kc-body .ns-login-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  
  .kc-body .ns-login-container .ns-login-header {
    display: inline-flex;
    align-items: center;
    height: var(--global-nswow-header-height);
    padding-left: 20px;
  }
  
  .kc-body .ns-login-container .ns-login-body {
    display: inline-flex;
    flex-grow: 1;
    align-self: center;
  }
  
  
  /* *** Form *** */
  
  
  #kc-content {
    position: relative;
    display: grid;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    top: calc(var(--global-nswow-header-height) * -1);
  }
  
  a {
    text-decoration: none;
    color: var(--global-link-color);
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  input[type=text], input[type=password] {
    display: flex;
    border-radius: 4px;
    background: var(--global-color-sand-40);
    font-size: var(--global-body-smaller-font-size);
    border: 1px solid var(--global-color-anthrazit-100);
    width: 100%;
    padding: 1rem;
  }

 
  input[aria-invalid=true], input[aria-invalid=true]:focus {
    border: 1px solid var(--global-font-color-error);
  }
  
  #kc-content-wrapper {
    display: inline-flex;
    height: fit-content;
    padding: 40px 64px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 10px;
    background: var(--global-color-sand-20);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
  }
  
  #login-position {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  #login-header {
    color: var(--global-color-anthrazit-100, #333);
    font-size: 1.5rem;
    line-height: normal;
  }
  
  div#kc-form, div#kc-logout-confirm {
    display: flex;
    width: 28.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  form#kc-otp-login-form {
    display: flex;
    width: 28.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  
div#kc-form label {
    padding-bottom: 0.4rem;
  }
  
  div#kc-form-buttons, div#kc-form-options {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
  }
  
  #kc-form-buttons {
    margin-top: 1.5rem;
  }
  
  
  form#kc-reset-password-form {
    gap: 32px;
  }
  
  span#pwreset {
    margin-bottom: 0.625rem;
  }
  
  p#ns-timeout {
    display: block;
  }
  
  /*
  .ns-logo {
     width: 135px;
  }
  */
  
  .login-position-active {
    display: flex;
    width: 1.5625rem;
    height: 1.5625rem;
    padding: 0.625rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2px;
    background: var(--global-color-primary-100);
    color: var(--global-color-white-100);
    font-size: 16px;
    font-weight: 375;
  }
  
  .login-position-passive {
    display: flex;
    width: 1.5625rem;
    height: 1.5625rem;
    padding: 0.625rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 2px;
    color: var(--global-color-primary-40);
    background: var(--global-color-white-100);
    font-size: 16px;
    font-weight: 375;
  }
  
  .form-group, .col-xs-12, #kc-form, #kc-form-wrapper {
    display: grid;
    align-self: stretch;
  }
  
  .two-buttons {
    justify-content: space-between;
  }
  
  .single-button {
    justify-content: end;
  }
  
  .pf-c-form__label-text {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    font-weight: 300 !important; /* override element style for otp password label */
  }
  
  .pf-c-input-group {
    position: relative;
    display: inline-block;
  }
  
  .pf-c-button {
    border-radius: 4px;
    padding: 0.75rem 1.25rem;
    font-size: var(--global-body-smaller-font-size);
  }
  
  button.password-toggle {
    position: absolute;
    right: 1px;
    top: 1px;
    display: flex;
    background: transparent;
    width: 3rem;
    height: 3rem;
    border: none;
    padding: 0;
    margin: 0;
  }
  
  button.password-toggle .password-hide,
  button.password-toggle .password-show {
    background-repeat: no-repeat;
    background-position: center;
    width: 3rem;
    height: 3rem;
  }
  
  button.password-toggle .password-hide {
    background-image: url('../img/password-hidden.svg');
    cursor: pointer;
  }
  
  button.password-toggle .password-show {
    background-image: url('../img/password-visible.svg');
    cursor: pointer;
  }
  
  ul.checkbox-list {
    display: grid;
    align-items: stretch;
    align-self: stretch;
    gap: 8px;
  }
  
  .checkbox-list {
    list-style-image: url('../img/mms_checked.png');
  }
  
  .kc-form-button-next {
    border-width: 0;
    color: var(--global-color-white-100);
    background-color: var(--global-color-primary-100);
    cursor: pointer;
  }
  
  .kc-form-button-back {
    border: 1px solid var(--global-color-anthrazit-100);
    color: var(--global-color-black-100);
    background-color: var(--global-color-white-100);
  }
  
  .pf-c-form__helper-text, .pf-m-error, .kc-feedback-text {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    font-size: var(--global-body-smaller-font-size);
    padding-top: 0.5rem;
  }

  .alert-success, .mms-info-box {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    font-size: 0.875rem;
    border-radius: 4px;
    padding: 0.75rem 1.25rem;
    background: var(--global-color-sand-80);
  }

  .pf-m-error {
    color: var(--global-font-color-error);
  }
  
  .help-text, .timeout-text {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    font-size: 0.875rem;
  }
  
  .timeout-text.warning {
    color: var(--global-font-color-error);
  }
  
  .no-bottom-margin{
    margin-bottom: 0;
  }
  
  .bottom-margin{
    margin-bottom: 1em;
  }
  
  .set-gap{
    margin-bottom: 32px;
  }
  
  .list{
    vertical-align: middle;
    text-align: left;
    align-content: center;
    display: flex;
  }
  
  .list-text{
    vertical-align: middle;
    text-align: left;
    align-content: center;
    display: flex;
  }
  
  .set-table {
    display: table;
  }
  
  .set-row {
    display: table-row;
  }
  
  .set-cell {
    display: inline-table;
    min-width: 33px;
  }

  .mmsLabel {
    visibility: hidden;
  }
  .mms-otp-input{
    letter-spacing: 40px;
  }

  img.qrcode {
    width: 320px;
  }

  .nohover:hover     {
    text-decoration: none;
  }