.tab {
  padding: 10px 20px;
  margin-right: 5px;
  border-radius: 5px;
  transition: background-color 0.3s;
  width: 50%;
  text-align: center;
}
.tabs {
  display: flex;
}
.tab {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f0f0f0;
  color: #333;
  display: inline-block;
  border-radius: 5px;
  margin-right: 5px;
  transition: background-color 0.3s, color 0.3s;
}
.tab.active {
  background-color: #28a745;
  color: #fff;
}
.logo-img{
    width: 150px;
    max-height: 100px;
}
.active-content {
      display: block;
    }
 .login-container {
     display: flex;
     height: 100vh;
}
 .login-container ::selection {
     background-color: transparent;
}
 .login-container ::-moz-selection {
     background-color: transparent;
}
 .login-container .left-section {
     display: flex;
     flex-direction: column;
     justify-content: center;
     animation-name: left-section;
     animation-duration: 1s;
     animation-fill-mode: both;
     animation-delay: 1s;
}
 .login-container .right-section {
     flex: 1;
     background: linear-gradient(to right, #673ab7 0%, #512da8 100%);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     transition: 1s cubic-bezier(0.95, 0.46, 0.45, 0.94);
}
 .login-container .login-header {
     text-align: center;
}
 .login-container .login-header .brand-logo {
     width: 170px;
     margin: 0 auto;
     transition-delay: 2s;
}
 .login-container .login-header .brand-logo .logo-img {
     width: 100%;
}
 .login-container .login-header .title {
     margin: 0;
     color: #673ab7;
}
 .login-container .login-header .sub-title {
     margin-top: 10px;
     font-weight: normal;
     font-size: 15px;
     color: rgba(0, 0, 0, 0.4);
}
 .login-container .login-form {
     display: flex;
     flex-direction: column;
}
 .login-container .login-form .forgot-password {
     text-align: right;
     margin: 3px 0;
}
 .login-container .login-form .forgot-password .fp-link {
     color: #000;
     font-size: 14px;
     letter-spacing: 0.2px;
     text-decoration: none;
     transition-duration: 0.3s;
}
 .login-container .login-form .forgot-password .fp-link:hover {
     color: #673ab7;
}
 .login-container .login-form .form-field-group .form-field {
     height: 50px;
     width: 100%;
     font-size: 14px;
     padding: 3px 10px;
     margin: 12px auto;
     outline: 0;
     border: 2px solid #ddd;
     border-radius: 4px;
     transition-duration: 0.2s;
}
 .login-container .login-form .form-field-group .form-field:hover {
     border-color: #bda7e3;
}
 .login-container .login-form .form-field-group .form-field:focus {
     border-color: #673ab7;
}
 .login-container .login-form .login-button {
     margin-top: 12px;
     padding: 12px 10px;
     font-size: 12px;
     font-weight: bold;
     color: #fff;
     letter-spacing: 1.5px;
     border: none;
     border-radius: 3px;
     background-color: #0c7d95;
     cursor: pointer;
     transition-duration: 0.5s;
}
 .login-container .login-form .login-button:hover {
     background-color: #096c81;
     box-shadow: 0 0px 8px -2px #000;
}
.title {
  background: linear-gradient(90deg, #004eff, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
 .login-container .animation {
     animation-name: move;
     animation-duration: 1s;
     animation-fill-mode: both;
     animation-delay: .1s;
}

 @keyframes move {
     0% {
         opacity: 0;
         visibility: hidden;
         transform: translateY(-40px);
    }
     100% {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
    }
}
 @keyframes left-section {
     0% {
         opacity: 0;
         width: 0;
    }
     100% {
         opacity: 1;
         padding: 1.5rem 2.5rem;
         width: 440px;
    }
}


@media(max-width: 500px){
    .right-section{
        display: none !important;
    }
    .login-container .left-section {
        animation-duration: 0s;
        animation-delay: 0s;
    }
}