#dialogText {
    font-size: 9pt;
    background: var(--darkgreen);
    padding: 0.2em 0.4em;
    color: var(--bg);
    font-family: calibri;
}

#dialogWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: table;
}

#dialogWrapCell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#mainDialog {
    max-width: 200px;
    margin: 5px auto;
    border: solid 1px var(--border);
    overflow: hidden;
}
a #mainDialog > * {
    padding: 0.6em;
}

#passArea {
    padding: .4em;
    background: var(--bg);
}

#pass {
    width: 100%;
    font-size: 10pt;
    background: var(--secondarybg);
    margin-block: .4em;
    border: 1px solid var(--border);
    color: var(--text);
    padding: .4em;
}

#pass:focus-visible {
    outline: none;
}

#messageWrapper {
    float: left;
    vertical-align: middle;
    line-height: 30px;
}

.notifyText {
    display: none;
}

#invalidPass {
    color: var(--red);
}

#success {
    color: var(--green);
}

#submitPass {
    border: 1px solid var(--border);
    text-align: center;
    padding: 0.2em 0.4em;
    background: linear-gradient(var(--secondarybg) 20%, var(--border));
    user-select: none;
    float: right;
    outline: none;
    color: var(--text)
}

#submitPass:hover {
    border: 1px solid var(--border);
    text-align: center;
    padding: 0.2em 0.4em;
    background: linear-gradient(var(--bg) 20%, var(--secondarybg));
    color: var(--border);
    user-select: none;
    outline: none;
    color: var(--border)
}

#contentFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#attribution {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    font-size: 0.8em;
}

#attribution,
#attribution a {
    color: var(--border);
}

.error {
    display: none;
    color: var(--red);
}