table.with-border {
    border-collapse: collapse; 
    width: 100%; /* Makes the table full width */
    font-family: Arial, sans-serif; /* Example font-family, adjust if needed */
}

table.with-border th, 
table.with-border td {
    border: 1px solid #dddddd; /* Softer border color */
    padding: 8px 12px; /* Padding around the cell content */
    text-align: left; /* Align text to the left */
}

table.with-border th {
    background-color: #f2f2f2; /* Light gray background for headers */
    font-weight: bold; /* Bold text for headers */
}

table.with-border tr:hover {
    background-color: #f5f5f5; /* Slight hover effect for rows */
}

table.with-border tr:nth-child(even) {
    background-color: #f9f9f9; /* Alternating row colors for better readability */
}

/* Form container */
form {
    border: 1px solid #dddddd; /* Softer border color similar to table */
    padding: 16px; 
    margin: 20px 0; /* Adds space around the form */
    background-color: #f9f9f9; /* Slight background color for the form */
    font-family: Arial, sans-serif; /* Makes font consistent with the table */
    width: 100%;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
}

.plain-form {
    border: none; /* Softer border color similar to table */
    padding: 0px; 
    margin: 0px; /* Adds space around the form */
    background-color: transparent; /* Slight background color for the form */
    font-family: Arial, sans-serif; /* Makes font consistent with the table */
    width: 100%;
    box-shadow: none; /* Adds a subtle shadow for depth */  
}

/* Input fields & dropdowns */
form input[type="text"],
form input[type="password"],
form select {
    width: 90%; /* Makes them take up full width of the form for consistency */
    padding: 10px; 
    margin: 10px 0; 
    border: 1px solid #dddddd;
    border-radius: 4px; /* Slight rounding of corners for aesthetics */
}

/* Buttons */
form input[type="submit"] {
    background-color: #4CAF50; /* Example primary color */
    color: white; /* Text color */
    padding: 10px 20px; 
    border: none; /* Removes the default border */
    border-radius: 4px; /* Consistent rounded corners */
    cursor: pointer; /* Indicates it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

form input[type="submit"]:hover {
    background-color: #45a049; /* Slightly darker shade for hover */
}

.content {
    display: none;
}

.collapsible::before {
    content: '▶ '; /* Unicode arrow */
}

.collapsible.active::before {
    content: '▼ '; /* Unicode down arrow */
}

body {
    margin: 0px;
}

.main {
    background-image: url('dogbg.jpg');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    height:900px;
    width:900px;
}

.header {
    background-image: url('webpage-assets/CatThreeZenCat.jpg');
    background-position: right center;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}


.user-section {
    position: absolute;
    top: 10px;
    right: 10px;
}

.logout {
    text-decoration: none;
    float: right;
    position: relative;
    padding: 5px 10px;
    background-color: #f5f5f5;
    border-radius: 0px;
    margin: 10px;
    color: black;
    margin-right: 0px;
}

.logout:hover {
    background-color: #e0e0e0;   /* A slightly darker gray when hovered */
}

h1 {
    margin: 0px;
    font-size: 75px;
    padding-top: 20px;
    padding-bottom: 90px;
    padding-left: 35px;
}

.menu-main {
    padding: 15px;
    padding-bottom:4px;
}

/* Menu Styles */
.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    padding-top: 20px;
    background-color: rgba(0, 0, 0, 0);
    font-family: Arial, sans-serif;
    border-bottom: 2px solid #000000;
    padding-top: 30px;
}

.menu a {
    margin: 0 15px;
    text-decoration: none;
    color: black;
    font-weight: bold;
    transition: color 0.3s ease;
}

.menu a:hover {
    color: #4CAF50;
}

.container {
    display: flex;
    flex-wrap: wrap;
    padding: 40px;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fafafa;
    padding-top: 40px;
}

.login {
    background-color: #ffffff;

}

.container-edit {
    display: flex; /* Makes the container a flexbox container */
    flex-wrap: wrap; /* Allows the items to wrap to the next line if there's not enough space */
    padding: 40px;
    background-color: #FAF3E0;
}

.dashboard-container {
    padding: 40px;
}

.form-widget {
    width: 400px;
    margin-right: 60px;  /* space between each form-widget */
    box-sizing: border-box;  /* ensure that padding and borders are included in the width */
}

.not-started {
    background-color: #FFCCCC; /* Light Red */
}

.started {
    background-color: #FFFFCC; /* Light Yellow */
}

.completed {
    background-color: #CCFFCC; /* Light Green */
}

.stuck {
    background-color: #ADD8E6; /* Light Blue */
}

/* List Completion Table */

#list_complete {
    background-color: #a8e6cf;
}
#list-incomplete {
    background-color: #ffd3b6;
}
#list_not_found {
    background-color: #ffaaa5;
}

.styled-button {
    background-color: #4CAF50; 
    color: white; 
    padding: 10px 20px; 
    border: none;
    border-radius: 4px; 
    cursor: pointer;
    text-decoration: none; /* remove underline from links */
    display: inline-block;
    transition: background-color 0.3s ease;
}

.styled-button:hover {
    background-color: #45a049; 
}

.portal-app {
    margin: 15px;
}

.phrase-main {
    margin: 0px;
    margin-bottom: 0px;
    font-size: 50px;
    padding-top: 40px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.current-word-list {
    width: 450px;
}

#initial-start {
    background: linear-gradient(45deg, #4CAF50, #2E7D32);
    color: white;
}