/*Default css*/

/*------------------------------------------------------------------

Template Name: Easystep - Ajax Based Multistep Advances Registration Form Wizard
Template Description: Registration Form Wizard is a Multistep Responsive form wizard. It's Bootstrap based PHP form with full Ajax support. It can be easily customized as it is well documented and developed using latest web technologies. This form will be a perfect choice for all registration based websites.
Version: 1.0
Author: Phplime
-------------------------------------------------------------------*/


/*==========================================

[TABLE OF CONTENTS]

    1. Default Styles
    2. Form Styles

======================================*/

/*===================
 1. Default Styles 
================================*/

* {
  box-sizing: border-box;
}

body {
    color: #333;
    background-size:cover;
    font-size: 15px;
    line-height: 1.8;
    overflow-x: hidden;
    background: #fff;
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
}
h2{
    color:#333 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-control-label::before {
    cursor:pointer !important;
    color: #fff !important;
    border-color: #007bff !important;
    background-color: #007bff !important;
}

.custom-switch .custom-control-label::after {
    cursor:pointer !important;
    background-color: white !important;
}


input.invalid, select.invalid, textarea.invalid {
  background-color: #ffdddd;
  border-color: red;
}


#nextBtn:not([disabled]){
    border: 2px solid #009EE3 !important;
}

#boton_garantia:not([disabled]){
    border: 2px solid #009EE3 !important;
}

#boton_garantia:not([disabled]):hover{
    border: 2px solid #007CAA !important;
}

#boton_garantia:not([disabled]):focus{
    border: 2px solid #007CAA !important;
}

button:active, 
button:focus,
button:focus-visible
 {
     outline:none !important; /* here configure as your needs */

  }



#nextBtn:not([disabled]):hover{
    border: 2px solid #007CAA !important;
}

/*remove chrome autofill yellow background*/
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
.p-0{
    padding: 0;
}

.pt-50{
    padding-top: 50px;
    padding-bottom: 50px;
}

.pt-15{
    padding-top: 15px;
}

.mt-50{
    margin-top: 50px;
}

.mt-10{
    margin-top: 10px;
}

.tab.tab_active{
  display: block;
  transition: all 1s ease-in-out;
}
/*-----------------------------
 2. Form Styles 
-------------------------------*/

/* 2.1 Form Content Area */

.form_content {
  background:#ffffff;
  margin: 0 auto;
  padding: 2% 4% 5%;
  width: 85%;
}

.form_content .text-success {
    border: 1px solid green;
    color: #333333;
    font-size: 16px;
    padding: 15px 25px;
    line-height: 1.2;
    color: green;
}

.form_content .text-danger {
    border: 1px solid #E7272D;
    font-size: 16px;
    padding: 15px 25px;
    line-height: 1.2;
}

.loan-text {
    float: right;
    font-size: 20px;
    font-weight: 700;
}

.selectize-input {
    
    padding: 0px 12px !important;
}

.selectize-input>*{
    padding-top:5px !important;
}

.tab {
  display: none;
}

.top-area {
  border-bottom: 1px dashed #ccc;
  margin-bottom: 25px;
  padding-bottom: 20px;
  font-family: Open Sans,Arial,sans-serif;
  color:#007eb3 !important;
}

/* 2.2 Form Input Related CSS */

.main-form-area .fa {
    padding-right:3px;
}
.main-form-area{
    background: #fff;
}
.main-form-area input {
    border-radius: 0px;
    height: 35px;
    padding: 10px;
    width: 100%;
}

.main-form-area label {
    /*font-weight:bold;
    text-transform: uppercase;*/
    font-size: 13px;
    color: #666;
}

.main-form-area select {
    box-sizing: border-box;
    font-family: Open Sans,Arial,sans-serif;
    height: 36px;
    max-width: 100%;
    min-width: 100%;
    outline: none;
    padding: 10px 15px;
    padding-left: 15px;
    text-indent: 0.01px;
    text-overflow: "";
    width: 100%;
    font-size:1rem !important;
    padding-bottom: 0;
    padding-top: 0;
}

.main-form-area textarea {
    border-radius: 0px;
    padding: 10px;
    width: 100%;
}



/* 2.3 Form Button Related CSS */

.button-area {
    margin-top: 20px;
    display: block;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: right;
    
}

.button-area button {
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 15px;
  padding: 8px 20px 10px;
}

.button-area button:hover {
  opacity: 0.8;
}

.form-step-button {
    margin-top:40px;
    text-align:center;
}

#prevBtn {
  background-color: white !important;
  color:#D50C2F !important;

}


.user_profile_image {
    height: 50px;
    width: 50px;
}


/* 2.4 Form widget Related CSS */


/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
    position: relative;
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-between;
}
#progressbar li{
    text-align: center;
    
}
#progressbar li span {
    border-radius: 49%;
    height: 50px;
    width: 50px;
    display: inline-block;
    position: relative;
    color: #222;
    line-height: 23px;

    z-index: 2;
    line-height: 48px;
    font-weight: bold;
}

#progressbar li span:before {
    content: counter(step);
    counter-increment: step;
    color: #607382;
    font-size: 14px;
    font-weight: 500;
}

#progressbar li.active span:after {
    content: "";
    position: absolute;
    height: 40px;
    width: 40px;

    top: 5px;
    left: 5px;
    border-radius: 100%;
    z-index: -1;
    background: #cfd3d9;
    color: #607382;
}

#progressbar li span::after {
    content: "";
    position: absolute;
    height: 40px;
    width: 40px;
    background: #fff;
    top: 5px;
    left: 5px;
    border-radius: 100%;
    z-index: -1;
    border: 2px solid #ddd;
}

#progressbar li.active span{
    background: transparent;
    color: white;
}

#progressbar li::after {
    position: absolute;
    background: #cfd3d9;
    height: 2px;
    content: "";
    width: 100%;
    top: 32%;
    left: -47%;
    z-index: 1;
    transform: translate(50%);
}
ul#progressbar li.finish span:before,  ul#progressbar li.finish span:after{
    background: #585e6a!important;
    color: white;
    font-family:"FontAwesome";
    content: "\f00c";
}

ul#progressbar li.finish span:after{

    content: "";
}


.user_image {
    border: 1px solid #ddd;
    height: 150px;
    width: 150px;
    margin: 0 auto;
    border-radius: 100%;
    position: absolute;
    top: -82%;
    left: 50%;
    transform: translate(-50%,0%);
    background: #fff;
}

.single_top_user_section {
    border: 1px solid #ddd;
    padding: 0 2%;
    padding-top:20px !important;
}
.image_area {
    height: 102px;
    position: relative;
    width: 100%;
}


label.p_image {
    display: block;
    position: relative;
    border-radius: 100%;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    height: 100%;
    width: 100%;
}
.p_image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%
}

label.p_image::before {
    content: "";
    position: absolute;
    background: rgba(0,0,0,.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

label.p_image.before_none::before {
    content: none; 
}

.p_img_text {
    position: absolute;
    color: #fff;
    font-size: 14px;
    vertical-align: middle;
    top: 50%;
    transform: translate(-7%, -56%);
    left: 13%;
}


.p_img_text p {
    padding: 0;
    margin: 0;
    line-height: 20px;
}
.fz-20{
    font-size: 20px;
}


.loading_icon {
  display: block;
  font-size: 50px;
  height: 150px;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  padding-top: 46px;
}

.sorry_text i {
  font-size: 35px;
}
.sorry_text h3 {
  margin: 0;
  font-size: 20px;
}
.sorry_text {
  padding: 32px;
}
.custom_btn {
    padding: 10px 20px;
    border-radius: 0;
}
.up_user_img.invalid{
    border: 2px solid red;
}

span.error{
    color:red;
}

/*   style 2, style 3, style 4
================================================== */
.easy_form_content_area{
     min-height: 100vh;
     background-color:#f2f2f2!important;
     padding-top:0px !important;
}

.easy_form_content_area.bg_dark {
    font-family: Open Sans,Arial,sans-serif;
}

.full_page_easystep_form .easy_step_wapper{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100vh;
}

ul#easy_step_progressbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    counter-reset: step;
    color: #fff;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
}

ul#easy_step_progressbar li {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    font-size: 12px;
    text-transform: uppercase;
}
ul#easy_step_progressbar li p{
    font-size: 9px;
}

ul#easy_step_progressbar li::before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    line-height: 20px;
    display: block;
    background: #fff;
    color: #000;
    border-radius: 3px;
    margin: 0 auto 5px auto;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    position: relative;
}

ul#easy_step_progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*put it behind the numbers*/
}

/*progressbar connectors*/

ul#easy_step_progressbar li:first-child:after {
    content: none; 
}
ul#easy_step_progressbar li.active:before,  ul#easy_step_progressbar li.active:after{
    background: #037fff;
    color: white;
}
ul#easy_step_progressbar  li.finish:before,  ul#easy_step_progressbar  li.finish:after{
    background: #037fff!important;
    color: white;
}
.easy_form_content_area .user_image {
    border: 1px solid #ddd;
    height: 100px;
    width: 100px;
    margin: 0 auto;
    border-radius: 100%;
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%,0);
    background: #fff;
}
.easy_step_tab input,
.easy_step_tab select,
.easy_step_tab textarea {
    height: 47px!important;
    border-radius: 3px;
    width: 100%;
    padding-left: 10px;
    color: #777;
}
.easy_step_tab textarea {
    min-height: 80px!important;
}

.easy_step_user_section {
    /*border: 1px solid #ddd;*/
    
}
.easy_step_tab {
    margin-top: 14%;
    padding: 20px;
    padding-bottom: 2px;
    background: #fff;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    margin-bottom: 20px;
}

/* style 5, 6
================================================== */


.single_form img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.single_form {
    border: 1px solid #ddd;
    height: 350px;
    overflow: hidden;
    position: relative;
    transition: .5s;
}

.single_form:hover:before{
    visibility: visible;
    transition: .5s;
    transform:scale(1);
}

.single_form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    visibility: hidden;
    transform:scale(0);
    transition: .5s;
}

.modal_form {
    padding: 0;
    box-shadow: none;
    margin: 0;
}

.modal_list {
  padding: 50px 23px;
  background: #fff;
}
.modal_list ul {
  display: flex;
  flex-direction: column;
}
.modal_list ul li {
  color: #222;
  font-size: 17px;
  padding: 7px;
}

/*   button area
================================================== */

.button_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
}

.button_area button {
    width: 100%;
    padding: 10px;
    border-radius: 3px;
    margin: auto 4px auto 5px;
}

/*   label
================================================== */
.easy_step_label label {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.easy_step_label label i {
    margin-right: 6px;
}

/*   Circle
================================================== */
.easy_step_wapper.circle ul#easy_step_progressbar li::before{
    height: 30px;
    border-radius: 100%;
    line-height: 30px;
}

.easy_step_wapper.circle ul#easy_step_progressbar li::after{
    top:15px;
}


/*   square
================================================== */
.easy_step_wapper.square ul#easy_step_progressbar li::before{
    height: 30px;
    border-radius: 0;
    line-height: 30px;
}

.easy_step_wapper.square ul#easy_step_progressbar li::after{
    top:15px;
}

.easy_step_wapper.square .form-control{
    border-radius: 0;
}

.easy_step_wapper.square .btn{
    border-radius: 0;
}

/*   dark
================================================== */

.easy_form_content_area.bg_dark {
    background: #191d2b;
    min-height: 100vh;
}


.easy_form_content_area.bg_dark ul#easy_step_progressbar li.active:before,
.easy_form_content_area.bg_dark ul#easy_step_progressbar li.active:after {
    background: #037fff;
    color: white;
}

.easy_form_content_area.bg_dark ul#easy_step_progressbar li:after{
    background: #037fff;
}

.easy_form_content_area.bg_dark .user_image{
    border-color: #037fff;
}
.easy_form_content_area #prevBtn{
    background-color: white !important;
    color:#D50C2F !important;
    border-radius: 5px !important;
    border:2px solid #D50C2F !important;
}

.easy_form_content_area.bg_dark #prevBtn{
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.easy_form_content_area.bg_dark #nextBtn{
    color: #fff;
    background-color: #037fff;
    border-color: #037fff;
}
/*   
================================================== */
.easy_form_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.easy_form_img{
    height: 100vh;
    position: relative;
}
.easy_form_img::before{
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    position: absolute;
    
}
.easy_form_text {
    position: absolute;
    color: #fff;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    padding: 40px;
}
.easy_form_text h2{
    color: black;
    font-family: Open Sans,Arial,sans-serif;
}

.easy_error_msg{
    font-size: 13px;
    padding: 10px 5px;
    margin-bottom: 10px;
}

.easy_error_msg.text-danger{
    border: 1px solid red;
}

.easy_error_msg.text-success{
    border: 1px solid green;
}

.easy_form_text p {
    font-size: 14px;
    line-height: 20px;
}

/*   social icon
================================================== */

.easy_social_area ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.easy_social_area ul li a {
    color: #fff;
    display: block;
    height: 40px;
    width: 40px;
    border: 2px solid #037fff;
    border-radius: 100%;
    font-size: 24px;
    line-height: 35px;
    margin: 3px;
    transition: .5s;
}
.easy_social_area ul li a:hover{
    border-color: #ddd;
    transition: .5s;
    color: #037fff;
}

.easy_social_area ul li {
    text-align: center;
}

.mx-wd{
    max-width: 780px; 
}
.image_connected_form {
    display: table;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    background: #000;
    border: 1px solid #000;
    box-shadow: 0 0 5px #222;
    margin: 0 auto;
}
.easy_form_img.image_connected {
    height: 100%;
    width: 50%;
    display: table-cell;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: cover !important;
}
.image_connected_form  .easy_step_tab{
    background: #000;
}
.image_connected_form label{
    color: #fff;
}

.image_connected_form .easy_step_tab {
    margin-top: 14%;
    padding: 20px;
    padding-bottom: 0;
    background: inherit;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
     margin-bottom: 0px; 
}

@media (max-width: 767px) {
    .easy_form_img.image_connected {
        display: block;
        width: 100%;
        padding-top: 400px;

    }

}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../images/loader.gif');
    background-repeat: no-repeat; 
    background-color: #FFF;
    background-position: center;
}



/*   recaptcha
================================================== */

.recaptcha_area {
    margin-bottom: 10px;
}

.g-recaptcha.invalid {
    border: 2px solid red;
    display: inline-block;
}


/* home page layout
================================================== */

.top_contet {
  text-align: center;
  padding-top: 50px;
  color: #fff;
}
.top_contet h4 {
  color: #fff;
  text-transform: capitalize;
}

.single_form{
    margin-bottom: 30px;
}
.layout_heading {
    padding: 20px 0;
    color: #fff;
    font-size: 29px;
}


.easy_step_home_page{
    background: #191d2b;
}

.single_form h4 {
    color: #fff;
    position: absolute;
    bottom: -7px;
    left: 0;
    text-shadow: 0 0 5px #000;
    background: rgba(0,0,0,.5);
    display: block;
    width: 100%;
    padding: 5px 10px;
    font-family: Open Sans,Arial,sans-serif;
    font-size: 23px;
}

.none{
    display: none;
}
.block{
    display: block;
}

/* custom radio
================================================== */
.easy_radio {
    height: 90px;
    border: 1px solid #ddd;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    margin-right: 9px;
    width: 22%;
    transition: .5s;
    margin-bottom: 10px;
    line-height: 15px;
}

.radioYesNo {
    height: 65px;
    
    width: 8%;
}

.easy_radio i {
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 28px;
    font-size: 21px;
}

.gender_radio {
    height: 80px;
    border: 1px solid #ddd;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    margin-right: 9px;
    width: 47%;
    transition: .5s;
    margin-bottom: 10px;
}
.gender_radio:hover{
    border-bottom: 5px solid #037fff;
}

.gender_radio.active{
    border-bottom: 5px solid #037fff;
}
.gender_radio i {
    border: 1px solid #ddd;
    height: 30px;
    width: 30px;
    border-radius: 100%;
    text-align: center;
    line-height: 28px;
    font-size: 21px;
}

.custom_radio {
    display: flex;
    align-items: center;
}

input.input_sex:checked{
}
.custom_radio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}







/*   custom radio btn
================================================== */

.easy_radio{
    position: relative;
}


/* Hide the browser's default radio button */
.easy_radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background:  #009EE3 ;
  opacity: 0;
  transition:.5s;
}


.easy_radio input:checked ~ .checkmark {
  background-color: #007CAA ;
  opacity: 1;
}
.easy_radio:hover input ~ .checkmark {
  opacity: 1;
}





/*----------------------------------------------
Sidebar this section in optional
----------------------------------------------*/
.sidebarWrapper {
    width: 250px;
    height: 100vh;
    position: fixed;
    background: #fff;
    display: flex;
    flex-direction: column;
    left: 0;
    z-index: 9;
    transition: all .3s ease-in-out;
    box-shadow: 0 0 5px rgb(0 0 0 / 30%);
    overflow-y: scroll;
}

.sidebarWrapper.hideSidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    background: #fff;
    display: flex;
    flex-direction: column;
    z-index: 9;
    left: -300px;
    transition: all .3s ease-in-out;
}

.sidebarHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    color: #000;
}
.sidebarHeader a{
    display: block;
    padding: 10px;
}
.sidebarHeader a i{
    color: red;
}
a.showSidebar {
    position: fixed;
    left:-50px;
    top: 20px;
    z-index: 10;
    background: #fff;
    padding: 5px 10px;
    font-size: 20px;
    box-shadow: 0 0 5px #ddd;
    transition: all .3s ease-in-out;
}
a.showSidebar.active{
    left: 11px;
    transition: all .3s ease-in-out;
    color: #000;
}

ul.leftSidebar {
    display: flex;
    flex-direction: column;
    width: 100%;
}

ul.leftSidebar li {
    width: 100%;
}

ul.leftSidebar li a {
    padding: 7px 10px;
    color: #000;
    width: 100%;
    margin: 2px 0;
    font-size: 12px;
    display: block;
    text-decoration: none;
}

ul.leftSidebar li a:hover {
    background: #eee;
    text-decoration: none;
}
h4.listHeading {
    font-size: 18px;
    padding: 0 10px 6px;
    border-bottom: 1px solid #eee;
}
.sidebarList {
    margin-bottom: 25px;
}
ul.leftSidebar.theme li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    font-size: 14px;
    padding: 5px 0 5px 10px;
}

ul.leftSidebar.theme li p {
    display: flex;
    align-items: center;
}
ul.leftSidebar.theme li a {
    border: 1px solid #ddd;
    padding: 1px 5px;
    font-size: 10px;
    border-radius: 5px;
    margin-right: 5px;
}
.theme-color.active, .step-shape.active{
    background: #1b262c;
    color:#fff!important;
    border-color: #263849;
}

.bg_dark .intl-tel-input .country-list, .bg_dark .selected-flag{
    background: #263849;
}
.bg_dark .selected-flag{
    box-shadow: none!important;
}
ul.leftSidebar li.active a {
    background: #eee;
    color: rgba(41, 199, 172, 1);
}

.input-box {
  display: flex;
  align-items: center;
  max-width: 300px;
  background: #fff;
  border: 1px solid #a0a0a0;
  border-radius: 4px;
  padding-left: 0.5rem;
  overflow: hidden;
  font-family: sans-serif;
}

.input-box .prefix {
  font-weight: 300;
  font-size: 14px;
  color: #999;
}

.input-box input {
  flex-grow: 1;
  font-size: 14px;
  background: #fff;
  border: none;
  outline: none;
  padding: 0.5rem;
}

.input-box:focus-within {
  border-color: #777;
}




/* Tooltip text */
.tooltiptext {
  font-size:14px;
  visibility: hidden;
  background-color: #007CAA;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;


  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -25px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;

}

/* Tooltip arrow */
.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #007CAA transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipEH:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/*----------------------------------------------
End sidebar
----------------------------------------------*/