// Login page ///////////////////////////////////////

// Page
$login-page-background-color: linear-gradient(135deg, #5b727a, #355347); 
$login-page-appname-color: #ffffff; 
$login-page-description-color: rgba(207, 217, 215, 0.9); 
//$login-page-logo-shadow-color: rgba(0, 0, 0, 0.2);
// Log in form
$login-form-background: rgba(255, 255, 255, 0.9); 
$login-form-shadow-color: rgba(0, 0, 0, 0.2); 
$login-form-title-color: #5f5f5f; 
// Input fields
$login-form-input-background: rgba(255, 255, 255, 0.95); 
$login-form-input-focused-background: #fff; 
$login-form-input-border-color: rgba(232, 232, 232, 0.7); 
$login-form-input-hover-border-color: #005f73; 
$login-form-input-focus-border-color: #005f73; 
// Submit button
$login-button-color: #003f5c; 
$login-button-hover-color: #2f798a; 
$login-button-shadow: rgba(0, 95, 115, 0.3); 
$login-button-active-shadow: rgba(70, 70, 70, 0.2); 
$login-button-text-color: #fff; 

// Add New User Page ////////////////////////////////

// Page  
$add-user-background-color: linear-gradient(135deg, #283e4a, #1c2e38); // Background gradient  

// Form  
//$add-user-header-color: #ffffff; // Header text color (white for contrast)
$add-user-form-background: rgba(255, 255, 255, 0.92); // Form background color
$add-user-form-shadow-color: rgba(0, 0, 0, 0.25); // Form shadow color
$add-user-form-title-color: #4e4e4e; // Form title color

// Input fileds  
$add-user-input-background: rgba(245, 245, 245, 0.9); // Input field background color
$add-user-input-border-color: rgba(220, 220, 220, 0.8); 
$add-user-input-focus-border-color: #007b8a; 

// Submit button  
$add-user-button-color: #007b8a; // Normal button color
$add-user-button-hover-color: #006b7a; // Button hover color
$add-user-button-text-color: #ffffff; // Button text color
$add-user-button-shadow: rgba(0, 123, 138, 0.3); // Button shadow color

// Reset button  
$add-user-clear-button-color: #c4c4c4;; 
$add-user-clear-button-hover-color: #8f9091; 
$add-user-clear-button-text-color: #ffffff; 

// Check-box buttons  
// Unchecked  
$user-form-checkbox-button-color: #007b8a; 
$user-form-checkbox-button-text-color: #007b8a; 
$user-form-checkbox-button-border-color: rgba(220, 220, 220, 0.8); 
// Hover  
$user-form-checkbox-button-hover-color: rgba(232, 232, 232, 0.9); 
$user-form-checkbox-button-hover-text-color: #007b8a; 
$user-form-checkbox-button-hover-border-color: #007b8a; 
// Checked  
$user-form-checkbox-button-active-color: #009299; 
$user-form-checkbox-button-active-text-color: #ffffff; 
$user-form-checkbox-button-active-border-color: rgba(0, 170, 179, 0.8); 

// Radio buttons  
// Unselected  
$user-form-radio-button-color: $user-form-checkbox-button-color; 
$user-form-radio-button-text-color: $user-form-checkbox-button-text-color; 
$user-form-radio-button-border-color: $user-form-checkbox-button-border-color; 
// Hover  
$user-form-radio-button-hover-color: $user-form-checkbox-button-hover-color; 
$user-form-radio-button-hover-text-color: $user-form-checkbox-button-hover-text-color; 
$user-form-radio-button-hover-border-color: $user-form-checkbox-button-hover-border-color; 
// Selected  
$user-form-radio-button-active-color: $user-form-checkbox-button-active-color; 
$user-form-radio-button-active-text-color: $user-form-checkbox-button-active-text-color; 
$user-form-radio-button-active-border-color: $user-form-checkbox-button-active-border-color; 

// Range slider
$user-form-range-slider-background: $add-user-input-background; 
$user-form-range-slider-filled: $user-form-checkbox-button-active-color;
// This gradient makes it look like a progress-bar, filled upto `--value`
$form-range-slider-background-gradient:
					linear-gradient(
						to right,
						$user-form-range-slider-filled 0%,	
						$user-form-range-slider-filled var(--value),
						$user-form-range-slider-background  0%
					);