:root {
  --itop-front-card-bkg-color:  #021b39;
  --itop-back-card-bkg-color:   #ffffff;

  --itop-text-color:              #ffffff;
  --itop-border-left-text-color:  #343434;

  --itop-link-color:        #ffffff;
  --itop-link-hover-color:  #8f8f8f;

  --itop-button-color:        #00c6a2;
  --itop-button-hover-color:  #a8a8a8;
  --itop-shadows:             #707070;

  --itop-button-text-color:       #ffffff;
  --itop-button-hover-text-color: #ffffff;

  --itop-font-size: 1rem;
}

/*
@font-face {
font-family: CustomFont;
src: url('../fonts/Montserrat-Regular.ttf');
}
*/

input#rememberusername {
    border: 1px solid #343434;
}

body {
/* font-family: CustomFont,sans-serif; */
/* background-image: url("../img/bkg.png"); */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: var(--itop-front-card-bkg-color);

font-size: var(--itop-font-size);

min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.toast { min-width: 300px; }

#maincard { 
width: 20rem;
margin: 15px auto;
position: fixed;
left: 65%;
top: 8vh;
color: var(--itop-text-color);
background-clip: border-box;
}

#cardbody { 
border-left: 1px solid var(--itop-border-left-text-color);
padding-left: 20px; 
}

.image-container {
width: 100%;
display: inline-block;
overflow: hidden;
text-align: center;
}

img.logo {
--img-margin: 5px;
max-height: 160px;
max-width: calc(100% - var(--img-margin)*2);
margin: var(--img-margin) var(--img-margin) 0px var(--img-margin);
padding-bottom: 1rem;
}

.formgroup { margin-bottom: 1rem; }
.formgroup label { padding-left: 3px; }

.form-control { border-radius: 0px; }

.form-control:focus {
box-shadow: 0 0 0 0.1rem var(--itop-shadows);
border-color: var(--itop-shadows);
}

.helper { margin-bottom: 0.3rem; }

.helper a {
color: var(--itop-link-color);
transition: color 0.2s;
}

.helper a:hover {
color: var(--itop-link-hover-color);
transition: color 0.2s;
}

.potentialidp {
padding: 5px 0;
}

.btn-primary, .btn-primary:active {
width: 100%;
color: var(--itop-button-text-color);
background-color: var(--itop-button-color);
border-color: var(--itop-button-color);
border-radius: 0px;
}

.btn-primary:hover {
color: var(--itop-button-hover-text-color);
background-color: var(--itop-button-hover-color);
border-color: var(--itop-button-hover-color);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: var(--itop-button-text-color);
background-color: var(--itop-button-color);
border-color: var(--itop-button-color);
}

.btn-primary:focus, .btn-primary.focus {
color: var(--itop-button-text-color);
background-color: var(--itop-button-color);
border-color: var(--itop-button-color);
box-shadow: 0 0 0 0.2rem var(--itop-shadows);
}

.btn-primary.disabled, .btn-primary:disabled {
color: var(--itop-button-hover-text-color);
background-color: var(--itop-button-hover-color);
border-color: var(--itop-button-hover-color);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem var(--itop-shadows);
}





/* Comprueba tu equipo */
.squaredBorder {
border-radius: 0;
margin-bottom: 0;
}

/* Back Panels */
.bkg-torotate-shadow {
height: 200vh;
width: 200vh;
position: fixed;
left: 65%;
top: -120%;
background: rgba(80,80,80,0.4);
filter: blur(10px) drop-shadow(-100px -20px 6px rgba(80,80,80,0.4));
transition: all 0.5s;
}

.bkg-torotate-front {
height: 200vh;
width: 200vh;
position: fixed;
left: 65%;
top: -120%;
background-color: var(--itop-front-card-bkg-color);
transition: all 0.5s;
}

.bkg-torotate-back {
height: 500vh;
width: 500vh;
position: fixed;
left: 0;
bottom: 60%;
background-color: var(--itop-back-card-bkg-color);
transition: all 1s;
}


.rotated20 {
transform: rotateZ(-20deg);
-webkit-transform: rotateZ(-20deg);
-moz-transform: rotateZ(-20deg);
-ms-transform: rotateZ(-20deg);
-o-transform: rotateZ(-20deg);
transform-origin: bottom left;
}

.rotated30 {
transform: rotateZ(-30deg);
-webkit-transform: rotateZ(-30deg);
-moz-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
-o-transform: rotateZ(-30deg);
transform-origin: bottom left;
}

.rotated15 {
transform: rotateZ(-15deg);
-webkit-transform: rotateZ(-15deg);
-moz-transform: rotateZ(-15deg);
-ms-transform: rotateZ(-15deg);
-o-transform: rotateZ(-15deg);
transform-origin: bottom left;
}

.rotated07 {
transform: rotateZ(-7deg);
-webkit-transform: rotateZ(-7deg);
-moz-transform: rotateZ(-7deg);
-ms-transform: rotateZ(-7deg);
-o-transform: rotateZ(-7deg);
transform-origin: bottom left;
}

/* Altura muy pequeña: */
@media only screen and (max-height: 465px){
body { background-image: none; transition: background-image 0.1s; }
.bkg-torotate-shadow { display: none ; transition: display 0.2s; }
.bkg-torotate-back { display: none ; transition: display 0.2s; }

#loginpanels { display: flex; }

#maincard {
  position: relative;
  left: auto;
  top: auto;
  margin: auto;
}
}

/* Ancho > 1024 y altura < 750: */
@media only screen and (min-width: 1024px) and (max-height: 750px){
.bkg-torotate-front {
  left: 60%;
  top: -100%;
  transition: left 1s, top 1s, transform 0.3s;
  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
}

.bkg-torotate-back {
  left: 0%;
  bottom: 100%;
  transition: left 1s, top 1s, transform 0.3s;

  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
}

.bkg-torotate-shadow {
  left: 65%;
  top: -100%;
  transition: left 1s, top 1s, transform 0.3s;

  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
}
}

/* Ancho < 1024px */
@media only screen and (max-width: 1024px) {
#loginpanels { display: flex; }

#maincard {
  position: relative;
  left: auto;
  top: auto;
  margin: auto;
}

.bkg-torotate-front {
  left: 0;
  top: -100%;
  transition: left 1s, top 1s, transform 1s;
}

.bkg-torotate-back {
  left: 0;
  bottom: 0%;
  transition: left 1s, bottom 1s, transform 1s;

  transform: rotateZ(7deg);
  -webkit-transform: rotateZ(7deg);
  -moz-transform: rotateZ(7deg);
  -ms-transform: rotateZ(7deg);
  -o-transform: rotateZ(7deg);
}

.bkg-torotate-shadow {
  left: 0;
  top: -100%;
  transition: left 1s, top 1s, transform 1s;
}

/* Ocultar banda trasera si amenaza con rozar texto*/
@media (min-aspect-ratio: 5 / 6) {
  .bkg-torotate-front {
    transition: transform 0.2s;

    transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
  }
}
}
.check-row {
	  line-height: 45px;
	}
.bx {
  font-size: 22px;
  cursor: pointer;
  top: 38%;
  left: 90%;
  color: #343434;
  position: absolute;
}


.itop-policy-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 200px;
  background: #000;
  color: #fff;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 9999;
  font-family: inherit;
}

.itop-policy-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}

.itop-policy-text {
  font-size: 12px;
  line-height: 1.3;
  opacity: .9;
  margin-bottom: 10px;
}

.itop-policy-actions {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.itop-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.itop-btn-secondary {
  background: transparent;
  color: #fff;
}

.itop-btn-secondary:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.itop-btn-primary {
  background: #fff;
  color: #000;
  border-color: transparent;
}

.itop-btn-primary:hover {
  background: rgba(255,255,255,.9);
}


.itop-legal-links {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 9999;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  font-size: 11px;
  opacity: .70;

  background: rgba(0,0,0,.28);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 6px 10px;
}

.itop-legal-links:hover {
  opacity: 1;
  background: rgba(0,0,0,.45);
}

.itop-legal-link {
  color: #fff;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.itop-legal-link:hover {
  text-decoration: underline;
}