html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Roboto', sans-serif;
      overflow-x: hidden;
    }

    .main-container {
      display: flex;
      flex-direction: row;
      height: 100vh;
      width: 100vw;
    }

    .left-panel {
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 30%;
      min-width: 350px;
      padding: 40px;
      box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .right-panel {
      /*background: #eaf3f0;*/
      background: rgb(var(--v-theme-background));
      background-size: cover !important;
      background-repeat: no-repeat !important;;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 70%;
      background-position: center !important;
      position: relative;
    }
   
    .logo {
      width: 300px;
      margin-bottom: 30px;
    }
    
    .ccam_logo {
      margin-top:10px;
      width: 260px;
      margin-bottom: 30px;
    }

    .login-box, .forgot-password-box, .z {
      width: 100%;
      max-width: 360px;
    }
    
    .otp-input {
      width: 55px;
      height: 55px;
      font-size: 24px;
      text-align: center;
      margin: 0 5px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    .otp-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0;
    }

    .terms, .mfa-subtitle {
      font-size: 0.8rem;
      margin-top: 20px;
      text-align: center;
       color: rgb(var(--v-theme-primary)) !important
    }
    
    .footer-title {
	    align-items: center;
	    justify-content: center;
	    color: rgb(var(--v-theme-primary)) !important;;
	    padding-top: 40px;
	    font-size: 18px;
	    text-align: center;
	    font-weight: 600;
	}

    .footer-text {
      font-size: 0.75rem;
      color: rgb(var(--v-theme-primary)) !important;;
      text-align: center;
      margin-top: 10px;
    }

    /* Responsive Behavior */
    @media (max-width: 960px) {
      .main-container {
        flex-direction: column;
      }

      .left-panel, .right-panel {
        width: 100%;
        height: 100%;
      }

      .right-panel {
        display: none; /* Optional: Hide right panel on small screens */
        position: relative;
      }
    }
    
    /* Skeleton loader container */
	.skeleton_loader {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 100%;
	  height: 100%;
	  border-radius: 12px;
	  position: relative;
	  overflow: hidden;
	}
	
	/* Skeleton shimmer effect */
	.skeleton_loader::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: -150px;
	  height: 100%;
	  width: 150px;
	  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
	  animation: shimmer 1.5s infinite;
	}
	
	/* Style the GIF inside loader */
	.skeleton_loader img {
	  width: 320px;
	  height: auto;
	  z-index: 1;
	}
	
	.quillit_login_contents {
	    padding: 40px; 
	    color:#1b1b1b; 
	    max-width:900px;
	    margin-top: -185px;
	}
	
	.quillit_login_contents h2 {
	     text-align: center;
	}
	
	.quillit_login_contents ul {
		margin:20px auto;
		font-size:1.2rem; 
		line-height:1.8;
	    max-width:400px;
	}
	
	.ccam_login_contents {	
		position: absolute;
		left: 10%;
	   	padding: 40px; 
	    color: rgb(var(--v-theme-primary)) !important; 
	    max-width:500px;
	    margin-top: -270px;
	}