body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--font-color);
}

h1, h2 {
    text-align: center;
    color: var(--font-color);
}

#mail-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 5px;
    background: var(--background-color);
}

#mail-list table th {
    background-color: var(--gray-bg-color);
    cursor: pointer;
    user-select: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 2px;
    text-align: left;
    cursor: pointer;
}

table th, table td:hover {
    text-decoration: underline;
}

table th {
    background-color: #f2f2f2;
    cursor: pointer;
    user-select: none;
}

table th:hover {
    background-color: #e0e0e0;
    color: #007bff;
    text-decoration: underline;
}

th {
    cursor: pointer; /* Changes cursor to hand icon */
    user-select: none; /* Prevents text selection */
}

th:hover {
    background-color: #f0f0f0; /* Optional: Highlight on hover */
}


.Compose-Message {
    max-width: 750px;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid var(--font-color);
}

#mail-view p {
    margin: 10px 0;
}

#mail-view a {
    color: var(--url-color);
    margin-top: 8px;
    text-decoration: underline;
}

#mail-view a:hover {
    color: var(--url-hover-color);
}

#reply-message {
    width: 100%; /* Expand to fill the width of the container */
    max-width: 100%; /* Prevent it from exceeding the container's width */
    min-width: 300px; /* Set a minimum width to prevent it from becoming too small */
    height: auto; /* Allow it to adjust height dynamically */
    min-height: 100px; /* Set a minimum height (equivalent to roughly 5 rows) */
    padding: 10px; /* Add padding for better usability */
    font-size: 14px; /* Adjust font size for readability */
    resize: vertical; /* Allow users to manually resize vertically */
    border: 1px solid #ccc; /* Add a subtle border */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}


form {
 max-width: 750px;
    margin: 20px auto;
    padding: 10px;
    background: var(--background-color);
    border: 1px solid var(--font-color);
}

#message {
    width: 100%; /* Expand to fill the width of the container */
    max-width: 100%; /* Prevent it from exceeding the container's width */
    min-width: 300px; /* Set a minimum width to prevent it from becoming too small */
    height: auto; /* Allow it to adjust height dynamically */
    min-height: 100px; /* Set a minimum height (equivalent to roughly 5 rows) */
    padding: 10px; /* Add padding for better usability */
    font-size: 14px; /* Adjust font size for readability */
    resize: vertical; /* Allow users to manually resize vertically */
    border: 1px solid #ccc; /* Add a subtle border */
    border-radius: 4px; /* Rounded corners */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

#subject {
    width: 100%; /* Example: Make the input span the full width of its container */
    max-width: 100%;
    min-width: 300px;
    padding: 10px; /* Add some padding for better appearance */
    border: 1px solid #ccc; /* Add a border */
    border-radius: 4px; /* Round the corners slightly */
    font-size: 14px; /* Adjust the font size */
    box-sizing: border-box;
}

#recipient {
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.button {
    display: inline-block;
    padding: 4px 8px;
    font-size: 14px;
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: var(--button-color);
    color: white !important;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.button:hover {
    background-color: var(--button-hover-color);
    transform: scale(1.05);
}

.button:active {
    transform: scale(1); /* Reset scale when clicked */
    background-color: #003d80; /* Darker shade for active state */
}


#new-message-button {
    margin-right: auto;
    padding: 4px 8px;
    font-size: 14px;
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: #0076ff;
    color: white;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#new-message-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}


#header-container {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 5px;
}

#inbox-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centers the headline relative to the window */
    margin: 0;
    
}


#button-row {
    display: flex;
    gap: 8;
}