body{
  position: relative;
}
#containerLogin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;      
  max-width: 1000px;
  height: auto;  
}

#containerLogin .topLog:before,
#containerLogin .topLog:after,
#containerLogin .bottomLog:before,
#containerLogin .bottomLog:after {
  transition: all 0.8s ease;
  margin-left: 0;
  transform-origin: center;
}


#containerLogin.active .topLog:before,
#containerLogin.active .topLog:after,
#containerLogin.active .bottomLog:before,
#containerLogin.active .bottomLog:after {
  margin-left: 300px;
  transform-origin: -300px 50%;
}

#containerLogin.active .centerLogin {
  opacity: 1;
  transition-delay: 0.2s;
}


.topLog, .bottomLog{
  &:before, &:after{
    content:'';
    display:block;
    position:absolute;
    width:200vmax;
    height:200vmax;
    top:50%;left:50%;
    margin-top:-100vmax;
    transform-origin: 0 50%;
    transition:all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
    z-index:10;
    opacity:0.65;
    transition-delay:0.2s;
  }
}

.topLog{
  &:before{transform:rotate(45deg);background:#ECA400;}
  &:after{transform:rotate(135deg);background:#eca5006e;}
}

.bottomLog{
  &:before{transform:rotate(-45deg);background:#006992;}
  &:after{transform:rotate(-135deg);background:#001D4A;}
}

#containerLogin .centerLogin{
  position:absolute;
  width:400px;
  top: 50%;
  left: 50%;
  margin-left:-200px;
  margin-top:-200px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:20px;
  opacity:0;
  transition:all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
  transition-delay:0s;
  color:#333;
  background: rgba(152, 174, 201, 0.09);
  border-radius: 16px;
  backdrop-filter: blur(3.4px);
  -webkit-backdrop-filter: blur(3.4px);
  border: 1px solid rgba(35, 65, 102, 0.18);
  z-index:100;
}
#containerLogin .h2Form{
  color:var(--main-bg0-color);
  margin-bottom: 20px;
  z-index: 1200;
  font-size: 20px;
}

   #containerLogin .form-section {
      width: 100%;
      height: 75%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items:center;
    }
   
   #containerLogin .form-section input{
        padding:10px 30px;
        margin:10px auto ;
        border-radius:1px;
        border:1px solid #ccc;
        font-family:inherit;
        border-radius:5px;
        font-size: 14px;
        background-color:#fff;
    } 
   
    .loginTo,
    .registerTo{
        background:var(--main-bg0-color);
        color: #fff;
        padding:10px 15px ;
    }
    .registerTo:hover,.loginTo:hover {
        background: var(--main-hover-color);
        color:var(--main-darktext-color)
        }
    
  #containerLogin .input-captcha{
    width:50%;
    align-self:start;
    margin: 0!important;

    } 

   #containerLogin .divCaptcha{
      width: 48%;
      height: 40px;
      position: relative;
      background-color:#fff;
      border-radius:5px;
      border: 1px solid #ccc;
    }
  #containerLogin .imgCaptcha {
      width: 80%;
      height:100%;
      border:none;
      border-radius:0.25rem;
      position: relative;
      
    }
    #containerLogin .divCaptcha svg {
      position: absolute;
      top: 1%;
      right: 0%;
      height: 38px;
      width: 34px;
      padding: 5px;
      background-color: #e8f0fe;
      border-radius:0 3px 3px 0 ;
    }
   #containerLogin .divInput{
      position: relative;
    }
    
#containerLogin .toggle-password {
  position: absolute;
    right: 26px;
    top: 35%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 100;
}

#containerLogin .toggle-password .eye-icon {
  color: #666;
}

   #containerLogin .divInput svg{
    position: absolute;
    top: 35%;
    left: 2%;
    fill: var(--main-bg1-color);
    }

  @media (max-width: 768px) {
 #containerLogin .centerLogin {
    width: 90%;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    padding: 15px;
  }
#containerLogin h2{
    font-size: 17px;
  }
}