/*PRINCIPAL*/
/*#eaa925;*/
/*PRINCIPAL MUY CLARO*/
.group > i {
  width: 20px;
  float: right;
  margin-top: -20px;
  margin-right: 3px;
  display: none;
}
.wrapper {
  background: #fef8ea;
  overflow: hidden;
  position: relative;
}
.wrapper:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 64.6%;
  z-index: 0;
  background-image: linear-gradient(rgba(246, 130, 42, 0.6), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15), rgba(246, 130, 42, 0.6)), url('/images/themes/unica/login-campus.png') !important;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}
.skew-block:after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
}
.intro .left-ovh {
  width: 35.4%;
  overflow: hidden;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.left-ovh {
  width: 35.4%;
  overflow: hidden;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.left-side {
  position: relative;
}
.intro {
  width: 100%;
  height: calc(100vh + 16vw);
  transition: height 1s 1s;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.intro .triangle {
  position: absolute;
  background: #fff;
  left: 0;
  bottom: -123.1%;
  height: 100%;
  -webkit-transform: skewY(19deg) translateY(-50%);
  transform: skewY(19deg) translateY(-50%);
  width: 65vw;
  z-index: -3;
}
.intro .triangle.right {
  left: auto;
  right: 0;
  bottom: -100%;
  -webkit-transform: skewY(-11deg) translateY(-31%);
  transform: skewY(-11deg) translateY(-31%);
}
.form {
  padding: 10vh 6vw;
}
@media only screen and (max-width: 1280px) {
  .form {
    padding: 10vh 5vw !important;
  }
}
h1 {
  margin: 7vh 0px 2vh 0px;
  color: #f6822a !important;
}
.logo {
  width: 250px !important;
}
.forget-password-label {
  color: #9a9a9b;
  font-size: 14px;
  font-weight: 500;
}
.forget-password-label:hover {
  text-decoration: none;
  cursor: pointer;
  color: #f6822a;
}
.button-submit {
  margin: 26px 0px;
  background-color: #f6822a !important;
  width: 100%;
  font-size: 18px;
  color: whitesmoke;
  letter-spacing: 0.5px;
}
.button-submit:focus {
  outline-color: transparent;
}
.group {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 2vh 0px;
}
input {
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  color: black;
  background: #fef8ea;
  font-size: 13px;
  transition: 0.3s ease;
  padding: 5px 0px 5px 0px;
  margin-top: 25px;
}
.bar:before {
  transform: translateX(0);
}
.bar {
  background: black;
  content: '';
  width: 100%;
  height: 1px;
  position: relative;
}
input:focus {
  outline: none;
}
.form-control-feedback,
.field-validation-error {
  position: absolute;
  top: 0.5rem;
  z-index: 2;
  display: block;
  text-align: center;
  pointer-events: none;
  color: red;
  margin-top: -5px !important;
}
div ul {
  position: absolute;
  list-style-type: none;
  padding-left: 0px;
}
.ico {
  width: 20px;
  float: right;
  margin-top: -25px;
  margin-right: 5px;
}
html {
  user-select: none;
}
/*hide figures*/
@media only screen and (max-width: 1024px) {
  h1 {
    font-size: 2rem;
  }
  button {
    font-size: 13px;
  }
  .logo {
    width: 250px !important;
  }
  .intro {
    height: calc(100vh) !important;
  }
  .triangle {
    display: none;
  }
  .left-side {
    height: 100%;
  }
  .left-ovh {
    overflow-y: auto !important;
    max-height: -webkit-fill-available;
  }
  .wrapper:after {
    display: none !important;
  }
  .intro .left-ovh {
    width: 100% !important;
  }
  .m-login__wrapper {
    height: 100vh;
  }
  .left-side > :not(.m-login__wrapper) {
    bottom: 10px !important;
    left: 10px !important;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  h1 {
    font-size: 15px;
    margin: 4vh 0px 0vh 0px;
  }
  input {
    font-size: 10px;
  }
  .button-submit {
    font-size: 13px;
    margin: 10px 0px;
    padding: 7px;
  }
  .forget-password-label {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  label {
    font-size: 10px;
  }
  input {
    padding: 0px 0px 5px 0px;
  }
  .group {
    margin: 1vh 0px;
  }
}
@media only screen and (max-width: 1024px) and (min-height: 200px) {
  .form {
    padding: 5vh 3vw 0vh 3vw !important;
  }
}
@media only screen and (max-width: 1024px) and (min-height: 300px) {
  .form {
    padding: 6vh 4vw 0vh 4vw !important;
  }
}
@media only screen and (max-width: 1024px) and (min-height: 400px) {
  .form {
    padding: 7vh 5vw 0vh 5vw !important;
  }
}
@media only screen and (max-width: 1024px) and (min-height: 500px) {
  .form {
    padding: 8vh 10vw 0vh 10vw !important;
  }
}
@media only screen and (max-width: 1024px) and (min-height: 600px) {
  .form {
    padding: 10vh 11vw 0vh 11vw !important;
  }
}
@media only screen and (max-width: 1024px) and (min-height: 700px) {
  .form {
    padding: 10vh 12vw 0vh 12vw !important;
  }
}
@media only screen and (max-width: 1024px) and (min-height: 800px) {
  .form {
    padding: 10vh 13vw 0vh 13vw !important;
  }
}
/*figures*/
@media (min-width: 1025px) {
  .container-shape {
    position: absolute;
    filter: drop-shadow(5px -5px 6px rgba(0, 0, 0, 0.4));
    z-index: -3;
  }
  .container-shape.right {
    filter: drop-shadow(-5px -5px 6px rgba(0, 0, 0, 0.4));
  }
  .shape {
    background: #f6822a !important;
    transform: rotate(19deg);
  }
  .shape.right {
    background: #f6822a !important;
    transform: rotate(-11deg);
  }
  .container-shape.one {
    top: 6.8%;
    left: 26.3%;
  }
  .container-shape.two {
    top: 57%;
    left: 14.05%;
  }
  .container-shape.three {
    top: 7%;
    left: 67.7%;
  }
  .container-shape.four {
    top: 18%;
    left: 86.4%;
  }
  .container-shape.five {
    top: 52.4%;
    left: 74.9%;
  }
  .shape.one {
    -webkit-clip-path: polygon(30% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(30% 0%, 0% 100%, 100% 100%);
    width: 5vw;
    height: 3vh;
  }
  .shape.two {
    -webkit-clip-path: polygon(30% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(30% 0%, 0% 100%, 100% 100%);
    width: 18vw;
    height: 12vh;
  }
  .shape.three {
    -webkit-clip-path: polygon(70% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(70% 0%, 0% 100%, 100% 100%);
    width: 5vw;
    height: 4vh;
  }
  .shape.four {
    -webkit-clip-path: polygon(70% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(70% 0%, 0% 100%, 100% 100%);
    width: 8vw;
    height: 7vh;
  }
  .shape.five {
    -webkit-clip-path: polygon(70% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(70% 0%, 0% 100%, 100% 100%);
    width: 22vw;
    height: 18vh;
  }
}