* {
    box-sizing: border-box;
}

.loader {
    display: none;
}

.all {
    overflow: hidden;
    min-height: 100vh;
    position: relative;
    background-color: var(--background);

}

.glitch {
    position: relative;
    color: #fff;
    font-size: 80px;
  }
  .glitch .line:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
  }
  .glitch .line:nth-child(1) {
    animation: clip 3000ms -300ms linear infinite, glitch1 500ms 116ms linear infinite;
  }

  
  @keyframes glitch1 {
    0% {
      transform: translateX(0);
    }
    80% {
      transform: translateX(0);
      color: #fff;
    }
    85% {
      transform: translateX(-2px);
      color: #4e9a26;
    }
    90% {
      transform: translateX(-4px);
      color: #ac1212;
    }
    95% {
      transform: translateX(-3px);
      color: #fff;
    }
    100% {
      transform: translateX(0);
    }
  }
  
  /* Similarly add @keyframes for glitch2 to glitch9 */
  
  @keyframes clip {
    0% {
      clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
    }
    100% {
      clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
    }
  }
.content-animacion15 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    gap: 30px 0;
    position: absolute;
    z-index: 0;
    right: 86%;
    animation: anim1 14s cubic-bezier(0.07, 0.06, 1, 1.03) infinite;
}

.content-animacion115 {
    display: flex;
    flex-direction: column;
    width: 65px;
    height: 100vh;
    position: absolute;
    gap: 30px 0;
    z-index: 0;
    right: 70%;
    animation: anim2 14s cubic-bezier(0.07, 0.06, 1, 1.03) infinite;
}

.content-animacion116 {
    display: flex;
    flex-direction: column;
    width: 65px;
    gap: 30px 0;
    height: 100vh;
    position: absolute;
    z-index: 0;
    right: 10%;
    animation: anim1 7s cubic-bezier(0.07, 0.06, 1, 1.03) infinite;
}

@keyframes anim1 {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

@keyframes anim2 {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-100%);
    }
}

.container-login {
    max-width: 1920px;
    width: 100%;
    margin: 80px auto;
    padding-inline: 10.5%;
}

.wrapper-login {
    max-width: 618px;
    width: 100%;
    min-height: 416px;
    background-color: var(--color-number8);
    box-shadow: 0px 6px 6px 1px var(--color-number16);
    border-radius: 8px;
    margin: auto;
        z-index: 1;
        position: relative;
}

.content-login h1 {
    font-size: 38px;
    font-weight: 500;
    line-height: 46px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--color-number9);
}
.action-login{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content-input {
    max-width: 396px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 30px;
}

.content-login-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    position: relative;
}

.content-login-input span {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--color-number12);
    max-width: 383px;
    width: 100%;
}

.content-login-input input {
    max-width: 396px;
    width: 100%;
    height: 40px;
    border-radius: 8px;
    padding: 12px 16px 12px 16px;
    color: #000;
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px var(--color-number2);
    outline: none;
    border: none;
}

.toggle-password {
    cursor: pointer;
    position: absolute;
    user-select: none;
    top: 31px;
    right: 16px;
}

.login-btn {
    padding-top: 30px;
    display: flex;
    justify-content: center;
}

#loginButton span a {
    color: var(--color-number5);
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: center;

}

.content-login {
    padding-top: 20px;
    display: flex;
    justify-content: center;
}

.content-login-name {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding-top: 50px;
}

.content-login-name span:nth-child(1) {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--color-number9);
}

.content-login-name span:nth-child(2) {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--color-number5);
    text-decoration: underline;
    cursor: pointer;
}

.btn-login {
    max-width: 173px;
    width: 100%;
}

.btn-login.btn-4:hover:after,
.btn-login.btn-4 span:hover:after {
    width: 79.5%;
}

.content-login-input input:hover {
    border: 1px solid var(--color-number14);
    box-shadow: 0px 0px 8px 0px var(--color-number2);
    outline: none;
}

.content-login-input input:focus-visible {
    outline: none;
    border: 2px solid var(--color-number18);
}

/* Sign UP */
.container-signUp {
    max-width: 1920px;
    width: 100%;
    min-height: 618px;
    margin: auto;
    padding-inline: 10.5%;
}

.wrapper-sign {
    display: flex;
    flex-direction: column;
    max-width: 618px;
    width: 100%;
    min-height: 683px;
    background-color: var(--color-number8);
    box-shadow: 0px 6px 6px 1px var(--color-number16);
    margin: 80px auto;
    border-radius: 8px;
}

.content-reg {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.content-reg h1 {
    font-size: 38px;
    font-weight: 500;
    line-height: 46px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--color-number9);
}

.content-login-name1 {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 50px;
}

.content-login-name1 span:nth-child(1) {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--color-number9);
}

.content-login-name1 span:nth-child(2) {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--color-number5);
    text-decoration: underline;
    cursor: pointer;
}

@media screen and (max-width: 1440px) {
    .content-login-name1 {
        margin-top: 40px;
    }

    .login-btn {
        padding-top: 43px;
    }
}

@media screen and (max-width: 678px) {
.content-animacion15{
    display: none;
}
.content-animacion115 {
    right: 72%;
}
.content-animacion116 {
    right: 10%;
}
}
@media screen and (max-width: 578px) {
    .all{
        height: 800px;
    }
    .wrapper-sign {
        max-width: 380px;
        width: 100%;
        min-height: 682px;
    }

}

@media screen and (max-width: 428px) {
    .container-signUp {
        max-width: 1920px;
        width: 100%;
        min-height: 618px;
        margin: auto;
        padding-inline: 5%;
    }

    .wrapper-sign {
        max-width: 380px !important;
    }
}






.dx-texteditor { background-color: #fff !important; }
.dx-texteditor-input { background-color: #fff !important; color: #000 !important; }
.dx-texteditor-input::placeholder { color: #888 !important; }