/* Page fade-in */
    :root {
  --bg-primary:   #9b9045;
  --bg-text:    #616161;
  --bg-secondary: #6c757d;
  --bg-success:   #198754;
  --bg-info:      #0dcaf0;
  --bg-warning:   #ffc107;
  --bg-danger:    #dc3545;
  --bs-light:     #f8f9fa;
  --bs-font:      #80828f;
  --bs-body-color: #212529;
  --bs-body-bg:   #fff;
  --textcolor:#6da6d2 ;
    }
.text-login-bottom {
    color: var(--textcolor) !important;
    font-size: 14px;
    text-decoration: underline;
}
    .bg-color{
        background-color: var(--bs-body-bg);
    }
    .shadow {
    box-shadow: 3px -3px 17px 2px rgba(0, 0, 0, .15) !important;
}
.logincrouselmargin{top:180px;}
.carousel-item  h3{
    color:var(--bs-light);
    font-size:16px;

}

    .bgtextcolor{
        color:var(--bg-text);
        font-size: 22px;
    }
    .form-control:focus{
        border: 0px !important;
        border-bottom:1px solid var(--bg-primary) !important;
        box-shadow:none;
    
    }
.logindiv .btn.btn-primary{
    background-color:var(--bg-primary) !important;
    color: var(--bs-light) !important;
    font-size: 13px;
   }
      .form-control:active{
        border: 0px !important;
        border-bottom:1px solid var(--bg-primary) !important;
         box-shadow:none;
    }
    .form-control:active .form-control{
        border-bottom: 0px solid var(--bg-secondary);
    }
    .login-image img{
     
    }
    .form-check label{font-size:14px;
      
    }
    .carousel-inner::after{display: none;}
    .fade-in {
      animation: fadeIn 1s ease-in-out both;
    }
    .carousel-item h3{
      color:var(--bg-primary);
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Side image */
  

    /* Floating label custom animation */ 
    .form-floating input:focus ~ label,
    .form-floating input:not(:placeholder-shown) ~ label {
      transform: scale(0.85) translateY(-1.5rem);
      opacity: 0.8;
      color: var(--bg-primary);
    }
          .form-control{
            border-bottom:1px solid var(--bg-secondary);
          }

    .form-floating label {
     transition: all 0.3s ease;
     padding-left: 0rem;
     color:var(--bs-font);
     font-size: 14px;
    }

    .min-vh-100 {
      min-height: 98vh;
    }
     .form-floating
     {
        border-bottom: 1px solid var(--bg-secondary)
     }
    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(100px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Apply animation */
    .animate-right {
      animation: slideInRight 1s ease-out forwards;
    }

      @media only screen and (max-width: 600px) {
        .logindiv{width: 95% !important;}
           .logindiv .w-75{width: 100% !important;}
           .smalldivbg{width: 100% !important;}
               .loginside {
        width: 100% !important;
        padding-left: 11px !important;
        padding-right: 10px !important;
    }
    .w95{width: 95% !important;}
      }
          
      
      

   @media (max-width: 576x) {
     .logindiv{width:95% !important;}
      .logindiv .w-75{width: 100% !important;}
     .smalldivbg{width: 100% !important;}
     
         .loginside {
        width: 100% !important;
        padding-left: 11px !important;
        padding-right: 10px !important;
    }
    .w95{width: 95% !important;}
      }