/***
Login page
***/
:root {
  --color-principal-login: #040824;
  --color-text-login: #FFFFFF;
  --color-input-login: #2A2E45;
	--color-principal: #7D93F7;
}
/* logo page */
.login {
  background-color: #666 !important;
  font-family: 'Arial', sans-serif;

}

.login .logo {
  margin: 0 auto;   
  /* margin-top:60px; */
  padding: 2%;
  text-align: center;
}  

.login .content {
  overflow: hidden;
  background: var(--color-principal-login);
  width: 85%;
  margin: 0 auto;
  margin-bottom: 0px;
  padding: 30px;
  padding-top: 20px;
  padding-bottom: 9%;
  border-radius: 10px !important;
}

.login .content h3 {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 700 !important;
  font-size: 29px;
  line-height: 38px;
  /* or 131% */

  letter-spacing: 0.157028px;
  padding: 0 0 4% 0;
  color: var(--color-text-login);
}
.login .content h4  {
  color: #eee;
}

.login .content p,
.login .content label {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  /* identical to box height */

  letter-spacing: -0.105991px;

  color: var(--color-text-login);
  padding-bottom: 10px;
  padding-top: 15px;
}

.login .content .login-form,
.login .content .forget-form {
    padding: 0px;
    margin: 16% 0 0 0;
}
/*  */
.login .content .form-control {
  background: var(--color-input-login);
  border: 2px solid #7B43F5;
  box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.05);
  border-radius: 5px !important;
}
/*  */
.login .content .forget-form {
  display: none;
}

.login .content .register-form {
  display: none;
}

.login .content .form-title {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 700 !important;
  font-size: 29px;
  line-height: 38px;
  /* or 131% */

  letter-spacing: 0.157028px;
  padding: 0 9% 2% 0;
  color: var(--color-text-login);
}

.login .content .form-content {
  font-family: 'Arial';
  font-style: normal;
  text-align: left;
  font-weight: 500 !important;
  font-size: 17px;
  line-height: 18px;
  letter-spacing: 0.157028px;
  margin: 0 12% 0 12%;
  color: var(--color-text-login);
}

.login .content .form-actions {
  background-color: transparent;
  clear: both;
  border: 0px;
  padding: 0px 30px 25px 30px;
  margin-left: -30px;
  margin-right: -30px;
}

.login .content .form-actions .checkbox {
  margin-left: 0;
  padding-left: 0;
}

.login .content .forget-form .form-actions {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 20px;
}  

.login .content .register-form .form-actions {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0px;
}

.login .content .form-actions .checkbox {
  margin-top: 8px;
  display: inline-block;
}

.btn-submit{

  font-weight: 0;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(90deg, #fe804a 0%, #fd4b4b 100%);
  padding: 10px 30px;
  border: none;
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  border-radius: 50px !important;
  transition : 1000ms;
  transform: translateY(0);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.btn-submit:hover{

  transition : 1000ms;
  padding: 10px 30px;
  transform : translateY(-0px);
  background: linear-gradient(90deg, #fd4b4b 0%, #fe804a 100%);
  color: #fff;
}


.login .content .forget-password {
  margin-top: 25px;
}

.login .content .create-account {
  border-top: 1px dotted #eee;
  padding-top: 10px;
  margin-top: 15px;
}

.login .content .create-account a {
  display: inline-block;
  margin-top: 5px;
}

/* select2 dropdowns */
.login .content .select2-container i {
  display: inline-block;
  position: relative;
  color: #ccc;
  z-index: 1;
  top:1px;
  margin: 4px 4px 0px 3px; 
  width: 16px;
  height: 16px;
  font-size: 16px;
  text-align: center; 
}

.login .content .has-error .select2-container i {
  color: #b94a48;
}

.login .content .select2-container a span {
  font-size: 13px;
}

.login .content .select2-container a span img {
  margin-left: 4px;
}

/* footer copyright */
.login .copyright {
  text-align: center;
  margin: 0 auto; 
  padding: 10px;
  color: #eee;
  font-size: 13px;
}

@media (max-width: 480px) {
  /***
  Login page
  ***/
  .login .logo {
    margin-top:10px;
  }

  .login .content {
    padding: 30px; 
    width: 222px;
  }

  .login .content h3 {
    font-size: 22px;
  }

  .login .checkbox {
    font-size: 13px;
  }
}


/***
 ESTILOS NUEVOS LOGIN
***/

.buttons {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.btn-login {
  width: 70%;
  height: 50px;
  margin: 0 0 0 4%;

  background: linear-gradient(90deg, #D945FC 0%, #E54880 100%) !important;
  box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.05) !important;
  border-radius: 33px !important;

  /*  */
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  color: #FFFFFF !important;
}

.btn-login:hover {
  opacity: 0.5;
}

.login .content .form-control::placeholder {
  /* ALINEACION */
  text-align: left !important;
  vertical-align: middle;
  /* padding: 0 10px 0 6px !important; */
  /* TEXTO */
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  /* identical to box height */

  letter-spacing: -0.105991px;
  color: #FFFFFF;
}

.login .content .form-control:focus, .form-control:valid {
  /* ALINEACION */
  text-align: left !important;
  vertical-align: middle;
  padding: 0 10% 0 7% !important;
  /* TEXTO */
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  /* identical to box height */

  letter-spacing: -0.105991px;
  color: #FFFFFF;
}

.content-left {
  width: 110%;
  height: 200%;
  background: #7B43F5;
  margin: -4% 0 0 -9%;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  padding-bottom: 15px !important;
}
.advert-login{
  /* opacity: 0.2; */
  width: 100% !important;
  margin: 0 10% 0 0 !important;
}

.logo-login {
  width: 30%;
  height: 8%;
  margin: 10% 34% 0 0 !important;
}

.content-links {
  width: 100%;
  height: 30%;
  margin-top: 4%;
}

.w-100 { /* Editar borde superior izquierdo imagen carrusel */
  border-top-left-radius: 10px !important;
}

.carousel-inner{
  border-top-left-radius: 10px !important;
}

.carousel-inner>.active {
  border-top-left-radius: 10px !important;
}

.link-login {
  background: none !important;
  text-decoration: none !important;
  color: var(--color-text-login);
  margin-right: 5% !important;
  margin-left: 5% !important;
}

.text-advert-login {
  font-family: 'Arial', sans-serif;
  font-size: 58px;
  font-weight: 700 !important;
  line-height: 55px;
  letter-spacing: -0.32857099175453186px;
  text-align: left;

  position: absolute;
  width: 85%;
  height: 50%;
  top: 48%;
  left: 5%;
  color: var(--color-text-login);
}

.btn-back {
  position: absolute;
  left: 49%;
  top: 0%;
  width: 16%;
  height: 70px;
  margin: 0 0 0 -40%;
  background: none;
  box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.05) !important;
  border-radius: 33px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  color: #FFFFFF !important;
  transition: 2s ease-out all !important;
}

.btn-text {
  position: absolute;
  left: 73%;
  top: 39%;
  transform: translateY(-50%);
}

.btn-enviar {
    width: 77%;
    height: 45px;
    margin: 0 10% 0 0;
    background: linear-gradient(90deg, #D945FC 0%, #E54880 100%) !important;
    box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.05) !important;
    border-radius: 33px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
}

.btn-password {
  background: none !important;
  color: #8765DB;
  border: 0 !important;
  /* TEXTO */
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  letter-spacing: -0.105991px;
}

.label-olvido {
  /* TEXTO */
  margin-top: 20px;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 0 !important;
  color: #FFFFFF !important;
}

/* CONTENIDO DEL LOGIN */

.content-logo-login {
  margin-bottom: 8% !important;
}

.title-content-login {
  /* TEXTO */
  position: absolute;
  top: 30%;
  left: 12%;
  margin-right: 10% !important;
  font-style: normal !important;
  font-weight: 550 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  letter-spacing: -0.328571px;
}

.section-content-login {
  /* TEXTO */
  position: absolute;
  top: 48%;
  left: 12%;
  margin-right: 10% !important;
  font-style: normal !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  letter-spacing: 2.352811px !important;
}

.btn-content-login {
  /* MARGIN, TAMANO Y POSICION */
  top: 53%;
  left: 12%;
  position: absolute !important;
  background: #20123F !important;
  /* background: none !important; */
  border-radius: 5px !important;
  padding: 15px 12px 15px 12px;
  /* TEXTO */
  text-decoration: none !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 21px !important;
  /* identical to box height */

  letter-spacing: 0.415385px !important;
  text-transform: uppercase !important;

  color: #fff !important;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1) !important;
}

.btn-content-login svg {
  border-radius: 5px !important;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
}

.btn-content-login rect {
  border-radius: 5px !important;
  width: 100%;
  height: 100%;
  stroke: #fff;
  stroke-width: 7px;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: .6s ease all;
}

.btn-content-login:hover rect {
  stroke-dashoffset: 0;
}

.btn-section-login {
  /* POSICION */
  position: absolute !important;
  top: 50%;
  left: 42%;
  width: 44%;
  /* TEXTO */
  font-style: normal !important;
  font-weight: 100 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  letter-spacing: 1.352811px !important;
}

.btn-link-login {
  /* POSICION */
  position: absolute !important;
  top: 120%;
  left: 0;
  width: 111%;
}

.btn-item {
  background: none !important;
  /* TEXTO */
  font-style: normal !important;
  font-weight: 100 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.352811px !important;
  text-decoration: none;
  margin-right: 10%;
}

.home:hover {
  text-decoration: none;
  font-weight: 600 !important;
  text-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
  font-size: 15px !important;
  transition: .6s ease all;
}

.home:hover .arriba {
  width: 3px;
  height: 11px;
  display: -webkit-inline-box;
  background: #fff;
}

.home:hover .abajo {
  width: 3px;
  height: 11px;
  display: -webkit-inline-box;
  background: #fff;
}

.tour:hover {
  text-decoration: none;
  font-weight: 600 !important;
  text-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
  font-size: 15px !important;
  transition: .6s ease all;
}

.tour:hover .arriba {
  width: 3px;
  height: 11px;
  display: -webkit-inline-box;
  background: #fff;
}

.tour:hover .abajo {
  width: 3px;
  height: 11px;
  display: -webkit-inline-box;
  background: #fff;
}

.course:hover {
  text-decoration: none;
  font-weight: 600 !important;
  text-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
  font-size: 15px !important;
  transition: .6s ease all;
}

.course:hover .arriba {
  width: 3px;
  height: 11px;
  display: -webkit-inline-box;
  background: #fff;
}

.course:hover .abajo {
  width: 3px;
  height: 11px;
  display: -webkit-inline-box;
  background: #fff;
}

.job:hover {
  text-decoration: none;
  font-weight: 600 !important;
  text-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
  font-size: 15px !important;
  transition: .6s ease all;
}

.job:hover .arriba {
  width: 3px;
  height: 11px;
  display: -webkit-inline-box;
  background: #fff;
}

.job:hover .abajo {
  width: 3px;
  height: 11px;
  display: -webkit-inline-box;
  background: #fff;
}

/* ICONOS LOGIN */

.fa-arrow-amaxonia {
  background-image: url(../../icons/arrow-white.svg);
  margin: 2px !important;
  background-repeat: no-repeat;
  width: 42px !important;
  height: 60px !important;
}

.fa-user-amaxonia {
  background-image: url(../../icons/user.svg);
  margin: 2px !important;
  background-repeat: no-repeat;
  width: 6% !important;
  height: 100% !important;
}

.fa-email-amaxonia {
  background-image: url(../../icons/email.svg);
  margin: 2px !important;
  background-repeat: no-repeat;
  width: 6% !important;
  height: 100% !important;
}

.fa-lock-amaxonia {
  background-image: url(../../icons/lock.svg);
  margin: 2px !important;
  background-repeat: no-repeat;
  width: 6% !important;
  height: 100% !important;
}

/* SELECCIONAR EMPRESA FORM */

.img-empresa {
  margin-top: 10vh !important;
}

.has-error .form-control {
  border-width: 2px !important;
  border-color: #b94a48 !important;
}

.btn-login-empresa {
  /* margin: 0 46% 0 21%; */
  width: 25%;
  height: 40px;

  background: linear-gradient(90deg, #D945FC 0%, #E54880 100%) !important;
  box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.05) !important;
  border-radius: 33px !important;

  /* COLOR TEXTO */
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  color: #FFFFFF !important;
}

.form-control {
  width: 60%;
}

.logo-login-empresa {
  width: 40%;
  height: 8%;
  margin: 0 !important;
  margin-bottom: 20px !important;
  /* margin: 6% 25% 3% 0 !important; */
}

/* .login .content-empresa {
  background: var(--color-principal-login);
  width: 70%;
  height: 85%;
  margin: 0 auto 0 15%;
  margin-bottom: 0px;
  padding: 30px;
  padding-top: 20px;
  padding-bottom: 9%;
  border-radius: 10px !important;
  padding: 30px 30px 9% 30px;
} */
.login .content-empresa {
  /* background: var(--color-principal-login); */
  background: #fff;
  overflow: hidden !important;
  width: 70%;
  height: 90%;
  margin: 0;
  margin-bottom: 0px;
  border-radius: 10px !important;
  /* padding: 30px 30px 9% 30px; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* IMAGENE */
  background-image: url("../../img/bg/Bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.empresa-select-login {
  /* TEXTO */
  font-family: 'Arial' !important;
  font-style: normal !important;
  font-weight: 550 !important;
  font-size: 14px !important;
  line-height: 38px !important;
  letter-spacing: 0.157028px !important;
  color: #000 !important;
  width: 20%;
}

.form-control.select2-container {
  margin: 0 25% 0 0 !important;
  width: 25%;
}

.form-empresa-title {
  /* TEXTO */
  font-family: 'Arial' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 38px !important;
  letter-spacing: 0.157028px !important;
  padding: 0 !important;
  color: var(--color-text-login) !important;
  margin: 0 32% 1% 0;
}

.form-title-empresa {
  /* TAMANO, MARGEN, POSICION */
  position: absolute;
  left: 10% !important;
  top: 80% !important;
  /* TEXTO */
  font-family: 'Arial'  !important;
  font-style: normal  !important;
  font-weight: 600 !important;
  font-size: 26px  !important;
  line-height: 38px  !important;
  letter-spacing: 0.157028px  !important;
  padding: 0 !important;
  color: var(--color-text-login)  !important;
}

.input-login {
  width: 80% !important;
  margin-left: 12% !important;
}

.left-input-login {
  margin-left: 13% !important;
}

@media (min-width: 1424px) {
  .content-left {
    width: 100% !important;
    background: #7B43F5 !important;
    margin: -3.9% 0 0 -9% !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
  }
  .btn-content-login {
    top: 60%;
  }
  .btn-section-login {
    top: 57%;
  }
}

@media (max-width: 1320px) {
  .text-advert-login {
    font-size: 50px !important;
  }
  .btn-content-login {
    top: 60%;
  }
  .btn-section-login {
    top: 57%;
  }
}

@media (min-width: 1150px) and (max-width: 1280px) {
  .content-left {
    width: 110% !important;
    background: #7B43F5 !important;
    margin: -4.5% 0 0 -10% !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
  }
  .text-advert-login {
    font-size: 38px !important;
    font-weight: 600 !important;
    line-height: 50px !important;
  }
  .btn-section-login {
    top: 56%;
    left: 45%;
  }
}

@media (max-width: 1150px) {
  .content-left {
    width: 110% !important;
    background: #7B43F5 !important;
    margin: -5.3% 0 0 -12% !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
  }
  .text-advert-login {
    font-size: 35px !important;
    font-weight: 600 !important;
    line-height: 45px !important;
  }
  .btn-section-login {
    top: 56%;
    left: 50%;
    width: 30%;
  }
  .btn-text {
    left: 82%;
  }
}

@media (max-width: 1060px) {
  .content-left {
    width: 100% !important;
    background: #7B43F5 !important;
    margin: -6% 0 0 -13% !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
  }
  .text-advert-login {
    font-size: 33px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
  }
  .fa-email-amaxonia {
    width: 12% !important;
  }
  .fa-lock-amaxonia {
    width: 12% !important;
  }
  .btn-text {
    left: 100%;
  }
}

@media (max-width: 990px) {
  .content-left {
    width: 120% !important;
    background: #7B43F5 !important;
    margin: -6.3% 0 0 -22.4% !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
  }
  .text-advert-login {
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
  }
  .login .content .form-control:focus, .form-control:valid {
    padding: 0 10% 0 10% !important;
  }
  .fa-email-amaxonia {
    width: 12% !important;
  }
  .fa-lock-amaxonia {
    width: 12% !important;
  }
  .btn-content-login {
    top: 65%;
  }
  .btn-section-login {
    left: 56%;
    width: 38%;
  }
  .label-olvido {
    line-height: 1 !important;
  }
  .btn-text {
    left: 95%;
  }
}

@media (min-width: 770px) and (max-width: 840px) {
  .content-left {
    width: 120% !important;
    background: #7B43F5 !important;
    margin: -7% 0 0 -16.4% !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
  }
  .fa-email-amaxonia {
    width: 12% !important;
  }
  .fa-lock-amaxonia {
    width: 12% !important;
  }
  .form-control.select2-container {
    margin: 0 24% 0 0 !important;
  }
  .empresa-select-login {
    width: 36%;
  }
  .logo-login-empresa {
    width: 34% !important;
    margin: 6% 25% 5% 0 !important;
  }
  .btn-login-empresa {
    width: 36% !important;
    font-size: 12px !important;
  }
  .btn-section-login {
    top: 62%;
    left: 12%;
    width: 70%;
  }
  .btn-content-login {
    top: 85%;
    left: 18%;
  }
  .label-olvido {
    line-height: 1 !important;
  }
  .btn-text {
    left: 105%;
  }
}

@media (max-width: 770px) {
  .btn-login-empresa {
    width: 100% !important;
    font-size: 12px !important;
    margin: 0;
  }
  .empresa-select-login {
    width: 100%;
  }
  .logo-login-empresa {
    width: 40% !important;
    /* margin: 5% 0 10% 0 !important; */
  }
  .content-left {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    background: #7B43F5 !important;
    margin: 0 0 0 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .empresa-select-login {
    width: 40% !important;
  }
  .btn-login-empresa {
    width: 40% !important;
    font-size: 12px !important;
    /* margin: 0 24% 0 0; */
  }
  .btn-text {
    left: 80%;
  }
}

/* EMPRESA LOGIN */
.form-empresa {
  margin-top: 25px !important;
}

/* ESTILOS BANNERS LOGIN */
.banners-login {
  position: absolute;
  left: 0;
  margin-top: 35px !important;
  /* top: 60%; */
  /* width: 70%; */
}

.select-empresa {
  width: 42%;
  margin-left: 29%;
  text-align: left;
}

div, input, select, textarea, span, img, table, td, th, p, a, button, ul, code, pre, li {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 6px !important;
  /* text-align: left; */
}