@charset "UTF-8";

/* CSS Document */

:root {
    --swiper-theme-color: #96f2d6 !important;
    --swiper-navigation-size: 20px !important;
}

html,
body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background: #F2F4F7 !important;
    color: #000000;
}

.ChWrP {
    width: 100%;
    max-width: 1380px;
    margin: 0px auto;
    top: 19px;
    height: calc(100% - 38px);
    height: -webkit-calc(100% - 38px);
    height: -moz-calc(100% - 38px);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 2px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    -moz-transform-origin: center;
    -webkit-transform-origin: center;
    transform-origin: center;
    -moz-animation: app-enter 0.3s cubic-bezier(0.1, 0.82, 0.25, 1);
    -webkit-animation: app-enter 0.3s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: app-enter 0.3s cubic-bezier(0.1, 0.82, 0.25, 1);
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #0b0c0d;
    display: flex;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    flex-direction: row-reverse;
}

.app-one {
    height: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    width: 70%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    outline: none;
    background-image: linear-gradient(rgb(0 0 0 / 70%), rgb(0 0 0 / 30%)), url();
}

.app-one:before {
    height: 200px;
    bottom: 0px;
    width: 100%;
    content: "";
    position: absolute;
    z-index: 1;
    /* background-image: url(img/clouds.png);
   background-position: bottom;
   background-repeat: repeat-x;
   background-size: cover; */
}

.app-two {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    height: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    width: 35%;
    margin: 0;
    padding: 0 2rem;
    border: 0;
    font-size: 100%;
    font: inherit;
    overflow: hidden;
    vertical-align: baseline;
    outline: none;
    background: #2C3E50;
    -moz-box-shadow: -2px 0px 4px 0px #1b7bcf;
    -webkit-box-shadow: -2px 0px 4px 0px #1b7bcf;
    box-shadow: -2px 0px 4px 0px #1b7bcf;
}

.rightSidebar-body-main {
    -moz-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -moz-box;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    -moz-box-flex: 1;
    -moz-flex-grow: 1;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    outline: none;
    height: calc(100% - 0px);
    height: -webkit-calc(100% - 0px);
    height: -moz-calc(100% - 0px);
    height: 100%;
}

.rightSidebar-body-main-register {
    flex: 1 1 0%;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    overflow-y: auto;
    -webkit-box-flex: 1;
    z-index: 1;
    margin: 0px;
    padding: 0px;
    border: 0px;
    vertical-align: baseline;
    outline: none;
    height: 100%;
}

.infinite-list-viewport {
    position: relative;
    overflow: hidden;
    overflow-y: auto !important;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    outline: none;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -moz-box;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

.drawer-first {
    margin: 0 0 3rem 0;
    display: flex; /* necesario para justificar contenido */
    justify-content: center; /* centra horizontalmente */
    align-items: center; /* opcional: centra verticalmente si hay altura definida */
    top: 8%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: drawer-scale 750ms cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: drawer-scale 750ms cubic-bezier(0.1, 0.82, 0.25, 1);
}


.drawer-first img {
    width: 60%;
    height: 90px;
}

.logo-picker {
    margin: 0 auto;
    position: relative;
}

.drawer-logo-photo {
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-image: url(img/Logo-light-Smartime.svg);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}

.titleuser {
    color: #fff;
}

.titlepass {
    color: #fff;
}

.drawer-scale {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: drawer-scale 750ms cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: drawer-scale 750ms cubic-bezier(0.1, 0.82, 0.25, 1);
}

.drawer-login {
    -webkit-animation: well-animation1 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: well-animation1 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    border-radius: 6px;
    padding: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

.drawer-login-with {
    padding: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-box-align: center;
    -moz-align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.social-reg {
    margin-left: 21px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    cursor: pointer;
    -moz-transition: ease 0.2s;
    -o-transition: ease 0.2s;
    -webkit-transition: ease 0.2s;
    transition: ease 0.2s;
}

.social-reg:hover {
    z-index: 100;
    background-color: rgb(226, 227, 228);
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
}

.signUpB {
    font-size: 0.8rem;
    padding: 0;
    text-decoration: underline;
    margin: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    text-align: center;
    position: relative;
    line-height: 0;
    color: #ffffff;
    text-shadow: 2px 1px 0px rgb(19, 104, 179);
    -webkit-text-shadow: 2px 1px 0px rgb(19, 104, 179);
    -moz-text-shadow: 2px 1px 0px rgb(19, 104, 179);
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    background-image: rgba(255, 255, 255, 0);
    background-color: transparent;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    -ms-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}

.signUpB:hover {
    background-image: rgba(255, 255, 255, 0);
    background-color: #1368b3;
}

.signUpB:after {
    float: left;
    content: "      ";
    padding-left: 5px;
    padding-right: 5px;
    line-height: 34px;
    text-align: right;
    position: absolute;
    left: -37px;
    top: 0px;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
    -webkit-text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
    -moz-text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
    color: #444444;
    font-size: 12px;
    font-weight: 300;
    cursor: default;
}

.LoginB {
    font-size: 0.8rem;
    padding: 0;
    text-decoration: underline;
    margin: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    text-align: center;
    position: relative;
    line-height: 0;
    color: #ffffff;
    text-shadow: 2px 1px 0px rgb(19, 104, 179);
    -webkit-text-shadow: 2px 1px 0px rgb(19, 104, 179);
    -moz-text-shadow: 2px 1px 0px rgb(19, 104, 179);
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    background-image: rgba(255, 255, 255, 0);
    background-color: transparent;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    -ms-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}

.LoginB:hover {
    background-image: rgba(255, 255, 255, 0);
    background-color: #1368b3;
}

.LoginB:after {
    float: left;
    content: "";
    padding-left: 5px;
    padding-right: 5px;
    line-height: 40px;
    text-align: right;
    position: absolute;
    left: -37px;
    top: 0px;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
    -webkit-text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
    -moz-text-shadow: 0px 0px 0px rgba(59, 141, 16, 0);
    color: #444444;
    font-size: 12px;
    font-weight: 300;
    cursor: default;
}

.social-reg:nth-child(1) {
    background-image: url(img/facebook.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0px;
}

.social-reg:nth-child(2) {
    background-image: url(img/twitter.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
}

.social-reg:nth-child(3) {
    background-image: url(img/googlePlus.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
}

.social-reg:nth-child(4) {
    background-image: url(img/linkedin.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
}

.drawer-body {
    margin: 1.5rem 0 0 0;
    width: 100%;
    background-color: transparent;
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    -webkit-animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
}

.drawer-body:before {
    content: "-O- Ingresa con tu cuenta corporativa ";
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    background-color: transparent;
    width: 100%;
    display: -moz-box;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: left;
    text-indent: 10px;
    font-size: 15px;
    font-weight: 500;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #ffff;
    padding: 0px 0px 15px 0px;
    margin: 0;
}

.drawer-body-2 {
    margin: 40px 0px 0px 0px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    -webkit-animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
}

.drawer-body-2:before {
    content: "Cuentas con tus credenciales de acceso?";
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    background-color: #f7f7f7;
    width: 100%;
    display: -moz-box;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: left;
    text-indent: 16px;
    font-size: 15px;
    font-weight: 300;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #868484;
    padding: 0px 0px 8px 0px;
}

.drawer-body-reg {
    margin: 0;
    width: 100%;
    background-color: transparent;
    border-bottom: 0px solid rgba(216, 219, 223, 0.43);
    -webkit-animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
}

.drawer-login-with p {
    width: 55%;
    color: #b5b5b5;
    font-size: 0.8rem;
    margin: 0;
}

/* .drawer-body-reg:before {
    content: 'No puedes acceder a tu cuenta?';
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    background-color: #f7f7f7;
    width: 100%;
    display: -moz-box;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	text-align:left;
  text-indent:16px;	
  font-size:15px;
  font-weight:300;
  font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
	color:#868484;
	    padding: 0px 0px 8px 0px;
} */

.drawer-body-reg-2 {
    margin: 40px 0px 0px 0px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    -webkit-animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
}

.drawer-body-reg-2:before {
    content: "-OR- SignUp with ";
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    background-color: #f7f7f7;
    width: 100%;
    display: -moz-box;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: left;
    text-indent: 11px;
    font-size: 15px;
    font-weight: 300;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #868484;
    padding: 0px 0px 8px 0px;
}

.socialBtn {
    margin: 0 0.6rem;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    cursor: pointer;
    -moz-transition: ease 0.2s;
    -o-transition: ease 0.2s;
    -webkit-transition: ease 0.2s;
    transition: ease 0.2s;
    background: #fff;
}

.socialBtn:hover {
    z-index: 100;
    background-color: rgb(226, 227, 228);
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
}

.socialBtn:nth-child(1) {
    background-image: url(img/googlePlus.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
}

.socialBtn:nth-child(2) {
    background-image: url(img/linkedin.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
}

.input-clm {
    margin: 0;
    min-height: 18px;
    line-height: 18px;
    font-size: 15px;
    color: #7c8b92;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 500;
    padding-bottom: 5px;
    position: relative;
}

.input {
    position: relative;
    width: 100%;
    height: 40px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 2px;
    border: 1.5px solid #cacaca;
    padding: 5px 5px 5px 55px;
    color: #fff;
    outline: none;
    font-size: 15px;
    font-weight: bold;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background-color: transparent !important;
}

.input::placeholder {
    color: #fff;
}

/* .input:focus,
input:active {
   border: 1px solid #4c5c72;
   background-color: #00000029 !important;
} */

.unm {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(img/user.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    z-index: 1;
    cursor: pointer;
    margin: 0 0 0 1rem;
}

.validacionCorreo {
    width: 100%;
    display: -moz-box;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: left;
    text-indent: 65px;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 300;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #868484;
    padding: 0px 0px 8px 0px;
}

.funm {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(img/fullName.png);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center;
    z-index: 1;
    cursor: pointer;
}

.psw {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(img/key.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    z-index: 1;
    cursor: pointer;
    margin: 0 0 0 1rem;
}

.uemail {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(img/email.png);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center;
    z-index: 1;
    cursor: pointer;
}

.loginButton {
    width: 100%;
    height: 50px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    outline: none;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    -webkit-text-shadow: 2px 1px 0px rgb(19, 104, 179);
    -moz-text-shadow: 2px 1px 0px rgb(19, 104, 179);
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 10px;
    background-color: #1b7bcf;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    -ms-transition: background-color 0.2s linear;
    margin: 1rem 0 0 0;
    transition: all 0.5s ease-in-out;
}

.loginButton:hover {
    background-image: rgba(255, 255, 255, 0);
    background-color: #1368b3ad;
}

#supersized {
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 100%;
}

#supersized img {
    width: auto;
    height: auto;
    position: relative;
    outline: none;
    border: none;
}

#maintenance {
    width: 550px;
    background-color: #ff861d;
    color: #fff;
    margin: 130px auto 0;
    padding: 20px;
}

.scr {
    opacity: 0;
    z-index: -1;
    display: none;
}

.op {
    display: block;
}

.OpenRegister {
    -moz-animation: fadeInUpBig 0.5s cubic-bezier(1, 0.9, 0.42, 1);
    -webkit-animation: fadeInUpBig 0.5s cubic-bezier(1, 0.9, 0.42, 1);
    animation: fadeInUpBig 0.5s cubic-bezier(1, 0.9, 0.42, 1);
}

.CloseLogin {
    -moz-animation: zoomOutLeft 0.5s cubic-bezier(1, 0.9, 0.42, 1);
    -webkit-animation: zoomOutLeft 0.5s cubic-bezier(1, 0.9, 0.42, 1);
    animation: zoomOutLeft 0.5s cubic-bezier(1, 0.9, 0.42, 1);
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@-webkit-keyframes drawer-scale {

    0%,
    20% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
    }

    100% {
        -webkit-transform: scale 1, 1;
        transform: scale 1, 1;
    }
}

@keyframes drawer-scale {

    0%,
    20% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
    }

    100% {
        -webkit-transform: scale 1, 1;
        transform: scale 1, 1;
    }
}

.animate-enter1 {
    -webkit-animation: well-animation1 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: well-animation1 1s cubic-bezier(0.1, 0.82, 0.25, 1);
}

@-webkit-keyframes well-animation1 {

    0%,
    25% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes well-animation1 {

    0%,
    25% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-enter2 {
    -webkit-animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
}

@-webkit-keyframes well-animation2 {

    0%,
    30% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes well-animation2 {

    0%,
    30% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

/*Swiper styles STARTED*/
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #e2e5e7;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.swiper-slide img {
    display: block;
    width: 55%;
    height: auto;
    object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 97%) !important;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 10px) !important;
    left: auto !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size) !important;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}

.swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 92%) !important;
    right: auto !important;
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px) !important;
    left: 93% !important;
    top: 96.7% !important;
    border-radius: 5px !important;
    overflow: hidden;
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: 0.3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    width: 5% !important;
}

.swiper-pagination-progressbar {
    background: #96f2d770 !important;
    position: absolute !important;
}

/*Swiper styles json FINISHED*/

/*Mobile Screen STARTED*/
@media screen and (max-width: 1280px) {
    .ChWrP {
        width: 100%;
        margin: 0px;
        top: 0px;
        height: calc(100% - 0px);
        height: -webkit-calc(100% - 0px);
        height: -moz-calc(100% - 0px);
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0), 0 0px 0px 0 rgba(0, 0, 0, 0);
    }
}

@media screen and (max-width: 1210px) {
    .ChWrP {
        /*flex-direction: column-reverse;*/
    }

    .app-one {
        width: 50%;
        /*need to come to the BOTTOM. and width:100%;*/
    }

    .app-two {
        width: 50%;
        /*need to come to the TOP. and width:100%;*/
    }
}

@media screen and (max-width: 755px) {
    .app-one {
        display: none;
    }

    .app-two {
        width: 100%;
    }

    .app-two:before {
        height: 97px;
        bottom: 0px;
        width: 100%;
        content: "";
        position: absolute;
        z-index: -1;
        /* background-image: url(img/clouds.png);
      background-position: bottom;
      background-repeat: repeat-x;
      background-size: cover; */
    }
}

@media screen and (max-width: 320px) {
    .social-reg {
        margin-left: 6px;
    }
}

/*Mobile Screen FINISHED*/

/* start style new login */
.input-new {
    width: 100%;
    height: 100%;
    background: none;
    color: #fff;
    padding-top: 20px;
    border: none;
    outline: 0px;
}

.form .lbl-nombre {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-bottom: 1px solid #c7c7c7;
}

.form .lbl-nombre:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 100%;
    border-bottom: 4px solid #1971c2;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

.text-nomb {
    position: absolute;
    bottom: 5px;
    left: 0;
    transition: all 0.3s ease;
    color: #fff;
}

.form input:focus+.lbl-nombre .text-nomb,
.form input:valid+.lbl-nombre .text-nomb {
    transform: translateY(-210%);
    font-size: 14px;
    color: #1971c2;
}

.input-new.filled + .lbl-nombre .text-nomb,
.input-new:focus + .lbl-nombre .text-nomb {
    transform: translateY(-210%);
    font-size: 14px;
    color: #1971c2;
}

.input-new.filled + .lbl-nombre:after,
.input-new:focus + .lbl-nombre:after {
    transform: translateX(0%);
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: none !important;
    color: fieldtext !important;
}

/* end style new login */

/* btn efect border animation one */
.login-button {
    margin: 3rem 0 1rem 0;
    transform: none;
    color: #fff;
    padding: 0.5rem 3rem;
    font-size: 1.3rem;
    font-weight: bold;
    border: none;
    letter-spacing: 0px;
    background-color: #1971c2;
    box-shadow: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-button:hover {
    background-color: #1971c2;
}


.login-button::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    width: 50%;
    background-color: transparent;
}

.login-button span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
            rgba(25, 113, 194, 1),
            rgb(108 175 236));
    animation: border-animetion1 2s linear infinite 1s;
}

@keyframes border-animetion1 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.login-button span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to right,
            rgba(25, 113, 194, 1),
            rgb(108 175 236));
    animation: border-animetion2 2s linear infinite;
}

@keyframes border-animetion2 {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

.login-button span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
            rgba(25, 113, 194, 1),
            rgb(108 175 236));
    animation: border-animetion3 2s linear infinite 1s;
}

@keyframes border-animetion3 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.login-button span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to right,
            rgba(25, 113, 194, 1),
            rgb(108 175 236));
    animation: border-animetion4 2s linear infinite;
}

@keyframes border-animetion4 {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-100%);
    }
}

.login-button:hover {
    background: #1971c2; /* o el color plano que prefieras */
    box-shadow: none !important;
    color: #ffffff;
}


/* end btn efect border animation two */

/* btn efect border animation two */
.btn-request-key:hover {
    background: #1971c2; /* o el color que prefieras */
    box-shadow: none !important;
    color: #ffffff;
}

/* end btn efect border animation two */

.col-drawer-body {
    width: 100%;
    display: flex;
    justify-content: center; /* centrado horizontal */
    align-items: center;      /* centrado vertical */
    gap: 0.5rem;
    padding: 1rem 0;
    color: white;
    text-align: center;
}

.drawer-body-2 {
    margin: 40px 0px 0px 0px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    -webkit-animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
}

.drawer-body-2:before {
    content: "Cuentas con tus credenciales de acceso?";
    border-bottom: 1px solid rgba(216, 219, 223, 0.43);
    background-color: #f7f7f7;
    width: 100%;
    display: -moz-box;
    display: -moz-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: left;
    text-indent: 16px;
    font-size: 15px;
    font-weight: 300;
    font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #868484;
    padding: 0px 0px 8px 0px;
}

.drawer-body-reg {
    margin: 0;
    width: 100%;
    background-color: transparent;
    border-bottom: 0px solid rgba(216, 219, 223, 0.43);
    -webkit-animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
    animation: well-animation2 1s cubic-bezier(0.1, 0.82, 0.25, 1);
}

.drawer-login-with p {
    width: 55%;
    color: #b5b5b5;
    font-size: 0.8rem;
    margin: 0;
}

.btn-request-key {
    display: flex;
    align-items: center;
    gap: 16px; /* separación entre ícono y texto */
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #1971c2; /* color base */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btn-request-key:hover {
    background-color: #1971c2; /* celeste igual al color base */
}



/* INICIO ESTILOS MODAL SOLICITAR CONTRASEÑA */

.modal-content-password {
  background-color: #1b2229 !important;
  border-radius: 10px;
  color: #ffffff;
  padding: 1rem;
}


.form-control-pass-form {
  background: transparent !important;
  border: none;
  border-bottom: 2px solid #ffffff;
  border-radius: 0;
  color: #ffffff !important;
  font-size: 16px;
  padding-left: 0;
  padding-right: 0;
}

.form-control-pass-form:focus {
    color: #ffffff !important;
    background-color:transparent !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid #5967ff !important;
}

.input-group-text {
    display: flex !important;
    align-items: center !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    text-align: center !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #ffffff !important;
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
    background-color: var(--bs-modal-footer-bg);
    border-top: none !important;
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

/* btn efect border animation one */

.modal-footer{
    display: flex !important;
    justify-content: center !important;
}

.pass-button {
    position: relative;
    margin: 0;
    color: #fff;
    padding: 0.5rem 3rem;
    font-size: 1.3rem;
    font-weight: bold;
    border: none;
    letter-spacing: 0px;
    background-color: #1b7bcf;
    border-radius: 10px;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}



.pass-button::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    width: 50%;
    background-color: transparent;
}

.pass-button span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
            rgba(25, 113, 194, 1),
            rgb(108 175 236));
    animation: border-animetion1 2s linear infinite 1s;
}

@keyframes border-animetion1 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.pass-button span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to right,
            rgba(25, 113, 194, 1),
            rgb(108 175 236));
    animation: border-animetion2 2s linear infinite;
}

@keyframes border-animetion2 {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

.pass-button span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
            rgba(25, 113, 194, 1),
            rgb(108 175 236));
    animation: border-animetion3 2s linear infinite 1s;
}

@keyframes border-animetion3 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.pass-button span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to right,
            rgba(25, 113, 194, 1),
            rgb(108 175 236));
    animation: border-animetion4 2s linear infinite;
}

@keyframes border-animetion4 {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-100%);
    }
}

input:-webkit-autofill {
    animation-name: onAutoFillStart;
    animation-duration: 0.01s;
}

@keyframes onAutoFillStart {}

.rightSidebar-body-main {
    justify-content: center;
}

.login-button {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#togglePassword {
    font-size: 1.2rem;
}

.col-drawer-body {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
}

.login-buttons-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* espacio entre botones */
    margin-top: 2rem;
}

.login-buttons-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente los botones */
  gap: 15px; /* Espacio entre botones */
  margin-top: 20px;
}

.login-buttons-wrapper button {
  width: 200px;
  max-width: 90%;
  text-align: center;
}

/* --- Fix para evitar clics en área extendida del botón --- */
.login-button::before,
.login-button::after,
.login-button span {
    pointer-events: none;
}

button:active {
  transform: scale(0.97);
  box-shadow: 0 0 8px rgba(25, 113, 194, 0.5);
}

.form-control-pass-form::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form-control-pass-form:focus {
  border-bottom: 2px solid #96f2d7 !important;
  box-shadow: none;
  background: transparent;
}

.pass-button:active {
    transform: scale(0.97);
    box-shadow: 0 0 8px rgba(25, 113, 194, 0.5);
}

.modal-title {
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}
.linea-deco {
  width: 60px;
  margin: 6px auto 16px;
  border: 0;
  border-top: 2px solid #1971c2;
}

/* end btn efect border animation two */

/* FIN ESTILOS MODAL SOLICITAR CONTRASEÑA */