@import "load_page.css";

@font-face {
    font-family: "Kabrio";
    src: url("../fonts/Kabrio-Abarth-Bold-trial.ttf");
}

@font-face {
    font-family: "Kabrio-Extra";
    src: url("../fonts/Kabrio-Abarth-Extralight-trial.ttf");
}

@font-face {
    font-family: "Kabrio-ligth";
    src: url("../fonts/Kabrio-Abarth-Light-trial.ttf");
}

@font-face {
    font-family: "Kabrio-ligth-italic";
    src: url("../fonts/Kabrio-Abarth-Light-Italic-trial.ttf");
}

.font-family-none{
    font-family: unset!important;
}

.register {
    text-align: center;
    margin-top: 35px !important;
    position: relative;
}
.spinner_country_select{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: fit-content;
    transform: translate(-50%, -50%);
}
.spinner_country_select .spinner-border{
    color: #ff0C55!important;
}
.spinner_country_select span{
    display: inline-flex;
    align-items: center;
    color: #ff0C55;
    font-size: 1.2rem;
}

.register h1{
    font-family: "Kabrio";
    font-size: 30pt;
    letter-spacing: -0.3pt;
    color: #2f3142;
    margin: 0;
    height: 45px;
}

.register h2{
    font-family: "Kabrio-ligth";
    font-size: 14pt;
    color: #2f3142;
    line-height: 1;
}

/*INICIO FORMULARIO*/
.form-register{
    width: 80%;
    margin: 30px auto 10px auto;
}

.register-input{
    font-family: "Kabrio-ligth";
    border-radius: 33px !important;
}
.errors {
    border: 1px solid red !important;
    color: #e81307;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: bold;
}
.form-control:focus {
     box-shadow: none !important; 
}
.register-input:focus{
    background: linear-gradient(#fff,#fff) padding-box, linear-gradient(to bottom, #ff0C55, #FF6959) border-box;
    color: #000;
    border: 1px solid transparent;
    --tw-ring-shadow: none;
}
.register-input:focus::placeholder{
    color: #ff0C55;
}

.fech-nac{
    font-family: "Kabrio-ligth";
    text-align: left;
    color: #808080;
    font-size: 16px;
    margin-bottom: 4px;
}
.fech-nac1{
    font-family: "Kabrio-ligth";
    text-align: center;
    color: #808080;
    font-size: 16px;
    margin-bottom: 4px;
}

.register-select{
    border-top-left-radius: 13px!important;
    border-top-right-radius: 13px!important;
    border-bottom-left-radius: 13px!important;
    border-bottom-right-radius: 13px!important;
    color: #808080!important;
    line-height: 1.3!important;
}
.register-select:focus {
    background: linear-gradient(#fff,#fff) padding-box, linear-gradient(to bottom, #ff0C55, #FF6959) border-box!important;
    border: 1px solid transparent!important;
    color: #ff0C55!important;
    border-top-left-radius: 13px!important;
    border-top-right-radius: 13px!important;
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
    --tw-ring-color: none!important;
    box-shadow: unset!important;
    border-radius: 50px;
}
.register-select option{
    color: #808080; 
}
/*FIN FORMULARIO*/

/* INICIO INPUTS FORMULARIOS */

.text-tc, .text-me{/*terminos y condiciones*/
    font-family: "Kabrio-ligth";
    color: #808080;
    font-size: .8vw;
    white-space: nowrap;
    padding-left: 5px;
}
.text-tc a{
    color: #FF6959!important;
    cursor: pointer;
}
.text-tc a span{
    color: #808080;
}
.input-tc, .input-me{/*mayoria de edad*/
    font-family: "Kabrio-ligth";
    margin-left: 8px;
    color: #000000;
}
.input-tc:focus, .input-me:focus{/*mayoria de edad*/
    --tw-ring-color: #000000;
}
.btn-register{
    font-family: "Kabrio";
    background: linear-gradient(70deg, #ff0C55, #FF6959);
    color: white !important;
    border-radius: 50px!important;
    width: 100%;
    font-size: 18px!important;
    line-height: 1!important;
    padding: 8px 12px 6px 12px!important;
}
.have-account{
    margin-top: 10px;
}
.have-account a,
.have-account a:hover{
    text-decoration: none;
    color: #000000;
}
.have-account span,
.have-account a:hover span{
    color: #ff0C55;
    font-weight: bold;
}
/* FIN INPUTS FORMULARIOS */

/* INICIO SELECT2 */
.select2-container{
    width: 102%!important;
}
.select2-selection__rendered{
    line-height: 2.4!important;
    padding-left: 10px!important;
    text-align: left;
    columns: #808080;
}
    /* ARROW */
.select2-selection__arrow{
    height: 37px!important;
    right: 6px!important;
}
/* FIN SELECT2 */


/* INICIO SELECT3 */
.select3-container{
    width: 102%!important;
}
.select3-selection__rendered{
    line-height: 2.4!important;
    padding-left: 10px!important;
    text-align: left;
    columns: #808080;
}
    /* ARROW */
.select3-selection__arrow{
    height: 37px!important;
    right: 6px!important;
}

/* FIN SELECT3 */

/* REDES */
.register-social{
    width: 15vw;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}
.register-social-content{
    justify-content: center;
}
.register-social-content a{
    width: 20%;
    padding: 0;
}
.register-icon {
    width: 80%;
}
.register-social-content a:hover .register-icon{
    filter: invert(22%) sepia(51%) saturate(7500%) hue-rotate(333deg) brightness(99%) contrast(109%);
}

/* CUADRO DE ERRORES */
.register-alert, .register-alert p{
    color: #e81307;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: bold;
}
.register-alerta p{
    color: #e81307;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: bold;
}



/* ----- INI MODAL TC ----- */
 
.modal-tc .modal-content{
    height: 650px;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
.modal-tc .modal-header{
    background: linear-gradient(70deg, #FF6959, #ff0C55);
    color: #ffffff;
}
.modal-tc .modal-body{
    overflow-y: scroll;
    overflow-x: hidden;
    text-align: justify;
}
.modal-tc .modal-body::-webkit-scrollbar {/* Tamaño del scroll */
    width: 8px;
    /* display: none;PARA VISUALIZAR LA BARRA */
}
.modal-tc .modal-body::-webkit-scrollbar-thumb {/* Estilos barra (thumb) de scroll */
    background: rgb(100, 100, 100);
    border-radius: 4px;
}
.modal-tc .modal-body::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}
.modal-tc .modal-body::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
/* Estilos track de scroll */
.modal-tc .modal-body::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 4px;
}
.modal-tc .modal-body::-webkit-scrollbar-track:hover, 
.modal-tc .modal-body::-webkit-scrollbar-track:active {
    background: #d4d4d4;
}
  
.close-modal-tc{
    cursor: pointer;
    font-size: 25px;
}
/* ---- FIN MODAL TC ---- */
.form-register .re_captcha_container{
    padding: 0;
}
.re_captcha_container .btn_re_captcha{
    padding: .375rem 0;
    font-size: 1.5rem;
}

.go_back_icon{
    background: #2f3142;
    color: #ffffff;
    position: relative;
    height: 75%;
    margin: 10%;
    border-radius: 5rem;
    width: 63%;
}
.go_back_icon:hover{
    background: #ff0C55;
}
.go_back_icon i{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    font-size: 1.2vw;
}
/* FULL HD */
@media only screen and (min-device-width : 2048px) {
    .text-tc, .text-me{
        font-size: .6vw;
    }
}
@media screen and (max-width : 703px) {
    .contenido{
        width: 59% !important;
    }
}

/*CELULAR*/
@media screen and (max-width: 1024px) {
    .register{
        margin: 0 !important;
        /* height: 100vh; */
        background: url("../img/login-2.png");
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%!important;
    }
    .register h1{
        font-size: 30px;
        height: fit-content;
    }
    .register h2{
        font-size: 18px;
        margin-bottom: 0;
    }
    .form-register{
        width: 90%;
        margin: 20px auto 10px auto;
    }
    .form-register .custom-control{
        margin: 5px 0;
    }
    .form-register .custom-control .text-tc,
    .form-register .custom-control .text-me{
        font-size: 3vw;
        hyphens: auto;
        white-space: unset;
        text-align: left;
        line-height: 1;
    }
    .form-register .custom-control .input-tc,
    .form-register .custom-control .input-me{
        margin-top: 2px;
    }
    .form-register .content-captcha {
        width: 30%;
    }
    .contenido{
        width: 55% !important;
    }
    .form-register .re_captcha_container{
        width: 10%;
    }
    .form-register .content-input-captcha{
        width: 60%;
    }

    .register-social{
        width: 80vw;
    }
    .go_back_icon i{
        font-size: 6vw;
    }
    .fake_placeholder span.reubicar{
        color: rgb(255, 0, 0);
        font-size: 13px;
        top: -5px;
        background: linear-gradient(black 70%, red 65%) !important;
    }
    .tooltipo-box{
        position: absolute;
        background-color: #000 !important;
        line-height: 20px;
        z-index: 500;
        text-align: center;
        color: rgb(228, 13, 13);
        font-size: 14px;
        padding: 5px;
        border-radius: 6px;
        right: -20px !important;
        bottom: 48px;
    }
}

/* Le quitamos el formato a los controles */
.spanEspecial{ 
	border: 1; 
    color: silver;
    display: inline-block;
	background: white;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 12px;
    transition: 0.25s;
	outline: none; 
    top: 12px;
    left: 9px;
    padding: 2px;
	resize: none; 
    background-color: white;
    position: absolute;
    width: auto;
    font-family: "Kabrio-ligth";
}

.fake_placeholder{ 
	margin-bottom: 0px !important;
    margin-left: 0px; 
}

/* el label emula el aspecto del input */
.fake_placeholder label{
    width: 100%;
	display: inline-block;
	padding: 1px;
	position: relative;
    /* font-family: "Kabrio-ligth"; */
}

.fake_placeholder span.reubicar{
	color: rgb(255, 0, 0);
	font-size: 13px;
	top: -10px;
    background: linear-gradient(transparent 20%, white 65%) !important;
}

.sinBorder{
    border-radius: 33px !important; 
    height: 38px;
}

.fake_placeholder .spanCorreo.reubicar{
	color: rgb(255, 0, 0);
	font-size: 13px;
	top: -2px;
    background-color: white !important;
}
.spanCorreo{ 
    display: inline-block;
    color: silver;
    left: 9px;
	border: 1; 
	background: white;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 12px;
	outline: none; 
	padding: 2px;   
	resize: none; 
    top: 20px;
    width: auto;
    font-size: 16px;
    transition: 0.25s;
    position: absolute;
    font-family: "Kabrio-ligth";
}
.spanCorreo input{
    font-family: none !important;
}
/*  Tooltip para mostrar el mensaje de cantidad minima de caracteres */
.tooltipo-box{
    position: absolute;
    background-color: #000 !important;
    line-height: 20px;
    z-index: 500;
    text-align: center;
    color: white;
    font-size: 14px;
    padding: 5px;
    border-radius: 6px;
    right: -50px;
    bottom: 48px;
}
.tooltipo-box::after{
    content:"";
    display: block;
    border-top: 7px solid #000;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    bottom: -5px;
    right: calc(50% -5px);
}
/* Icono de mostrar u ocultar la contrasela*/
 #icon{
    position: absolute;
    display: block;
    bottom: 10px;
    right: 1rem;
    
    user-select: none;
    cursor: pointer;
  }