body {
    background: #fff;
    color: #000000;
    margin: 0;
    overflow: auto;
    text-align: left;
}

@media (prefers-color-scheme: dark) {
    body {
        background: black;
        color: #e3e3e3;
    }
}

#wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0;
}

#contents {
    padding: 10px;
}

body, p, h1, h2, h3, table, td, th, ul, ol, textarea, input, select {
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    text-align: left;
}

td {
    vertical-align: top;
}

a {
    text-decoration: none;
    color: #00f;
}

@media (prefers-color-scheme: dark) {
    a {
        color: #8888ff;
    }
}

a:hover.external_link {
    border-bottom: 3px double;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

table {
    font-size: small;
    border-spacing: 0;
}

tr {
    padding-top: 3px;
    padding-bottom: 6px;
}

tr.table_listing {
    height: 19px;
}

th.list_header {
    font-weight: normal;
    background-color: #dddddd;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-top: 3px;
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    th.list_header {
        background-color: #111111;
    }
}

th.list_header:last-child {
    padding-right: 0;
}

div.list_header {
    display: inline;
    background-color: #eeeeee;
}

@media (prefers-color-scheme: dark) {
    div.list_header {
        background-color: #111111;
    }
}

div.list_header_active {
    background-color: #cccccc;
}

@media (prefers-color-scheme: dark) {
    div.list_header_active {
        background-color: #222222;
    }

}

div.disabled {
    color: #777;
}

.list td {
    padding-right: 10px;
}

td.formvalidation {
    color: #ff0000;
}

@media (prefers-color-scheme: dark) {
    td.formvalidation {
        color: #aa0000;
    }
}

td.formlabel {
    text-align: right;
}

td.formgrouping {
    color: #999999;
    padding: 10px;
}

td.time_matrix {
    text-align: center;
}

.odd {
    background-color: #eeeeee;
}

@media (prefers-color-scheme: dark) {
    .odd {
        background-color: #111111;
    }
}

.even {
    background-color: #dddddd;
}

@media (prefers-color-scheme: dark) {
    .even {
        background-color: #222222;
    }
}

span.extra_number {
    font-weight: bold;
}

div.mainactionmenu {
    width: calc(100% - 20px - 6px);
    height: auto;
    padding: 3px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #dddddd;
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    div.mainactionmenu {
        background-color: #222222;
    }
}

div.mainaction {
    background-color: #eeeeee;
    padding: 3px;
    margin: 2px;
    float: left;
    white-space: nowrap;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    div.mainaction {
        background-color: #111111;
    }
}

div.mainaction_add {
    background-color: #eeeeee;
    padding: 3px;
    margin: 2px 2px 0 -1px;
    float: left;
    white-space: nowrap;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    div.mainaction_add {
        background-color: #111111;
    }
}

div.mainaction_highlight {
    background-color: #cccccc;
}

@media (prefers-color-scheme: dark) {
    div.mainaction_highlight {
        background-color: #333333;
    }
}

div.actiongroup {
    margin: 2px;
    float: left;
}

div.actiongroup_right {
    margin: 2px;
    float: right;
}

div.inbox_item {
    width: 400px;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    div.inbox_item {
        border-color: darkgrey;
    }
}

div.inbox_item.active {
    background-color: #dddddd;
}

@media (prefers-color-scheme: dark) {
    div.inbox_item.active {
        background-color: #222;
    }
}

div.inbox_item_content {
    display: inline-block;
    text-align: start;
    padding: 20px;
    overflow-wrap: anywhere;
}

div.inbox_empty {
    width: 400px;
    text-align: center;
    padding: 20px;
}

div.inbox_item_date {
    text-align: left;
    font-size: smaller;
}

div.weekly_review_item {
    margin: 10px;
    width: 50%;
    float: left;
}

div.weekly_review_options {
    width: 40%;
    float: left;
}

.table_hover {
    background: #cccccc;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    .table_hover {
        background: #222222;
    }

}

.unread_item {
    font-weight: bold;
}

.open_box {
    cursor: pointer;
    background-color: #eee;
}

@media (prefers-color-scheme: dark) {
    .open_box {
        background-color: #444;
    }
}

.action_dropdown {
    z-index: 1;
    background-color: #eee;
    cursor: pointer;
    max-width: 400px;
    border-width: 2px;
    border-style: solid;
    border-color: #ddd;
    overflow-wrap: anywhere;
    padding: 2px;
}

@media (prefers-color-scheme: dark) {
    .action_dropdown {
        background-color: #222;
        border-color: #444;
    }
}

.recurrence_day {
    width: 70px;
    text-align: center;
}

#gtdtitle {
    font-size: 16px;
    padding-top: 20px;
    padding-left: 20px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.random_next_action {
    padding: 20px;
    text-align: center;
    font-size: 20px;
}

.random_next_action_details {
    padding: 10px;
    text-align: center;
}

.random_next_action_actions {
    text-align: center;
}

.search-results {
    background-color: yellow;
}

@media (prefers-color-scheme: dark) {
    .search-results {
        background-color: darkgoldenrod;
    }
}

.tip {
    font-style: italic;
    text-align: center;
}

td.inbox-content {
    max-width: 300px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*
This is for the Markdown boxes, to eliminate unnecessary margin.
*/
.markdown_formatted *:first-child {
    margin-block-start: 0;
}

/*
This is for the Markdown boxes, to eliminate unnecessary margin.
*/
.markdown_formatted *:last-child {
    margin-block-end: 0;
}

input {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    input {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: dark) {
    ::placeholder {
        color: #a3a3a3;
    }
}

textarea, button {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    textarea, button {
        color-scheme: dark;
    }
}

.currentreviewstep {
    padding: 6px;
    font-weight: bold;
    text-align: right;
    margin: 2px;
    background-color: #ccc;
}

@media (prefers-color-scheme: dark) {
    .currentreviewstep {
        background-color: #111111;
    }
}

.noncurrentreviewstep {
    padding: 6px;
    text-align: right;
    margin: 2px;
    background-color: #eee;
}

@media (prefers-color-scheme: dark) {
    .noncurrentreviewstep {
        background-color: #444444;
    }
}