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


BODY {
    position:           relative;
    overflow:           auto}

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

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

.errorBorder {
    border:             2px solid red}

#QuestionSetTablePrefix {
    width:              100%}

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

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


#QuestionSetDataModal .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}

#QuestionSetDataTitle {
    width:              calc(100% - 8px);
    max-width:          60ch}

#QuestionSetDataTextError {
    display:            none;
    width:              80%;
    max-width:          70ch;
    margin-left:        10%;
    color:              red;
    font-weight:        bold;
    border:             1px solid red;
    padding:            4px}

#QuestionSetDataButtonDiv {
    width:              calc(100% - 8px);
    text-align:         right}
#QuestionSetPollCountText {
    text-align:         left;
    font-size:          small}


#QuestionSetQuestionDiv {
    visibility:         hidden}
#QuestionSetQuestionTable {
    position:           relative;
    left:               50%;
    transform:          translate(-50%, 0)}
#QuestionSetQuestionTable>TFOOT TD {
    background-color:   inherit;
    padding:            4px;
    text-align:         center;
    border-top:         2px solid black}
#QuestionSetQuestionBody .gray {
    color:              #999}

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


#QuestionSetPollListModal .modalContent {
    top:                50%;
    left:               50%;
    width:              90%;
    max-width:          800px;
    height:             fit-content;
    max-height:         90%;
    transform:          translate(-50%, -50%);
    overflow:           auto;
    background-color:   whitesmoke}
#QuestionSetPollListTable {
    position:           relative;
    margin-top:         1ex;
    left:               50%;
    transform:          translate(-50%, 0)}
#QuestionSetPollListTable>TBODY>TR>TD {
    padding-top:        4px;
    padding-bottom:     4px}
#QuestionSetPollListTable>TFOOT TD {
    background-color:   whitesmoke;
    padding:            4px;
    border-top:         2px solid black}
#QuestionSetPollListBody {
    display:            none}

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


#QuestionDataModal .modalContent {
    top:                50%;
    left:               50%;
    width:              90%;
    max-width:          800px;
    height:             fit-content;
    max-height:         90%;
    transform:          translate(-50%, -50%);
    overflow:           auto;
    background-color:   #EFE}

#QuestionDataQuestionText {
    width:              calc(100% - 8px);
    max-width:          70ch}

#QuestionDataTextError {
    display:            none;
    width:              80%;
    max-width:          70ch;
    margin-left:        10%;
    color:              red;
    font-weight:        bold;
    border:             1px solid red;
    padding:            4px}

#QuestionDataButtonDiv {
    width:              calc(100% - 8px);
    text-align:         right}

#QuestionDataChoiceDiv {
    visibility:         hidden}
#QuestionDataChoiceTable {
    position:           relative;
    margin-top:         1ex;
    left:               50%;
    transform:          translate(-50%, 0)}
#QuestionDataChoiceTable>TFOOT TD {
    background-color:   inherit;
    padding:            4px;
    text-align:         center;
    border-top:         2px solid black}
#QuestionDataChoiceTable TR TD:nth-child(2) INPUT {
    width:              calc(100% - 8px);
    max-width:          70ch}