.registration {
    background: url(../image/bg/main-bg.jpg);
}
.registration-inside {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
}
.leftside, .rightside {
    min-height: 480px;
    padding:35px;
} 
.leftside {
    background: #000;
    border-radius: 20px 0 0 20px;
    color:#fff;
}
.rightside {
    background: #fff;
    border-radius: 0 20px 20px 0;
    padding-left: 0;
}
.leftside a {color:#fff;}
.rightside h5 {
    font-size: 25px;
    font-family: 'JostSemiBold';
    text-transform: capitalize;
    text-align: left;
    color: #000;
    letter-spacing: 0.02em;
    margin: 0 0 5px;
}
.rightside p {
    font-size: 17px;
    font-family: 'JostRegular';
    text-align: left;
    text-transform: capitalize;
    color: #6e6e6e;
    letter-spacing: 0.02em;
    margin: 0;
}
.formrow {margin-top:25px;}
label.profile_details_text {
    font-size: 16px;
    font-family: 'JostRegular';
    color: #151B28;
    text-align: left;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    margin: 0 0 5px;
    width: 100%;
    display: block;
}
.rightside input.btn{
    font-size: 16px;
    font-family: 'JostSemiBold';
    width:100%;
    margin:15px auto 0;
    letter-spacing: 0.03em;
}
.rightside input.btn.btn-success {
    background: #000;
    border-color: #000;
}
.rightside input.btn.backbtn {
    background:#EBEEEE;
    border-color:#EBEEEE;
}
.rightside input.btn.backbtn:hover {border-color:#000;}
.rightside input.btn.btn-success:hover {background:#fff;color:#000;}

/*Start Left side*/
.progress_bar li.active {color:#fff;}
.progress_bar li {
    position: relative;
    margin-left: 40px;
    margin-top: 50px;
    counter-increment: container 1;
    color: #787a7a;
    font-family: 'JostSemiBold';
    font-size: 17px;
    letter-spacing: 0.03em;
    text-transform: capitalize;
}
.progress_bar li.active::before {
    color: #fff;
    border: 1px solid #fff;
}
.progress_bar li::before {
    content: counter(container);
    line-height: 25px;
    text-align: center;
    position: absolute;
    height: 25px;
    width: 25px;
    border: 1px solid #787a7a;
    border-radius: 50%;
    left: -40px;
    top: -5px;
    z-index: 10;
    background-color: #4c4c4c;
}
.progress_bar li:first-child::after {background-color:transparent;}
.progress_bar li::after {
    content: '';
    position: absolute;
    height: 90px;
    width: 2px;
    background-color: #787a7a;
    z-index: 1;
    left: -27px;
    top: -70px;
}
/*End Left Side*/

/*Start OTP*/
.txt-otp p {
    text-align: center;
    color: #777;
    font-family:'JostRegular';
    text-transform: capitalize;
    font-size: 16px;
    margin: 0;
    letter-spacing: 0.03em;
}
.frm-sec p.verified {
    color: #1c7c06 !important;
    font-weight: 600;
}
.frm-sec p.incorrect {
    color: #E01705 !important;
    font-weight: 600;
}
.inside-otp input[type=text] {
    width: 100%;
    padding: 8px 20px !important;
    margin: 8px 0;
    display: inline-block;
    border: none;
    box-sizing: border-box;
    background-color: #dbebff;
    font-family:'JostRegular';
    font-size: 17px;
    text-align: center;
    letter-spacing: 0.03em;
    color:#000;
}
.inside-otp input, .inside-otp select {
    border-radius:3px;
    background-color: rgba(255,153,0,0.1);
    border-color: rgba(255,153,0,0.1);
    color: #9da3b0;
    font-size: 15px;
    text-transform: capitalize;
    font-family:'JostSemiBold';
}
.inside-otp .submit-btn {
    background-color: #000;
    color: #fff;
    font-family:'JostSemiBold';
    text-transform: capitalize;
    font-size: 16px;
    line-height: 24px;
    padding: 10px 0px !important;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    display: block;
    letter-spacing: 0.03em;
    margin: 10px 0 0;
}
.timelimt h5 {
    text-align: center;
    font-size: 14px;
    font-family: 'JostRegular';
    color: #888;
    text-transform: capitalize;
    margin: 10px auto;
    letter-spacing: 0.05em;
}
.otpsend p {
    text-align: center;
    margin: 20px auto 0;
    font-size: 16px;
    font-family:'JostSemiBold';
    color: #448c05;
    text-transform: capitalize;
}
.inside-otp p.resend {
    font-size: 14px;
    font-family:'JostRegular';
    color: #777;
    text-transform: capitalize;
    text-align: center;
    margin: 10px 0;
}
.resend a {
    font-family:'JostSemiBold';
    color:#777;
}
/*End OTP*/
.documents input {margin:0 0 10px;}


/* Smartphones (portrait and landscape) */
@media only screen and (max-device-width : 319px) {
    .registration .container {padding:0;}
    .leftside, .rightside {min-height:auto;padding:15px !important;border-radius:0 !important;}
    .progress_bar li {margin-top:35px;font-size:17px;letter-spacing:0.03em;}
    .progress_bar li::after {height:75px;top:-60px;}
    .rightside h5 {font-size:19px;}
    .rightside input.btn {margin:0px;}
    .rightside p {font-size:15px;}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .registration .container {padding:0;}
    .leftside, .rightside {min-height:auto;padding:15px !important;border-radius:0 !important;}
    .progress_bar li {margin-top:35px;font-size:17px;letter-spacing:0.03em;}
    .progress_bar li::after {height:75px;top:-60px;}
    .rightside h5 {font-size:19px;}
    .rightside input.btn {margin:0px;}
    .rightside p {font-size:15px;}
}

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 481px) and (max-device-width : 575px) {
    .registration .container {padding:0;}
    .leftside, .rightside {min-height:auto;padding:15px !important;border-radius:0 !important;}
    .progress_bar li {margin-top:35px;font-size:17px;letter-spacing:0.03em;}
    .progress_bar li::after {height:75px;top:-60px;}
    .rightside h5 {font-size:19px;}
    .rightside input.btn {margin:0px;}
    .rightside p {font-size:15px;}
}

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 576px) and (max-device-width : 767px) {
    .registration .container {padding:0;margin:0 auto;max-width:90% !important;}
    .leftside, .rightside {min-height:auto;padding:15px !important;}
    .progress_bar li {margin-top:28px;font-size:16px;letter-spacing:0.03em;}
    .progress_bar li::after {height:75px;top:-60px;}
    .rightside h5 {font-size:19px;}
    .rightside input.btn {margin:0px;}
    .plof {padding-left:0;}
    .prof {padding-right:0;}
    .leftside {height:100%;}
    .leftside {border-radius:10px 0 0 10px;}
    .rightside {border-radius:0 10px 10px 0;}
    .rightside p {font-size:15px;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 991px) { 
    .leftside, .rightside {padding:25px;}
    .progress_bar li {font-size:16px;}
    .plof {padding-left:0;}
    .col-lg-5.col-sm-5.prof {padding-right:0;}
}

@media only screen and (min-device-width : 992px) and (max-device-width : 1024px) {
    

}

@media only screen and (min-device-width : 1025px) and (max-device-width : 1099px) {
    

}

@media only screen and (min-device-width : 1100px) and (max-device-width : 1199px) {
    


}