@font-face {
  font-family:"Chakra Petch";
  font-display:swap;
  font-weight:600;
  unicode-range:U+0000-00FF,
  U+0131,
  U+0152-0153,
  U+02BB-02BC,
  U+02C6,
  U+02DA,
  U+02DC,
  U+0304,
  U+0308,
  U+0329,
  U+2000-206F,
  U+2074,
  U+20AC,
  U+2122,
  U+2191,
  U+2193,
  U+2212,
  U+2215,
  U+FEFF,
  U+FFFD;
  src:url("../font/ChakraPetch-SemiBold.ttf")
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background: #eee;
}

#kc-header>#kc-header-wrapper {
    font-size: medium;
    text-transform: none;
    line-height: normal;
    font-weight: 300;
    letter-spacing: normal;
    max-width: 420px;
    padding: 1em;
    margin-top: 2em;
    border-radius: .5em;
    font-size: 32px;
    letter-spacing: .2rem;
    font-family:"Chakra Petch",system-ui
}

.form-signin {
    margin: 0 auto;
    background: transparent;
    border-radius: .4rem;
    max-width: 500px;
    overflow: visible;
    display: inline-block;
}

form#kc-form-login .form-floating:nth-child(2) {
    margin-top: .4rem;
}

.login-card {
    background: linear-gradient(#35362eba, #1a2530ab);
    color: #fff;
    padding: 1em;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 0 15px #21cbffed;
}

.form-control:not(.pf-c-input-group .form-control) {
  background: #576d6e96;
  border-color: #22321b;
  height: 36px;
  border-radius: 20px;
}

.pf-c-input-group {
  background: #576d6e96!important;
  border: 1px solid #22321b;
  border-radius: 20px;
  overflow: hidden;
  height: 36px;
}

.pf-c-input-group > button.pf-m-control > i,
label,
.form-control:not(.pf-c-input-group .form-control) {
  color: #eee!important;
}


.pf-c-input-group .form-control,
.pf-c-input-group .pf-c-form-control {
  background: transparent;
  border: 0;
  height: 36px;
  border-radius: 0;
  color: #fff;
}

.pf-c-input-group .pf-c-button.pf-m-control {
  background: transparent;
  border: 0;
  color: #fff;
  height: 36px;
  border-radius: 0;
}

/* PatternFly draws fake borders here */
.pf-c-input-group .pf-c-button.pf-m-control::before,
.pf-c-input-group .pf-c-button.pf-m-control::after,
.pf-c-input-group .pf-c-form-control::before,
.pf-c-input-group .pf-c-form-control::after {
  border: 0 !important;
}

/* optional divider before the eye/password button */
.pf-c-input-group .pf-c-button.pf-m-control {
  border-left: 1px solid #22321b;
}

.pf-c-input-group {
    background-color: transparent;
}

.pf-c-input-group > .form-control {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: transparent;
}

.pf-c-input-group > button.pf-m-control:after {
    -background-color: transparent;
    border-left-color: transparent;
    border-right-color: rgb(187 187 187);
    border-top-color: rgb(187 187 187);
    border-bottom-color: rgb(187 187 187);
    border-image-width: 1px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background: unset;
}

.pf-c-input-group > button.pf-m-control > i {
    color: rgb(54, 54, 54);
}

body {
	background: url('https://img.tchncs.de/bg/osunset_blur.jpg') no-repeat center center fixed;
	background-size: cover;
}

.pf-v5-c-login__main {
	border-radius: 2em;
}

.pf-v5-c-login__main-header {
	border-top: none;
}

button {
	border-radius: .4rem!important;
}

@media (min-width: 992px) {
    .pf-c-alert {
        margin-top: 1.5em;
    }
    .form-signin .login-card .col-md-10 {
        width: 100%;
    }
}

@media (max-width: 767px) {
    body {
        align-items: flex-start;
    }
    .login-header {
        color: transparent;
    }
    #kc-content, .login-card {
        padding: .25em;
    }
    .pf-c-alert {
        padding: .5em;
    }
    #kc-header-wrapper {
        margin-top: 4.5em;
        text-align: center;
        font-size: 40px;
        letter-spacing: 3px;
        padding: 62px 10px 40px;
        color: #fff;
    }
    .form-signin {
        padding-left: .4rem;
        padding-right: .4rem;
        max-width: 100%;
    }
    #kc-locale {
        top: 10px;
    }
    #kc-social-providers #social-dllp {
        background: #E73665;
        font-size: small;
    }
    /*#kc-locale-dropdown a {
        text-align: center;
    }*/
    #kc-header>#kc-header-wrapper>.announcement {
        font-size: small;
    }
}

#kc-header-wrapper {
    font-size: 40px;
    /*margin-top: 3em;*/
    text-transform: lowercase;
    margin: 0 auto;
}

#kc-info,
#kc-info-wrapper {
    background-color: unset;
    margin: unset;
    -white-space: break-spaces;
    padding: 5px;
}

#kc-form,
/*#kc-social-providers h4,*/
#kc-social-providers hr {
    -display: none!important;
}

#kc-form-wrapper::before {
    content: "⚠️ This service was recently migrated to a different software solution. You must reset your password if this page looks new to you. Your username no longer has the @tchncs.de part and it is always lowercase.";
    display: block;
    background: #6b5711;
    border: 1px solid #d9a400;
    color: #fff;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 10px #d9a40066;
    text-align: left;
    max-width: 400px;
}

hr {
   clear: both;
   border-top: 1px dashed #5498c0;
}
#kc-social-providers #social-dllp {
    background: #E73665;
}

#kc-login-footer-links > li {
    display: contents
}

div.subtitle,
span.subtitle {
    margin-top: 0;
}

header.h3 .subtitle {
    font-size: 12px;
    top: -2em;
    display: none;
}

.pf-c-alert {
    padding: .5em 1em;
    bottom: 1em;
    display: inline-block;
    border-top: unset;
    border-radius: .4rem;
    padding: .5em 1em;
}

.pf-c-alert>.pf-c-alert__icon {
    display: inline-block;
    margin-top: unset;
    line-height: normal;
    vertical-align: bottom;
}

.pf-c-alert span {
    vertical-align: middle;
}