.login-pf body {
  width: 100%;
  height: 100%;
  flex-direction: column;
  display: flex;
  background-image: none;
  background-color: #ffffff;
}

#kc-locale ul {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style: none;
    right: 20px;
    top: 30px;
    width: 200px;
    padding: 2px;
}

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

#kc-locale ul li a {
    display: block;
    padding: 1px 11px;
    color: #000 !important;
    border: 1px solid #fff;
    text-decoration: none;
    line-height: 20px;
}

#kc-locale ul li a:hover {
    color: #4d5258;
    background-color: #d4edfa;
    border-color: #b3d3e7;
}

#kc-locale-dropdown a {
    color: #fff;
}

#kc-locale-dropdown a:hover {
    text-decoration: none;
}

a#kc-current-locale-link {
    display: block;
    padding: 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 a:hover {
    color: #0099d3;
}

#kc-logo {
    width: 100%;
}

#kc-logo-wrapper {
    background-image: url("../img/logo_vhx2.png");
    background-repeat: no-repeat;

    height: 57px;
    width: 125px;
    background-size: 100% auto;
}
div.kc-logo-text {
    background-image: url("../img/logo_vhx2.png");
    background-repeat: no-repeat;
    width: 250px;
    height: 38px;
    background-size: auto 100%;
}

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

#kc-header-wrapper {
    font-size: 26px;
    text-transform: uppercase;
    line-height: 1.2em;
    margin-bottom: 15px;
}

#kc-info-wrapper {
    font-size: 13px;
}
#kc-form-options span {
    display: block;
}

#kc-terms-text {
    margin-bottom: 20px;
}

/* TOTP */

ol#kc-totp-settings {
    margin: 0;
    padding: 0;
}

ol#kc-totp-settings li {
    margin-top: 1em;
}

ol#kc-totp-settings li:first-of-type {
    margin-top: 0;
}

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

/* 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 30px;
}

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

#kc-social-providers li {
    display: block;
    margin-top: 5px;
}

#kc-social-providers li:first-of-type {
    margin-top: 0;
}

.zocial.facebook,
.zocial.github,
.zocial.google,
.zocial.microsoft,
.zocial.stackoverflow,
.zocial.linkedin,
.zocial.twitter {
    background-image: none;
    border-radius: 2px;

    font-family: "Open Sans", sans-serif;
    font-weight: normal;

    box-shadow: none;
    text-shadow: none;
}

.zocial.google {
    background-color: #dd4b39 !important;
}

.zocial.facebook:hover,
.zocial.github:hover,
.zocial.google:hover,
.zocial.microsoft:hover,
.zocial.stackoverflow:hover,
.zocial.linkedin:hover,
.zocial.twitter:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
}

/* Copy of zocial windows classes to be used for microsoft's social provider button */
.zocial.microsoft {background-color: #0052a4; color: #fff;}
.zocial.microsoft:before { content: "\f15d"; }

@media (min-width: 768px) {
    #kc-logo-wrapper {
        position: absolute;
        top: 50px;
        right: 50px;
    }

    #kc-locale {
        position: relative;
        width: 200px;
        left: -230px;
        text-align: right;
        z-index: 9999;
    }
}

@media (max-width: 767px) {

    #kc-logo-wrapper {
        background-position: center;
        width: 100%;
        margin: 20px 0;
    }

    #kc-header {
        padding-left: 15px;
        padding-right: 15px;
        float: none;
        text-align: 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;
    }

    .login-pf .container {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #kc-locale {
        position: absolute;
        width: 200px;
        top: 10px;
        right: 0px;
        text-align: right;
        z-index: 9999;
    }
}

@media (max-width: 1200px) {
  /*.login-info #logoArea #partner-logo{*/
  /*  margin-bottom: 20px;*/
  /*}*/
  #partner-logo img, #kc-header-wrapper img{
    padding-right: 0px;
    margin-bottom: 20px;
  }
  .login-info #logoArea h2{
    margin: 10px 0;
    font-size: 28px;
  }
  #kc-social-providers .login-info p{
    margin-top: 0px;
    font-size: 18px;
  }
  #kc-social-providers .login-info h3{
    font-size: 22px;
  }
  #kc-container-wrapper #kc-content.buttons-content{
    padding: 0px 50px;
  }
  .buttons-content #kc-actions{
    width: 100%;
  }
  .footer-content #kc-content-wrapper #kc-actions{
    margin-top: 30px;
  }
  .footer-content ul{
    flex-direction: column;
    list-style: none;
  }
  .footer-content ul li{
    padding-bottom: 10px;
  }
  .footer-content ul li:last-child{
    padding-bottom: 0px;
  }
  #kc-content.devices-wrap{
    padding-top: 10px !important;
  }
}

@media (max-height: 645px) {
    #kc-container-wrapper {
        top: 20%;
    }
}

/* Here go the changes by VH Team */
*:focus {
outline: 0;
}

.form-control{
  box-shadow: none;
  border-radius: 3px;
  padding: 20px;
  height: auto;
}
.form-control:-webkit-autofill {
  background-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

.form-control:focus{
  box-shadow: none;
  outline: none;
  border-color: #bababa;
}
.form-horizontal .form-group{
  display: flex;
  align-items: center;
}
.form-selector{
  width: 100%;
  display: flex;
  overflow: hidden;
}
.form-selector select{
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: #ffffff;
  font-size: 12px;
  padding: 20px;
  width: 100%;
  border: 1px solid #bababa;
  cursor: pointer;
}
.form-selector::after{
  content: "";
  background-image: url('../img/dropdown-img.png');
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  display: flex;
  flex: 1;
  align-self: center;
  right: 40px;
  width: 10px;
  height: 7px;

}
.login-pf .container .form-horizontal .control-label{
  font-weight: 700;
}

.login-pf .container {
  background-color: transparent;
  color: #000000;
}

.login-pf .container .details{
  border-color: #DDDDDD;
}
.register-info{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
.login-info p, .register-info p{
  max-width: 100%;
  color: #000000;
  font-size: 20px;
  font-weight: 300;
  line-height: 38px;
  margin-bottom: 30px;
}
#logoArea {
  margin-bottom: 20px;
}
#feedback-form{
  cursor: pointer;
}
.login-info h3{
  font-size: 26px;
  font-weight: 500;
  color: #8CC63F;
  margin-top: 0px;
}

.login-info h2{
  font-size: 36px;
}
.register-info h2{
  font-size: 36px;
  max-width: 500px;
  color: #0078CA;
}

.centered-group{
  display: flex;
  align-items: center;
}

#kc-form{
  flex-direction: column;
}

#kc-form-options a {
  color: #8BC932;
}

 #kc-container {
 /* display: flex;
  flex-direction: column;
  */
 flex: 1;
 height: 100%;
}

#kc-container-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  justify-content: flex-start;
  padding-top: 50px;
}

#kc-content {
  display: flex;
  position: relative;
  bottom: unset;
  padding-left: 0px;
  padding-top: 50px;
  padding-bottom: 0px;
  padding-right: 0px;
}

#kc-form {
  padding-left: 10%;
  display: flex;
  flex: 1;
}
#kc-form-wrapper{
  width: 100%;
}

#kc-info{
  display: flex;
  flex: 1;
  padding-right: 10%;
}

#kc-social-providers, #kc-actions{
  width: 60%;
  display: flex;
  justify-content: center;
}
#kc-content.buttons-content{
  padding: 50px;
}
#kc-actions .col-lg-6{
  align-items: center;
  flex-direction: column;
  display: flex;
  padding: 30px 0px;
}
#kc-actions .col-lg-6:last-child{
  border-left: 1px solid #E2E2E2;
}
.buttons-content #kc-actions p{
  font-size: 18px;
}
.buttons-content #kc-actions .singleButton{
    display:  flex;
    flex-direction:  column;
    justify-content:  center;
    align-items:  center;
}
.buttons-content #kc-actions .col-sm-12 a.zocial {
  width: 80%;
  margin-top: 0px;
  text-align: center;
  background-color: #0078CA;
  width: 100%;
  font-size: 22px;
  font-weight: 400;
  display: block;
  color: white !important;
  text-align: center;
  align-items: center;
  text-shadow: none !important;
}
#kc-actions .col-lg-6 a.zocial small{
  width: 100%;
  color: white;
}
#kc-login{
    background-color: #0078CA;
    padding: 15px 40px;
    border-radius: 3px;
    color: #ffffff !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-image: none;
    border: none;
}
#kc-content.footer-content{
  padding-top: 0px;
}
.footer-content #kc-actions{
  border-top: 1px solid #E2E2E2;
  padding-top: 40px;
  margin-top: 100px;
}
.footer-content ul{
  margin: 0px 0px 40px 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
}
.footer-content ul li{
  margin-left: 30px;
  font-size: 14px;
}
.footer-content ul li:first-child{
  margin-left: 0px;
  list-style: none;
}
.btn-primary{
    background-color: #0078CA;
    padding: 15px 40px;
    border-radius: 3px;
    color: #ffffff !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-image: none;
    border: none;
}
#kc-content-wrapper {
  display: flex;
  flex: 1;
  margin: 0;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
.devices-wrap .col-lg-12{
  padding-bottom: 10px;
}
.devices-wrap .col-lg-12 p{
  font-size: 14px;
}
.devices-wrap .col-lg-12 img:last-child{
  padding-left: 10px;
}
#kc-header {
  display: flex;
  width: 100%;
  padding: 0px;
}

#kc-header-wrapper {
  padding-left: 10%;
  margin: 0px;
}

.zocial {
  background-image: none;
  background-color: transparent;
  border: 1px solid #0078CA !important;
  box-shadow: none !important;
  padding: 15px 20px !important;
  display: flex !important;
  color: #0078CA !important;
  margin-top: 15px;
  max-width: 70%;
  -moz-max-width: max-content;
  flex-direction: column;
  align-items: flex-start;
}
.zocial span{
  color: #0078CA;
  text-shadow: none;
  font-weight: 400;
  font-size: 25px;
  line-height: 16px;
}
.zocial small{
  text-shadow: none;
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  padding-bottom: 5px;
}
.zocial:hover {
  background-image: none;
  background-color: #CCE4F4;
}
.zocial:focus {
  background-color: #0078CA;
  color: #ffffff !important;
  background-image: none;
}
.zocial:focus span{
  color: #ffffff !important;
}
.zocial:focus small{
  color: #ffffff !important;
}
.zocial:active {
  background-color: #0078CA;
  color: #ffffff !important;
  background-image: none;
}
.zocial:active span{
  color: #ffffff !important;
}
.zocial:active small{
  color: #ffffff !important;
}

.alert-error {
  background-color: #ffffff;
  border-color: #cc0000;
  color: #cc0000 !important;
  font-weight: 600;
  font-size: 14px;
  padding: 5px 10px;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
}
.alert-error > .pficon{
  position: relative;
  padding-right: 10px;
  top: 0px;
  left: 0px;
}

#partner-logo img, #kc-header-wrapper img{
  /* height: 60px; */
  padding-right: 20px;
  max-width: 500px;
}

@media (max-height: 900px) {
  #kc-header{
    padding-top: 50px;
  }
  #kc-info{
    padding-bottom: 50px !important;
  }
}
@media (max-width: 960px) {
  #kc-content-wrapper{
    flex-direction: column;
    align-items: center;
  }
  #kc-actions{
    width: 100%;
  }
  .buttons-content #kc-actions{
    flex-direction: column;
  }
  .buttons-content #kc-actions .col-lg-6:first-child{
    padding-bottom: 50px;
  }
  .buttons-content #kc-actions .col-lg-6:last-child{
    border-left: none;
    border-top: 1px solid #E2E2E2;
  }
  #kc-form{
    width: 100%;
    min-height: min-content;
    min-height: -webkit-min-content;
    min-height: -moz-min-content
    flex: auto;
    padding: 0px 10% 30px 10%;
  }
  #kc-info{
    flex: auto;
    min-height: min-content;
    min-height: -webkit-min-content;
    min-height: -moz-min-content
    width: 100%;
    padding: 30px 10% 0px 10%;
    border-top: 1px solid #dddddd;
  }
  #kc-info-wrapper{
    width: 100%;
  }
  #kc-social-providers ul{
    width: 100%;
    padding-top: 15px;
  }
  #kc-info h2{
    margin-top: 0px;
  }
  .zocial{
    width: 100%;
    max-width: 100%;
    margin-right: 0px;
  }

  .form-horizontal .form-group{
    flex-direction: column;
  }
  #kc-form-options{
    width: 100%
  }
  #kc-form-options a{
    padding: 5px 0px;
    display: inline-block;
  }
  #kc-form-buttons{
    width: 100%;
  }
  #kc-login{
    width: 100%;
    margin-top: 15px;
  }
  .btn-primary{
    width: 100%;
    margin-top: 15px;
  }
  #kc-content{
    width: 100%;
  }
  #partner-logo img, #kc-header-wrapper img{
    max-width: 300px;
  }
}

#partner-logo img:last-child{
  padding-right: 0px;
}

/* styles for home.pug */

.home-container#kc-content {
    padding-top: 0;
}


.home-container #partner-logo img:last-child {
    /* height: 69px; */
}

.home-container .login-info p {
    line-height: 28px;
    font-weight: 400;
}

@media (min-width: 1099px) {
    .partner-info p {
        height: inherit!important;
    }
    .home-container .login-info p {
        height: 70px;
    }
    /*.home-container #logoArea #partner-logo {*/
    /*    margin-bottom: 50px;*/
    /*}*/
}

.home-container .login-info h3.action-message {
    font-weight: 600;
}

.home-container #kc-social-providers, #kc-actions {
    display: block;
}

.home-container.buttons-content {
    margin-top: 50px;
}
.home-container.buttons-content #kc-actions .col-sm-12 a.zocial {
    max-width: 288px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.2rem;
}

.home-container.buttons-content #kc-actions .account-link {
    margin-top: 38px;
}

.home-container.buttons-content #kc-actions .account-link p {
    line-height: 15px;
}

.home-container.buttons-content #kc-actions .account-link a {
    font-size: 25px;
    font-weight: 500;
    color: #0078CA;
}

.home-container.devices-wrap #kc-actions {
    display: flex;
    width: auto;
}

.home-container.devices-wrap #kc-actions > div {
    padding-top: 0;
}

.home-container.devices-wrap #kc-actions img {
    width: 140px;
}

@media (min-width: 768px) {
    .home-container.devices-wrap #kc-actions .col-lg-6:first-child img {
        margin-right: 3px;
    }
}

@media (max-width: 767px) {
    .home-container.devices-wrap #kc-actions {
        flex-direction: column;
    }
    .home-container.devices-wrap #kc-actions > div {
        padding: 15px 0 0!important
    }
    .home-container.devices-wrap #kc-actions img {
        width: 245px;
        margin-right: 0;
    }
}

.home-container.devices-wrap #kc-actions .col-lg-6:last-child {
    border-left: none;
}

.home-container .account-link-xs {
    margin-top: 35px;
    line-height: 10px;
}


/** footer **/

.footer-content {
    margin-top: auto;
}

.footer-container #kc-actions p {
    line-height: 15px;
}

.footer-container ul {
    list-style: none;
}

@media (min-width: 767px) {
    .footer-container #kc-actions p {
        line-height: 10px
    }
}

.footer-content #kc-actions {
    width: 100%;
}