/***********************************************************************
* TBP BallotBox Common.css
************************************************************************
* Copyright (c) 2025, Paul Kimpel.
* Licensed under the MIT License, see
*       http://www.opensource.org/licenses/mit-license.php
************************************************************************
* TBP BallotBox site common style sheet.
************************************************************************
* 2025-07-27  P.Kimpel
*   Original version, cloned from UNITE Agenda.
***********************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

HTML {
    height:             100%}

BODY {
    font-family:        Arial, Helvetica, sans-serif;
    font-size:          medium;
    background-color:   white;
    color:              black;
    margin:             8px}
BODY.helpPage {
    margin-left:        auto;
    margin-right:       auto;
    max-width:          70ch;
    font-family:        Open Sans, Arial, Helvetica, sans-serif}

H1 {
    margin-top:         1em;
    font-size:          28px;
    color:              #009;
    border-bottom:      3px solid #009}
H2 {
    margin-top:         1em;
    font-size:          24px;
    color:              #009;
    border-bottom:      2px solid #009}
H3 {
    margin-top:         0.5em;
    margin-bottom:      0;
    font-size:          20px;
    color:              #009;
    border-bottom:      1px solid #009}
H4 {
    margin-top:         0.5em;
    color:              #009}
H5 {
    margin-top:         0.5em;
    color:              #009;
    font-size:          medium;
    font-weight:        normal;
    font-style:         italic}

TABLE.normal, TABLE.standard {
    border-collapse:    collapse}

TABLE.normal>TBODY>TR>TD, TABLE.standard>TBODY>TR>TD {
    padding-top:        2px;
    padding-bottom:     2px;
    padding-left:       2px;
    padding-right:      2px}

TABLE.normal.padded>TBODY>TR>TD, TABLE.standard.padded>TBODY>TR>TD {
    padding-left:       4px;
    padding-right:      4px}

TABLE.standard>THEAD>TR>TH, TABLE.standard>TBODY>TR>TD {
    font-size:          small}

TABLE.standard>THEAD>TR>TH, TABLE.normal>THEAD>TR>TH {
    vertical-align:     bottom;
    text-align:         center;
    padding-left:       0.5ex;
    padding-right:      0.5ex;
    font-weight:        bold}

TABLE.border>THEAD>TR>TH, TABLE.border>TBODY>TR>TD {
    border:             1px solid #CCC}

TABLE>TBODY.altShading>TR:nth-child(even) {
    background-color:   #EFE}

TABLE.verticalRule>THEAD>TR>TH, TABLE.verticalRule>TBODY>TR>TD {
    border-left:        1px solid #999;
    border-right:       1px solid #999}
TABLE>TBODY>TR>TD.bottomBorder {
    border-bottom:      1px solid #999}

TR {
    vertical-align:     top}
TR.middle {
    vertical-align:     middle}

DIV.tocFrame {
    float:              right;
    background-color:   #FFD;
    font-size:          smaller;
    border:             2px solid blue;
    margin-left:        1ex;
    margin-top:         1em;
    margin-bottom:      1ex;
    padding:            1ex;
    width:              33%}

UL.tocList {
    margin:             0;
    padding:            0}

UL.tocList LI {
    list-style-type:    none;
    margin-left:        2ex;
    text-indent:        -2ex;
    margin-top:         0;
    margin-bottom:      0}

LI {
    margin-top:         0.5em;
    margin-bottom:      0.5em}

DL {
    margin-top:         0;
    margin-bottom:      0}

DL DT {
    margin-top:         0.5em;
    margin-bottom:      0;
    margin-left:        2em;
    font-weight:        bold}

DL DD {
    margin-top:         0;
    margin-bottom:      0;
    margin-left:        4em}

INPUT,
SELECT,
TEXTAREA {
    font-family:        inherit;
    font-size:          inherit}

INPUT[disabled] {
    color:              inherit;
    background-color:   #CCC}
INPUT[readonly],
TEXTAREA[readonly] {
    background-color:   #EEE}

BUTTON {
    font-size:          smaller;
    font-weight:        bold;
    background-color:   #DDD;
    margin-top:         4px;
    margin-bottom:      4px;
    padding-left:       8px;
    padding-right:      8px;
    padding-top:        2px;
    padding-bottom:     2px;
    border:             2px solid blue;
    border-radius:      4px}
BUTTON[disabled] {
    color:              gray;
    border-color:       gray}

.alert {
    color:              red;
    font-weight:        bold}
.bodyBox {
    position:           relative;
    max-width:          max-content;
    height:             100%;
    left:               50%;
    transform:          translate(-50%, 0)}
.bold {
    font-weight:        bold}
.center {
    text-align:         center}
.clearAll {
    clear:              both}
.data {
    font-family:        Consolas, "Courier New", Courier, monospace}
.gray {
    color:              #CCC}
.grayRow {
    background-color:   #CCC}
.italic {
    font-style:         italic}
.lj {
    text-align:         left}
.middle {
    vertical-align:     middle}
.nowrap {
    white-space:        nowrap}
.rj {
    text-align:         right}
.smaller {
    font-size:          smaller}
.tiny {
    font-size:          x-small}

.warn {
    background-color:   #FF9}

.logo {
     position:          absolute;
     display:           block;
     top:               0;
     right:             8px;
     z-index:           1}
.logo > IMG {
     width:             75px}

.modal {
    position:           fixed;
    display:            none; /* Hidden by default */
    z-index:            20;
    left:               0;
    top:                0;
    width:              100%;
    height:             100%;
    background-color:   rgba(0, 0, 0, 0.5)}
.modalContent {
    position:           absolute;
    background-color:   #EFE;
    top:                20%;
    bottom:             20%;
    left:               50%;
    transform:          translate(-50%, 0);
    width:              50%;
    max-width:          700px;
    height:             fit-content;
    overflow:           auto; /* Enable scroll if needed */
    padding:            16px;
    border:             2px solid black;
    border-radius:      16px;
    box-shadow:         12px 12px 12px black}
.modalContent .modalTitle {
    font-weight:        bold;
    margin-top:         0;
    color:              white;
    background-color:   #006699;
    padding:            4px}
.modalContent .heading {
    font-weight:        bold;
    margin-top:         1em}
.modalContent .content {
    width:              calc(100% - 4em);
    margin-left:        2em}

.innerModalContent {
    position:           absolute;
    top:                1.25em;
    bottom:             16px;
    left:               0;
    right:              0;
    padding:            16px;
    overflow:           auto}

.closeIcon {
    position:           absolute;
    color:              #aaa;
    top:                0;
    right:              0;
    z-index:            16;
    padding-top:        0px;
    padding-right:      8px;
    font-size:          28px;
    font-weight:        bold}

.closeIcon:hover,
.closeIcon:focus {
    color:              red;
    text-decoration:    none;
    cursor:             pointer}

.resultMsg {
    position:           fixed;
    display:            none;
    top:                33%;
    z-index:            99;
    left:               50%;
    transform:          translate(-50%, 0);
    padding:            16px;
    text-align:         left;
    max-width:          30em;
    opacity:            0;
    background-color:   #FFC;
    color:              red;
    border-radius:      16px;
    border:             2px solid red;
    box-shadow:         12px 12px 12px gray}
.fadeMsg {
    animation-name:     fadeAway;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-fill-mode:forwards}
@keyframes fadeAway {
    from {
        opacity:        1}
    67% {
        opacity:        1}
    to {
        opacity:        0}
    }

.headTable {
    width:              100%}
.headTable .headTitle {
    margin-left:        auto;
    margin-right:       auto;
    text-align:         center}
.headTable .headLeft {
    width:              150px}
.headTable .headRight {
    text-align:         right;
    width:              150px}

.pageLogo {
    position:           absolute;
    top:                0;
    left:               0}

.voteIcon {
    height:             64px;
    width:              64px;
    float:              right;
    background-color:   white}
.voteIcon IMG {
    height:             100%;
    width:              100%;
    border-left:        4px solid white;
    border-bottom:      4px solid white}

.helpIcon {
    position:           absolute;
    top:                0;
    right:              0}

.helpContent {
    top:                10%;
    bottom:             10%;
    left:               50%;
    transform:          translate(-50%, 0);
    width:              80%;
    max-width:          640px;
    background-color:   white}
.helpBody {
    margin-top:         1em;
    width:              100%;
    height:             calc(100% - 1.5em);
    overflow:           scroll;
    border:             none}

.spinner {
    position:           fixed;
    z-index:            99;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    box-shadow:         12px 12px 12px gray}