@charset "utf-8";
/* CSS Document */
.emptySearchWarningContainer,
#noResultsMessageDiv,
#loadResultsAnimation,
#numberOfResultsDiv,
#loadMoreResultsButtonDiv,
#congressionalDistrictInputContainer,
#houseDistrictInputContainer,
#senateDistrictInputContainer,
#judicialDistrictInputContainer,
#countyInputContainer,
#cityInputContainer,
#precinctInputContainer,
#zipCodeInputContainer,
#loginErrorModal,
#responseModal,
#accountCreatedModal,
#generateListOfVotersButton,
#fileUploadInputContainer,
#uploadingFileAnimation,
#nonpartisanBoardDropdownContainer,
#addToDirectoryAnimation,
#sortByDistrictContainer,
#districtMapImageContainerDiv{
    display: none;
}
/*  --  css reset  --  */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
}
/* 
    vendor prefixes 

    -webkit-   Safari      
    -moz-      Firefox
    -ms-       IE10+/Edge

    font conversion 
    
    24pt = 32px = 3.2rem - H1
    22.5pt = 30px = 3rem
    18pt = 24px = 2.4rem - H2
    14.5pt = 20px = 2rem
    13.5pt = 18px = 1.8rem - H3, Label, Button
    12pt = 16px = 1.6rem - H4, P
    10.5pt = 14px = 1.4rem
    9pt = 12px = 1.2rem
    7.5pt = 10px = 1rem (base)
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

html{
    font-size: 62.5%;
}
h1{
    font-family: "Poppins", serif;
    font-weight: 600;
    font-style: normal;
	font-size: 4rem;
}
h2{
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
	font-size: 2.8rem;
}
h3{
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
	font-size: 2rem;
}
label, p, span, li, input, select, textarea, button{
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
	font-size: 1.6rem;
}
body{
    float: left;
    width: 100%;
    height: auto;
    background-color: #fdfdfd;
    overflow-x: hidden;
}
.wrapper{
    float: left;
    width: 100%;
    height: auto;
    min-height: 100vh;
    position: relative;
}
label{
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    padding-left: 20px;
}
input[type=text], input[type=password], input[type=date]{
    width: 100%;
    height: 50px;
    padding-top: 5px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 2px solid #999999;
}
input[type=text]:hover, input[type=password]:hover, input[type=date]:hover, textarea:hover,
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, textarea:focus{
    border-color: #ae1b1d;
}
textarea{
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 50px;
    padding-top: 5px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 2px solid #999999;
}
select{
    width: 100%;
    height: 50px;
    padding-top: 5px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 2px solid #999999;
}
.selectInput{
    float:left;
    width:100%;
    height:50px;
    padding: 13px;
    padding-right: 30px;
    border-radius: 10px;
    background-color: #fdfdfd;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(/images/arrowIcon.svg);
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 2px solid #999999;
}
.selectInput:hover,
.selectInput:focus{
    border-color: #ae1b1d;
    cursor: pointer;
}
.radioInputContainer{
    float: left;
    width: 100%;
    height: 50px;
    margin-top: 10px;
}
legend{
    display: none;
}
.radioOption{
    float: left;
    width: auto;
    height: 50px;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 2px solid transparent;
    border-radius: 10px;
}
.radioOption:hover,
.radioOption:focus-within{
    border: 2px solid #999999;
    cursor: pointer;
}
.radioOption label{
    font-size: 1.6rem;
    padding-left: 0;
    margin-bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.radioOption label:hover{
    cursor: pointer;
}
.radioOption input{
    margin-right: 10px;
}
.checkboxLabelInput{
    float: left;
    width: 100%;
    height: auto;
    transition-duration: 0.2s;
    padding-left: 0;
}
.checkboxLabelInput:hover,
.checkboxLabelInput:focus-within{
    cursor: pointer;
    font-weight: bold;
    color: #ae1b1d;
}
button{
    float: left;
    width: 50%;
    height: 50px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #ae1b1d;
    color: #fdfdfd;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    transition-duration: 0.2s;
}
button:hover,
button:focus{
    cursor: pointer;
    background-color: #821416;
    box-shadow: none;
}
button.whiteButton{
    background-color: #fdfdfd;
    color: #ae1b1d;
    border: 2px solid transparent;
}
button.whiteButton:hover,
button.whiteButton:focus{
    border-color: #ae1b1d;
}
button a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fdfdfd;
    text-decoration: none;
}
button span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fdfdfd;
}
button span img{
    display: block;
    width: auto;
    height: 50%;
    margin-right: 10px;
}
.pageHeader{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 10px;
}
/* header */
.header{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 50px;
}
.headerTopSection{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.headerImageContainer{
    float: left;
    width: auto;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.headerImageContainer img{
    display: block;
    float: left;
    width: auto;
    height: 80px;
    margin-left: 50px;
    margin-right: 50px;
}
.pageTopButtonContainer{
    float: left;
    width: 25%;
    height: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pageTopButtonContainer button{
    width: 100%;
    margin-top: 0;
}
.headerDateContainer{
    float: left;
    width: 50%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 25px;
    padding-right: 25px;
}
.headerWelcomeContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.headerWelcomeNameContainer, .headerWelcomeCampaignContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.headerWelcomeContainer p{
    float: left;
    width: auto;
    height: auto;
    font-size: 3rem;
}
/* - create account - */
.createAccountWrapper{
    float: left;
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: rgb(174,27,29);
    background: linear-gradient(167deg, rgba(174,27,29,1) 20%, rgba(86,13,15,1) 100%);  
}
.createAccountWrapper .pageHeader{
    color: #fdfdfd;
}
.createAccountContainer{
    float: left;
    width: 40%;
    height: auto;
    margin-left: 30%;
    margin-top: 3%;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.25);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border: 3px solid #821416;
    position: relative;
}
.responseModal{
    display: block;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.6);
}
/* - Login - */
.loginWrapper{
    float: left;
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: rgb(174,27,29);
    background: linear-gradient(167deg, rgba(174,27,29,1) 20%, rgba(86,13,15,1) 100%);  
}
.loginWrapper .pageHeader{
    color: #fdfdfd;
}
.loginContainer{
    float: left;
    width: 40%;
    height: auto;
    margin-left: 30%;
    margin-top: 3%;
    background-color: #fdfdfd;
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.25);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border: 3px solid #821416;
    position: relative;
}
.inputContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 10px;
}
.loginAnimationContainer{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 20px;
    background-color: #fdfdfd;
    border-radius: 10px;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    scale: 0;
    opacity: 0;
    animation: openLoginAnimationModal 0.5s forwards ease-in-out;
    transition-duration: 0.3s;
}
@keyframes openLoginAnimationModal{
    0% { 
        scale: 0;
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    70%{
        scale: 1.1; 
    }
    100% { 
        scale: 1; 
        opacity: 1;
    }
}
.loginAnimationContainer p{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 2rem;
}
.animatedDots{
    display: inline-block;
}
.dots::after {
    font-size: 2rem;
    text-align: left;
    margin-left: 5px;
    width: 75px;
    content: '';
    display: inline-block;
    animation: dots 1.5s steps(3, end) infinite;
}
@keyframes dots {
    0% {
      content: '';
    }
    33% {
      content: '.';
    }
    66% {
      content: '..';
    }
    100% {
      content: '...';
    }
  }
.loginAnimationImageContainer{
    float: left;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.loginAnimationImageContainer img{
    display: block;
    width: 125px;
    height: auto;
    z-index: 5;
}
.lockAnimationSlotsContainer{
    position: absolute;
    left: 0;
    right: 0;
    top: 123px;
    height: 50px;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 2px solid #000;
}
.reelContainer{
    float: left;
    width: 100%;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.reelOne, .reelTwo, .reelThree{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    float: left;
    width: 35px;
    transform: translateY(103px);
}
.reelOne{
    animation: spin 2s infinite ease-in-out;
} 
.reelTwo{
    animation: spin 2s infinite ease-in-out;
    animation-delay: 0.1s;
}
.reelThree{
    animation: spin 2s infinite ease-in-out;
    animation-delay: 0.2s;
}
.reelOne.loginFailed{
    animation: spin 2s ease-in-out;
} 
.reelTwo.loginFailed{
    animation: spin 2s ease-in-out;
    animation-delay: 0.1s;
}
.reelThree.loginFailed{
    animation: spin 2s ease-in-out;
    animation-delay: 0.2s;
}
.reelOne div, .reelTwo div, .reelThree div {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bolder;
    background-color: #f0f0f0;
    border-bottom: 2px solid #ddd;
}
/* Keyframes for spinning effect */
@keyframes spin{
    0% { 
        transform: translateY(-103px); 
    }
    100% { 
        transform: translateY(103px);
    }
}
.reelOneFinal, .reelTwoFinal, .reelThreeFinal{
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 35px;
    transform: translateY(-25px);
}
.reelOneFinal{
    animation: spinFinal 1s forwards ease-in-out;
}
.reelTwoFinal{
    animation: spinFinal 1s forwards ease-in-out;
    animation-delay: 0.1s;
}
.reelThreeFinal{
    animation: spinFinal 1s forwards ease-in-out;
    animation-delay: 0.2s;
}
.reelOneFinal div, .reelTwoFinal div, .reelThreeFinal div{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bolder;
    background-color: #f0f0f0;
    border-bottom: 2px solid #ddd;
}
@keyframes spinFinal{
    0% { 
        transform: translateY(-25px); 
    }
    100% { 
        transform: translateY(25px); 
    }
}

.roadToRedContainer{
    float: left;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    padding: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.25);
}
.roadToRedContainer img{
    display: block;
    width: 10%;
    height: auto;
}
.roadToRedContainer p{
    float: left;
    width: 100%;
    height: auto;
    font-size: 2.6rem;
    text-align: center;
    margin-left: -10%;
}
.loginErrorModal, .accountCreatedModal{
    display: block;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.6);
}
.modalContentContainer{
    display: block;
    width: 90%;
    max-width: 1000px;
    height: auto;
    max-height: calc(100% - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    margin: 150px auto;
    border-radius: 10px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.modelHeader{
    float: left;
    width: 100%;
    min-height: 50px;
    height: auto;
    display: flex;
    align-items: center;
    background-color: #ae1b1d;
    position: sticky;
    top: 0;
    z-index: 600;
    padding-left: 20px;
    padding-right: 20px;
}
.modelHeader h2{
    color: #fdfdfd;
}
.modalContent{
    float: left;
    width: 100%;
    height: auto;
    min-height: 200px;
    background-color: #fdfdfd;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 5%;
    padding: 20px;
}
.modalButtonContainer{
    float: left;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    padding: 2%;
    background-color: #fdfdfd;
    border-top: 3px solid #ae1b1d;
    box-shadow: 0 -12px 16px 0 rgba(0,0,0,0.24);
}

/* - dashboard - */
.dashboardHeader{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 10px;
}
.dashboardButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 25px;
    padding-right: 25px;
}
.dashboardButtonContainer button{
    width: 31%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 20px;
}

/* - voter search - */
.voterSearchContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 3%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
.voterSearchContainer p{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 15px;
}
.voterSearchContainer .inputContainer{
    width: 25%;
    padding-bottom: 0;
}
.voterSearchContainer button{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.emptySearchWarningContainer,
.noResultsSearchWarningContainer{
    float: left;
    width: 50%;
    height: auto;
    margin-left: 25%;
    margin-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
}
.emptySearchWarningTextContainer,
.noResultsSearchWarningTextContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    border-radius: 10px;
    padding: 20px;
}
.emptySearchWarningContainer p,
.noResultsSearchWarningContainer p{
    float: left;
    width: auto;
    height: auto;
}
.resultNumberContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.resultNumberTextContainer{
    float: left;
    width: 40%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    border-radius: 10px;
    padding: 20px;
}
.resultNumberContainer p{
    float: left;
    width: auto;
    height: auto;
    border-bottom: 5px solid #ae1b1d;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 2.6rem;
}
.voterResultsContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
}
.voterResultsContainer input[type=text]{
    border:none;
}
.voterResultsContainer label{
    margin-bottom: 0;
    padding-left: 0;
}
.voterRow{
    float: left;
    width: 100%;
    height: auto;
    padding-bottom: 40px;
    margin-bottom: 20px;
    border-bottom: 5px solid #ae1b1d;
    position: relative;
}
.collapseExpandRow{
    float: left;
    width: 100%;
    height: 50px;
    padding-right: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: #fdfdfd;
}
.innerRow{
    float: left;
    width: 95%;
    height: 50px;
    margin-left: 2.5%;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 2px dotted #999999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.innerRow:hover{
    background-color: #cccccc;
    border-bottom: 2px solid #999999;
}
.leftSide, .rightSide{
    float: left;
    width: 50%;
    height: auto;
}
.collapseExpandRow .leftSide{
    width: 80%;
}
.collapseExpandRow .rightSide{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.collapseExpandRow .rightSide:hover{
    cursor: pointer;
}
.collapseExpandRow .rightSide:hover .textFlipContainer,
.collapseExpandRow .rightSide:focus .textFlipContainer{
    border-left: 3px solid #ae1b1d;
}
.arrowContainer{
    float: right;
    Width: 20%;
    height: auto;
}

.textFlipContainer{
    perspective: 200px;
	transition: all .07s linear;
	position: relative;
	cursor: pointer;
    width: 80%;
    height: 50px;
    overflow: hidden;
    border-left: 3px solid transparent;
}
.collapseExpandText{
    transition: all .3s ease-out;
	transform: translatez(-25px);
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.expand, .collapse {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    padding: 10px;
    pointer-events: none;
    box-sizing: border-box;
}
.expand {
	transform: rotatex(0deg) translatez(25px);
}
.collapse {
	transform: rotatex(-90deg) translatez(25px);
}	
/* cause the flip */
.expanded{
	transform: translateZ(-25px) rotateX(90deg);
}
.collapseExpandContainer{
    float: left;
    width: 100%;
    height: auto;
    display: block;
}
.toggleArrow{
    display: block;
    float: right;
    font-size: 1.8rem;
	transform: rotate(90deg);
    transition:transform 0.2s;
}
.closedArrow{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition:transform 0.2s;
}
.openArrow{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition:transform 0.2s;
}

.loadMoreResultsContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}
.loadMoreResultsContainer button{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* - Animation - */
.animationContainer{
    display: block;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.6);
}
.searchAnimationContainer, .uploadAnimationContainer{
    display: block;
    width: 90%;
    max-width: 1000px;
    height: auto;
    max-height: calc(100% - 80px);
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 80px auto;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
.searchAnimationContainer p, .uploadAnimationContainer p{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 10px;
    font-size: 3rem;
}
.searchIconContainer, .uploadIconContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}
.uploadIconContainer{
    position: relative;
}
.searchIconContainer img{
    display: block;
    width: 50px;
    height: auto;
    filter: invert(0) sepia(0) saturate(0) hue-rotate(348deg) brightness(0) contrast(0);
    animation: search 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
@keyframes search{
    0%{
        margin-left: -100;
        scale: 1.4;
    }
    25%{
        margin-left: 100px;
        scale: 1;
    }
    50%{
        margin-left: -100px;
        scale: 1;
    }
    75%{
        margin-left: 100px;
        scale: 1;
    }
    100%{
        margin-left: -100;
        scale: 1.4;
    }
}
.uploadIconContainer img{
    display: block;
    width: 100px;
    height: auto;
    filter: invert(0) sepia(0) saturate(0) hue-rotate(348deg) brightness(0) contrast(0);
}
.uploadIconContainer img.uploadAnimationArrow{
    width: 35px;
    position: absolute;
    top: 32px;
    left: auto;
    opacity: 1;
    animation: upload 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    transition-duration: 0.3s;
}
@keyframes upload{
    0%{
        top: 100px;
    }
    20%{
        top: 32px;
    }
    80%{
        top: 32px;
    }
    90%{
        opacity: 1;
    }
    100%{
        top: -70px;
        opacity: 0;
    }
}
.searchProgressBarContainer{
    display: none;
    float: left;
    position: relative;
    width: 80%;
    height: 20px;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 10%;
    margin-bottom: 10px;
}
.searchProgressBarFill{
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    bottom: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    transition-duration: 0.3s;
    background-color: #ae1b1d;
    border-radius: 10px;
}

/* - generate list of voters page - */
.searchFilterSelectContainer{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 10px;
}
.searchFilterSelectContainer .inputContainer{
    width: 33.33%;
}

/* - grand junction turnout page - */
.turnoutWrapper .pageHeader{
    margin-bottom: 25px;
}
.updateMessageContainer{
    float: left;
    width: 50%;
    height: auto;
    min-height: 100px;
    margin-top: 10px;
    margin-left: 25%;
    padding: 10px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    display: flex;
    justify-content: center;
    align-items: center;
}
.updateMessageContainer p{
    padding-left: 10px;
    padding-right: 10px;
    font-size: 2rem;
    border-bottom: 5px solid #ae1b1d;
}
.progressBarsContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 5%;
    padding-right: 5%;
}
.turnoutGroupsContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
}
.progressBarSection{
    float: left;
    width: 25%;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
    align-self: flex-end;
    margin-top: 10px;
}
.progressBarSection p{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 20px;
}
.turnoutProgressBarContainer{
    float: left;
    position: relative;
    width: 100%;
    height: 20px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
    background-color: #cccccc;
}
.turnoutProgressBarFill{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
    transition-duration: 0.3s;
    border-radius: 10px;
}
.blackProgressBar .turnoutProgressBarFill{
    background-color: black;
}
.blueProgressBar .turnoutProgressBarFill{
    background-color: #1b67ae;
}
.redProgressBar .turnoutProgressBarFill{
    background-color: #ae1b1d;
}
.purpleProgressBar .turnoutProgressBarFill{
    background-color: purple;
}
.grayProgressBar .turnoutProgressBarFill{
    background-color: gray;
}
.overallSection{
    margin-bottom: 20px;
}
.overallVoterTurnoutContainer,
.targetedVotersTurnoutContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 80px;
}
.overallVoterTurnoutContainer h2,
.targetedVotersTurnoutContainer h2{
    margin-bottom: 20px;
    text-align: center;
}
.downloadButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}
.downloadButtonContainer button{
    width: 25%;
}

/* master file upload page */
.fileUploadContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.fileUploadPasswordContainer{
    float: left;
    width: 50%;
    height: auto;
    padding: 10px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    margin-top: 50px;
}
.fileUploadPage .fileUploadPasswordContainer button{
    width: 50%;
    margin-left: 25%;
}
.inputsBox{
    float: left;
    width: 33.33%;
    height: auto;
}
.fileUploadPage .inputContainer{
    width: 100%;
    height: auto;
}
.fileUploadPage label{
    padding-left: 0;
}
.fileUploadPage .radioInputContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 0;
}
.fileUploadPage .radioOption{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    padding: 10px;
}
.fileUploadPage button{
    width: 100%;
    margin-top: 50px;
}

/* - elected Official Directory page - */
.addToDirectoryButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.addToDirectoryButtonContainer button{
    width: 25%;
}
.electedOfficialDirectoryInputContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 3%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}
.electedOfficialDirectoryInputContainer .inputContainer{
    width: 30%;
    padding-bottom: 0;
}
.electedOfficialDirectoryInputContainer button{
    width: 30%;
}
.topSearchContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 3%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
    font-size: 1.4rem;
}
.topSearchContainer .labelWithButton{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.topSearchContainer .labelWithButton button{
    width: auto;
    margin-top: 0;
    padding-left: 10px;
    padding-right: 10px;
    height: 35px;
    background-color: #fdfdfd;
    border: 2px solid transparent;
    color: #ae1b1d;
    box-shadow: none;
}
.topSearchContainer .labelWithButton button:hover,
.topSearchContainer .labelWithButton button:focus{
    border-color: #ae1b1d;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
}
.bottomSearchContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 3%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}
.resultContainer, #electedOfficialDirectoryResultsContainer{
    float: left;
    width: 100%;
    height: auto;
    padding: 20px;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}
.applyButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}
.applyButtonContainer button{
    width: 33.33%;
}
.boardOrPositionContainer, .individualContainer{
    float: left;
    width: 48%;
    height: auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 2%;
}
.resultTopSection{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.resultImageContainer{
    float: left;
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.resultImageContainer img{
    display: block;
    width: 100%;
    height: auto;
}
.resultsTextContainer{
    float: left;
    width: 70%;
    height: auto;
    padding: 20px;
    padding-left: 50px;
    padding-top: 0;
}
.socialMediaLinksContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 20px;
}
.socialMediaLink{
    float: left;
    width: 10%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.socialMediaLink img{
    float: left;
    display: block;
    width: 25px;
    height: auto;
}
.notesSection{
    float: left;
    width: 100%;
    height: auto;
    align-self: flex-end;
    margin-top: 10px;
}
/* - add to elected Official Directory page - */
.addToDirectoryInputContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 3%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.addToDirectoryInputContainer .inputContainer{
    width: 33.33%;
    padding-bottom: 0;
}
.partisanInputContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 3%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
}
.partisanInputContainer h2{
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 40px;
    padding: 20px;
}
.partisanInputContainer h3{
    float: left;
    width: 100%;
    height: auto;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 40px;
    border-bottom: 2px solid #999999;
    padding: 20px;
}
.partisanInputContainer .inputContainer{
    width: 33.33%;
    padding-bottom: 0;
    margin-bottom: 10px;
}
.addToDirectoryButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 3%;
    margin-bottom: 5%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.addToDirectoryButtonContainer button{
    width: 33.33%;
}

/* create survey */
.createSurveyInputContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 3%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.createSurveyTabContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.createSurveyTab{
    float: left;
    width: 33.33%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fdfdfd;
    border: 2px solid transparent;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition-duration: 0.2s;
}
.createSurveyTab:hover,
.createSurveyTab:focus-within{
    border-color: #ae1b1d;
    cursor: pointer;
}
.currentTab{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #ae1b1d;
    z-index: 50;
    border-color: #ae1b1d;
}
.currentTab p{
    color: #fdfdfd;
}
.currentSurveyTabContentContainer{
    float: left;
    width: 100%;
    height: auto;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    border-radius: 10px;
    border-top-left-radius: 0;
    background-color: #fdfdfd;
    border: 2px solid #ae1b1d;
}
.createSurveyInputContainer .rightSide,
.createSurveyInputContainer .leftSide{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;
}
.createSurveyInputContainer .leftSide{
    display: none;
}
.createSurveyInputContainer .radioInputContainer{
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.createSurveyInputContainer .radioOption{
    width: 30%;
    height: 50px;
}
.questionTextInput{
    min-height: 100px;
}
.multipleChoiceOptionContainer{
    float: left;
    width: 100%;
    height: auto;
}
.multipleChoiceOptionButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
}
.multipleChoiceOptionButtonContainer button{
    width: 45%;
}
.optionChoiceListContainer{
    float: left;
    width: 100%;
    height: auto;
    margin-top: 40px;
    padding: 10px;
}
.optionChoiceListContainer ul{
    float: left;
    width: 100%;
    height: auto;
}
.optionChoiceListContainer li{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 2px solid transparent;
    padding-bottom: 5px;
}
.optionChoiceListContainer li:hover{
    border-color: #999999;
}
.optionChoiceListContainer li.optionChoiceRemoved{
    display: none;
}

.removeOptionChoice{
    float: left;
    width: 45px;
    color: #ae1b1d;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    margin-right: 10px;
    border: 2px solid transparent;
    border-radius: 10px;
}
.removeOptionChoice:hover{
    cursor: pointer;
    border-color: #ae1b1d;
}
.createQuestionButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;/*space between when remove button added*/
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
}
.createQuestionButton{
    width: 45%;
    margin-bottom: 10px;
}
.createdQuestionListContainer{
    float: left;
    width: 25%;
    height: auto;
    margin-top: 20px;
    padding: 10px;
}
.createdQuestionListContainer h2{
    margin-bottom: 20px;
}
.createdQuestionList{
    float: left;
    width: 100%;
    height: auto;
}
.createdQuestionList button{
    width: 100%;
}
.createQuestionSection{
    float: left;
    width: 75%;
    height: auto;
    padding-left: 20px;
}
.createSurveyButtonContainer{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-bottom: 40px;
}
.createSurveyButtonContainer button{
    width: 33.33%;
}
#createCheckboxQuestionContainer0,
#createMultipleChoiceQuestionContainer0{
    display: none;
}

/* district comparison page*/
.districtComparisonDropdownContainer{
    float: left;
    width: 50%;
    max-width: 600px;
    height: auto;
    padding: 20px;
}
.coloradoOutlineContainer{
    float: left;
    width: 30%;
    max-width: 600px;
    height: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.coloradoOutlineContainer img{
    display: block;
    width: auto;
    height: 80px;
    margin-top: 20px;
}
.districtComparisonTableContainer{
    float: left;
    width: 100%;
    height: auto;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 40px;
}
.districtComparisonRow{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid #999999;
    transition-duration: 0.2s;
    text-decoration: none;
}
.districtComparisonRow:hover,
.districtComparisonRow:focus{
    cursor: pointer;
    border-bottom: 2px solid #ae1b1d;
}
.districtComparisonRow p{
    color: black;
}
.districtComparisonRowLeft{
    float: left;
    width: 50%;
    height: auto;
    padding-right: 20px;
}
.districtNumber,
.districtName,
.districtParty{
    float: left;
    width: 33.33%;
    height: auto;
    padding: 5px;
}
.democratParty{
    background-color: #2B4570;
}
.republicanParty{
    background-color: #AE1B1D;
}
.democratParty p,
.republicanParty p{
    font-weight: bold;
    color: #fdfdfd;
    text-align: center;
}
.districtComparisonRowRight{
    float: left;
    width: 50%;
    height: auto;
}
.districtComparisonBarGraph{
    float: left;
    width: 100%;
    height: 25px;
    border-radius: 10px;
    background: linear-gradient(90deg,
    rgba(174, 27, 29, 1) 0%, 
    rgba(174, 27, 29, 1) 25%, 
    rgba(174, 118, 166, 1) 25%, 
    rgba(174, 118, 166, 1) 50%, 
    rgba(43, 69, 112, 1) 50%, 
    rgba(43, 69, 112, 1) 75%, 
    rgba(195, 181, 159, 1) 75%, 
    rgba(195, 181, 159, 1) 100%);
}
.districtComparisonBarGraphPercents{
    float: left;
    width: 100%;
    height: auto;
}
.districtComparisonBarGraphPercents p{/* temp for testing */
    float: left;
    width: 25%;
    text-align: center;
}
.districtComparisonBarGraphPercents p span{
    float: left;
    width: 100%;
    height: auto;
}
.districtComparisonRow.pieChartVersion{/* temp */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    margin-left: 5%;
}
.districtComparisonRowRight.pieChartVersion{ /* temp */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.districtComparisonPieChart{
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 75px;
    background: conic-gradient(
    #ae1b1d 0deg,      
    #ae1b1d 60deg,     
    #F4978E 60deg, 
    #F4978E 120deg, 
    #ae76a6 120deg,
    #ae76a6 180deg,
    #2b4570 180deg,
    #2b4570 240deg,
    #5DA9E9 240deg,
    #5DA9E9 300deg,
    #c3b59f 300deg,
    #c3b59f 360deg
  );
}
.districtComparisonPieChartPercents{
    float: left;
    width: calc(100% - 100px);
    height: auto;
    padding-left: 25px;
}
.districtComparisonPieChartPercents p{
    float: left;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.colorKey{
    float: left;
    width: 15px;
    height: 15px;
    margin-right: 25px;
}
.darkRed{
    background-color: #ae1b1d;
}
.lightRed{
    background-color: #F4978E;
}
.purple{
    background-color: #ae76a6;
}
.darkBlue{
    background-color: #2b4570;
}
.lightBlue{
    background-color: #5DA9E9;
}
.tan{
    background-color: #c3b59f;
}
.voteCount{
    width: 60%;
    text-align: right;
}
.votePercent{
    text-align: right;
}
/* district Statistics page*/
.districtMapImageContainer{
    float: left;
    width: 50%;
    height: auto;
    margin-left: 25%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.districtMapImageContainer img{
    display: block;
    float: left;
    width: 100%;
    height: auto;
}

/* responsive screen code */
@media only screen and (min-width: 1500px) {
/* Extra large devices (large laptops and desktops, 1500px and up) */	
}
@media only screen and (max-width: 1499px) {
/* Extra large devices (large laptops and desktops, 1200px and up) */	
}
@media only screen and (max-width: 1199px) {
/* Large devices (laptops/desktops, 992px and up) */	
    .updateMessageContainer{
        width: 70%;
        margin-left: 15%;
    }
}
@media only screen and (max-width: 991px) {
/* Medium devices (landscape tablets, 768px and up) */
    .pageTopButtonContainer{
        width: 30%;
    }
    .loginContainer, .createAccountContainer{
        width: 50%;
        margin-left: 25%;
    }
    .voterSearchContainer button{
        width: 50%;
        margin-top: 45px;
    }
    .updateMessageContainer{
        width: 90%;
        margin-left: 5%;
    }
    .downloadButtonContainer button{
        width: 40%;
    }
    .progressBarSection.overallSection{
        width: 50%;
    }
    .progressBarSection{
        width: 50%;
    }
    .electedOfficialDirectoryInputContainer .inputContainer{
        width: 48%;
    }
    .electedOfficialDirectoryInputContainer button{
        margin-left: 10px;
        margin-top: 40px;
    }
    .boardOrPositionContainer{
        width: 100%;
    }
    .individualContainer{
        width: 100%;
        margin-top: 40px;
    }
    .createSurveyInputContainer .rightSide, .createSurveyInputContainer .leftSide{
        width: 100%;
    }
    .createSurveyInputContainer .radioInputContainer{
        flex-wrap: wrap;
    }
    .createSurveyInputContainer .radioOption{
        width: 45%;
    }
}
@media only screen and (max-width: 767px) {
/* Small devices (portrait tablets and large phones, 600px and up) */
    .pageTopButtonContainer{
        width: 50%;
    }
    .loginContainer, .createAccountContainer{
        width: 60%;
        margin-left: 20%;
    }
    .collapseExpandRow .leftSide{
        width: 70%;
    }
    .collapseExpandRow .rightSide{
        width: 30%;
    }
    .voterSearchContainer .inputContainer{
        width: 50%;
    }
    .voterSearchContainer button{
        width: 50%;
        margin-top: 45px;
    }
    .dashboardButtonContainer button{
        width: 48%;
    }
    .addToDirectoryInputContainer .inputContainer{
        width: 48%;
    }
    .partisanInputContainer .inputContainer{
        width: 48%;
    }
    .districtComparisonRow{
        flex-wrap: wrap;
    }
    .districtComparisonRowLeft{
        width: 100%;
        margin-bottom: 10px;
    }
    .districtComparisonRowRight{
        width: 100%;
    }
    .createSurveyInputContainer .radioOption{
        width: 100%;
    }
    .createdQuestionListContainer, .createQuestionSection{
        width: 100%;
    }
}
@media only screen and (max-width: 600px) {
/* Extra small devices (phones, 600px and down) */
    .header{
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 25px;
    }
    .header p{
        text-align: center;
    }
    .headerTopSection,
    .headerWelcomeContainer{
        flex-wrap: wrap;
    }
    .headerDateContainer{
        width: 100%;
        justify-content: center;
    }
    .pageTopButtonContainer{
        width: 50%;
    }
    .loginContainer, .createAccountContainer{
        width: 80%;
        margin-left: 10%;
    }
    .roadToRedContainer{
        flex-wrap: wrap;
    }
    .roadToRedContainer img{
        width: 30%;
    }
    .roadToRedContainer p{
        width: 100%;
        margin-left: 0;
    }
    .collapseExpandRow .leftSide{
        width: 60%;
    }
    .collapseExpandRow .rightSide{
        width: 40%;
    }
    .downloadButtonContainer button{
        width: 80%;
    }
    .progressBarSection.overallSection{
        width: 100%;
    }
    .progressBarSection{
        width: 100%;
    }
    .searchFilterSelectContainer{
        flex-wrap: wrap;
    }
    .voterSearchContainer .inputContainer{
        width: 100%;
    }
    .dashboardButtonContainer button{
        width: 100%;
    }
    .electedOfficialDirectoryInputContainer .inputContainer{
        width: 100%;
    }
    .electedOfficialDirectoryInputContainer button{
        width: 50%;
    }
    #electedOfficialDirectoryResultsContainer .resultTopSection{
        flex-wrap: wrap;
    }
    .resultImageContainer, .resultsTextContainer{
        width: 100%;
    }
    .resultsTextContainer{
        padding-left: 20px;
        margin-top: 40px;
    }
    .resultImageContainer img{
        width: 60%;
    }
    .addToDirectoryButtonContainer button{
        width: 50%;
    }
    .multipleChoiceOptionButtonContainer button,
    .createQuestionButton,
    .createSurveyButtonContainer button{
        width: 60%;
    }
    .createdQuestionListContainer .createdQuestionLeftSide,
    .createdQuestionListContainer .createdQuestionRightSide{
        width: 50%;
    }
    .districtComparisonDropdownContainer,
    .coloradoOutlineContainer{
        width: 100%;
    }
}
@media only screen and (max-width: 400px) {
/* Super Extra small devices (phones, 400px and down) */
    .pageTopButtonContainer{
        width: 100%;
    }
    .loginContainer, .createAccountContainer{
        width: 90%;
        margin-left: 5%;
    }
    .voterSearchContainer button{
        width: 100%;
        margin-top: 45px;
    }
    .turnoutGroupsContainer{
        flex-wrap: wrap;
    }
    .progressBarSection.overallSection, .progressBarSection{
        width: 100%;
    }
    .addToDirectoryInputContainer{
        flex-wrap: wrap;
    }
    .addToDirectoryInputContainer .inputContainer{
        width: 100%;
    }
    .partisanInputContainer .inputContainer{
        width: 100%;
    }
    .addToDirectoryButtonContainer button{
        width: 100%;
    }
}