body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e1e1e1;
}

.container {
    width: 90%;
    margin: auto;
    margin-top: 1.5%;
}

nav {
    background: #333;
    color: #fff;
    padding: 10px 20px;
    filter: drop-shadow(1px 1px 3px black);
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

h1, h2, h3 {
    color: #333;
}

ul {
    padding-left: 20px;
}

.dashboard {
    padding: 20px;
    background: #fff;
    margin-top: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

font {
font-weight: bold;
font-size:larger;
font-display:block;
}


.welcome-message {
    flex: 1; /* Allow this div to take available space */
}

nav {
    display: flex;
    justify-content: right; /* Space between the two divs */
    align-items: center; /* Center items vertically */
    background: #333;
    color: #fff;
    padding: 10px 20px;
}


.admin{
    flex:1;
    font-family: Copperplate, Papyrus, fantasy;
    font-size: 30px;
    margin-left: 20px;
    font-weight: bolder;
}

.nav-links ul {
    list-style: none;
    padding: 0;
    display: flex; /* Display links in a row */
}

.nav-links ul li {
    margin-left: 20px; /* Space between links */
}
.nav-links ul li {
    margin-left: 20px; /* Space between links */
}

table {
    width: 100%; /* Full width */
    border-collapse: collapse; /* Merge borders */
    margin-top: 20px; /* Space above the table */
    
}

th, td {
    border: 2px solid #333; /* Dark border for table cells */
    padding: 15px; /* Padding inside cells */
    text-align: left; /* Align text to the left */
    background-color: #fff; /* White background for cells */
}

th {
    background-color: #c7c6c6; /* Light background for header */
    color: #232323; /* Dark text for header */
}
.action{
    justify-content: space-around;
    display: flex;
}

tr:hover {
    background-color: #e0e0e0; /* Highlight row on hover */
}

tbody tr {
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}
td.id {
    text-align: center;
}
.id_th{
    text-align: center;
}


/* Alternating row colors with increased specificity */
table tbody tr:nth-child(odd) {
    background-color: #f0f0f0; /* Gray for odd rows */
}

table tbody tr:nth-child(even) {
    background-color: #ffffff; /* White for even rows */
}

/* Button Styles */
button {
    background-color: #4CAF50; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 5px 15px; /* Some padding */
    text-align: center; /* Centered text */
    text-decoration: none; /* No underline */
    display: inline-block; /* Make the button inline */
    font-size: 14px; /* Increase font size */
    margin: 4px 2px; /* Add some margin */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.2s; /* Transition effects */
    filter: drop-shadow(1px 1px 1.5px black);
}

button.edit{
    background-color: #4CAF50; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 5px 15px; /* Some padding */
    text-align: center; /* Centered text */
    text-decoration: none; /* No underline */
    display: inline-block; /* Make the button inline */
    font-size: 14px; /* Increase font size */
    margin: 4px 2px; /* Add some margin */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.2s; /* Transition effects */
}

button.delete {
    background-color: #4CAF50; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 5px 15px; /* Some padding */
    text-align: center; /* Centered text */
    text-decoration: none; /* No underline */
    display: inline-block; /* Make the button inline */
    font-size: 14px; /* Increase font size */
    margin: 4px 2px; /* Add some margin */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.2s; /* Transition effects */
}
.print{
    background-color: #333; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 11.5px 15px; /* Some padding */
    text-align: center; /* Centered text */
    text-decoration: none; /* No underline */
    display: inline-block; /* Make the button inline */
    font-size: 14px; /* Increase font size */
    margin: 4px 5px; /* Add some margin */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.2s; /* Transition effects */
    filter: drop-shadow(1px 1px 1.5px black);

}

.print:hover{
    background-color: #414141; /* Green background */
    transform: scale(1.05); /* Slightly enlarge the button */
}
.slots{
    background-color: #ff9800; /* Green background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 11.5px 15px; /* Some padding */
    text-align: center; /* Centered text */
    text-decoration: none; /* No underline */
    display: inline-block; /* Make the button inline */
    font-size: 14px; /* Increase font size */
    margin: 4px 5px; /* Add some margin */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.2s; /* Transition effects */
    filter: drop-shadow(1px 1px 1.5px black);

}

.slots:hover{
    background-color: #fb8c00; /* Green background */
    transform: scale(1.05); /* Slightly enlarge the button */
}

/* Button Hover Effects */
button:hover {
    background-color: #45a049; /* Darker green on hover */
    transform: scale(1.05); /* Slightly enlarge the button */
}

/* Specific Button Styles */
button.update {
    background-color: #008CBA; /* Blue background for update */
}

button.update:hover {
    background-color: #007B9E; /* Darker blue on hover */
}

button.delete {
    background-color: #f44336; /* Red background for delete */
}

button.delete:hover {
    background-color: #d32f2f; /* Darker red on hover */
}

button.add {
    background-color: #ff9800; /* Orange background for add */
}

button.add:hover {
    background-color: #fb8c00; /* Darker orange on hover */
}

button.edit {
    background-color: #2196F3; /* Light blue background for edit */
}

button.edit:hover {
    background-color: #1976D2; /* Darker blue on hover */
}


.form_act{
    display: flex;
    justify-content: right;
    margin: 20px 0px;
}

.form_act button{
    background-color: #333;
}


.inverted {
    background-color: #333;
    color: #fff;
}

.combine{
    display: flex;
    align-items: center;
    
}
.all_form{
    flex: 1;
    display: flex;
     align-items: center;
}
.search{
    display: flex;
    justify-self: right;
    height: 20px;
    border-radius: 5px;
    
}
.adding_form button{
    height: 40%;
   
}

.sort{
    width: 10%;
    margin-left: 2px;
}