/* General Reset and Typography */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
    color: #333;
    line-height: 1.6;
    font-size: 0.9em;
}

/* Header styles */ 
header {
    /*background-color: black;
    color: #d3b33d;*/
    padding: 10px 10px 0 10px;
    display: flex;
    flex-direction: column; /* Changes the flex direction to column for stacking */
    align-items: center; /* Center-align items for a cleaner look */
}

header h1 {
    font-size: 1.4em; /* Adjusted for mobile readability */
    margin: 10px 0; /* Adds spacing around the h1 */
}

header img {
    height: 50px; /* Optimal height for visibility on mobile */
    margin-bottom: 5px; /* Adds a little space below the logo */
}

header p {
    font-size: 1em;
    margin: 1px; /* Adds space above the login/message link */
}

/* Link styles */
a {
    color: #ff6b6b;
    text-decoration: none;
}

a:hover, a:focus {
    color: #f1f1f1;
    text-decoration: underline;
}


/* Container for general use in login, register, and home */
.container, .login-container,  .register-container , .forgot-password-container {
    width: 90%;
    max-width: 400px;
    margin: 0px auto;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
 font-size:100%;
 text-align:center;
 margin:0px;
 display:none;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0px;
}

th, td {
    text-align: left;
    padding: 4px;
    border-bottom: 1px solid #ddd; /* Light grey line for each row */
}

th {
    background-color: #dfdfdf; /* Gold color for headers */
    color: black;
}

/* Alternating row colors */
tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

tbody tr:nth-child(even) {
    background-color: #ffffff;
}

table a {
    color: #ff6b6b;
    margin: 0 5px;
    margin: 4px;
}

table a:hover {
    color: #bda339;
}

.btn {
    padding: 5px 10px;
    background-color: #ff6b6b;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-left: 10px;
}

.btn:hover {
    background-color: #bda339;
}


/* Pagination styles */
.pagination {
    padding: 10px 0;
    text-align: center;
}

.pagination a {
    padding: 4px 8px;
    text-decoration: none;
    border: 1px solid #ff6b6b;
    color: #ff6b6b;
    margin: 0 4px;
}

.pagination a.active {
    background-color: #ff6b6b;
    color: white;
}

.pagination a:hover {
    background-color: #bda339;
}




/* Footer styles */
footer {
    /*background-color: black;
    color: #d3b33d;*/
    text-align: center;
    padding: 10px 0;
    /*position: fixed;*/
    bottom: 0;
    width: 100%;
    font-size: 1em;
}

/* Media Queries for additional adjustments */
@media (max-width: 400px) {
    header h1, header p {
        font-size: 1.1em;
    }
}

@media (orientation: landscape) {
    body {
        padding: 0 10px;
    }
    .container, .login-container , .register-container , .forgot-password-container, .navbar { 
        width: 90%;
    }
}


/* Login-specific styles */


.login-container label {
    display: block;
    margin-top: 10px;
}

.login-container input[type="email"], 
.login-container input[type="password"],
.login-container button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    box-sizing: border-box;
}

.login-container button {
    background-color: #ff6b6b; /* Gold color */
    color: black;
    border: none;
    cursor: pointer;
    margin-top: 15px;
}

.login-container button:hover {
    background-color: #bda339; /* Darker gold */
}

.login-container .error {
    color: red;
    margin-top: 10px;
}



/* General styles for form elements */
input[type="text"],
input[type="email"],
input[type="password"],
button {
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    box-sizing: border-box; /* Includes padding in width calculation */
    border: 1px solid #ccc; /* Standard border for inputs */
    border-radius: 4px; /* Slightly rounded corners for a smoother look */
}

select {
    
    padding: 8px;
    margin-top: 8px;
    box-sizing: border-box; /* Includes padding in width calculation */
    border: 1px solid #ccc; /* Standard border for inputs */
    border-radius: 4px; /* Slightly rounded corners for a smoother look */
}



label {
    display: block;
    margin-top: 15px;
    color: #333;
    font-size: 1em;
}

fieldset span {

    color: #333;
    font-size: 1em;
    padding-right: 4px;
}

button {
    background-color: #ff6b6b; /* Gold color, theme-specific */
    color: black;
    border: none;
    padding: 10px;
    font-size: 1em;
    cursor: pointer;
    margin-top: 20px;
}

button:hover {
    background-color: #bda339; /* A darker shade for hover effect */
}



/* Error and success message styles */
.error, .success {
    color: red; /* Error messages in red */
    font-size: 0.9em;
    margin-top: 10px;
}

.success {
    color: green; /* Success messages in green */
}


fieldset {
    margin-bottom: 16px;
    border: 2px dotted #CCC;
}

.menutable tbody  tr {
   background-color: white;
}

.menutable .menu1 {
  text-align: left;
  width:30%;
}

.menutable .menu2 {
  text-align: center;

}

.active_menu {
font-size: 130%;
 font-weight: bold;
}    

.menutable .menu3 {
  text-align: right;
  width:30%;
}


.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-toggle {
    position: absolute;
    right: 10px;
    cursor: pointer;
}



/* Styles for the navigation bar */
.navbar {
    font-family: 'Arial', sans-serif; /* Modern font style */
    width: 100%; /* Sets the width to 90% of the viewport */
    max-width: 420px; /* Ensures the width does not exceed 400px */
    margin: 0 auto; /* Centers the navbar horizontally */
    padding: 4px 0; /* Adds padding around the menu */
    background-color: #eeeeee; /* Vibrant reddish-pink background */
    display: flex;
    justify-content: flex-end; /* Aligns the navigation items to the right */
    margin-top:20px;
    
}

/* Navbar list styling */
.nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* This will lay out the nav items horizontally */
}

/* Style for each item in the navbar, adding separators */
.nav-list li {
    position: relative;
    margin-left: 8px; /* Space between items */
}

/* Separator style */
.nav-list li:not(:last-child):after {
    content: '|';
    position: absolute;
    right: -10px; /* Positioning the separator */
    color: #4d4d4d; /* Making the separator visible against the background */
    font-weight: bold; /* Bold for better visibility */
}

/* Styling for links in the navbar */
.nav-list li a {
    color: #000; /* White text color for better contrast */
    padding: 4px 6px; /* Adjust padding to ensure items fit within the navbar */
    text-decoration: none; /* No underlines on the links */
    transition: color 0.3s, background-color 0.3s; /* Smooth transition for hover effects */
}

/* Change the color of links on hover */
.nav-list li a:hover, .nav-list li a:focus {
    color: #000000; /* Gold color on hover/focus for a pleasant contrast */
    background-color: #FA8072; /* Slightly lighter shade for hover background */
}

/* Highlight the current link */
.nav-list li a.active {
    color: #fff; /* Gold color for the active link */
    font-weight: bold; /* Bold font for the active link */
    background-color: #FA8072;
}