:root {
  --itop-front-card-bkg-color:  #BF2C49;
  --itop-back-card-bkg-color:   #FFF;

  --itop-text-color:              #FFF;
  --itop-border-left-text-color:  #FFF;

  --itop-link-color:        #FFF;
  --itop-link-hover-color:  #EEE;

  --itop-button-color:        #232323;
  --itop-button-hover-color:  #343434;
  --itop-shadows:             #23232355;

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

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

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

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;
margin-bottom: 10px;
}

img.logo {
--img-margin: 7px;
max-height: 200px;
max-width: calc(100% - var(--img-margin)*2);
margin: var(--img-margin) var(--img-margin) 0px var(--img-margin);
}

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

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

.form-control:focus {
border-color: var(--itop-button-color);
box-shadow: 0 0 0 0.2rem 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 {
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;
}
}


/* Cookies consent */
#cookieconsentbanner {
  position: fixed;
  opacity: 0;
  bottom: -100px;
  right: 0;
  left: 0;
  z-index: 2;
  background-color: #50505c;
  width: 100%;
  max-height: 160px;
  display: flex;
  justify-content: center;
  /* border-top: var(--itop-button-color) 2px solid; */
  transition: opacity 0.5s ease-in, bottom 0.5s ease-in;
}

#cookieconsentbanner p {
  max-width: 900px;
  margin: auto 0;
  color: var(--itop-text-color);
  padding: 10px 20px;
}

#cookieconsentbanner p a {
  color: var(--itop-text-color);
  font-weight: bold;
  text-decoration: underline;
}

#cookieaccept {
  margin: auto 20px;
}

/* 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);
  }
}
}