html {
    color: rgb(0, 0, 0);
    background: rgb(200, 200, 200);
}

div.unread span {
    font-weight: bold;
}

div.button
{
    display: inline-block;
    padding: 2px;
    margin: 1px;
}

div.hidden_button
{
    display: none;
}

.filter_button,
.save_button,
.send_button
{
    background: rgb(150, 150, 150);
}

.refresh_button
{
    background: rgb(120, 120, 120);
}

.check_drafts_button,
.abandon_button
{
    background: rgb(220, 120, 120);
}

.logout_button {
    background: rgb(190, 150, 150);
}

.selected_filter_button {
    background: rgb(150, 250, 50);
}

.attached_file_button {
    background: rgb(150, 150, 200);
}

.attached_saved_file_button {
    background: rgb(150, 200, 150);
}

.header_label {
    display: inline-block;
    width: 100px;
    text-align: right;
}

#filter_button_list {
    padding: 4px;
}

#message_headers {
    color: rgb(80, 80, 80);
    background: rgb(250, 250, 230);
}

#message_body {
    background: rgb(220, 220, 220);
}

#message_blank_footer {
    background: rgb(230, 230, 230);
}

#selected_folder,
#selected_message {
    background: rgb(150, 140, 140);
}

.even {
    background: rgb(250, 250, 230);
}

.cell {
    display: table-cell;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 5px;
    border-left: 1px rgb(100, 100, 100) solid;
}

.cf1 {
    width: 60px;
    border-left: none;
}

.cm_Should_Reply {
    width: 13px;
    border-left: none;
}

.cm_Needs_Action {
    width: 13px;
    border-left: none;
}

.cm_Interesting {
    width: 13px;
    border-left: none;
}

.cm_yyyy_mm_i {
    width: 130px;
}

.cm_date {
    width: 170px;
}

.cm_from {
    width: 400px;
}

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.row {
    display: table-row;
}

.col {
    display: table-column;
}

#filter_button_list a:link,
#filter_button_list a:visited,
#folder_list a:link,
#folder_list a:visited,
#message_list a:link,
#message_list a:visited
{
    text-decoration: none;
    color: rgb(0, 0, 0);
}

#folder_list,
#message_list,
#message_content {
    background: rgb(230, 230, 230);
    overflow-y: scroll;
    padding: 4px;
    border: 3px rgb(100, 100, 100) solid;
}

#folder_list {
    height: 10%;
}

#message_list {
    height: 15%;
}

#message_content {
    height: calc(75% - 100px);
}

#statusline {
    position: fixed;
    bottom: 0;
    height: 35px;
}

#content {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#attached_files {
    display: inline;
}

#login,
#login_failed,
#retries {
    width: 500px;
    margin: 40px auto auto auto;
}

#login_submit {
    display: none;
}

#html_message_body {
    width: 800px;
    padding: 20px;
    background: rgb(220, 220, 220);
}

/* https://www.w3schools.com/howto/howto_css_dropdown.asp */


/* The container <div> - needed to position the dropdown content */
.menu-parent {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.menu-content {
  display: none;
  position: absolute;
  background-color: rgb(200, 200, 220);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.menu-content a {
  padding: 8px 8px;
  text-decoration: none;
  color: black;
  display: block;
}

/* Change color of dropdown links on hover */
.menu-content a:hover {
    background-color: rgb(180, 170, 250);
}

/* Show the dropdown menu on hover */
.menu-parent:hover .menu-content {
    display: block;
}