*{
    --main-color: #004f9e;    
    --secondary-color: #b30000;
  }
  
  .login-pf {
      height: 100%;
      overflow-y: scroll;
  }
  .login-pf body {
      background: #F1F1F1;
      background-size: cover;
  }
  
  .login-pf-page {
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100vh;
      overflow-y: visible;
  }
  
  .alert-error {
      background-color: #ffffff;
      border-color: var(--main-color);
      color: #333333;
  }
  
  #kc-locale ul {
      display: none;
      position: absolute;
      background-color: #fff;
      list-style: none;
      right: 0;
      top: 20px;
      min-width: 100px;
      padding: 2px 0;
      border: solid 1px #bbb;
  }
  
  #kc-locale:hover ul {
      display: block;
      margin: 0;
  }
  h1#kc-page-title {
      text-align: center;
      margin-bottom: 80px;
      font-weight: bold;
      font-size: 2.5em;
      margin-top: 80px;
      color: #2A2F31;	
  }
  
  #kc-locale ul li a {
      display: block;
      padding: 5px 14px;
      color: #000 !important;
      text-decoration: none;
      line-height: 20px;
  }
  
  #kc-locale ul li a:hover {
      color: #4d5258;
      background-color: #d4edfa;
  }
  
  #kc-locale-dropdown a {
      color: #4d5258;
      background: 0 0;
      padding: 0 15px 0 0;
      font-weight: 300;
  }
  
  #kc-locale-dropdown a:hover {
      text-decoration: none;
  }
  
  a#kc-current-locale-link {
      display: block;
      padding: 0 5px;
  }
  
  /* a#kc-current-locale-link:hover {
      background-color: rgba(0,0,0,0.2);
  } */
  
  a#kc-current-locale-link::after {
      content: "\2c5";
      margin-left: 4px;
  }
  
  .login-pf .container {
      padding-top: 40px;
  }
  
  .login-pf a:hover {
      color: black;
  }
  
  #kc-logo {
      width: 100%;
  }
  
  #kc-logo-wrapper {
      background-image: url(../img/logo.gif);
      background-repeat: no-repeat;
      height: 53px;
      width: 400px;
      margin: 62px auto 0;
  }
  
  div.kc-logo-text {
      background-image: url(../img/logo.gif);
      background-repeat: no-repeat;
      height: 53px;
      width: 400px;
      margin: 0 auto;
  }
  
  div.kc-logo-text span {
      display: none;
  }
  
  #kc-header {
      color: #ededed;
      overflow: visible;
      white-space: nowrap;
      margin-bottom: 0;
  }
  
  #kc-header-wrapper {
      font-size: 29px;
      text-transform: uppercase;
      letter-spacing: 3px;
      line-height: 1.2em;
      padding: 15px 10px 10px 10px;
      white-space: normal;
      background-color: #ffffff;
      border-bottom: 5px solid var(--main-color);
  }
  
  .login-pf-page .card-pf {
      padding: 0;
      margin-bottom: 35px;
  }
  #kc-content {
      width: 100%;
      padding: 50px 60px 30px;
  }
  
  #kc-content p.description {	
      margin-bottom: 35px;
      font-size: 16px;	
  }
  
  /* #kc-content-wrapper {
      overflow-y: hidden;
  } */
  
  #kc-info {
      padding-bottom: 200px;
      margin-bottom: -200px;
  }
  
  #kc-info-wrapper {
      font-size: 13px;
  }
  
  #kc-form-options span {
      display: block;
  }
  
  #kc-form-options .checkbox {
      margin-top: 0;
      color: #72767b;
  }
  
  #kc-terms-text {
      margin-bottom: 20px;
  }
  
  #kc-registration {
      margin-bottom: 15px;
  }
  
  /* TOTP */
  
  ol#kc-totp-settings {
      margin: 0;
      padding-left: 20px;
  }
  
  ul#kc-totp-supported-apps {
    margin-bottom: 10px;
  }
  
  #kc-totp-secret-qr-code {
      max-width:150px;
      max-height:150px;
  }
  
  #kc-totp-secret-key {
      background-color: #fff;
      color: #333333;
      font-size: 16px;
      padding: 10px 0;
  }
  
  /* OAuth */
  
  #kc-oauth h3 {
      margin-top: 0;
  }
  
  #kc-oauth ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  #kc-oauth ul li {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 12px;
      padding: 10px 0;
  }
  
  #kc-oauth ul li:first-of-type {
      border-top: 0;
  }
  
  #kc-oauth .kc-role {
      display: inline-block;
      width: 50%;
  }
  
  /* Code */
  #kc-code textarea {
      width: 100%;
      height: 8em;
  }
  
  /* Social */
  
  #kc-social-providers ul {
      padding: 0;
  }
  
  #kc-social-providers li {
      display: block;
  }
  
  #kc-social-providers li:first-of-type {
      margin-top: 0;
  }
  
  .zocial,
  a.zocial  {
      width: 100%;
      font-weight: normal;
      font-size: 14px;
      text-shadow: none;
      border: 0;
      background: #f5f5f5;
      color: #72767b;
      border-radius: 0;
      white-space: normal;
  }
  .zocial:before {
    border-right: 0;
    margin-right: 0;
  }
  .zocial span:before {
      padding: 7px 10px;
      font-size: 14px;
  }
  .zocial:hover {
      background: #ededed !important;
  }
  
  .zocial.facebook,
  .zocial.github,
  .zocial.google,
  .zocial.microsoft,
  .zocial.stackoverflow,
  .zocial.linkedin,
  .zocial.twitter {
      background-image: none;
      border: 0;
  
      box-shadow: none;
      text-shadow: none;
  }
  
  /* Copy of zocial windows classes to be used for microsoft's social provider button */
  .zocial.microsoft:before{ content: "\f15d"; }
  .zocial.stackoverflow:before{ color: inherit; }
  
  
  /* Tabs */
  
  div.tabs {
      display: flex;
      cursor: pointer;
      font-size: 18px;
      background: #F1F1F1;
  }
  
  div.tabs > .tab:first-child {
      border-left: 2px solid #e0e0e3;
  }
  div.tabs > .tab:last-child {
      border-right: 2px solid #e0e0e3;
  }
  div.tabs > .tab {
      flex: 50%;
      padding: 20px;
      text-align: center;
      border-top: 2px solid #e0e0e3;
      color: #9A9C9D;
      text-decoration: none;
  }
  
  div.tabs > .tab.active {
      background: #fff;
      border-top: 2px solid var(--main-color);
      color: var(--main-color);
  }
  div.tabs > .tab:first-child.active {
      border-left: 0;
  }
  
  div.tabs > .tab:last-child.active {
      border-right: 0;
  }
  
  /* Footer */
  
  div#kc-footer-wrapper {
      background: #e0e0e3;
      display: flex;
    align-items: center;
    justify-content: center;
    }
  
  div#kc-footer-wrapper > a{
      padding: 10px 20px;
      color: grey;
  }
  
  /* Form */
  
  
  input.form-control {
      border: 0;
      box-shadow: none;
      border-bottom: 1px solid #EDEDED;
      font-size: 16px;
      height: 25px;
      padding: 0;
  }
  
  .form-group {
      margin-bottom: 35px;
      position: relative;
  }
  
  label.control-label {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      font-weight: normal;
      color: grey;
      font-size: 16px;
      transition: 0.2s;
      cursor: text; 
  }
  
  
  .form-group input:-webkit-autofill + label.control-label {
      top: 100%;
      margin-top: -55px;
      font-size: 12px;
  }
  
  label.control-label.freeze, .form-group input:focus + label.control-label {
      top: 100%;
      margin-top: -55px;
      font-size: 12px;
  }
  
  .login-pf-page .login-pf-settings.single {
      justify-content: flex-end;
  }
  
  .form-horizontal .form-group {
      margin-left: 0px;
      margin-right: 0px;
  }
  
  button.btn.btn-default.btn-lg {
      background: #ededed;
      background-image: none;
      background-repeat: no-repeat;
      border: 0;
      box-shadow: none;
  }
  
  .alert {
      margin-bottom: 35px;
  }
  
  .has-error .form-control, .has-error .form-control:focus, .has-error .form-control:hover {
      -webkit-box-shadow: none;
      box-shadow: none;
  }
  
  #password-strength {
      float: left;
      width: 0%;
      height: 100%;
      font-size: 11px;
      line-height: 20px;
      color: #fff;
      text-align: center;
      transition: width 0.6s ease;
  }
  
  .form-email-check-info {
      margin-top: -35px;
      margin-bottom: 35px;
      padding: 10px;
      color: var(--main-color);
      background: #FDECEC;
      display: none;
  }
  
  .form-password-check-info {
      margin-top: -35px;
      margin-bottom: 35px;
      padding: 10px;
      color: var(--main-color);
      background: #FDECEC;
      display: none;
  }
  
  .form-password-check-bar .progress{
      height: 5px;
      box-shadow: none;
      width: 70px;
      margin: 0 10px;
  }
  
  .form-password-check-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: -19px;
      right: 0;
  }
  
  .form-password-check-bar .info-wrap {
      position: relative;
  }
  
  .info-button {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232a2f31' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
      height: 20px;
      width: 20px;
      background-size: cover;
      cursor: pointer;
      z-index: 2;
  }
  
  .info-text {
      padding: 25px 25px 10px 25px;
      background: white;
      box-shadow: 2px 2px 10px #ddd;
      -moz-box-shadow: 2px 2px 10px #ddd;
      -webkit-box-shadow: 2px 2px 10px #ddd;
      position: absolute;
      right: 0;
      width: 200px;
      z-index: 5;
      display: none;
      user-select: none;
  }
  
  .info-text.active{
      display: block;
  }
  
  .checkbox-wrap {
      display: flex;
      align-items: flex-start;    
  }
  
  .checkbox-wrap + .checkbox-wrap  {
      margin-top: 10px;
  }
  
  .checkbox-wrap > label {
      font-weight: normal;
      margin-left: 10px;
  }
  
  @media (min-width: 768px) {
      #kc-container-wrapper {
          position: absolute;
          width: 100%;
      }
  
      .login-pf .container {
          padding-right: 80px;
      }
  
      #kc-locale {
          position: relative;
          text-align: right;
          z-index: 9999;
      }
  }
  
  @media (max-width: 767px) {
  
      #kc-header-wrapper {
          padding: 10px 10px;
      }
      div.kc-logo-text {
		  width: 250px;
          height: 40px;
          background-size: contain;
          background-position: center;
      }
  
      #kc-form {
          float: none;
      }
  
      #kc-info-wrapper {
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          margin-top: 15px;
          padding-top: 15px;
          padding-left: 0px;
          padding-right: 15px;
      }
  
      #kc-social-providers li {
          display: block;
          margin-right: 5px;
      }
  
      .login-pf .container {
          padding-top: 15px;
          padding-bottom: 15px;
      }
  
      #kc-locale {
          position: absolute;
          width: 200px;
          top: 20px;
          right: 20px;
          text-align: right;
          z-index: 9999;
      }
  
      #kc-logo-wrapper {
          background-size: 100px 21px;
          height: 21px;
          width: 100px;
          margin: 20px 0 0 20px;
      }
  
  }
  
  @media (min-height: 646px) {
      #kc-container-wrapper {
          bottom: 12%;
      }
  }
  
  @media (max-height: 645px) {
      #kc-container-wrapper {
          padding-top: 50px;
          top: 20%;
      }
  }
  
  @media (max-height: 745px) {
      h1#kc-page-title {
          margin-bottom: 40px;
          margin-top: 40px;
      }
  }
  
  .card-pf form.form-actions .btn {
      float: right;
      margin-left: 10px;
  }
  
  #kc-form-buttons {
    margin-top: 40px;
  }
  
  .login-pf-page .login-pf-brand {
    margin-top: 20px;
    max-width: 360px;
    width: 40%;
  }
  
  .card-pf {
    background: #FFFFFF;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 500px;
    border-top: 0;
    box-shadow: 0 0 0;
  }
  
  /*tablet*/
  @media (max-width: 840px) {
      .login-pf-page .card-pf{
        max-width: none;
        margin-left: 20px;
        margin-right: 20px;
      }
  }
  @media (max-width: 767px) {
      
      h1#kc-page-title {
          margin-bottom: 40px;
          margin-top: 40px;
          font-size: 2em;
      }
  
      .card-pf.login-pf-accounts{
        max-width: none;
      }
      
      #kc-content {
          width: 100%;
          padding: 50px 30px 30px;
      }	
  }
  
  .login-pf-page .login-pf-signup {
    font-size: 15px;
    color: #72767b;
  }
  #kc-content-wrapper .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  @media (min-width: 768px) {
    .login-pf-page .login-pf-social-section:first-of-type {
      padding-right: 39px;
      border-right: 1px solid #d1d1d1;
      margin-right: -1px;
    }
    .login-pf-page .login-pf-social-section:last-of-type {
      padding-left: 40px;
    }
    .login-pf-page .login-pf-social-section .login-pf-social-link:last-of-type {
      margin-bottom: 0;
    }
  }
  
  .login-pf-page .login-pf-social-link {
    margin-bottom: 25px;
  }
  .login-pf-page .login-pf-social-link a {
    padding: 2px 0;
  }
  
  .login-pf-page.login-pf-page-accounts {
    margin-left: auto;
    margin-right: auto;
  }
  
  .login-pf-page .btn-primary {
      margin-top: 0;
      background: var(--main-color);
      border: 0;
      padding: 13px;
  }
  .login-pf-page .btn-primary:hover {
      background: var(--main-color);
  }
  
  .btn-primary:focus{
      color: white;
      border-color: var(--main-color);
      outline: 0;
  }
  .btn-primary:active:hover, .btn-primary.active:hover, .open .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open .dropdown-toggle.btn-primary.focus {
      background-color: var(--main-color);
      border-color: var(--main-color);
      outline: 0;
  }
  
  .form-control:hover {
      border-color: #ededed;
  }
  .form-control:focus {
      border-color: #ededed;
      outline: 0;
      box-shadow: none;
  }
  a {
      color: var(--main-color);
      text-decoration: none;
  }
  
  .kc-nav-wrapper {
    overflow: hidden;
    background-color: #333;
    margin-bottom: 40px;
  }
  
  .kc-nav-wrapper a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .kc-nav-wrapper a:hover {
    background-color: #ddd;
    color: black;
    cursor:pointer;
  }
  
  .kc-nav-wrapper a.active {
    background-color: #4CAF50;
    color: white;
  }
  
  .kc-top-wrapper {
    overflow: hidden;
    background-color: none;
    text-align:center;
    width: 100%;
    margin-bottom:25px;
  }
  
  .kc-top-wrapper a {
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 12px;
  }
  .kc-top-wrapper a:hover {
    color: #f2f2f2;
    cursor:pointer;
  }
  .kc-req{
      color:var(--main-color);
  }
  .form-group input:valid + label.control-label { 
    top: 100%;        
    margin-top: -55px;        
    font-size: 12px;    
  }
  input[type=checkbox] {
      min-width: 13px; 
      min-height: 13px;  
  }
  #kc-info-message{
  font-size: 14px;
  }
  
  label.error {
      display:none !important;
      border-color:var(--main-color);
  }
  
  .agb{padding-top:15px;background-color:#F1F1F1;}
  
  .toggle-password{z-index: 2;cursor:pointer; position:absolute; right:0; font-size:1.2em;}
  
  .fa-eye:before {
    content: url('../img/eye.svg');
  }
  .fa-eye-slash:before {
    content: url('../img/eye-slash.svg');
  }
  
  .form-user-check-info {
      margin-top: -35px;
      margin-bottom: 35px;
      padding: 10px;
      color: var(--main-color);
      background: #FDECEC;  
  }