body { background: $bg1; }
body.darkmode { background: $bg3; }

main div.content { padding: 0; }  /* prevent empty space at bottom on iPhone */

#canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 0; margin: 0; padding: 0; outline: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    background: $sec2_clr;
}
body.darkmode #canvas { background: #171E28; }

/**************** Popup Menu ****************/

.dialog.verticalmenu {
    background: #f4f4f4;
    padding: 0;
    border: none;
}
.verticalmenu a, .dialog.verticalmenu .loggedinas, .dialog.verticalmenu .divider {
    user-select: none;
    -moz-user-select: none;
    color: $prim1_clr;
    display: block;
    box-sizing: border-box;
    border: none;
    outline: none;
    margin: 0;
    padding: 0.5em;
}
.dialog.verticalmenu .divider {
    border-top: 1px solid #bbb;
    text-align: center;
    padding: 0;
    font-size: 80%;
}
body.darkmode .dialog.verticalmenu {
    background: #D3D8DA;
}
.dialog.verticalmenu .loggedinas {
    user-select: text;
    text-align: center;
    font-size: 90%;
    color: #999;
}
.verticalmenu a:hover, .verticalmenu a.fas {
    text-decoration: none;
    background: rgba(127, 127, 127, 0.1);
}
.verticalmenu .grid2c, .verticalmenu .grid5 {
    display: grid;
    grid-gap: 0;
    margin: 0;
    justify-items: stretch;
    align-items: stretch;
}
.verticalmenu .grid2c > *, .verticalmenu .grid5 > *{
    text-align: center;
}
.verticalmenu .grid2c { grid-template-columns: 1fr auto auto 1fr; }
.verticalmenu .grid5 { grid-template-columns: auto auto auto auto auto; }
.dialog.verticalmenu .menu {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 0;
}
.verticalmenu .menu a, .verticalmenu .menu input {
    display: inline-block;
    flex: 1 1 auto;
    text-align: center;
}

span.keyhint {
    border: 1px solid #ccc;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 80%;
    color: #ccc;
}
body.darkmode span.keyhint {
    color: #aaa;
    border-color: #aaa;
}

/**************** Tooltip ****************/

.tooltipdiv {
    position: absolute;
    pointer-events: none;
    display: block;
    opacity: 0;
    padding: 0.4em;
    background: #fff;
    border: none;
    font-size: 85%;
    border-radius: 3px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25);
    transition: opacity 0.2s, left 0.2s, right 0.2s;
}
body.darkmode .tooltipdiv {
    background: #363B42;
    color: #ddd;
    border-color: #000;
}

/**************** Dialogs ****************/

.dialog-cover {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 999;
    /* display: none; */
    pointer-events: none;
    background: rgba(0, 0, 0, 0.0);
    transition: background 0.3s;
}

.dialog {
    box-sizing: border-box;
    outline: 1px solid rgba(127, 127, 127, 0.4);
    background: $sec2_clr;
    border: 6px solid $prim1_clr;
    position: absolute;
    left: 5%;
    right: 5%;
    top: 5%;
    max-height: 95vh;
    overflow-y: auto;
    overflow-x: hidden;  /* prevent horizontal swiping */
    border-radius: 2px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    user-select: auto;
    z-index: 1000;
    padding: 0;
    display: none;
    opacity: 0;
    transition: opacity 0.1s linear;
}
.dialog h2, .dialog h3 {
    color: $prim1_clr;
    font-family: $normalfont;
}
@media screen and (min-height: 600px) { .dialog {
    max-height: 90vh;
}}
@media screen and (min-width: 800px) { .dialog {
    left: calc(50% - 400px);
    right: calc(50% - 400px);
}}
.dialog > p, .dialog > h1, .dialog > h2, .dialog > input, .dialog > label, .dialog > button, .dialog > select, .dialog > table, .dialog > div {
    margin: 8px;
    margin-top: 0;
}
.dialog > input, .dialog > div.container {
    width: calc(100% - 16px);
}
@media screen and (min-width: 500px) {
    dialog > p, .dialog > input, .dialog > label, .dialog > button, .dialog > select, .dialog > div {
        margin-left: 2em;
    }
    .dialog > input, .dialog > div.container {
        width: calc(100% - 3em);
    }
}


.dialog h1 {
    position: -webkit-sticky; /* Safari */
    position: sticky;  /* Does not scroll along */
    user-select: none;
    -moz-user-select: none;
    z-index: 99;
    top: 0;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 1px;
    line-height: 150%;
    font-size: 1.2em;
    background: $prim1_clr;
    color: $sec1_clr;
}
.dialog h1 > i.fas {
    color: $sec1_clr;
}
.dialog h2 {
    font-size: 1.1em;
    margin-top: 20px;
    user-select: none;
    -moz-user-select: none;
}

@media screen and (min-width: 800px) {
    .dialog h1 {
        font-size: 1.5em;
    }
}

.dialog input[type=text], .dialog input[type=date], .dialog input[type=time], .dialog input[type=number] {
    font-size: 16px; /* at least 16 to prevent mobile browser zooming */
    box-sizing: border-box;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    color: $prim1_clr;
    padding: 0.3em 0.4em;
}
.dialog input:focus {
    outline: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
.dialog input:focus[type=range] {
    box-shadow: none;
}

.dialog .formlayout {
    display: grid;
    grid-template-columns: auto 1fr;
    max-width: 500px;
    grid-gap: 5px 1em;
    justify-items: stretch;
    align-items: center;
}
.dialog .formlayout > div {
    height: 1.5em;
    vertical-align: center;
    display: flex;
    align-items: center;
}
.dialog .formlayout > div:nth-child(odd) {
    justify-self: end;
}

.dialog h1 button {
    font-size: 100%;
    color: $sec1_clr;
    /*padding: 3px 0.5em 5px 0.5em;  /* Note: match with h1 padding-bottom */
    padding: .16em 0.5em .1em 0.5em;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    border: 1px solid $sec2_clr;
    border-left: 0;
    float: right;
    min-width: 2.5em;
}
.dialog h1 button:last-child {
    border-left: 1px solid #eee;
}
.dialog h1 button:hover {
    background: rgba(255, 255, 255, 0.2);
}
.dialog h1 button:disabled {
    color: #777;
    background: none;
}

body.darkmode .dialog {
    background: #D3D8DA;
    border-color: $prim1_clr
}
body.darkmode .dialog h1 {
    background: $prim1_clr;
    border-color: $prim1_clr
}

.dialog button.actionbutton {
    margin-left: 0.3em;
    font-size: 80%;
    padding: 0.5em 0.6em;
    background: #fff;
    border: none;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.1s;
}
.dialog button.actionbutton:hover { box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); }
.dialog button.actionbutton.submit { background: $acc_clr; }
.dialog button.actionbutton.submit:disabled { color: #aaa; }
body.darkmode .dialog button.actionbutton { background: #eee; }
body.darkmode .dialog button.actionbutton.submit { background: $acc_clr; }
@media screen and (min-width: 600px) {
    .dialog button.actionbutton { margin-left: 1em; font-size: 100%; }
    .dialog button.actionbutton.submit { min-width: 7em; }
}
body.is_read_only button.actionbutton {
    color: #aaa;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    pointer-events: none; /* Prevent clicks */
}
body.is_read_only button.actionbutton:hover { box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); }

.dialog .tag-suggestions-autocomp {
    position: absolute;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    color: $prim1_clr;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 3px;
    width: calc(100% - 6px);
    max-width: 400px;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}

.dialog .tag-suggestions-autocomp > div {
    font-size: 85%;
    padding: 4px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    white-space: nowrap;
    overflow-x: hidden;
}
.dialog .tag-suggestions-autocomp > div.meta {
    cursor: default;
    font-size: 70%;
}
.dialog .tag-suggestions-autocomp > div > span.meta {
    font-size: 70%;
    color: #bbb;
    margin-left: 1em;
}
.dialog .tag-suggestions-autocomp .tag-suggestion.active, .dialog .tag-suggestions-autocomp > .tag-suggestion:hover {
    background-color: #f5f5ff;
}

/* --- dialog table --- */

.dialog table {
    border-collapse: collapse;
    min-width: calc(100% - 16px);
    font-size: 85%;
}
.dialog table td, .dialog table th {
    text-align: left;
    padding: 0.4em 0.4em;
    white-space: nowrap;
    /*border-bottom: 1px solid #777;*/
}
.dialog table td:first-child, .dialog table th:first-child {
    text-align: right;
}
.dialog table th {
    background: rgb(220,220,220);
    color: #000;
    font-weight: normal;
    border-bottom: 1px solid #aaa;
}
.dialog table.darkheaders th {
   color: #000;
   font-weight: bold;
   border: none;
}
.dialog table th:nth-child(2)  {
   max-width: 0;  /*  Make contribution not count, but overflow: colspan without colspan */
}
.dialog table th:last-child {
    width: 100%;
}

.dialog table th.pad1::before { content: '\00A0\00A0\00A0'; }
.dialog table th.pad2::before { content: '\00A0\00A0\00A0\00A0\00A0\00A0'; }
.dialog table th.pad3::before { content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0'; }
.dialog table th.pad4::before { content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0'; }

.dialog table td.t1 {
    padding-right: 0;
}
.dialog table td.t2 {
    padding-left: 0.2em;
}
.dialog table td.t1::after {
    content: ' -';
}

.dialog table tr {
    background-color: rgb(250,250,250);
}
.dialog table tr:nth-child(even) {
    background-color: rgb(240,240,240);
}
.dialog table tr.blank_row {
    background-color: initial;
    height: 1.5em;
}
@media screen and (min-width: 800px) { .dialog table {
        font-size: 100%;
}}

body.darkmode .dialog table th {
    background-color: rgb(140,145,149);
}
body.darkmode .dialog table tr {
    background-color: rgb(170,175,179);
}
body.darkmode .dialog table tr:nth-child(even) {
    background-color: rgb(160,165,169);
}
body.darkmode .dialog table tr.blank_row {
    background-color: initial;
}
