.custom-color-primary{
   color: #3F3D56;
}

.login-btn{
   color: #fff;
   width: auto;
   cursor: pointer;
   background: var(--site_color) var(--gradient) 0% 0% no-repeat border-box;
   border-color: transparent;
   padding: 10px 20px;
   font-size: 1.5rem;
   border-radius: 7px;
}

.login-modal-page{
   display: none;

   font-family: 'Poppins';
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   
   z-index: 99999;
}
.login-modal-page .close{
   position: absolute;
   right: 30px;
   top: 30px;
   color: #fff;
   z-index: 999999999;
}

.login-modal-page .image{
   width: 56vw;
   height: 100%;
   position: absolute;
   z-index: 1;
   background-image: url('../images/login/market_background-login.jpg');
   background-position-y: bottom;
   background-position-x: left;
   background-repeat: no-repeat;
   background-size: cover;
}

.login-modal-page .image-register{
   width: 56vw;
   height: 100%;
   position: absolute;
   z-index: 1;
   background-image: url('../images/login/market_background-register.jpg');
   background-position-y: bottom;
   background-position-x: left;
   background-repeat: no-repeat;
   background-size: cover;
}

.login-modal-page .login-sidebar{
   width: 52vw;
   height: 100%;
   position: absolute;
   z-index: 2;
   right: 0;
   background-color: #3F3D56;
   padding: 50px;

   overflow-y: auto;
   z-index: 9999999;
}

.login-modal-page .login-sidebar .login-logo{
   width: 28%;
   margin: 0 auto;
}
.login-modal-page .login-sidebar .login-logo img{
   width: 100%;
}

.login-modal-page .login-sidebar .login-box{
   width: 100%;
   min-height: 60vh;
   background-color: white;
   border-radius: 20px;
   margin-top: 20px;
   display: flex;
   align-items: center;
   justify-content: start;
   flex-direction: column;
   padding: 10px 0;
   padding-bottom: 30px;
   position: relative;
   z-index: 9999999;
  
}

.login-box-register{
 
}


.login-modal-page .login-sidebar .login-box  .w50{
   width: 50%;
   padding: 5px;
}

.login-modal-page .login-sidebar .log-in{
   margin-top: 30px;
   margin-bottom: 30px;
}

.login-modal-page .login-sidebar .login-box h2{
   font-weight: normal;
}

.login-modal-page .login-sidebar .login-box form{
   width: 55%;
}

.login-modal-page .login-sidebar .login-box .form-register{
   width: 90%;   
}

#modalRegister input, #modalRegister select, #modalLogin input, #modalLogin select{
   padding: 4px ​20px !important;
}
.login-modal-page .login-sidebar .login-box .text-field input,
.login-modal-page .login-sidebar .login-box .text-field select{
   width: 100%;
    padding: 4px ​20px !important;
    font-size: 1.5rem;
    font-weight: normal;
    margin-bottom: 10px;
    border-radius: 7px;
    border: solid 1.5px #C5C5C5;
    text-align: center;
}
.login-modal-page .login-sidebar .login-box .text-field input::placeholder{
   font-size: 1.5rem;
   letter-spacing: 0px;
   color: #3F3D56;
   opacity: 0.7;
}

.login-modal-page .login-sidebar .login-box .login-btn{
   color: #fff;
   width: 100%;
   background: var(--site_color) var(--gradient) 0% 0% no-repeat border-box;
   border-color: transparent;
   padding: 10px ;
    font-size: 1.2rem;
    border-radius: 7px;
}



.login-modal-page .login-sidebar .login-box .login-btn:hover{
   background: #3F3D56;
}


.login-modal-page .login-sidebar .login-box .login-pink{
   color: #FB28FB;
   font-weight: normal;
   text-decoration: none;
}

.login-modal-page .login-sidebar .login-box p{
   font-size: 16px;
}

.login-row-register{
   width: 100%;
   margin: 10px 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
}


.login-modal-page .login-sidebar .login-box  .login-row{
   width: 100%;
   margin: 10px 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
}



 
.login-modal-page .login-sidebar .login-box  .login-row .radio,
.login-modal-page .login-sidebar .login-box  .login-row-register .radio{
   display: flex;
   /* flex-wrap: wrap; */
   /* justify-content: space-between; */
   align-items: center;
}



.login-modal-page .login-sidebar .login-box  .login-row input[type="radio"],
.login-modal-page .login-sidebar .login-box  .login-row-register input[type="radio"]{
   width: 30px;
   height: 30px;
   padding: 0;
   -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
   background-image: url('../images/login/radio.jpg');
   background-size: cover;
 }
 .login-modal-page .login-sidebar .login-box  .login-row input[type="radio"]:checked,
 .login-modal-page .login-sidebar .login-box  .login-row-register input[type="radio"]:checked {
   background-image: url('../images/login/radio-active.jpg');
 }

 .radio-label{
   font-size: 1rem;
   color: #3F3D56;
   margin-left: 5px;
}

.login-modal-page .login-sidebar .login-box  .login-row-or{
   width: 60%;
   margin: 10px 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;

}
.login-modal-page .login-sidebar .login-box  .login-row-or h2{
   margin: 0 10px;
   flex: 1;
   text-align: center;
}
.login-modal-page .login-sidebar .login-box  .login-row-or hr{
   border: none;
   flex: 2;
   height: 1px;
   background: #C5C5C5;
}
.m-0{
   margin: 0;
}

.login-modal-page .login-sidebar .login-box  .login-row-redes{
   width: 60%;
   margin: 20px 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}
.login-modal-page .login-sidebar .login-box  .login-row-redes a{
   width: 46px;
   height: 46px;
   margin: 0 5px;
}
.login-facebook{   
   background-image: url('../images/login/facebook.jpg');
   background-size: cover;
}

.login-facebook:hover{  
   background-image: url('../images/login/facebook-hover.jpg');
}

.login-google{
   background-image: url('../images/login/google.jpg');
   background-size: cover;
}

.login-google:hover{  
   background-image: url('../images/login/google-hover.jpg');
}