:root{

  --main-color: #333;
  --sub-color: #d2d3d3;
	--gray-color: #6c757d;
	--disable-color: #ccc;
}

.login-bg {
    background: #fff;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .login-wrapper {
    position: absolute;
    top: calc(50% - 50px);
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
  }
  .login-wrapper .logo {
    height:200px;
    margin-bottom: 0px;
    position: relative;
    left: -2px;
  }
  .login-wrapper .box {
    margin: 0 auto;
    padding: 35px 0 30px;
    float: none;
    width: 400px;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.65);
  }
  .login-wrapper .box .content-wrap {
    width: 82%;
    margin: 0 auto;
  }
  .login-wrapper .box h6 {
    text-transform: uppercase;
    margin: 0 0 30px 0;
    font-size: 18px;
    font-weight: 600;
  }
  .login-wrapper .box input[type="text"],
  .login-wrapper .box input[type="password"] {
    font-size: 14px;
    height: 30px;
    width:calc(100% - 15px);
    margin-bottom: 18px;
    border-color: #b2bfc7;
    padding-left: 12px;
  }
  .login-wrapper .box input[type="password"] {
    margin-bottom: 10px;
  }
  .login-wrapper .box input:-moz-placeholder {
    color: #9ba8b6;
    font-size: 15px;
    letter-spacing: 0px;
    font-style: italic;
  }
  .login-wrapper .box input:-ms-input-placeholder {
    color: #9ba8b6;
    font-style: italic;
    letter-spacing: 0px;
    font-size: 15px;
  }
  .login-wrapper .box input::-webkit-input-placeholder {
    color: #9ba8b6;
    font-style: italic;
    letter-spacing: 0px;
    font-size: 15px;
  }
  .login-wrapper .box a.forgot {
    display: block;
    text-align: right;
    font-style: italic;
    text-decoration: underline;
    color: #3d88ba;
    font-size: 13px;
    margin-bottom: 6px;
  }
  .login-wrapper .box .remember {
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .login-wrapper .box .remember input[type="checkbox"] {
    float: left;
    margin-right: 8px;
  }
  .login-wrapper .box .remember label {
    float: left;
    color: #4a576a;
    font-size: 13px;
    font-weight: 600;
  }
  .login-wrapper .box .login {
    text-transform: uppercase;
    font-size: 13px;
    padding: 8px 30px;
  }
  .login-wrapper .no-account {
    margin: 0 auto;
    float: none;
    text-align: center;
    font-size: 14px;
    margin-top: 25px;
  }
  .login-wrapper .no-account p {
    display: inline-block;
    color: #aaaaaa;
  }
  .login-wrapper .no-account a {
    color: #aaaaaa;
    margin-left: 7px;
    border-bottom: 1px solid;
    transition: all .1s linear;
    -moz-transition: all .1s linear;
    /* Firefox 4 */
    -webkit-transition: all .1s linear;
    /* Safari and Chrome */
    -o-transition: all .1s linear;
    /* Opera */
  }
  .login-wrapper .no-account a:hover {
    text-decoration: none;
    color: #fff;
    border-bottom-color: #fff;
  }
  
  /* background switcher */
  .bg-switch {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    top: 60px;
    border-radius: 0px 10px 10px 0px;
    padding: 10px 10px 0px 10px;
    z-index: 999;
  }
  .bg-switch .bgs .bg {
    text-align: center;
    margin-bottom: 13px;
    text-decoration: none;
    display: block;
  }
  .bg-switch .bgs .bg.active img {
    border-color: #000;
  }
  .bg-switch .bgs .bg img {
    width: 80px;
    height: 60px;
    border: 2px solid #9fcef1;
    cursor: pointer;
  }
  
  /* responsive */
  @media (max-width: 767px) {
    .login-wrapper .box {
      width: 350px;
    }
  }
  @media (max-width: 480px) {
    .login-wrapper .box {
      width: 90%;
    }
  }
  

  
.kk-loginbox { position:absolute; display: block; width: 380px; height:auto; top:calc(50% - 100px); left:50%; transform:translate(-50%,-50%); background-color: rgba(255,255,255,0.9); z-index: 999999; border-radius: 5px; overflow:visible; }
.kk-loginbox .kk-loginbox-logo-wrap { width:100%; text-align:center; margin:10px auto 30px auto; } 
.kk-loginbox .kk-loginbox-logo-wrap2 { width:150px; text-align:center; margin:auto; } 

.kk-loginbox .loginbox-phone{ margin-bottom:15px; height:50px; width:calc(100% - 30px); border:none; outline:solid 1px var(--main-color); color:rgba(0,0,0,0.5); transition:all 400ms ease; font-size:16px; line-height:48px; padding-top:0; padding-bottom:0;  padding-left:15px; padding-right:15px; }
.kk-loginbox .loginbox-auth { margin-bottom:15px; height:50px; width:calc(100% - 30px); border:none; outline:solid 1px var(--main-color); color:rgba(0,0,0,0.5); transition:all 400ms ease; font-size:16px; line-height:48px; padding-top:0; padding-bottom:0;  padding-left:15px; padding-right:15px; }

.kk-loginbox input::placeholder { font-weight: normal; opacity: 0.7; color: var(--main-color); font-size:14px; }


.kk-loginbox .kk-select {position: relative; height:40px; padding:0; margin-left:0px; margin-right:0px;margin-bottom:15px; } 
.kk-loginbox .kk-select select { font-size:16px; width:100%; height:40px; text-align: center; margin-left:0px; margin-right:0px; padding:0; color:var(--main-color);  border:solid 1px var(--main-color);}
.kk-loginbox .kk-select select option {  text-align: center; }

.kk-loginbox .kk-auth-btn { margin-bottom:15px; display:block; width:calc(100% - 30px); height:50px; border-radius:0px; text-align: center; color:#fff; font-size:16px; line-height:50px; background-color:var(--main-color); padding-top:0; padding-bottom:0;  padding-left:15px; padding-right:15px; }
.kk-loginbox .kk-reauth-btn { margin-bottom:15px; display:block; width:calc(100% - 30px); height:50px; border-radius:0px; text-align: center; color:#fff; font-size:16px; line-height:50px; background-color:var(--gray-color); padding-top:0; padding-bottom:0;  padding-left:15px; padding-right:15px; }
.kk-loginbox .step_1 { display:block; }
.kk-loginbox .step_2 { display:none; }