/***********************************************************************
* BallotBox Polls.css
************************************************************************
* Copyright (c) 2025, Paul Kimpel.
* Licensed under the MIT License, see
*       http://www.opensource.org/licenses/mit-license.php
************************************************************************
* Style sheet for Polls.html.
************************************************************************
* 2025-09-29  P.Kimpel
*   Original version.
***********************************************************************/


BODY {
    position:           relative;
    overflow:           auto}

H1:first-of-type {
    margin-top:         0}

#MainDiv {
    position:           relative;
    visibility:         hidden;
    top:                12px;
    left:               50%;
    width:              fit-content;
    transform:          translate(-50%, 0)}

.errorBorder {
    border:             2px solid red}
.qsTypeHeader {
    font-weight:        bold}
.warn {
    background-color:   #FF9}
.grayRow {
    background-color:   #CCC}
.votingRow {
    background-color:   #CFC}
.closedRow {
    background-color:   #FCC}

#PollTablePrefix {
    width:              100%}

#PollTable>TBODY>TR>TD {
    padding-top:        4px;
    padding-bottom:     4px}
#PollTable>TFOOT TD {
    background-color:   white;
    padding:            4px;
    border-top:         2px solid black}

@media screen {
    #PollTable THEAD {
        position:       sticky;
        top:            0}
    #PollTable TFOOT {
        position:       sticky;
        bottom:         0}
}


#PollDataModal .modalContent {
    top:                50%;
    left:               50%;
    width:              90%;
    max-width:          800px;
    height:             fit-content;
    max-height:         90%;
    transform:          translate(-50%, -50%);
    overflow:           auto;
    background-color:   #FFE}
#PollDataTitle,
#PollDataDesc {
    width:              calc(100% - 8px);
    max-width:          70ch}
#PollDataVotingStatus {
    font-weight:        bold;
    border:             1px solid #999;
    margin-left:        8px;
    padding-left:       16px;
    padding-right:      16px;
    border-radius:      8px}
#PollDataTextError {
    display:            none;
    width:              80%;
    max-width:          70ch;
    margin-left:        10%;
    color:              red;
    font-weight:        bold;
    border:             1px solid red;
    padding:            4px}
#PollDataButtonDiv {
    margin-top:         1ex;
    width:              100%;
    text-align:         right}


#EmailEditModal .modalContent {
    top:                50%;
    left:               50%;
    width:              90%;
    max-width:          700px;
    height:             80%;
    transform:          translate(-50%, -50%);
    overflow:           auto;
    background-color:   white}
#EmailEditText {
    height:             calc(100% - 8em);
    font-size:          18px}
#EmailEditText .quillContainer {
    width:              100%;
    height:             100%;
    font-size:          inherit}
#EmailEditText .quillContainer .ql-editor p {
    margin-top:         1em}
#EmailEditText .quillContainer .ql-editor > :first-child {
    margin-top:         0}
#EmailEditButtonDiv {
    position:           absolute;
    width:              calc(100% - 32px);
    height:             fit-content;
    bottom:             16px;
    text-align:         right}
#EmailEditParamSelect {
    position:           absolute;
    top:                50%;
    left:               0;
    transform:          translate(0, -50%)}


#EmailPreviewModal .modalContent {
    top:                50%;
    left:               50%;
    width:              90%;
    max-width:          72ch;
    height:             80%;
    transform:          translate(-50%, -50%);
    overflow:           auto;
    background-color:   #FFE}
#EmailPreviewText {
    height:             calc(100% - 6em);
    overflow:           auto;
    font-size:          18px;
    padding:            1ch;
    border:             1px solid #CCC}
#EmailPreviewText .ql-indent-1 {
    margin-left:        2em}
#EmailPreviewButtonDiv {
    position:           absolute;
    width:              calc(100% - 32px);
    height:             fit-content;
    bottom:             16px;
    text-align:         right}


#EmailSendModal .modalContent {
    top:                50%;
    left:               50%;
    width:              90%;
    max-width:          640px;
    height:             fit-content;
    max-height:         90%;
    transform:          translate(-50%, -50%);
    overflow:           auto;
    background-color:   #EFE}
#EmailSendOptionsDiv {
    width:              100%}
#EmailSendOptionsTable {
    width:              100%}
#EmailSendSubject {
    width:              calc(100% - 8px)}
#EmailSendParamDiv {
    text-align:         right}
#EmailSendButtonDiv {
    width:              100%;
    text-align:         right}


#PollViewModal {
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    overflow:           auto;
    background-color:   white}
#PollViewButtonDiv {
    position:           fixed;
    z-index:            10;
    top:                16px;
    right:              16px}
#PollViewContent {
    position:           relative;
    left:               50%;
    width:              fit-content;
    transform:          translate(-50%, 0)}
#PollViewContent P.viewHeader {
    font-weight:        bold;
    margin-top:         1em;
    margin-bottom:      0}

#PollViewTable,
#PollViewQuestionTable {
    max-width:          80ch}
#PollViewQuestionCol2 {
    width:              3.5em}
#PollViewQuestionBody TR TD {
    vertical-align:     baseline}
#PollViewQuestionBody TR.questionRow TD {
    padding-top:        16px;
    padding-bottom:     8px}
#PollViewQuestionBody TD TEXTAREA {
    width:              calc(100% - 8px)}