body {
   display: block;
   position: relative;
}
.login-pf body {
   background: #000 url("../img/loginBoxGlow.png") no-repeat center center fixed;
   background-size: cover;
   height: 100%;
}
.login-pf-page #kc-page-title {
   margin-top: 3px;
}

.login-pf-page .card-pf {
   border-radius: 10px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6d6e70+0,000000+42,191a1c+76,343435+100&0.76+1,0.65+37,0.65+70,0.69+100 */
   background: -moz-linear-gradient(-45deg, rgba(109,110,112,0.76) 0%, rgba(106,107,109,0.76) 1%, rgba(13,13,13,0.65) 37%, rgba(0,0,0,0.65) 42%, rgba(21,21,23,0.65) 70%, rgba(25,26,28,0.66) 76%, rgba(52,52,53,0.69) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg, rgba(109,110,112,0.76) 0%,rgba(106,107,109,0.76) 1%,rgba(13,13,13,0.65) 37%,rgba(0,0,0,0.65) 42%,rgba(21,21,23,0.65) 70%,rgba(25,26,28,0.66) 76%,rgba(52,52,53,0.69) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, rgba(109,110,112,0.76) 0%,rgba(106,107,109,0.76) 1%,rgba(13,13,13,0.65) 37%,rgba(0,0,0,0.65) 42%,rgba(21,21,23,0.65) 70%,rgba(25,26,28,0.66) 76%,rgba(52,52,53,0.69) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c26d6e70', endColorstr='#b0343435',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}

#kc-header-wrapper img {
   max-width: 1000px;
   max-height: 500px;
}

.login-pf-page .login-pf-header h1 {
   color: #eee;
}

.login-pf-page .form-control {
   text-align: center;
   margin: auto;
}

#kc-login,
#kc-form-buttons .submit {
   background: url("../img/btnLogin.png") no-repeat scroll 0 0 transparent !important;
   width: 135px;
   height: 37px;
   margin: 0 auto;
   border: none;
}

#kc-login.submit,
#kc-form-buttons .submit {
   background: url("../img/btnSubmit.png") no-repeat scroll 0 0 transparent !important;
}

#kc-login:hover {
      background: url("../img/btnLogin.png") no-repeat scroll 0 -38px transparent;
}

.login-pf-page .pf-m-primary  {
   background-image: none;
   background-color: #222;
   border: 1px solid #555;
}

.login-pf-page .pf-m-primary :hover {
   background-color: #000;
   border: 1px solid #333;
}

.alert-error {
   background-color: #ffffff;
   border-color: #cc0000;
   color: #333333;
}

.login-pf-page .control-label {
   display: none;
   color: #efefef;
}

#kc-totp-login-form #kc-form-buttons,
.login-pf-page #kc-totp-login-form .control-label {
   display: block;
   text-align: center;
   color: #fff;
}

.login-pf-page #kc-totp-login-form #kc-cancel {
   background-color: initial;
   color: #eee;
   background-image: none;
   border: 0;
   width: 100%;
   margin-top: 1rem;
}

.login-pf-page .backToLogin-btn {
   width: 100%;
   display: block;
   padding: 2rem 0;
   text-align: center;
}

.login-pf-page .backToLogin-btn a:hover {
   text-decoration: underline;
}


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

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

#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: 20px 10px 20px;
   white-space: normal;
}
.login-pf-page-header {
   margin-bottom: 0;
}
#kc-content {
   width: 100%;
}

#kc-attempted-username{
    font-size: 20px;
    font-family:inherit;
    font-weight: normal;
    padding-right:10px;
}

#kc-username{
    text-align: center;
}

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

#kc-info {
   margin: 0;
}

#kc-info-wrapper {
   font-size: 13px;
   color: #0081c6;
}

#kc-form-wrapper .formOptionsWrapper {
   text-align: center;
}

#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 */

.subtitle {
    text-align: right;
    margin-top: 30px;
    color: #909090;
}

.required {
    color: #CB2915;
}

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

.kc-login-tooltip{
    position:relative;
    display: inline-block;
}

.kc-login-tooltip .kc-tooltip-text{
    top:-3px;
    left:160%;
    background-color: black;
    visibility: hidden;
    color: #fff;

    min-width:130px;
    text-align: center;
    border-radius: 2px;
    box-shadow:0 1px 8px rgba(0,0,0,0.6);
    padding: 5px;

    position: absolute;
    opacity:0;
    transition:opacity 0.5s;
}

/* Show tooltip */
.kc-login-tooltip:hover .kc-tooltip-text {
    visibility: visible;
    opacity:0.7;
}

/* Arrow for tooltip */
.kc-login-tooltip .kc-tooltip-text::after {
    content: " ";
    position: absolute;
    top: 15px;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

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

.login-pf-page {
   margin-bottom: 100px;
}
#kc-header {
   margin-bottom: 1rem;
}

#footer {
   display: block;
   position: fixed;
   margin-top: 125px;
   bottom: 0px;
   width: 100%;
   text-align: center;
   background-color: #000;
}
#footer::after {
   content: "";
   clear: both;
   display: table;
}
#footer .poweredBy,
#footer .content,
#footer .terms {
   clear:both;
}
#footer .content .blue {
   color: #0081c6;
}
#footer .content .blue a {
   color: #40bcff;
   text-decoration: underline;
}
#footer .poweredBy {
   display: block;
   float: left;
   width: 15%;
   padding: 10px;
   text-align: left;
}
#footer .poweredBy img {
   max-height: 25px;
}
#footer .content {
   display: block;
   float: left;
   width: 70%;
   line-height: 20px;
   color: #c5c5c5;
   padding: 10px 0 0;
}
#footer .terms {
   display: block;
   float: right;
   width: 15%;
   text-align: right;
   padding: 10px;
}
#footer .terms .dialog {
   display: none;
}
#footer .terms .termsLink {
   cursor: pointer;
}
#footer .support {
   display: block;
   clear: both;
   width: auto;
   text-align: center;
   color: #c5c5c5;
}
#footer .grey {
   color: #575757;;
}
#footer .supportContactDetails {
   display: none;
}

@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 {
       padding-left: 15px;
       padding-right: 15px;
       float: none;
   }

   #kc-header-wrapper {
     font-size: 16px;
     font-weight: bold;
     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-header-wrapper {
      padding: 75px 10px 0;
   }
   #kc-container-wrapper {
       bottom: 12%;
   }
}

@media (min-height: 820px) {
   #kc-header {
      margin-bottom: 40px;
   }
   #kc-header-wrapper {
      padding: 165px 10px 0;
   }
   #kc-container-wrapper {
       padding-top: 50px;
       top: 20%;
   }
}

.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: #fff;
 margin: 0 auto;
 padding: 0 20px;
 max-width: 500px;
 border-top: 0;
 box-shadow: 0 0 0;
}

.login-pf-page .card-pf p,
.login-pf-page #kc-terms-text,
.login-pf-page {
   color: #fff;
}


/*tablet*/
@media (max-width: 840px) {
   .login-pf-page .card-pf{
     padding: 20px 20px 30px 20px;
   }
}
@media (max-width: 767px) {
      
   .login-pf-page {
      height: auto;
   }   
   #kc-header-wrapper img {
      max-width: 200px;
      max-height: 170px;
   }

   .login-pf-page .card-pf{
      max-width: 80%;
      margin: 0 auto;
      padding-top: 0;
   }
   .card-pf.login-pf-accounts{
     max-width: none;
   }
   #footer {
      position: relative;
      margin-top: 125px;
   }
   #footer .poweredBy {
      width: 100%;
      text-align: center;
      padding: 10px;
   }
   #footer .terms {
      width: 100%;
      text-align: center;
   }
   #footer .content {
      padding: 10px;
      width: 100%;
   }
   #footer .support {
      display: none;
      float: right;
      clear: none;
      text-align: left;
      padding: 10px;
      color: #575757;
   }
}

.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-header {
      margin-bottom: 10px;
   }

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

   #footer .poweredBy,
   #footer .content,
   #footer .terms {
      clear: none;
   }

}

.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 .pf-m-primary  {
   margin-top: 0;
}

.login-pf-page .list-view-pf .list-group-item {
    border-bottom: 1px solid #ededed;
}

.login-pf-page .list-view-pf-description {
    width: 100%;
}

.login-pf-page .card-pf{
  margin-bottom: 10px;
}

#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 {
    margin-bottom: 0px;
}

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

form#kc-select-back-form div.login-pf-social-section {
    padding-left: 0px;
    border-left: 0px;
}

.list-view-pf .list-view-pf-stacked{
   background-color:#000;
   color:#fff
}
.list-view-pf .list-view-pf-stacked:hover{
   background-color:#fff;
   color:#000
}