/* Styles for authentication pages - login, register, and password recovery */

/* Forgot password page styles */
.forgetThePassword {
    background-color: #fff;
}
.forgetThePassword .container {padding: 0;}
.forgetThePassword .container .row{margin: 0;}
.forgetThePassword .container .row input {
    padding-left: 5px;
    padding-right: 5px;
    box-shadow: unset
}
.forgetThePassword .container .grid-c1 .form-control{
    font-size: 14px;
    border-color: #DDE1E5;
    webkit-box-shadow:none;
    box-shadow:none;
}
.forgetThePassword .container .grid-c1 .form-control:focus{
    border-color: #DDE1E5;
    webkit-box-shadow:none;
    box-shadow:none;
}
.forgetThePassword .container .grid-c1 {
    overflow: hidden;
    width: 700px;
    margin: 30px auto;
}
.forgetThePassword .container .grid-c1 > .grid-c1-left {
    float: left;
    width: 700px;
    padding: 10px 20px;
}
.forgetThePassword .container .grid-c1 >  .grid-c1-left .grid-c1-8 {

}
.forgetThePassword .container .grid-c1 >  .grid-c1-left .grid-c1-8 img {
    width: 100%;
    max-height: 39px;
}
.forgetThePassword .container .grid-c1 >  .grid-c1-left .grid-c1-8 .img-code {
    position: absolute;
    top: 2px;
    right: 224px;
    z-index: 555;
}
.forgetThePassword .container .grid-c1 >  .grid-c1-left .grid-c1-8 .img-btn {
    position: absolute;
    top: 12px;
    right: 106px;
    z-index: 666;
    font-size: 16px;
}
.forgetThePassword .container .grid-c2 .top:after {
    content:"";
    width:50%;
    height:3px;
    background-color:#E2EDF1;
    position:absolute;
    bottom:50%;
    z-index:1;
    right:0;
    top: 15px;
}
.forgetThePassword .container .grid-c2 .top:before {
    content:"";
    width:50%;
    height:3px;
    background-color:#E2EDF1;
    position:absolute;
    bottom:50%;
    z-index:1;
    left:0;
    top: 15px;
}
.forgetThePassword .container .grid-c2 .top.before-0:before {
    width: 0;
    height: 0;
}
.forgetThePassword .container .grid-c2 .top.after-0:after {
    width: 0;
    height: 0;
}
.forgetThePassword .container .grid-c2 .top span {
    position: relative;
    z-index: 5;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    color: #1B1B1B;
    background-color: #E2EDF1;
}
.forgetThePassword .container .grid-c2 .top span i {
    display: none;
}
.forgetThePassword .container .grid-c2 .top span i.fa2 {
    display: block;
}
.forgetThePassword .container .grid-c2 .completed i.fa {
    display: block;
    color: #11B5FF;
}
.forgetThePassword .container .grid-c2 .completed i.fa2 {
    display: none;
}
.forgetThePassword .container .grid-c2 .completed span {
    background-color: #11B5FF;
    text-align: center;
    line-height: 30px;
}
.forgetThePassword .container .grid-c2 .completed span i.fa {
    color: #fff;
    padding-top: 8px;
    display: block;
}
.forgetThePassword .container .grid-c2 .completed span i.fa2 {
    display: none;
}
.forgetThePassword .container .grid-c2 .completed .top:after {
    content:"";
    width:50%;
    height:3px;
    background-color:#11B5FF;
    background-image: linear-gradient(-90deg, #E2EDF1, #11B5FF);
    position:absolute;
    bottom:50%;
    z-index:1;
    right:0;
    top: 15px;
}
.forgetThePassword .container .grid-c2 .completed .top:before {
    content:"";
    width:50%;
    height:3px;
    background-color:#11B5FF;
    position:absolute;
    bottom:50%;
    z-index:1;
    left:0;
    top: 15px;
}
.forgetThePassword .container .grid-c2 .completed .top.before-0:before {
    width: 0;
    height: 0;
}
.forgetThePassword .container .grid-c2 .completed .top.after-0:after {
    width: 0;
    height: 0;
}
.forgetThePassword .container .grid-c2 .completed-2 .top:after {
    content:"";
    width:50%;
    height:3px;
    background-color:#11B5FF;
    background-image: linear-gradient(-90deg, #11B5FF, #11B5FF);
    position:absolute;
    bottom:50%;
    z-index:1;
    right:0;
    top: 15px;
}
.forgetThePassword .container .grid-c2 .completed-2 .top:before {
    content:"";
    width:50%;
    height:3px;
    background-color:#11B5FF;
    position:absolute;
    bottom:50%;
    z-index:1;
    left:0;
    top: 15px;
}
.forgetThePassword .container .grid-c2 .completed-2 .top.before-0:before {
    width: 0;
    height: 0;
}
.forgetThePassword .container .grid-c2 .completed-2 .top.after-0:after {
    width: 0;
    height: 0;
}
.forgetThePassword .container .grid-c2 .bottom * {}

/* Register page styles */
main {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("__STATICFILEPATH__/shop/images/reg-bg.jpg");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.registration {
    background-color: #fff;
}
.registration .container {padding: 0;}
.registration .container .row{margin: 0;}
.registration .container .row * {font-size: 12px;}
.registration .container .row input {
    padding-left: 5px;
    padding-right: 5px;
    box-shadow: unset
}
.registration .container .grid-c1 .form-control{
    font-size: 12px;
    border-color: #DDE1E5;
    webkit-box-shadow:none;
    box-shadow:none;
}
.registration .container .grid-c1 .form-control:focus{
    border-color: #DDE1E5;
    webkit-box-shadow:none;
    box-shadow:none;
}
.registration .container .grid-c1 {
    position: absolute;
    left:70%;
    top:50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 700px;
    /*padding: 20px;*/
    margin: 0 auto;
    /*border: 1px solid #000;*/
    background-color: #fff;
}
.registration .container .grid-c1 > .grid-c1-left {
    float: left;
    width: 490px;
    padding: 10px 20px;
    border-right: 0;
}
.registration .container .grid-c1 >  .grid-c1-left .grid-c1-8 img {
    width: 100%;
    max-height: 39px;
}
.registration .container .grid-c1 >  .grid-c1-right {
    float: right;
    width: 210px;
    height: 520px;
    padding: 40px 35px;
    background-color: #36ACFF;
}
.registration .container .grid-c1 >  .grid-c1-right * {
    font-size: 12px;
    color: #fff;
}
.header02 .sub_nav{width: 100%;height:80px;position: relative}
.header02 .sub_nav> .clearfix {width:1200px;margin:auto;height:80px;position: absolute;left:0;z-index: 2;right: 0; }
.header02 .sub_nav> .clearfix>.logo {width: auto;height:80px;float: left;text-align: center;display: block;overflow: hidden}
.header02 .sub_nav> .clearfix>.logo >a {display: inline-block; height: 100%;float: left;}
.header02 .sub_nav> .clearfix>.logo >a >img{width: 230px;height:120px;}
.header02 .sub_nav> .clearfix>.logo >a:nth-child(2){
    width: 150px;
    height: 80px;
    line-height: 80px;
    font-size: 27px;
    color: #4F4F4F;
    font-weight: bold;
}
.header02 .menu a {
    line-height: 80px;
    font-size: 16px;
}
.is-invalid {
    text-color: red;
}
.password-toggle {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #aaa;
}

.password-toggle:hover {
color: #333;
}

/* Forgot password 2 page additional styles */
.forgetThePassword .container .grid-c1 * {font-size: 14px}
.forgetThePassword .container .grid-c1 .info {
    display: none;
}
.forgetThePassword .container .grid-c1 .info-true input {
    border: 1px solid orangered;
}
.forgetThePassword .container .grid-c1 .info-true .info {
    display: block;
    color: orangered;

}

#captcha-box {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}