body {
            background: #f4f4f4;
            font-family: 'Nunito', sans-serif;
        }
        .sticky-header {
            position: -webkit-sticky; /* For Safari */
            position: sticky;
            top: 0;
            background:  #B8860B; /* Background color */
            z-index: 1000; /* Ensure it stays above other content */
            padding: 10px 0; /* Padding for spacing */
            box-shadow: 2px 20px 20px black;
        }
        .capslock-warning {
            color: red;
            display: none;
            margin-top: 5px;
        }
        .reset_pwd {
		  padding: 1px 8px;                 /* space around text */
		  border-radius: 4px;               /* smooth corners */
		  transition: background-color 0.3s ease;
		}

		.reset_pwd:hover {
		  background-color: #f2f2f2;
		  color: white;        /* light gray hover */
		  text-decoration: none; 
		             /* still no underline */
		}
       .input-with-icon {
          position: relative;
          width: 100%;
        }
        
        /* Left icons (user, lock, etc.) */
        .input-with-icon .fa-user
          {
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translateY(-50%);
          color: #6c757d; /* muted gray */
          pointer-events: none; /* don’t block input clicks */
        }
        .input-with-icon .fa-lock {
          position: absolute;
          top: 50%;
          left: 20px;
          transform: translateY(-50%);
          color: #6c757d; /* muted gray */
          pointer-events: none; /* don’t block input clicks */
        }
        
        /* Input spacing */
        .input-with-icon input {
          padding-left: 35px;  /* space for left icon */
          padding-right: 30px; /* space for right icon (eye) */
        }
        
        /* Right icon (eye toggle) */
        .input-with-icon .toggle-password {
          position: absolute;
          top: 50%;
          right: 20px;
          transform: translateY(-50%);
          color: #6c757d;
          cursor: pointer;
        }


        		/* Dark mode global styles */
        body.dark-mode {
          background-color: #121212 !important;
          color: #f0f0f0 !important;
        }
        
        /* Card styling */
        body.dark-mode .card {
          background-color: #1f1f1f !important;
          color: #f0f0f0 !important;
          border: 1px solid #f0f0f0 !important; /* light border */
        }
        
        /* Inputs, textareas, selects */
        body.dark-mode input,
        body.dark-mode textarea,
        body.dark-mode select {
          background-color: #1e1e1e !important;
          color: #f0f0f0 !important;
          border-color: #f0f0f0 !important; /* light border */
        }
        
        /* Placeholder color */
        body.dark-mode ::placeholder {
          color: gray !important;  /* light gray */
          opacity: 1; /* ensures visibility */
        }
        
        /* Buttons */
        body.dark-mode .btn {
          background-color: #4682B4 !important;
          color: #f0f0f0 !important;
          border-color: #555 !important;
        }
        
        /* Links */
        body.dark-mode a {
          color: #8ab4f8 !important;
        }
        
        /* Tables */
        body.dark-mode table {
          color: #f0f0f0 !important;
          background-color: #1e1e1e !important;
        }
        
        body.dark-mode th, 
        body.dark-mode td {
          border-color: #f0f0f0 !important;
        }