@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

@font-face {
  font-family: 'WorldCup2026';
  src: url('../fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.login-error-message{
  color: red;
  font-size: 12px;
  font-weight: 500;
  margin-top: 5px;
}

.content-background {
  height: 100vh;
  background: -moz-linear-gradient(45deg, #6E3FB0 0%, #7A1A24 25%, #D62828 50%, #2D9B3F 75%, #C8E84D 100%);
  background: -webkit-linear-gradient(45deg, #6E3FB0 0%, #7A1A24 25%, #D62828 50%, #2D9B3F 75%, #C8E84D 100%);
  background: linear-gradient(45deg, #6E3FB0 0%, #7A1A24 25%, #D62828 50%, #2D9B3F 75%, #C8E84D 100%);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
  /*min-height: calc(100vh - 2rem);*/
  display: flex;  
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  overflow: hidden; 
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* media query for height */

@media screen and (max-height: 600px) {
  .content-background {
      height: 100vw;
  }
}

@media screen and (max-width: 1000px) {
  .content-background {
      min-height: 800px;
      height: 100%;
  }
}

.content-background::before, 
.content-background::after {
  content: "";
  width: 70vmax;
  height: 70vmax;
  position: absolute;
  background: rgba(255, 255, 255, 0.07);
  left: -20vmin;
  top: -20vmin;
  animation: morph 15s linear infinite alternate, spin 20s linear infinite;
  z-index: 1;
  will-change: border-radius, transform;
  transform-origin: 55% 55%;
  pointer-events: none; 
  overflow: hidden;
}

.content-background::after {
  width: 70vmin;
  height: 70vmin;
  left: auto;
  right: -10vmin;
  top: auto;
  bottom: 0;
  animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
  transform-origin: 20% 20%; 
  overflow: hidden;
}

@-webkit-keyframes Gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

@keyframes Gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

@keyframes morph {
  0% {
      border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
  }
  100% {
      border-radius: 40% 60%;
  } 
}

@keyframes spin {
  to {
      transform: rotate(1turn);
  } 
}
.st0{display:none;}
.st1{display:inline;}
.st2{opacity:0.29;}
.st3{fill:#FFFFFF;}
.st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
.st5{clip-path:url(#SVGID_4_);}
.st6{clip-path:url(#SVGID_6_);}
.st7{clip-path:url(#SVGID_8_);}
.st8{clip-path:url(#SVGID_10_);}
.st9{fill:none;}
.st10{clip-path:url(#SVGID_12_);}
.st11{opacity:0.7;}
.st12{clip-path:url(#SVGID_14_);}
.st13{opacity:0.2;}
.st14{clip-path:url(#SVGID_16_);}
.st15{opacity:0.3;fill:#FFFFFF;enable-background:new;}


  

*, *::after, *::before {
    box-sizing: border-box;
    /* font-family: verdana; */
    /* font-size: 2.25rem; */
    /* font-weight: 700px; */
  }
  
  body {
    background-color: rgba(110, 63, 176, 0.25) !important;
    color: rgb(0,0,0);
    font-family: 'Open Sans', sans-serif;
    font-weight: 500 !important;
    min-height: 100vh;
  }

  ul i{
    color : rgb(0, 0, 0) !important;
    transition: all 0.2s ease-in-out;

  }

  a{
    color: rgb(0, 0, 0) !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
  }

  ul i:hover{
    color : rgb(0,0,0) !important;
  }

    a:hover{
        color: rgb(0,0,0) !important;
    }

.new-user-login {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 30px;
}


.new-user-login a {
    margin: 0 auto;
    display: block;
    color: #000000 !important;
    font-size: 0.75rem;
}

.new-user-login span {
    margin: 0 auto;
    display: block;
    color: #000000 !important;
    font-size: 0.75rem;
}

.recomendacion {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: rgb(0,0,0) !important;
}

.recomendacion-mail {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    color: rgb(0,0,0) !important;
}

.recomendacion-mail a {
    color: #000000 !important;
}

.mensaje {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    color: rgb(0,0,0) !important;
}

.circle {
    width: 50%;
    height: 70%;
    position: absolute;
    background: #000000;
    border-radius: 0 0 100% 0;
    z-index: -1000;
}

.form-login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    margin: auto;
    width: 90%;
    max-width: 400px;
    padding: 1.5em 2em;
    border-radius: 10px;
    box-shadow: 0 5px 10px -5px rgb(0 0 0 / 30%);
    text-align: center;
    background: rgba(255, 255, 255, 0.877);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 1s;
}

.form-login:hover {
    /* 
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(12.2px);
    -webkit-backdrop-filter: blur(12.2px);*/
}

.form__title {
    font-size: 2rem;
    margin-bottom: .5em;
    font-family: 'WorldCup2026';
}

.form__paragraph {
    margin-top: 20px;
    font-weight: 300;
}

.form__link {
    font-weight: 400;
    color: #000;
}

.form__container {
    margin-top: 3em;
    display: grid;
    gap: 2.5em;
}
/* media 500px */
@media screen and (max-width: 500px) {
    .form__container {
        gap: 1.5em;
        margin-top: 1.5em;

    }

    .form__paragraph {
        margin-top: 20px;
    }

    .form-login {
        padding: 1em 2em;
        transform: translate(-50%, -40%);
    }
}
.form__group {
    position: relative;
    color: #5757577e
}

.form__label {
    color: var(--color);
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 5px;
    transform: translateY(10px);
    transition: transform .5s, color .3s;
}

.form__submit {
    cursor: pointer;
    background: #000000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    padding: .8em 0;
    border: none;
    border-radius: .5em;
    transition: all .3s;
}

.form__submit:hover {
    background: #000000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    padding: .8em 0;
    border: none;
    border-radius: .5em;
    transform: scale(1.05);

}

.form__line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    transform: scale(0);
    transform: left bottom;
    transition: transform .4s;
}

.form__input:focus~.form__line,
.form__input:not(:placeholder-shown)~.form__line {
    transform: scale(1);
}

@media (max-width:425px) {
    .form__title {
        font-size: 1.8rem;
    }
}

.Creador {
    position: fixed;
    top: 10px;
    display: flex;
    left: 80%;
    justify-content: center;
    width: 70px;
    border-radius: 5px;
    padding: 5px;
    background-color: #000000;
}

.Creador a {
    color: #fff;
    font-size: 12px;
}

#id_username {
    width: 100%;
    background: none;
    --color: #706c6c;
    font-size: 1rem;
    padding: .6em .3em;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--color);
    font-family: 'Roboto', sans-serif;
}

#id_username:not(:placeholder-shown) {
    color: #4d4646;
}

#id_username:focus+.form__label,
#id_username:not(:placeholder-shown)+.form__label {
    transform: translateY(-12px) scale(.7);
    transform-origin: left top;
    color: #000000;
}

#id_password {
    width: 100%;
    background: none;
    --color: #706c6c;
    font-size: 1rem;
    padding: .6em .3em;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--color);
    font-family: 'Roboto', sans-serif;
}

#id_password:not(:placeholder-shown) {
    color: #4d4646;
}

#id_password:focus+.form__label,
#id_password:not(:placeholder-shown)+.form__label {
    transform: translateY(-12px) scale(.7);
    transform-origin: left top;
    color: #000000;
}

#id_email {
    width: 100%;
    background: none;
    --color: #706c6c;
    font-size: 1rem;
    padding: .6em .3em;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--color);
    font-family: 'Roboto', sans-serif;
}

#id_email:not(:placeholder-shown) {
    color: #4d4646;
}

#id_email:focus+.form__label,
#id_email:not(:placeholder-shown)+.form__label {
    transform: translateY(-12px) scale(.7);
    transform-origin: left top;
    color: #000000;
}

#id_new_password1 {
    width: 100%;
    background: none;
    --color: #706c6c;
    font-size: 1rem;
    padding: .6em .3em;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--color);
    font-family: 'Roboto', sans-serif;
}

#id_new_password1:not(:placeholder-shown) {
    color: #4d4646;
}

#id_new_password1:focus+.form__label,
#id_new_password1:not(:placeholder-shown)+.form__label {
    transform: translateY(-12px) scale(.7);
    transform-origin: left top;
    color: #000000;
}

#id_new_password2 {
    width: 100%;
    background: none;
    --color: #706c6c;
    font-size: 1rem;
    padding: .6em .3em;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--color);
    font-family: 'Roboto', sans-serif;
}

#id_new_password2:not(:placeholder-shown) {
    color: #4d4646;
}

#id_new_password2:focus+.form__label,
#id_new_password2:not(:placeholder-shown)+.form__label {
    transform: translateY(-12px) scale(.7);
    transform-origin: left top;
    color: #000000;
}

/* loader */

.loader-body-animation {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #242f3f;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-body-animation-class {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 5px solid #fff;
    padding: 2px;
    animation: loader-body 2s infinite ease;
}

.loader-inner-body-animation {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner-body 2s infinite ease-in;
}

@keyframes loader-body {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(180deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes loader-inner-body {
    0% {
        height: 0%;
    }

    25% {
        height: 0%;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}


.logo-acc{
    width: 100%;
    height: 100%;
    
  }
  
  .logo-acc img{
    max-width: 100px;
    max-height: 100px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    filter : drop-shadow(0 0 0.75rem #000);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.15),
    1px 2px 1px rgba(0,0,0,0.15),
    1px 3px 1px rgba(0,0,0,0.15),
    1px 4px 1px rgba(0,0,0,0.15),
    1px 5px 1px rgba(0,0,0,0.15),
    1px 6px 1px rgba(0,0,0,0.15),
    1px 7px 1px rgba(0,0,0,0.15),
    1px 8px 1px rgba(0,0,0,0.15),
    1px 9px 1px rgba(0,0,0,0.15),
    1px 10px 1px rgba(0,0,0,0.15),
  1px 18px 6px rgba(255, 255, 255, 0.4),
  1px 22px 10px rgba(255, 255, 255, 0.4),
  1px 25px 35px rgba(255, 255, 255, 0.4),
  1px 30px 60px rgba(255, 255, 255, 0.4);
    opacity: 0.5;
  }
  
  
  .logo-mega{
    width: 100%;
    height: 100%;
    
  }
  
  .logo-mega img{
    max-width: 100px;
    max-height: 100px;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    object-fit: contain;
    padding: 1rem;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    filter : drop-shadow(0 0 0.75rem #000);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.15),
    1px 2px 1px rgba(0,0,0,0.15),
    1px 3px 1px rgba(0,0,0,0.15),
    1px 4px 1px rgba(0,0,0,0.15),
    1px 5px 1px rgba(0,0,0,0.15),
    1px 6px 1px rgba(0,0,0,0.15),
    1px 7px 1px rgba(0,0,0,0.15),
    1px 8px 1px rgba(0,0,0,0.15),
    1px 9px 1px rgba(0,0,0,0.15),
    1px 10px 1px rgba(0,0,0,0.15),
  1px 18px 6px rgba(255, 255, 255, 0.4),
  1px 22px 10px rgba(255, 255, 255, 0.4),
  1px 25px 35px rgba(255, 255, 255, 0.4),
  1px 30px 60px rgba(255, 255, 255, 0.4);
    opacity: 0.5;
  }
  
  /* media max width 800px */
  
  @media (max-width: 767px) {
    .logo-mega img{
      max-width: 75px;
      max-height: 75px;;
    }
  
    .logo-acc img{
      max-width: 75px;
      max-height: 75px;
    }
  }