/*.login-pf body {
    background: url("../img/keycloak-bg.png") no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}
*/



.legal {
    margin-top: var(--inx-space-l);
    font-size: 15px;
    color: #4B4241;
}

.legal a {
  text-decoration: none;
}
/* alert-error Styling */
.pficon {
  display: none;
}
.alert-error, .alert-warning, .alert-success, .alert-info {
    margin-bottom: 10px;
    color: #4B4241;
    background-color: #f1f1f4;
    padding: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: 324px;
}

.alert-error span, .alert-warning span, .alert-success span, .alert-info span{
  margin-left: 16px;
}

.alert-error .uli-message-circle {
    border: 2px solid #ff4539;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    /* border: 1px solid; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert-warning .uli-message-circle{
  border: 2px solid #FB8B24;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  /* border: 1px solid; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-error .uli-message-circle svg{
  color: #ff4539;
}
.alert-warning .uli-message-circle svg{
  color: #FB8B24;
}

.alert-success .uli-message-circle{
    border: 2px solid #27B282;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    /* border: 1px solid; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert-success .uli-message-circle svg {
  color: #27B282;
}

.alert-info .uli-message-circle{
    border: 2px solid #0065d9;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    /* border: 1px solid; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert-info .uli-message-circle svg {
  color: #0065d9;
}
.uli-icon {
    text-rendering: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
.alert-error .uli-icon svg, .alert-warning .uli-icon svg, .alert-info svg{
    stroke-width: 3px;
}
.uli-icon.uli-icon-size-s svg, .uli-icon.uli-icon-size-small svg {
    height: 10px;
    width: 10px;
}
.uli-icon svg {
    stroke: currentColor;
}
#kc-locale ul {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style: none;
    left: 0;
    top: 40px;
    min-width: 100px;
    padding: 2px 0;
    border: solid 2px #e1e0e0;
    border-radius: 4px;
}

#kc-locale:hover ul {
    display: block;
    margin: 0;
}

#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: #e1e0e0;
}

#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::after {
    /* content: "\2c5";
    margin-left: 4px;
    position: absolute;
    right: 10px; */
}
#kc-locale-dropdown svg{
  height: 20px;
  width: 20px;
  float: right;
  fill: currentcolor;
}

.login-pf a:hover {
    color: #00a19c;
}

#kc-logo {
    width: 100%;
}

#kc-logo-wrapper {
/*    background-image: url(../img/keycloak-logo-2.png);*/
    background-repeat: no-repeat;
    height: 63px;
    width: 300px;
    margin: 62px auto 0;
}

div.kc-logo-text {
/*    background-image: url(../img/keycloak-logo-text.png);*/
    background-repeat: no-repeat;
    height: 63px;
    width: 300px;
    margin: 0 auto;
}

div.kc-logo-text span {
    display: none;
}

#kc-header {
    color: #ededed;
    overflow: visible;
    white-space: nowrap;
}

#kc-header-wrapper {
    font-size: 29px;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.2em;
    padding: 62px 10px 20px;
    white-space: normal;
}

/* #kc-content-wrapper {
    overflow-y: hidden;
} */

#kc-social-providers-username-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#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;
    margin-bottom: 13px;
    color:#4B4241;
    font-size: 14px;
}


#kc-oauth ul li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    line-height: 18px;
}

#kc-oauth ul li:first-of-type {
    border-top: 0;
}

#kc-oauth .kc-role {
    display: inline-block;
    width: 50%;
}

/* Custom  OAuth Styles*/

#kc-oauth ul{
  background-color: #E1E0E0;
  border-radius: 4px;
  padding: 12px 0 12px 25px;
  margin: 0;
}

#kc-oauth input{
  width: auto;
  padding: 7px 25px;
  float: left;
  margin: 0;
}

#kc-oauth #kc-cancel{
  border: none;
  background: none;
  color: #00A19C;
  font-size: 14px;
  font-weight: 600;
  padding-left: 32px;
  cursor: pointer;
}

#kc-oauth #kc-form-options div{
  margin-top: 32px;
}

#oauth-headline{
  font-size: 20px;
  color: #4B4241;
  margin-bottom: 24px;
  display: block;
}
/* Code */
#kc-code textarea {
    width: 100%;
    height: 8em;
}

#kc-oauth .oauth-client{
  font-weight: 700;
}

.oauth#kc-page-title{
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 700;
}
/* 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: 400;
    font-size: 14px;
    text-shadow: none;
    border: 0;
    color: #4B4241;
    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 {
}

.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; }


@media (min-width: 768px) {
    #kc-container-wrapper {
        position: absolute;
        width: 100%;
    }

    .login-pf .container {
        padding-right: 80px;
    }

    #kc-locale {
        position: relative;
        /* text-align: right; */
        width: 200px;
        float: right;
        z-index: 9999;
    }
}

@media (max-width: 767px) {

    .login-pf body {
      background: white;
    }

    #kc-header {
        padding-left: 15px;
        padding-right: 15px;
        float: none;
        text-align: left;
    }

    #kc-header-wrapper {
      font-size: 16px;
      font-weight: bold;
      padding: 20px 60px 0 0;
      color: #72767b;
      letter-spacing: 0;
    }

    div.kc-logo-text {
        margin: 0;
        width: 150px;
        height: 32px;
        background-size: 100%;
    }

    #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%;
    }
}

.card-pf form.form-actions .btn {
    float: right;
    margin-left: 10px;
}

#kc-form-buttons {
  margin: 0;
}

.login-pf-page .login-pf-brand {
  margin-top: 20px;
  max-width: 360px;
  width: 40%;
}

.card-pf {
  width: 424px;
}

/*tablet*/
/* Temporarily removed to support devices with smaller resolutions. Will be adjusted during the implementation of responsive design. */
/*@media (max-width: 840px) {*/
/*    .login-pf-page .card-pf{*/
/*      max-width: none;*/
/*      margin-left: 20px;*/
/*      margin-right: 20px;*/
/*      padding: 20px 20px 30px 20px;*/
/*    }*/
/*}*/
@media (max-width: 767px) {
    .login-pf-page .card-pf{
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      padding-top: 0;
    }
    .card-pf.login-pf-accounts{
      max-width: none;
    }
    .card-pf .form-group{
      width: 100%;
    }
}

.login-pf-page .login-pf-signup {
  font-size: 15px;
  color: #72767b;
}
#kc-content-wrapper .row {
  margin-left: 0;
  margin-right: 0;
}

.login-pf-social{
  margin: 0;
}
#kc-social-providers{
  display: block;
  float: right;
  position: relative;
  transform: translateY(-31px);
}
.login-pf-social-section{
  /* float: right;
  position: relative;
  top: -32px;
  transform: translateY(-16px); */
}
@media (min-width: 768px) {
  .login-pf-page .login-pf-social-section:first-of-type {
    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;
  }
  .content {
    padding: 96px;
  }
  .welcome-text h1{
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    margin: 0 0 var(--inx-space-l) 0;
    letter-spacing: 0.3px;
  }
  #welcome-subheadline{
    font-weight: 400;
  }
}


@media (min-width: 1281px) {
  .welcome-text h1{
     font-size: 48px;
     font-style: normal;
     font-weight: 700;
     line-height: 55px;
     margin: 0 0 68px 0;
   }
  #welcome-subheadline{
    font-weight: 300;
  }
}

.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;
}

#kc-form-login div.form-group:last-of-type,
#kc-register-form div.form-group:last-of-type,
#kc-update-profile-form div.form-group:last-of-type,
#kc-update-email-form div.form-group:last-of-type{
    margin-bottom: 0px;
}

#kc-back {
    margin-top: 5px;
}

form#kc-select-back-form div.login-pf-social-section {
    padding-left: 0px;
    border-left: 0px;
}
body {
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  width: 100%;
  /*
  position: absolute;
  height: 100%;
  overflow: hidden;
  */
  color: #2C2F37;
  font-weight: 400;
  margin: 0;
}
/*#kc-passwd-update-form .form-group #kc-form-buttons{*/
/*  padding-top: 16px;*/
/*}*/

@media only screen and (min-width : 769px){
  body::after{
    content: "";
    background-image: url('../img/login_keyvisual.png');
    background-size: auto 759px;
    background-repeat: no-repeat;
    background-position: 450px bottom;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: -1;
  }
}
@media only screen and (min-width: 1281px){
  body::after{
    content: "";
    background-size: unset;
    background-image: url('../img/login_keyvisual.png');
    background-repeat: no-repeat;
    background-position: 600px bottom;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: -1;
  }
}
@media only screen and (min-width : 1921px){
    body::after{
        content: "";
        background-image: url('../img/login_keyvisual.png');
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: right bottom;
        background-attachment: fixed;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        z-index: -1;
    }
}
.logo{
  margin-bottom: 32px;
}
.icons {
  position: absolute;
  bottom: 16px;
  display: flex;
  justify-content: center;
}
.icons img, .m_icons img{
  padding-right: 32px;
}
.m_icons a:last-child img{
  padding-right: 0px;
}
.icons .madeingermany{
  height: 65px;
}
.icons .iconShadow,
.m_icons .iconShadow{
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.1));
}

.icons a {
    justify-content: left;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.m_icons .madeingermany{
  height: 64px;
  position: relative;
  top: 9px;
}

.content{
  display: flex;
  flex-direction: column;
  width: 424px;
}
.checkbox label input {
  display: none; /* Hide the default checkbox */
}
h1{
  font-weight: 700;
}
#username, #password{
  margin-top: 5px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0 1000px #ecf8f7 inset;
   font: 15px "Barlow"!important;
   font-weight: 300 !important;
}

.kc-dropdown{
  display: block;
  border: 2px solid #e1e0e0;
  border-radius: 4px;
  padding: 10px 0 10px 0;
}
.kc-dropdown:hover{
  border-color: #00a19c !important;
}
.kc-dropdown:active{
  border-color: #00a19c !important;
}
.kc-dropdown a {
  text-decoration: none;
}
/* Style the artificial checkbox */
.checkbox label span {
  height: 14px;
  width: 14px;
  border: 2px solid #e1e0e0;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  top: 4px;
  margin-right: 10px;
}
[type=checkbox]:checked + span{
  background-color: #01938e;
  border-color: #01938e;
}
/* Style its checked state...with a ticked icon */
[type=checkbox]:checked + span:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  height: 3px;
  width: 7px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.login-pf-page{
  height: min-content;
}

.login-pf-page-header, #kc-header{
  display: none;
}
.login-pf-page-header div {
  display: none;
}
.login-pf-header h1{
  font-size: 24px;
  color: #2C2F37;
  margin-bottom: 24px;
  margin-top: 0;
}
#kc-form-login{
  display: flex;
  flex-wrap: wrap;
}
.form-group{
    width: 300px;
}
.form-group label{
  color: var(--gray-secondary-gray-60, #797B80);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.2px;
}
.form-group input {
  margin-top: var(--inx-space-xxs);
  margin-bottom: var(--inx-space-m);
}
#username{
  margin-bottom: 16px;
}
#kc-form-login.only-username #username{
  /*  Username in template where only username field is shown (login-username.ftl)*/
  margin-bottom: 24px;
}
#password{
  margin-bottom: 16px;
}
.login-pf-settings{
  display: flex;
  flex-flow: column;
}
.login-pf-settings #kc-form-options{
  order: 1;
}
.login-pf-settings #kc-form-buttons{
  order: 0;
  margin-bottom: 20px;
  margin-top: 0;
}
label{
  color: #2C2F37;
}

input[type="text"]:focus, input[type="password"]:focus{
  outline: none;
  border: 2px solid rgba(0,161,156,0.8);
  border-radius: 4px;
}
#kc-page-title{
  font-weight: 700;
}
.btn-primary{
  background: #42beb2;
  box-shadow: 1px 3px 5px -1px rgba(0,0,0,0.2);
  color: #fff;
  padding: 7px 0px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.42857;
  letter-spacing: 0.3px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  border-radius: 4px;
  border-width: 0;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: 0.1s;
  width: 123px;
  text-align: center;
}

.alert-warning{
  margin-bottom: 20px;
}

.btn-primary:hover, a.btn-primary:hover {
  box-shadow: 3px 5px 7px 1px rgba(0,0,0,0.2);
  background: #01938E;
  text-decoration: none;
  color: #fff;
}
.login-pf-settings a{
  color: var(--gray-secondary-gray-100);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.login-pf-settings a:hover{
  color: #00a19c;
}
a{
  color: #372E2C;
}

a:hover{
  color: #00a19c;
}
.login-pf-settings a{
  color: #372E2C;
}

.inxmailLabelMobile{
  display: none;
}
.legal span {
  padding-left: 3px;
  padding-right: 3px;
}
#kc-page-title{
  padding-top: 0!important;
  font-size: 20px;
  margin-bottom: var(--inx-space-xl);
}
/* Dropdown Spachen ausgeblendet */
#kc-locale-wrapper{
  display: none;
}

.inx-hidden {
    display:none;
}

@media only screen and (max-width : 414px){
  /* body{
    overflow: hidden;
    padding-bottom: 20px;
    border-bottom: 4px solid #FBE446;
  } */
  .content{
    display: flex;
    justify-content: center;
    margin-left: 0;
  }
  .logo{
    display: none;
  }
  .m_icons{
    display: none;
  }
  #kc-social-providers{
    top: 24px;
    float: left;
  }
  .legal{
  }
 .login-pf-page{
   display: block;
   position: relative;
   top: 0;
   transform: translateY(0);
   width: 100%!important;
  }
 .welcome-text{
   width: 100%;
   margin-right: 0;
 }

 .card-pf {
   min-width: 100px;
   width: 100%;
 }
 #kc-page-title{
   padding-top: 0!important;
 }
}
@media only screen and (max-width : 768px){
  /* body{
    overflow: scroll;
  } */
  .password-criteria-box {
    width: auto !important;
  }
  .alert-error, .alert-warning, .alert-success, .alert-info {
    width: auto !important;
  }
  .content{
    padding: 0 var(--inx-space-xl) var(--inx-space-xl);
    justify-content: center;
    margin-left: 0;
    height: auto;
     width: auto
  }
  .welcome-text{
      line-height: 36px;
  }
  .welcome-text h1{
      margin-top: 0;
      font-size: 30px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.3px;
  }
  #welcome-subheadline{
      font-weight: 400;
  }
  .logo{
    display: none;
  }
 .icons{
   display: none;
 }
 .login-pf-page{
   display: block;
   position: relative;
   top: 0;
   transform: translateY(0);
 }
 .welcome-text{
   margin-right: 0;
 }
 .legal{
 }
 body::before{
   display: block;
   height: 80px;
   margin-bottom: var(--inx-space-xl);
   content: "";
   background-color: #FFF74D;
   transform: rotate(0);
 }
 body::after{
   content: "";
   background-image: url('../img/mobile_logo.png');
   position: absolute;
   background-color: transparent;
   background-size: 189px 32px;
   background-repeat: no-repeat;
   top: var(--inx-space-l);
   left: var(--inx-space-xl);
   width: 189px;
   height: 32px;
 }

 .card-pf {
   width: 100%;
   margin: 0 0 var(--inx-space-xl) 0;
   padding: 0!important;
 }

 .login-pf-header h1{
   margin-bottom: var(--inx-space-xl);
 }

 #kc-login, #submit {
    width: 100%;
 }
}