/* =========================================
   BRAND / LINKS
   ========================================= */
   .login-page .logo span,
   .register-page .logo span { color:#7c5cc4; }
   
   .login-page a.forgot-pass,
   .login-page a.signup,
   .register-page a.forgot-pass,
   .register-page a.signup { font-size:.8em; color:#00a651; }
   
   .developed-by-text{ color:#00a651; }
   .developer-link{ color:rgb(255,126,6); text-decoration:none; }
   .developer-link:hover{ text-decoration:underline; }
   
   /* =========================================
	  PAGE BACKGROUND
	  ========================================= */
   .login-page,.register-page{
	 display:flex;justify-content:center;align-items:center;
	 min-height:100vh;background:linear-gradient(90deg,#e2e2e2,#dbe3ff);
   }
   .dark-mode .login-page,.dark-mode .register-page{
	 background:#f5f5f5;
	 background-image:url('http://208.109.10.32:9191/SP/wwv_flow_file_mgr.get_file?p_security_group_id=4212314124&p_fname=13982131.jpg');
	 background-size:cover;
   }
   
   /* =========================================
	  LEGACY HELPERS (kept for compatibility)
	  ========================================= */
   .login-page .form-outer,
   .register-page .form-outer { min-height:100vh; max-width:600px; margin:0 auto; padding:20px 0; position:relative; }
   
   .login-page .copyrights,
   .register-page .copyrights { position:absolute; right:0; bottom:0; width:100%; }
   
   .login-page .copyrights p,
   .register-page .copyrights p { font-size:.6em; font-weight:300; margin-bottom:10px; }
   
   .login-page .form-inner,
   .register-page .form-inner {
	 border-radius:5px; padding:40px 30px; background:#FFF; box-shadow:0 0 35px rgba(0,0,0,.1); margin-bottom:20px; width:100%;
   }
   .dark-mode .login-page .form-inner,
   .dark-mode .register-page .form-inner { background:#283046; }
   
   .login-page .logo, .register-page .logo { font-size:2em; font-weight:500; }
   .login-page p, .register-page p { font-size:.8em; font-weight:300; color:#ffffff; margin-bottom:0; }
   .login-page form, .register-page form { margin:2rem auto 1rem; max-width:420px; }
   
   button:focus{ outline:none !important; }
   
   .login-page a.forgot-pass:focus,
   .login-page a.forgot-pass:hover,
   .login-page a.signup:focus,
   .login-page a.signup:hover,
   .register-page a.forgot-pass:focus,
   .register-page a.forgot-pass:hover,
   .register-page a.signup:focus,
   .register-page a.signup:hover { color:#f68b1f; text-decoration:none; }
   
   .login-page a.forgot-pass,
   .register-page a.forgot-pass { display:block; }
   
   .login-page a.create-account,
   .register-page a.create-account { border-radius:50px; font-size:.75em; margin-top:10px; color:#999; text-transform:uppercase; }
   
   .login-page .terms-conditions,
   .register-page .terms-conditions { margin-top:20px; }
   
   .login-page small,
   .register-page small { font-size:.65em; color:#aaa; line-height:.9em; }
   
   @media (min-width:768px){
	 .login-page p,.register-page p{font-size:.9em}
	 .login-page form label.label-custom,.register-page form label.label-custom{font-size:.9em}
	 .login-page form small,.register-page form small{font-size:.8em}
	 .login-page .terms-conditions label,.register-page .terms-conditions label{font-size:.9em}
	 .login-page a.forgot-pass,.login-page a.signup,.register-page a.forgot-pass,.register-page a.signup{font-size:.8em}
	 .login-page small,.register-page small{font-size:.8em}
	 .login-page .copyrights p,.register-page .copyrights p{font-size:.85em;font-weight:400}
   }
   
   /* =========================================
	  MATERIAL INPUT LOOK (kept)
	  ========================================= */
   .form-group-material{position:relative;margin-bottom:30px}
   input.input-material{
	 width:100%;border:none;border-bottom:1px solid #eee;padding:10px 5px;
	 color:#868e96;font-weight:300;background:transparent;
   }
   .dark-mode input.input-material{background:#283046}
   input.input-material~label{
	 color:#aaa;position:absolute;top:14px;left:14px;cursor:text;transition:all .2s;font-weight:500
   }
   input.input-material~label.error{
	 color:#dc3545;font-size:.75em;position:absolute;top:auto;bottom:-30px;left:0
   }
   input.input-material:focus{border-color:#f68b1f;outline:none}
   input.input-material~label.active{font-size:16px;top:-13px;color:#f68b1f}
   input.form-control-custom:checked+label::before{background:#f68b1f !important}
   
   /* =========================================
	  BUTTONS
	  ========================================= */
   .btn{
	 font-weight:400;border:1px solid transparent;padding:.45rem .75rem;font-size:.9rem;line-height:1.5;
	 transition:background-color .15s,border-color .15s,box-shadow .15s;
   }
   .btn-primary{background:#00a651;border-color:#00a651}
   .btn-primary:hover{background:#f68b1f;border-color:#f68b1f}
   .btn-success{background:#34cea7;border-color:#34cea7}
   .btn-info{background:#17a2b8;border-color:#17a2b8}
   .btn-dark{background:#343a40;border-color:#343a40}
   
   /* =========================================
	  SENA HEARING LOGIN CONTAINER (Reference Style)
	  ========================================= */
   .senahearing-login-container{
	 position:relative;
	 width:880px;
	 height:620px;
	 background:#fff;
	 margin:20px;
	 border-radius:30px;
	 box-shadow:0 0 30px rgba(0,0,0,.2);
	 overflow:hidden;
   }
   
   .senahearing-login-container h1{
	 font-size:36px;
	 margin:20px;
	 text-align:center;
   }
   
   .senahearing-login-container p{
	 font-size:14.5px;
	 margin:15px 0;
   }
   
   form{ width:100%; }
   
   /* =========================================
	  FORM BOXES
	  ========================================= */
   .senahearing-form-box{
	 position:absolute;
	 right:0;
	 width:50%;
	 height:100%;
	 background:#fff;
	 display:flex;
	 align-items:center;
	 color:#333;
	 text-align:center;
	 padding:40px;
	 z-index:1;
	 transition:.6s ease-in-out 1.2s, visibility 0s 1s;
   }
   
   .senahearing-login-container.active .senahearing-form-box{ right:50%; }
   
   .senahearing-form-box.register{ visibility:hidden; }
   .senahearing-login-container.active .senahearing-form-box.register{ visibility:visible; }
   
   /* =========================================
	  INPUT BOXES
	  ========================================= */
   .senahearing-login-input-box{
	 position:relative;
	 margin: 6px 0;
	 min-height:60px;
   }
   
   .senahearing-login-input-box input,
   .senahearing-login-input-box select{
	 width:100%;
	 padding:13px 50px 13px 20px;
	 background:#f7faff;
	 border-radius:8px;
	 border:none;
	 outline:none;
	 font-size:16px;
	 color:#333;
	 font-weight:500;
	 transition:all 0.3s ease;
   }
   
   .senahearing-login-input-box input::placeholder{
	 color:#888;
	 font-weight:400;
   }
   
   /* Focus state for inputs */
   .senahearing-login-input-box input:focus,
   .senahearing-login-input-box select:focus{
	 border:2px solid #00a651;
	 background:#fff;
	 box-shadow:0 0 0 3px rgba(0,166,81,0.1);
   }
   
   /* Label styling for senahearing inputs */
   .senahearing-login-input-box .label-material{
	 position:absolute;
	 left:20px;
	 top:13px;
	 color:#999;
	 font-size:16px;
	 font-weight:500;
	 cursor:text;
	 transition:all 0.3s ease;
	 pointer-events:none;
	 background:#f7faff;
	 padding:0 4px;
   }
   
   /* Active label state */
   .senahearing-login-input-box input:focus + .label-material,
   .senahearing-login-input-box input:not(:placeholder-shown) + .label-material,
   .senahearing-login-input-box input[value]:not([value='']) + .label-material,
   .senahearing-login-input-box select:focus + .label-material,
   .senahearing-login-input-box select:not([value='']) + .label-material{
	 top:-8px;
	 font-size:12px;
	 color:#00a651;
	 font-weight:600;
   }
   
   /* Select dropdown styling */
   .senahearing-login-input-box select{
	 cursor:pointer;
	 appearance:none;
	 background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
	 background-position:right 12px center;
	 background-repeat:no-repeat;
	 background-size:16px;
	 padding-right:40px;
   }
   
   /* Error message styling */
   .senahearing-login-input-box p{
	 position:absolute;
	 bottom:-20px;
	 left:20px;
	 color:#dc3545;
	 font-size:12px;
	 margin:0;
	 font-weight:500;
	 animation: shake 0.5s ease-in-out;
   }
   
   /* Input error state */
   .senahearing-login-input-box input.error,
   .senahearing-login-input-box select.error{
	 border-color:#dc3545;
	 background:#fff5f5;
   }
   
   .senahearing-login-input-box input.error:focus,
   .senahearing-login-input-box select.error:focus{
	 border-color:#dc3545;
	 box-shadow:0 0 0 3px rgba(220,53,69,0.1);
   }
   
   /* Success state */
   .senahearing-login-input-box input.success,
   .senahearing-login-input-box select.success{
	 border-color:#28a745;
   }
   
   .senahearing-login-input-box input.success:focus,
   .senahearing-login-input-box select.success:focus{
	 border-color:#28a745;
	 box-shadow:0 0 0 3px rgba(40,167,69,0.1);
   }
   
   /* Shake animation for errors */
   @keyframes shake {
	 0%, 100% { transform: translateX(0); }
	 25% { transform: translateX(-5px); }
	 75% { transform: translateX(5px); }
   }
   
   /* Icon positioning */
   .senahearing-login-input-box i{
	 position:absolute;
	 right:20px;
	 top:50%;
	 transform:translateY(-50%);
	 font-size:20px;
	 color:#999;
   }
   
   .senahearing-login-forgot-link{margin:-15px 0 15px}
   .senahearing-login-forgot-link a{font-size:14.5px;color:#333;text-decoration:none}
   .senahearing-login-forgot-link a:hover{color:#00a651;text-decoration:underline}
   
   /* =========================================
	  TOGGLE BOX AND PANELS
	  ========================================= */
   .toggle-box{
	 position:absolute;
	 width:100%;
	 height:100%;
   }
   
   .toggle-box::before{
	 content:'';
	 position:absolute;
	 left:-250%;
	 width:300%;
	 height:100%;
	 background:#00a651;
	 border-radius:150px;
	 z-index:2;
	 transition:1.8s ease-in-out;
   }
   
   .senahearing-login-container.active .toggle-box::before{ left:50%; }
   
   .toggle-panel{
	 position:absolute;
	 width:50%;
	 height:100%;
	 color:#fff;
	 display:flex;
	 flex-direction:column;
	 justify-content:center;
	 align-items:center;
	 z-index:2;
	 transition:.6s ease-in-out;
   }
   
   .toggle-panel.toggle-left{ 
	 left:0;
	 transition-delay:1.2s; 
   }
   .senahearing-login-container.active .toggle-panel.toggle-left{
	 left:-50%;
	 transition-delay:.6s;
   }
   
   .toggle-panel.toggle-right{ 
	 right:-50%;
	 transition-delay:.6s;
   }
   .senahearing-login-container.active .toggle-panel.toggle-right{
	 right:0;
	 transition-delay:1.2s;
   }
   
   .toggle-panel h4{ 
	 margin-top:20px;
	 margin-bottom:20px;
	 text-align:center;
   }
   
   /* =========================================
	  BUTTONS
	  ========================================= */
   .senahearing-login-btn{
	 width:160px;
	 height:46px;
	 background:transparent;
	 border:2px solid #fff;
	 color:#fff;
	 border-radius:8px;
	 cursor:pointer;
	 font-size:16px;
	 font-weight:600;
	 transition:all 0.3s ease;
   }
   
   .senahearing-login-btn:hover{
	 background:rgba(255,255,255,0.1);
	 transform:scale(1.05);
   }
   
   /* =========================================
	  RESPONSIVE DESIGN
	  ========================================= */
   @media screen and (max-width: 650px){
	 .senahearing-login-container{ 
		height:calc(100vh - 40px);
		width:calc(100% - 40px);
		margin:20px;
	 }
	 
	 .senahearing-form-box{
		bottom:0;
		width:100%;
		height:70%;
		padding:20px;
	 }
	 
	 .senahearing-login-container.active .senahearing-form-box{
		right:0;
		bottom:30%;
	 }
	 
	 .toggle-box::before{
		left:0;
		top:-270%;
		width:100%;
		height:300%;
		border-radius:20vw;
	 }
	 
	 .senahearing-login-container.active .toggle-box::before{
		left:0;
		top:70%;
	 }
	 
	 .senahearing-login-container.active .toggle-panel.toggle-left{
		left:0;
		top:-30%;
	 }
	 
	 .toggle-panel{ 
		width:100%;
		height:30%;
	 }
	 .toggle-panel.toggle-left{ top:0; }
	 .toggle-panel.toggle-right{
		right:0;
		bottom:-30%;
	 }
	 
	 .senahearing-login-container.active .toggle-panel.toggle-right{ bottom:0; }
	 
	 /* Mobile form adjustments */
	 .senahearing-login-input-box{
		margin:15px 0;
	 }
	 .senahearing-login-input-box input,
	 .senahearing-login-input-box select{
		padding:12px 40px 12px 16px;
		font-size:14px;
	 }
	 .senahearing-login-input-box .label-material{
		left:16px;
		top:12px;
		font-size:14px;
	 }
	 
	 .toggle-panel h1{
		font-size:24px;
	 }
	 .senahearing-login-btn{
		width:140px;
		height:42px;
		font-size:14px;
	 }
   }
   
   @media screen and (max-width: 400px){
	 .senahearing-login-container{
		width:calc(100% - 20px);
		margin:10px;
	 }
	 
	 .senahearing-form-box { 
		padding:15px; 
	 }
	 
	 .toggle-panel h1{
		font-size:20px; 
	 }
	 
	 .senahearing-login-input-box{
		margin:12px 0;
	 }
	 .senahearing-login-input-box input,
	 .senahearing-login-input-box select{
		padding:10px 35px 10px 12px;
		font-size:13px;
	 }
	 .senahearing-login-input-box .label-material{
		left:12px;
		top:10px;
		font-size:13px;
	 }
	 
	 .senahearing-login-btn{
		width:120px;
		height:38px;
		font-size:13px;
	 }
   }
   
   /* Touch device improvements */
   @media (hover: none) and (pointer: coarse) {
	 .senahearing-login-btn{
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	 }
	 
	 .senahearing-login-input-box input,
	 .senahearing-login-input-box select{
		font-size: 16px; /* Prevents zoom on iOS */
	 }
   }
   
   /* High DPI display optimizations */
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	 .senahearing-form-box{
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	 }
   }
   
   /* Reduced motion preferences */
   @media (prefers-reduced-motion: reduce) {
	 .senahearing-form-box,
	 .senahearing-login-btn,
	 .toggle-box::before,
	 .toggle-panel,
	 .senahearing-login-input-box .label-material{
		transition: none;
	 }
	 
	 .senahearing-login-input-box p{
		animation: none;
	 }
   }