html {
    max-height: 100vh;
    overflow: hidden;
}

body {
    background-color: var(--colorFondo);
    margin: 0px;
    padding: 0px;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    font-size: var(--p-1);
}

.onlymovile {
    display: none;
}

.onlypc {
    display: block;
}

#login-nagusia {
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: auto;
    transition: .1s;
    z-index: 280;
    background: var(--colorFondo);
}

#fndirudi {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 5;
    transition: 1s;
    opacity: 0;
}

#fndhover {
    position: absolute;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0.9;
    background-color: #f8fafb;
}

#screenChrg {
    position: absolute;
    z-index: 300;
    height: 100vh;
    width: 100vw;
    transition: 1s;
    display: flex;
    align-items: center;
    background-color: var(--colorFondo);
}

#loadingscreenOne {
    width: 40vw;
    height: auto;
    text-align: center;
    background: rgb(161, 0, 61);
    background: linear-gradient(135deg, rgba(161, 0, 61, 1) 0%, rgba(229, 0, 102, 1) 100%);
    opacity: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#loadingscreenOne_text {
    width: 100%;
    background-color: var(--colorFondoClaro);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#loginpant {
    z-index: 30;
    height: auto;
    width: 450px;
    max-width: 90vw;
    transition: 1s;
    position: relative;
    left: 0vw;
    margin: auto;
    padding-bottom: 20px;
}

#poweredBy {
    margin-bottom: 80px;
    text-align: center;
    ;
}

#login {
    width: auto;
    height: auto;
    transition: 0.5s;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-items: center;
    max-height: 100vh;
    overflow: auto;
    border-radius: 10px;
    background-color: var(--colorFondoClaro);
    padding: 30px;
    max-width: 90vw;
}

#lgnbtnesMobile {
    display: none;
}

#loginSecundaria {
    width: 100%;
    height: 90px;
    transition: 0.5s;
    overflow: hidden;
    color: var(--colorTexto);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 40px;
    margin-bottom: 10px;
}

#loginSecundaria .loginSecunPleca {
    width: 50vw;
    height: auto;
    position: absolute;
    z-index: 100;
}

#loginSecundaria img {
    max-width: 120px;
    height: auto;
    position: relative;
    z-index: 200;
    max-height: 75px;
}

#socialMedia {
    position: fixed;
    width: 100vw;
    bottom: 20px;
    right: 20px;
    z-index: 230;
    text-align: center;
}

#socialMedia i {
    font-size: 20px;
    color: var(--colorTexto);
    margin-left: 20px;
    margin-right: 20px;
    transition: .3s;
    cursor: pointer;
}

#socialMedia i:hover {
    color: var(--colorInteraccion)
}

#cntloginsecun {
    width: 200%;
    margin: 20px;
    transition: 0.5s;
}

#regissboton2 {
    border: 1px solid white;
    color: white;
}

#regissboton2:hover {
    border-width: 0px;
}

.regissboton {
    padding: 15px;
    color: #fff;
    transition: 0.5s;
    border-radius: 3px;
    margin-top: 25px;
    width: 200px;
    text-align: center;
    cursor: pointer;
    font-size: 25px;
    margin-right: 60px;
    transition: 0.5s;
    font-size: 17px;
}

#regissboton:hover {
    background: white !important;
}

#fraserandom {
    width: var(--col-3);
    text-align: left;
    font-size: var(--h1);
    color: var(--colorPrincipal);
    font-weight: bold;
}

#negoreg {
    font-size: var(--p-1);
    width: var(--col-3);
    text-align: left;
}

#regissecun {
    margin-top: 40px;
    font-size: 16px;
}

#regissecunNoinnet {
    margin-top: 40px;
    font-size: 16px;
}

.separador {
    background-color: transparent;
    height: 1px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: none;
}

#loginpant input,
#loginpant select {
    width: 100%;
    padding: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 3px;
    border: 1px solid #C5C8C9;
    margin-bottom: 10px;
    background-color: white;
}

.loginIcon {
    cursor: pointer;
    font-size: 30px;
    padding: 25px;
    color: #fff;
    border: none;
    transition: 0.5s;
    margin-left: -40px;
    margin-right: -40px;
    position: absolute;
    bottom: 0;
    width: 400px;
}

#subscreen {
    height: 40px;
    margin: auto;
    padding-top: 40px;
    font-size: 30px;
    width: 500px;
    color: white;
    text-align: center;
}

#subscreen div {
    width: 33.3%;
    opacity: 0;
    transition: 1s;
}

#sbs1 {
    text-align: left;
}

#sbs3 {
    text-align: right;
}

#sarrera {
    transition: .5s;
    width: 100%;
    margin: auto;
}

#logmobatzera {
    display: none;
}

#pasahitzaahaztuta {
    transition: 1s;
    min-height: 305px;
    display: none;
    opacity: 0;
}

#makeVerifySecurity {
    transition: 1s;
    min-height: 305px;
    display: none;
    opacity: 0;
}

#erregistratu {
    transition: 1s;
    min-height: 305px;
    display: none;
    opacity: 0;
    padding-bottom: 100px;
}

.ongietorriLogin {
    font-size: 45px;
    text-align: center;
    color: #666666;
    margin-bottom: 30px;
    margin-top: 30px;
}

#mvsp {
    overflow: hidden;
    text-align: center;
    font-size: 25px;
    margin-bottom: 30px;
}

#mvsp div {
    padding: 10px;
    opacity: 0;
    transition: 0.5s;
    height: 40px;
}

#barracargalogin {
    height: 10px;
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 40px;
}

#brccrgcmpl {
    height: 10px;
}

#bertsioLogin {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: white;
    text-align: right;
    font-size: 15px;
    width: 120px;
    z-index: 100;
}

.nogblhover:hover .logselectemprimg {
    background-color: #FFFFFF;
}

#logopais {
    font-family: 'Cuerpo';
    text-align: right;
    font-size: 40px;
    width: 480px;
    margin: auto;
    margin-top: 20px;
    color: white;
}

@keyframes animalogosplash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

#logosplash {
    width: 250px;
    animation-name: animalogosplash;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

#zendhaSplash {
    font-size: var(--h1);
    color: white;
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 30px;
}

.logologin {
    width: 300px;
    text-align: center;
    margin: auto;
    margin-bottom: 40px;
    margin-top: 40px;
    transition: 0.5s;
}

.logologin img {
    height: 60px;
}

#logologin2 {
    display: none
}

#logologin {
    display: block;
}

.errepang {
    display: none;
}

.reghover {
    cursor: pointer;
    padding: 10px !important;
}

.reghover span {
    font-size: 25px !important;
    font-weight: bold;
}

.reghover .erregblqicon {
    font-size: 25px !important;
    width: 45px;
    height: 45px;
    padding: 10px;
    text-align: center;
    float: left;
}

.reghover .erregblqtxt {
    margin-left: 60px;
}

.reghover:hover {
    background-color: #85ba4b;
    color: white;
}

@media(max-width: 750px) {
    .onlymovile {
        display: block;
    }
    .onlypc {
        display: none;
    }
    #login {
        width: 100%;
        margin-bottom: 0px;
        height: 100%;
        margin-top: 0px;
    }
    #cntloginsecun {
        width: 100%;
        margin: auto;
    }
    #login input {
        color: #333333;
    }
    #login select {
        color: #333333;
    }
    #logologin {
        display: none
    }
    #logologin2 {
        display: block;
    }
    #logosplash,
    #logopais {
        width: 80%;
    }
    #subscreen {
        width: 80%;
        margin: auto;
    }
    #loadingscreenOne {
        width: 100%;
    }
    #subscreen div {
        width: 33%;
        margin: auto;
        padding: 3px;
        font-size: 16px;
    }
    .logologin {
        width: 100%;
        margin-bottom: 20px;
        margin-top: 20px;
        transition: 0.5s;
    }
    .logologin img {
        height: 40px;
    }
    #logosplash,
    #logopais {
        width: 80%;
    }
    .crtaccbtn {
        text-align: center;
        position: fixed;
        width: 100%;
        bottom: 0px;
        padding: 15px;
        background: white;
        margin-left: -40px;
        color: black;
        cursor: pointer;
    }
    .separador {
        display: none;
    }
    .reghover {
        color: #333333;
    }
    #loginSecundaria {
        float: none;
        height: 100%;
        transition: 0.5s;
        overflow: hidden;
        color: white;
        text-align: center;
    }
    #cntloginsecun {
        padding: 20px;
    }
    #fraserandom {
        font-size: 30px;
        line-height: 40px;
    }
    #lgnbtnesMobile {
        display: block;
        height: 60px;
        position: absolute;
        width: 100%;
        border-top: 1px solid white;
        bottom: 0px;
        margin-left: -20px;
        margin-right: -20px;
    }
    .lgnbtn {
        cursor: pointer;
        font-size: 25px;
        background: #85ba4b;
        padding: 18px;
        color: #fff;
        font-family: 'Cuerpo';
        border: none;
        width: 50%;
        float: left;
        text-align: center;
    }
    #logmobatzera {
        display: none;
        margin-top: -20px;
        cursor: pointer;
    }
    .loginIcon {
        padding: 15px;
        width: 100%;
    }
}

@media(max-height: 300px) {
    .crtaccbtn {
        display: none;
    }
}

.regbhr {
    vertical-align: super;
    color: red;
    font-weight: inherit;
}

#konexioindex {
    position: fixed;
    font-size: 20px;
    padding: 5px;
    text-align: center;
    z-index: 100;
    right: 0px;
    transition: 1s;
    width: 60px;
    height: 35px;
    right: 0px;
    bottom: 0px;
    background-color: white;
    width: 150px;
    color: red;
}

#hizkunautatu {
    position: fixed;
    width: 70px;
    height: 40px;
    color: #CCC;
    font-size: 40px;
    padding: 5px;
    text-align: center;
    z-index: 100;
    right: 0px;
    transition: 1s;
    cursor: pointer;
}

#hizkunautatu:hover {
    color: var(--colorInteraccion);
}

.menuInhabilit {
    height: 100%;
    width: 100%;
    position: absolute;
    color: #666666;
    opacity: 0.7;
}

#advanceLogin {
    display: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

#ghiikulg {
    font-weight: bold;
    cursor: pointer;
}

#ghiikulg i {
    color: #85ba4b;
    margin-left: 10px;
}

#enpresakAukeLehio {
    display: none;
}

.enpaukblq {
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    background-color: var(--colorFondoClaro);
    border: 1px solid var(--borde);
    cursor: pointer;
    transition: .3s;
    position: relative;
    overflow: hidden;
}

.enpaukblq::after {
    content: "\f061";
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    position: absolute;
    right: 60px;
    font-size: 50px;
    top: calc(50% - 25px);
    transition: 0.3s;
    opacity: 0;
}

.enpaukblq:hover::after {
    opacity: 1;
    right: 20px;
}

.enpaukblq:active::after {
    opacity: 1;
    right: 10px;
    color: var(--colorInteraccion)
}

.enpaukblq:hover {
    color: var(--colorInteraccion) !important;
    background-color: var(--colorFondo);
}

.enpaukblq:hover p,
.enpaukblq:hover h3 {
    color: var(--colorInteraccion) !important;
}

#nextRegis {
    display: none;
}

.regbhr {
    color: red;
}

#consulmovile {
    margin-bottom: 30px;
    text-align: justify;
}

#valorNumLoading {
    position: absolute;
    font-size: 300px;
    right: 20px;
    bottom: -35px;
    color: #e7e9da;
    color: var(--colorInteraccion);
}

#initcargBar {
    height: 10px;
    overflow: hidden;
    position: absolute;
    bottom: -10px;
    width: 100%;
    left: 0px;
}

#initcargBarInt {
    height: 18px;
    text-align: right;
    transition: 0.5s;
    width: 0px;
    overflow: hidden;
    font-size: 12px;
    background-color: var(--colorSecundario);
}

#initcargBarInt_num {
    height: 18px;
    position: absolute;
    margin-top: -31px;
    text-align: center;
    width: 100%;
    color: var(--colorInteraccion);
}

#chrdsck {
    font-size: var(--h3);
    text-align: center;
    color: var(--colorTexto);
    height: 30px;
    width: 100%;
    margin-top: 50px;
    font-family: "cuerpo";
}

#img_hover_login_top {
    position: absolute;
    top: 0px;
    height: 70px;
    width: 100%;
    z-index: 70;
    background: rgba(0, 0, 0, 0);
    background: var(--colorFondoClaro);
    background: -moz-linear-gradient(top, var(--colorFondoClaro) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(top, var(--colorFondoClaro) 0%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(top, var(--colorFondoClaro) 0%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(top, var(--colorFondoClaro) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, var(--colorFondoClaro) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}

#img_hover_login_left {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 70px;
    height: 100%;
    z-index: 70;
    background: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, var(--colorFondoClaro) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, var(--colorFondoClaro)), color-stop(100%, var(--colorFondo)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, var(--colorFondoClaro) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, var(--colorFondoClaro) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, var(--colorFondoClaro) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--colorFondoClaro) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
}

#img_hover_login {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: var(--colorFondo);
    overflow: hidden;
}

#img_hover_login_int {
    mix-blend-mode: luminosity;
    opacity: 0.2;
    width: 100%;
}

.inpt_box_login {
    padding: 5px;
    padding-right: 5px;
    border: 1px solid var(--borde);
    margin-bottom: 7.5px;
    width: 100%;
    border-radius: 5px;
    display: flex;
}

.inpt_box_login .inpt_box_login_icn {
    float: left;
    width: 50px;
    color: var(--borde);
    font-size: 27px;
    transition: .5s;
    margin-top: 2px;
}

.inpt_box_login .inpt_box_login_ctn {
    width: 100%;
}

.inpt_box_login .inpt_box_login_ctn label {
    font-weight: 400;
    color: var(--borde);
    font-size: var(--p-1);
    font-size: var(--p-1);
}

#loginpant .inpt_box_login .inpt_box_login_ctn input {
    margin: 0px;
    border: var(--borde);
    cursor: pointer;
    font-size: var(--p-1);
    height: 30px;
    padding: 3px;
    width: 100%;
}

#loginpant .inpt_box_login.selectLogin {
    border: 1px solid var(--colorPrincipal);
}

#loginpant .inpt_box_login.selectLogin .inpt_box_login_icn {
    color: var(--colorPrincipal);
}

#loginpant .inpt_box_login .inpt_box_login_act_btn {
    width: 40px;
    margin-top: 15px;
    opacity: 0;
    margin-top: 8px;
    text-align: center;
}

#loginpant .inpt_box_login.selectLogin label {
    color: var(--colorPrincipal);
    font-size: var(--texto-tamaina-2);
}

#login_checks {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    align-items: center;
}

#login_checks .divblqcheck {
    width: 1000%;
}

#login_checks #remmme {
    text-align: left;
    margin-top: 20px;
    padding: 7.5px;
}

#login_checks #forgot_pass {
    text-align: center;
    margin: auto;
}

#btn_login {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    align-items: center;
}

#btn_login .divblqcheck {
    width: 100%;
    text-align: center;
}

#btn_login #lgoInbtn {
    text-align: left;
}

#btn_login #lgoInbtn .boton,
#btn_login #lgRegsbtn .boton {
    margin: auto;
}

#btn_login #lgRegsbtn {
    text-align: center;
    margin-top: 20px;
    ;
}

#login .ongieto_login h1,
#login .ongieto_login p {
    text-align: center;
    margin-bottom: 20px;
}

#loading_logo {
    height: 60px;
    margin: 10px;
    position: absolute;
    top: 0px;
    left: 10px;
    text-align: left;
}

#loginSecundaria #logCarga_bar {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    width: 33vw;
    height: 30px;
    position: relative;
    border: 1px solid red;
    position: relative;
    z-index: 260;
    margin-top: 20px;
    margin-bottom: 20px;
    display: none;
}

#loginSecundaria.cargando {
    overflow: hidden;
}

#loginpant.cargando .loginSecunPleca {
    width: 100vw;
    left: 0px;
    mix-blend-mode: inherit;
}

#loginpant.cargando #socialMedia {
    display: none;
}

#loginpant.cargando #logCarga_bar {
    display: block;
}

#loginpant.cargando img {
    max-width: 150px;
}

#loginpant.cargando #logCarga_bar #logCarga_bar_int {
    width: 0%;
    background-color: var(--colorInteraccion);
    height: 28px;
    border-radius: 15px;
    transition: .5s;
}

#loginpant.cargando #loginSecundaria #logCarga_bar #logCarga_bar_num {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 5px;
    z-index: 300;
    color: black;
}

#imglog {
    margin-top: 0px;
}

#loginpant.cargando #imglog {
    text-align: center;
}

#conteCarga {
    text-align: center;
}

#logCarga_txt {
    display: none;
    position: relative;
    z-index: 300;
    text-align: center;
    color: white;
}

#loginpant.cargando #logCarga_txt {
    display: block;
}

#loginpant.cargando #logCarga_txt h2 {
    color: white
}

#loginpant.cargando #conteCarga {
    width: 33vw;
    opacity: 1;
    transition: 0.5s;
}

#loginpant.cargaCompletado #conteCarga {
    opacity: 0;
}

#loginpant.cargaCompletado {
    animation-delay: 1s;
    left: -100vw;
}

#conteCarga {
    text-align: center;
}

#erregistratu {
    width: 80%;
    margin: auto;
}

#ret2login {
    margin-bottom: 50px;
    color: var(--colorInteraccion);
    cursor: pointer;
    display: inline-block;
}

.blq_sector {
    margin: 15px;
    text-align: center;
}

.err_secIcon {
    font-size: 50px;
    margin-bottom: 15px;
    color: var(--colorSecundario)
}

.err_nombSec {
    font-size: var(--h3);
    margin-bottom: 10px;
}

.err_nombParrac {
    font-size: var(--p-2);
    color: var(--colorTextoClaro);
    line-height: 1.1em;
}

.err_errores {
    background-color: var(--colorErrorClaro);
    color: var(--colorError);
    border: 1px solid var(--colorError);
    padding: 5px;
    border-radius: 15px;
}

.err_errores div>div {
    padding-bottom: 3px;
    width: 100%;
}



.usrspec {
    height: 30px;
    overflow: hidden;
    width: 100%;
}

#recuerdaBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

#recuerdaBox .recuerda_check {
    width: 80px;
}

#recuerdaBox .recuerda_check .recuerda_checkbox {
    width: 30px;
    height: 30px;
    border: 3px solid var(--borde);
    margin: auto;
}

#recuerdaBox .recuerda_check .recuerda_checkbox>.conTRec {
    transform: rotate(45deg);
    font-size: 35px;
    margin-top: -5px;
    margin-left: 2px;
    color: var(--colorSecundario);
    opacity: 0;
}

#recuerdaBox .recuerda_txt {
    width: calc(100% - 80px);
}

#recuerdaBox:hover {
    cursor: pointer;
}

#recuerdaBox:hover .recuerda_check .recuerda_checkbox {
    border: 3px solid var(--colorInteraccion)
}

#recuerdaBox:hover .recuerda_txt {
    color: var(--colorInteraccion)
}

@media(max-width:768px) {
    #socialMedia {
        right: 0px;
    }
    #login {
        width: 100%
    }
    #loginpant {
        display: block;
    }
    #loginSecundaria {
        height: 120px;
        width: 100vw;
    }
    #loginSecundaria .loginSecunPleca {
        width: 100vw;
    }
    #loginSecundaria #socialMedia {
        display: none
    }
    #sarrera {
        margin-top: 30px;
    }
    #btn_login #lgoInbtn .boton,
    #btn_login #lgRegsbtn .boton {
        margin-top: 20px;
    }
    #login_checks {
        margin-top: 20px;
    }
    #screenChrg {
        padding: 0px;
    }
    #logosplash,
    #logopais {
        width: 250px;
    }
    #login {
        display: block;
        height: auto;
    }
    #loginpant.cargando #loginSecundaria {
        height: 100vh;
        width: 100vw;
    }
    #loginpant.cargando #conteCarga,
    #loginSecundaria #logCarga_bar {
        width: 100%;
    }
    #loadingscreenOne {
        margin: auto;
    }
}

@media(max-width:768px) {
    #logosplash,
    #logopais {
        width: 150px;
    }
}

.regColorTemplate {
    background: black;
    margin-right: 20px;
    height: 35px;
    width: 35px;
    border-radius: 100%;
    margin-top: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid transparent
}

.regColorTemplate.selected {
    border: 5px solid var(--colorInteraccion)
}

.regColorTemplate>div {
    height: 15px;
    width: 15px;
    border-radius: 100%;
    transition: .5s;
}

.regColorTemplate:hover>div {
    height: 25px;
    width: 25px;
}

.templteCore {
    background-color: #e50066;
}

.templteCore div {
    background-color: #ff9400;
}

.templateDev {
    background-color: #018abe;
}

.templateDev div {
    background-color: #f7931e;
}

.templateSystem {
    background-color: #00aa80;
}

.templateSystem div {
    background-color: #f7931e;
}

.templateGroup {
    background-color: #f7931e;
}

.templateGroup div {
    background-color: #b31a31;
}

.templateBarcelona {
    background-color: #7395ae;
}

.templateBarcelona div {
    background-color: #5d5c61;
}

.templateRoma {
    background-color: #d43a38;
}

.templateRoma div {
    background-color: #67baad;
}

.templateQuintana {
    background-color: #222831;
}

.templateQuintana div {
    background-color: #eaca68;
}

.templateDonosti {
    background-color: #00ADB5;
}

.templateDonosti div {
    background-color: #FF5722;
}

.templateJamaica {
    background-color: #89004a;
}

.templateJamaica div {
    background-color: #fab805;
}

.templatediv1 {
    background-color: #2f2fa1;
}

.templatediv1 div {
    background-color: #f64c71;
}

.templatediv4 {
    background-color: #ad8174;
}

.templatediv4 div {
    background-color: #c84938;
}

.templatediv8 {
    background-color: #afd274;
}

.templatediv8 div {
    background-color: #e7717d;
}

.templatediv17 {
    background-color: #264e58;
}

.templatediv17 div {
    background-color: #ffcc00;
}

.templatediv20 {
    background-color: #d43a38;
}

.templatediv20 div {
    background-color: #67baad;
}

.templatediv33 {
    background-color: #d06224;
}

.templatediv33 div {
    background-color: #f34a15;
}

.templatediv49 {
    background-color: #212e58;
}

.templatediv49 div {
    background-color: #8f682c;
}

.templatediv47 {
    background-color: #194529;
}

.templatediv47 div {
    background-color: #295f3b;
}

.tag_switchBlqNormalLive {
    font-size: 12px;
    margin-top: 10px;
}

.tag_switchBlqNormalLive .switchBlqNormalLive {
    width: 30px;
    height: 16px;
    border-radius: 7.5px;
    padding: 1px;
    border: 1px solid var(--borde);
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    transition: .5s;
}

.tag_switchBlqNormalLive .switchBlqNormalLive div.bola {
    background-color: #CCC;
    border-radius: 100%;
    height: 12px;
    width: 12px;
    transition: .5s;
}

.tag_switchBlqNormalLive:hover .switchBlqNormalLive div.bola {
    margin-left: 5px;
}

.tag_switchBlqNormalLive .switchBlqNormalLive div.bola.selected {
    margin-left: 14px;
    background-color: var(--colorPrincipal);
}

.boxCheck:hover {
    border: 1px solid var(--colorInteraccion)
}

.boxCheck {
    height: 25px;
    width: 25px;
    display: inline-block;
    border: 1px solid var(--borde);
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    color: var(--colorSecundario)
}

.blq_sector:hover>div * {
    color: var(--colorInteraccion);
}

.err_pss_streng {
    margin-left: 20px;
    font-size: 12px;
}

.pass_streng_blq {
    width: 400px;
    max-width: 100%;
    display: flex;
}

.pass_streng_blq>div {
    height: 5px;
    margin-right: 10px;
    border-radius: 2.5px;
    width: 25%;
    max-width: 70px;
}

@media(max-width:1400) {
    .blq_sector {
        margin: 15px;
        text-align: center;
        height: 150px;
    }
}

.blqPdf:hover .blqPdf_tools {
    display: flex;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--borde);
    border-radius: 10px;
    top: -3px;
    width: 100%;
    justify-content: space-between;
    padding: 3px;
    left: -3px;
    height: calc(100% + 6px);
    min-width: 250px;
    z-index: 200;
}

.blqPdf {
    position: relative;
}

.pdf_Contentenido {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px
}

.tag_switchBlqAutoLog {
    font-size: 12px;
    margin-top: 10px;
}

.tag_switchBlqAutoLog .switchBlqAutoLog {
    width: 30px;
    height: 16px;
    border-radius: 7.5px;
    padding: 1px;
    border: 1px solid var(--borde);
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    transition: .5s;
}

.tag_switchBlqAutoLog .switchBlqAutoLog div.bola {
    background-color: #CCC;
    border-radius: 100%;
    height: 12px;
    width: 12px;
    transition: .5s;
}

.tag_switchBlqAutoLog:hover .switchBlqAutoLog div.bola {
    margin-left: 5px;
}

.tag_switchBlqAutoLog .switchBlqAutoLog div.bola.selected {
    margin-left: 14px;
    background-color: var(--colorPrincipal);
}

.tag_switchBlqAutoLog .switchBlqAutoLog div.bola {
    background-color: #CCC;
    border-radius: 100%;
    height: 12px;
    width: 12px;
    transition: .5s;
}

.tag_switchBlqAutoLog:hover .switchBlqAutoLog div.bola {
    margin-left: 5px;
}

.tag_switchBlqAutoLog .switchBlqAutoLog div.bola.selected {
    margin-left: 14px;
    background-color: var(--colorPrincipal);
}

#p1 {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#p1 .circleinit {
    border-radius: 100%;
    border: 1px solid var(--borde);
    height: 15px;
    width: 15px;
    margin: 10px;
}

#p1 .circleinit.slctedCircl {
    background-color: var(--colorPrincipal);
    border: 1px solid var(--colorPrincipal);
}

#enpr_pag3 div span.isdone {
    color: var(--colorSucess);
    text-decoration: line-through;
}

.hecholabe {
    font-weight: 600;
    color: var(--colorPrincipal);
}

#frmLogInicial label {
    font-size: var(--p-2);
}

@media(max-height:750) {
    #socialMedia {
        position: relative;
    }
}

@media(max-height:750px) {
    #socialMedia {
        position: relative;
        right: 20px;
        background-color: var(--colorFondo);
    }
    #sarVersion {
        position: relative;
        bottom: 5px;
        left: 0px;
        font-size: 12px;
        text-align: right;
    }

}
#sarVersion{
    cursor:crosshair;
}