.contenedorLogin{
    background: linear-gradient(90deg, #046d8b, #2fb8ac);
}

.emailGroup {
  margin-top: 1rem;
  position: relative;
}

/* Input field */
#email-input {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  background-color: transparent;
}

#password-input {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  background-color: transparent;
}

/* Input label */
#email-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  color: rgba(204, 204, 204, 0);
  pointer-events: none;
  transition: all 0.3s ease;
}

#password-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  color: rgba(204, 204, 204, 0);
  pointer-events: none;
  transition: all 0.3s ease;
}


/* Input field:focus styles */
.email:focus + #email-label {
  top: -20px;
  font-size: 14px;
  color: #007bff;
}

.email:focus + #password-label {
  top: -20px;
  font-size: 14px;
  color: #007bff;
}

.email:focus + #email-label + .input-highlight {
  width: 100%;
}



.container{
  position: relative;
  height: 100vh;
}
.card {
  box-shadow: -1px 3px 20px 11px #5C5696!important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  --p: 32px;
  --h-form: auto;
  --w-form: 380px;
  --input-px: 0.75rem;
  --input-py: 0.65rem;
  --submit-h: 38px;
  --blind-w: 64px;
  --space-y: 0.5rem;
  width: var(--w-form);
  height: var(--h-form);
  max-width: 100%;
  background: white;
  border-radius: 25px!important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--p);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

.avatar {
  --sz-avatar: 166px;
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  width: var(--sz-avatar);
  min-width: var(--sz-avatar);
  max-width: var(--sz-avatar);
  height: var(--sz-avatar);
  min-height: var(--sz-avatar);
  max-height: var(--sz-avatar);
  border: 1px solid #707070;
  border-radius: 9999px;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  -webkit-perspective: 80px;
  perspective: 80px;
  position: relative;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  --sz-svg: calc(var(--sz-avatar) - 10px);
}
.avatar svg {
  position: absolute;
  -webkit-transition:
    opacity 0.1s,
    -webkit-transform 0.2s ease-in;
  transition:
    opacity 0.1s,
    -webkit-transform 0.2s ease-in;
  transition:
    transform 0.2s ease-in,
    opacity 0.1s;
  transition:
    transform 0.2s ease-in,
    opacity 0.1s,
    -webkit-transform 0.2s ease-in;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  height: var(--sz-svg);
  width: var(--sz-svg);
  pointer-events: none;
}
.avatar svg#monkey {
  z-index: 1;
}
.avatar svg#monkey-hands {
  z-index: 2;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateY(calc(var(--sz-avatar) / 1.25)) rotateX(-21deg);
  transform: translateY(calc(var(--sz-avatar) / 1.25)) rotateX(-21deg);
}

.avatar::before {
  content: "";
  border-radius: 45%;
  width: calc(var(--sz-svg) / 3.889);
  height: calc(var(--sz-svg) / 5.833);
  border: 0;
  border-bottom: calc(var(--sz-svg) * (4 / 100)) solid #3c302a;
  bottom: 20%;

  position: absolute;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 3;
}
.blind-check:checked ~ .avatar::before {
  width: calc(var(--sz-svg) * (9 / 100));
  height: 0;
  border-radius: 50%;
  border-bottom: calc(var(--sz-svg) * (10 / 100)) solid #3c302a;
}
.avatar svg#monkey .monkey-eye-r,
.avatar svg#monkey .monkey-eye-l {
  -webkit-animation: blink 10s 1s infinite;
  animation: blink 10s 1s infinite;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
@keyframes blink {
  0%,
  2%,
  4%,
  26%,
  28%,
  71%,
  73%,
  100% {
    ry: 4.5;
    cy: 31.7;
  }
  1%,
  3%,
  27%,
  72% {
    ry: 0.5;
    cy: 30;
  }
}
.blind-check:checked ~ .avatar svg#monkey .monkey-eye-r,
.blind-check:checked ~ .avatar svg#monkey .monkey-eye-l {
  ry: 0.5;
  cy: 30;
}
/*---------mover manos------*/
.blind-check:not(:checked) ~.form:focus-within:not(:has(#email-input:focus)) ~.avatar svg#monkey-hands{
  -webkit-transform: translate3d(0, 0, 0) rotateX(0deg);
  transform: translate3d(0, 0, 0) rotateX(0deg);
}

.avatar svg#monkey,
.avatar::before,
.avatar svg#monkey .monkey-eye-nose,
.avatar svg#monkey .monkey-eye-r,
.avatar svg#monkey .monkey-eye-l {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey,
.blind-check:checked ~ .form:focus-within ~ .avatar::before,
.blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-nose,
.blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-r,
.blind-check:checked ~ .form:focus-within ~ .avatar svg#monkey .monkey-eye-l {
  -webkit-animation: none;
  animation: none;
}

.form:focus-within ~ .avatar svg#monkey {
  -webkit-animation: slick 3s ease infinite 1s;
  animation: slick 3s ease infinite 1s;
  --center: rotateY(0deg);
  --left: rotateY(-4deg);
  --right: rotateY(4deg);
}
.form:focus-within ~ .avatar::before,
.form:focus-within ~ .avatar svg#monkey .monkey-eye-nose,
.blind-check:not(:checked)
  ~ .form:focus-within
  ~ .avatar
  svg#monkey
  .monkey-eye-r,
.blind-check:not(:checked)
  ~ .form:focus-within
  ~ .avatar
  svg#monkey
  .monkey-eye-l {
  ry: 3;
  cy: 35;
  -webkit-animation: slick 3s ease infinite 1s;
  animation: slick 3s ease infinite 1s;
  --center: translateX(0);
  --left: translateX(-0.5px);
  --right: translateX(0.5px);
}
@-webkit-keyframes slick {
  0%,
  100% {
    -webkit-transform: var(--center);
    transform: var(--center);
  }
  25% {
    -webkit-transform: var(--left);
    transform: var(--left);
  }
  75% {
    -webkit-transform: var(--right);
    transform: var(--right);
  }
}
@keyframes slick {
  0%,
  100% {
    -webkit-transform: var(--center);
    transform: var(--center);
  }
  25% {
    -webkit-transform: var(--left);
    transform: var(--left);
  }
  75% {
    -webkit-transform: var(--right);
    transform: var(--right);
  }
}

.card label.blind_input {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  z-index: 4;
  position: absolute;
  border: none;
  right: calc(var(--p) + (var(--input-px) / 2));
  bottom: calc(
    var(--p) + var(--submit-h) + var(--space-y) + (var(--input-py) / 1) + 3px
  );
  padding: 4px 0;
  width: var(--blind-w);
  border-radius: 4px;
  background-color: #fff;
  color: #4d4d4d;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.card label.blind_input:before {
  content: "";
  position: absolute;
  left: calc((var(--input-px) / 2) * -1);
  top: 0;
  height: 100%;
  width: 1px;
  background: #8f8f8f;
}
.card label.blind_input:hover {
  color: #262626;
  background-color: #f2f2f2;
}

/*MOSTRAR EL OJO Y OCULTARLO*/
.blind-check ~ label.blind_input span.show,
.blind-check:checked ~ label.blind_input span.hide{
  display: none;
}
.blind-check ~ label.blind_input span.hide,
.blind-check:checked ~ label.blind_input span.show {
  display: block;
}
/*-----------------------*/

.form {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
}

.form .title {
  width: 100%;
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 1rem;
  padding-top: 0;
  padding-bottom: 1rem;
  color: rgba(0, 0, 0, 0.7);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

.form .label_input {
  white-space: nowrap;
  font-size: 1rem;
  margin-top: calc(var(--space-y) / 2);
  color: rgba(0, 0, 0, 0.9);
  font-weight: 600;
  display: inline;
  text-align: left;
  margin-right: auto;
  position: relative;
  z-index: 99;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.form .input {
  resize: vertical;
  background: white;
  border: 1px solid #8f8f8f;
  border-radius: 6px;
  outline: none;
  padding: var(--input-py) var(--input-px);
  font-size: 18px;
  width: 100%;
  color: #000000b3;
  margin: var(--space-y) 0;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.form .input#password-input {
  padding-right: calc(var(--blind-w) + var(--input-px) + 4px);
}
.form .input:focus {
  border: 1px solid #0969da;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px #0969da;
  box-shadow: 0 0 0 2px #0969da;
}
.form .frg_pss {
  width: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.form .frg_pss a {
  background-color: transparent;
  cursor: pointer;
  text-decoration: underline;
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
  color: #000000b3;
  font-weight: 500;
  float: right;
}
.form .frg_pss a:hover {
  color: #000;
}



button {
 width: 9em;
 height: 3em;
 border-radius: 30em;
 font-size: 15px;
 font-family: inherit;
 border: none;
 position: relative;
 overflow: hidden;
 z-index: 1;
 box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

button::before {
 content: '';
 width: 0;
 height: 3em;
 position: absolute;
 top: 0;
 left: 0;
 background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
 transition: .5s ease;
 display: block;
 z-index: -1;
}

button:hover::before {
 width: 9em;
}