/*  Overall Grid
    The main grid that will give all the pages a consistant layout*/
.overallContainer{
    font-family: 'Times New Roman', Times, serif;
    background-color: gainsboro;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% auto 5%;
    row-gap: 1%;
}
.top, .bottom{
    color:blue;
    grid-column: 1 / 4;
}
.top{
    font-size: 40px;
    border-bottom: 8px ridge darkslategray;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    background-color: lightslategray;
}
.center{
    font-size: 50%;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.bottom{
    font-size: 18px;
    border-top: 8px ridge darkslategray;
    grid-row: 3 / 4;
    margin: 0;
    text-align: right;
}
/*  End of Overall Grid*/

/*  Grid Header
    Defines the different grid setups for the header section*/

/*  Left side - all potential groupings of rows*/
.headerLeft{
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    text-align: left;
}
.headerTopLeft{
    grid-row: 1 / 2;
}
.headerTopTwoLeft{
    grid-row: 1 / 3;
}
.headerBottomLeft{
    grid-row: 3 / 4;
    font-size: 40%;
}
.headerBottomTwoLeft{
    grid-row: 2 / 4;
}
.headerMiddleLeft{
    grid-row: 2 / 3;
}

/*  Right side - all potential groupings of rows*/
.headerRight{
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    text-align: right;
    float: right;
    font-size: 50%;
    align-items: center;
    justify-items: center;
    margin: auto 5px auto auto;
}
.headerTopRight{
    grid-row: 1 / 2;
}
.headerTopTwoRight{
    grid-row: 1 / 3;
}
.headerBottomRight{
    grid-row: 3 / 4;
}
.headerBottomTwoRight{
    grid-row: 2 / 4;
}
.headerMiddleRight{
    grid-row: 2 / 3;
}
.headerBottom{
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    font-size: 50%;
    margin: 0 8px 0 8px;
    color: black;
    font-style: italic;
}
/*  End of Grid Header*/

/* Page Specific CSS */
/*  Sign-up page*/
.signContainer{
    display: grid;
    grid-template-columns: 0.5fr 6fr 3fr 0.5fr;
    grid-template-rows: 6fr 1fr;
    height: auto;
    font-size: 20px;
}
.signFields{
    grid-column: 2 / 3;
    padding: 2px;
    margin: 2px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(6, 1fr);
    row-gap: 4px;
}
.signFieldName{
    grid-column: 1 / 2;
}
.signFieldName p, .signFields p{
    align-items: center;
    justify-items: center;
    padding: 2px;
    margin: 2px;
}
.signErrors{
    grid-column: 1/3;
    display: grid;
    grid-template-rows: repeat(2, 0.05fr);
    grid-template-columns: auto 60%;
}
.signFields, .signAvatarGrid{
    grid-row: 1 / 2;
    display: grid;
}
.signFieldBox{
    grid-column: 2 / 3;
}
.signFieldBox input, .signEmailBox input{
    height: 25px;
    width: 97%;
}
.signEmailBox{
    grid-row: 6/7;
    width: 100%;
}
.signAvatarGrid{
    grid-column: 3 / 4;
    text-align: center;
    margin-right: 15px;
    grid-template-rows: auto 0.25fr;
    align-items: center;
    justify-items: center;
    vertical-align: middle;
}
.signAvatarHeadBody{
    grid-row: 1 / 2;
    margin:  5px;
    border: 1px dashed;
}
.signupAvatarError{
    grid-row: 2 / 3;
    margin:1%;
    font-weight: bold;
    font-style: italic;
}
.signButtons{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
}
.signButtonsLeft{
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.signButtonsLeftLeft{
    float: left;
    margin-right: auto;
}
.signButtonsLeftRight{
    grid-column: 2/3;
    float: right;
    margin-left: auto;
}
.signButtonsRight{
    grid-column: 2 / 3;
    float: right;
    margin-left: auto;
}
/*  End of Sign-up page*/

/*  Main Page/Login Page */
.mainContainer{
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 5px;
    font-size: 22px;
}
.mainHeaders{
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}
.mainActivePolls{
    grid-row: 1 / 2;
    display: grid;
    grid-template-rows: auto 1fr;
    margin-bottom: 5px;
    justify-items: center;
}
.mainActivePollsBody{
    grid-row: 2/3;
    border: 5px groove darkslategray;
    display: grid;
    grid-template-columns: 0.05fr auto;
    gap: 2px;
}
.mainActivePollsBodyRadio{
    grid-column: 1 / 2;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: auto 5px;
}
.mainActivePollsBody label{
    grid-column: 2 / 3;
    display: inline-block;
    border: 3px ridge darkslategray;
    margin: 5px;
}
.mainActivePollsButtons{
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
}
.mainActivePollsButtonsLeft{
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr 4fr;
}
.mainActivePollsButtonsRight{
    grid-column: 2/3;
    float: right;
    margin-left: auto;
}
.mainLogin{
    grid-row: 2/3;
    display: grid;
    grid-template-rows: 0.25fr 1fr 0.25fr;
    border-top: 3.5px dashed darkslategray;
    row-gap: 4px;
    margin-top: 5px;
    padding-top: 0%;
}
.mainLoginBody{
    grid-row: 2/3;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr;
}
.mainLoginBodyFieldName{
    grid-column: 1 / 2;
    display: grid;
    grid-template-rows: auto auto;
    float: right;
    margin: 0px 0px 0px auto;
    align-items: center;
    row-gap: 5px;
}
.mainErrors{
    grid-column: 1/3;
    display: grid;
    grid-template-rows: repeat(2, 0.05fr);
    grid-template-columns: auto 60%;
}
.mainLoginBodyFieldName p{
    margin: 0px 0px 0px auto;
}
.mainLoginBodyFieldBox{
    grid-column: 2 / 3;
    display: grid;
    grid-template-rows: auto auto;
    width: 50%;
    row-gap: 5px;
}
.mainLoginButtons{
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
}
.mainLoginButtonsLeft{
    grid-column: 1/2;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.mainLoginButtonsLeftLeft{
    grid-column: 1/2;
    float: left;
    margin-right: auto;
}
.mainLoginButtonsLeftRight{
    grid-column: 2/3;
    float: right;
    margin-left: auto;
}
.mainLoginButtonsRight{
    grid-column: 2/3;
    font-size: 18px;
    font-style: italic;
}
.mainSignup{
    grid-row: 3/4;
    align-items: center;
    justify-items: center;
    border-top: 3.5px dashed darkslategray;
    margin-top: 5px;
    padding-top: 0%;
}
.mainSignup p{
    margin: 0px 0px 0px auto;
}
/*End of Main Page*/

/* Management Page */
.mgmtContainer{
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 5px;
}
.mgmtPolls{
    grid-row: 1 / 2;
    margin-bottom: 5px;
    border: 5px groove darkslategray;
    height: 250px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 25px auto;
    gap: 0.5em;
}
.mgmtPollsRadio{
    grid-column: 1 / 2;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: auto 5px;
}
.mgmtPolls label{
    grid-column: 2 / 3;
    display: grid;
    border: 3px ridge darkslategray;
    margin: 5px;
    font-size: 20px;
    grid-template-columns: 5fr 1.5fr;
}
.mgmtPollsQA{
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 5fr;
}
.mgmtPollsQA span, .mgmtPollsCreateVote span{
    margin-top: 0px;
}
.mgmtPollsQText{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.mgmtPollsQuestion{
    grid-row: 1 / 2;
}
.mgmtPollsAnswer{
    grid-row: 2 / 3;
}
.mgmtPollsQuestion, .mgmtPollsAnswer{
    grid-column: 1 / 2;
    font-weight: bold;
}
.mgmtPollsA{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: grid;
    grid-template-rows: repeat(5, auto);
}
.mgmtPollsA span{
    display: inline-block;
    margin: 2px;
}
.mgmtPollsAText{
    grid-column: 1 / 2;
}
.mgmtPollsGraphs, .resultsGraphs{
    text-align: center;
    float: right;
    margin-left: auto;
    width: 25%;
    font-size: 80%;
    height: 25px;
}

.mgmtPollsGraphs span{
    display: inline-block;
    width: 90%;
    border: 1px solid black;
}
.mgmtPollsCreateVote{
    grid-column: 2 / 3;
    display: grid;
    grid-template-rows: auto auto;
    font-size: 20px;
    font-weight: bold;
    margin: 2px 5px 5px 5px;
    padding-bottom: 5px;
    text-align: right;
}
.mgmtPollsCreate{
    grid-row: 1 / 2;
}
.mgmtPollsVote{
    grid-row: 2 / 3;
}
.mgmtPollsCreateVoteBoxes{
    border: 1px solid black;
    width: 100%;
    font-weight: normal;
    background-color: aliceblue;
    padding: 2px;
    margin-right: 5px;
    font-size: 80%;
}
.mgmtPollsButtons{
    grid-row: 2 / 3;
}
/* end of management page*/

/* Create a Poll Page*/
.createContainer{
    display: grid;
    grid-template-rows: repeat(4, auto);
    row-gap: 5px;
    font-size: 25px;
}
.createOpenClose{
    grid-row: 1/2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 15px;
    text-align: center;
}
.createOpenHead{
    grid-column: 1/2;
}
.createCloseHead{
    grid-column: 2/3;
}
.createOpenBox, .createCloseBox{
    text-align: left;
    border: 1px solid black;
    font-weight: normal;
    background-color: aliceblue;
    padding: 2px;
    margin-right: 5px;
    font-size: 16px;
}
.createQuestion{
    grid-row: 2/3;
    width: auto;
    display: grid;
    grid-template-columns: 1fr 6fr;
}
.voteAnswerNum span{ 
    display: inline-block;
}
.createButtons{
    grid-row: 4/5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
}
.createButtonsLeft{
    grid-column: 1/2;
}
.createButtonsMiddle{
    grid-column: 2/3;
}
.createButtonsRight{
    grid-column: 3/4;
}
.createErrors{
    grid-column: 1/3;
    display: grid;
    grid-template-rows: repeat(2, 0.05fr);
    grid-template-columns: 5% auto;
}
/* end of create*/

/* Vote Page*/
.voteAnswerNum{
    grid-template-columns: 3% auto;
}
.voteRadio{
    grid-column: 1 / 2;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: auto 5px;
}
/* End of Vote Pages*/

/* Results Page 
.resultsGraphs{
    grid-row: 1 / 6;
}*/
.ResultsAnswerNumText{
    display: grid;
    grid-template-rows: repeat(5, auto);
}/*
.mgmtPollsA{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: grid;
    grid-template-rows: repeat(5, auto);
}
End of Results Page */
/* End of Single Page Specific CSS */

/* Multiple Page Specific CSS*/
/* Management, Vote & Results pages*/
.mgmtPollsButtons, .voteButtons, .ResultsButtons{
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-items: center;
}
.mgmtPollsButtonsLeft, .voteButtonsLeft, .ResultsButtonsLeft{
    grid-column: 1/2;
}
.mgmtPollsButtonsMiddle, .voteButtonsMiddle, .ResultsButtonsMiddle{
    grid-column: 2 / 3;
}
.mgmtPollsButtonsRight, .voteButtonsRight, .ResultsButtonsRight{
    grid-column: 3 / 4;
}
/* End of Management, Vote & Results pages*/

/* Create, Vote and Results Pages*/
.createAnswerNumText, .voteAnswerNumText{
    grid-column: 1 / 2;
    vertical-align: middle;
    align-items: center;
    justify-items: center;
    margin: auto;
}
.createAnswerBox textarea, .voteAnswerBox span, .ResultsAnswerBox p{
    box-sizing: border-box;
    width: 99%;
    border: 1px solid black;
    background-color: aliceblue;
    font-size: 18px;
}
.createQuestionHead, .voteQuestionHead, .ResultsQuestionHead, 
.createAnswerHead, .voteAnswerHead, .ResultsAnswerHead{
    grid-column: 1/2;
    font-weight: bold;
}
.createAnswer, .voteAnswer, .ResultsAnswer{
    grid-row: 3/4;
    display: grid;
    grid-template-columns: 1fr 6fr;
}
.createAnswerNum, .voteAnswerNum{
    grid-column: 2/3;
    display: grid;
    grid-template-columns: 5% auto;
    grid-template-rows: repeat(5, 0.5fr);
    row-gap: 2px;
    font-size: 18px;
}
.ResultsAnswerNum{
    row-gap: 2px;
    font-size: 18px;
}
/* End of Create, Vote and Results Pages*/

/* Create and Vote Pages*/
.createAnswerBox, .voteAnswerBox{
    grid-column: 2 / 3;
    height: 25px;
}
.createAnswerBox span, .voteAnswerBox span{
    height: 25px;
    background-color: aliceblue;
    padding-left: 5px;
}
.createQuestionBox, .voteQuestionBox, .ResultsQuestionBox{
    grid-column: 2/3;
    grid-row: 1/2;
    border: 1px black solid;
    background-color: aliceblue;
    padding: 5px;
    font-size: 18px;
    height: 45px;
}
.createAnswerNum, .voteAnswerNum{
    grid-template-rows: repeat(5, 1fr);
}
/* End of Create and Vote Pages*/

/* Create and Results Pages*/
.createAnswerNum p, .ResultsAnswerNum p{
    margin: 5px;
}
/* End of Create and Results Pages*/

/* Vote & Results Pages*/
.voteContainer, .ResultsContainer{
    display: grid;
    grid-template-rows: repeat(3, auto);
    row-gap: 5px;
    font-size: 22px;
}
.voteAnswer, .ResultsAnswer{
    grid-row: 2/3;
}
.voteAnswerNum label{
    grid-column: 2 / 3;
    display: grid;
    font-size: 20px;
    grid-template-columns: 3% auto;
}
.voteButtons, .ResultsButtons{
    grid-row: 3 /4;
}
.voteAnswerNum span, .ResultsAnswerNum span{
    margin: 3px;
}
.ResultsAnswerNumText span{
    display: inline-block;
    margin: 2px;
}
.resultsGraphs span{
    display: inline-block;
    width: 90%;
    border: 1px solid black;
}
.voteQuestion, .ResultsQuestion{
    grid-row: 1/2;
    display: grid;
    grid-template-columns: 1fr 6fr;
}
/* End Vote & Results Pages*/
/* End Multiple Page Specific CSS*/

/*Miscellaneous*/
input[type=submit], input[type=reset], input[type=button], button{
    background-color: indigo;
    border-radius: 12px;
    color: floralwhite;
    cursor:pointer;
    text-align: center;
    font-size: 16px;
    width: auto;
    padding: 5px 10px;
}
img{
    max-width: 100%;
    max-height: 60px;
    background-size: contain;
    display: block;
    width: auto;
    height: 100%;
}
.italic{
    font-size: 16px;
    font-style: italic;
}
.combine{
    grid-column: 1/3;
}
.right{
    float: right;
    margin-left: auto;
    text-align: right;
 }
 .left{
     float: left;
     margin-right: auto;
     text-align: left;
  }
.image{
    width: 65px;
    height: 65px;
    border: 1px solid;
}
.headerImage{
    margin: 15%;
    margin-right: 15px;
}
.avatarImages > input{
    display: none;
    box-sizing: border-box;
    position: relative;
}
.avatarImages > input + img{
    cursor: pointer;
    border: 2px solid transparent;
    display: inline;
}
.avatarImages > input:checked + img{
    border: 4px solid indigo;
}
.userAvatar{
    background-size: contain;
    align-items: center;
}
.hideText{
    display: none;
}
.error{
    font-size: 10pt;
    color: red;
    border: 1px dashed red;
    padding: 3px;
}
.wordCount{
    font-size: 10pt;
    color: lightslategray;
    text-align: right;
    float: right;
    margin-left: auto;
}
.clearTableFormat{
    background-color: gainsboro;
    text-align: center;
}
.errorMessage{
    color: red;
    font-size: 10pt;
    padding: 0%;
    margin: 0%;
    height: auto;
    grid-column: 1/3;
}
.errorColumn{
    grid-column: 2/3;
}
/*end of miscellaneous*/