@media screen and (min-width: 600px) {
    body {
        max-width: 750px!important;
        margin: 0 auto!important;
        background-position: center top;
        background-size: 750px;
    }
}

/* For narrow phones, like the iPhone 5 -- shrink the font-size of the initial description under the logo */
@media screen and (max-width: 330px) {
    .waveHeaderText {
        font-size: 108%;
        font-weight: bold;
        margin-top: 0.5em;
    }
}
@media screen and (min-width: 331px) {
    .waveHeaderText {
        font-size: 140%;
        font-weight: bold;
        margin-top: 0.5em;
    }
}

a {
   text-decoration: none;
}

.unindentList ul { margin-left: -12px;  line-height: 120%; }
.unindentList ol { margin-left: -12px;  line-height: 120%; }
.unindentList li { margin-top: 0.4em;   line-height: 120%; }
.unindentList li span {
    position: relative;
    left: -0.2em;
    line-height: 120%;
}
p { line-height: 120%; }
p + ul { margin-top: -0.8em; }
ul + p { margin-top: -0.8em; }

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    max-width: 25em;
    margin-top: 1px;
    margin: 0;
    font-family: 'Roboto Flex', sans-serif;
}

.topBar {
    margin-left:  10px;
    margin-right: 10px;
}
.darkBlueText {
    color: #003052;
}
.pageText {
    margin-left: 10px;
    margin-right: 10px;
}


/* --- The nailed-to-the-bottom webapp nav buttons ------- */
.bottomBar {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-left: 0;
    /* background-color: #003052; */
    z-index: 3;
}
.bottomStuff {
    background-color: #003052;
    /* z-index: 3; */
}

.bottomButton {
    position: relative;
    padding-top:    0.3ex;
    padding-bottom: 4.2ex;
    color: white;
    line-height: 100%;
    font-size:   90%;
    text-align: center;
    text-decoration: none;

    border-style: solid;
    border-width: 1px;
    border-color: white;
    /* border-radius: 15%; */
    border-radius: 1em;
    max-width: 85%;
    max-height: 90%;

    margin-top:    0.3em;
    margin-bottom: 0.3em;
    margin-left:   0.3em;
    /* margin-right:  0.3em; */
}
.bottomButtonImage {
   width: 2.5em;
}
.bottomButtonText {
   position: absolute;
   top: 2.8em;
   width: 100%;
}

.whiteLink {
    text-decoration: none;
    color: white;
}
.whiteLink:visited {
    color: white;
}

.bottomPill {
    border: none;
    background-color: #5cace6;
    color:  white;
    padding-top:    0px;
    padding-right:  0px;
    padding-bottom: 0px;
    padding-left: 4px;
    display: inline-block;
    margin:  4px 2px;
    border-radius: 20px;
    font-size: 100%;
    letter-spacing: .1rem;
    text-align: left;
    width: 7em;
}

.fullWidth {
   width: 100vw; 
   max-width: 750px;
}

.howToVoteSpacer { padding-top: 0.5em; }

address-search {
    font-family: 'Roboto';
    display: block;
    width: 93vw;
    max-width: 725px;
    margin: 0 10px 10px 10px;
}

/* ===================================================== */
      .accordion {
          padding: 14px;
          font-weight: bold;
          width: 90%;
          border:    1px solid grey;
          margin-bottom: -1px;
       }

       /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
       .active, .accordion:hover {
          background-color: #ccc;
       }

       /* Style the accordion panel. Note: hidden by default */
       .panel {
          max-height: 0;
          overflow:   hidden;
          transition: 0.6 ease-in-out;
          opacity:    0;
          width: 90%;
          max-width: 90%;
       }

       .panel.show {
          opacity: 1;
          max-height: 2000px;
       }

   .noUnderline { text-decoration: none; }
       .back0 { }
       .back1 { background-color: #d2d2d2; }
       a, a:visited { color: blue; }


.roundButton {
    border: none;
    background-color: #5cace6;
    color:  white;
    padding: 0.5em;
    display: inline-block;
    margin:  4px 2px;
    border-radius: 20px;
    font-size: 100%;
    letter-spacing: .1rem;
    text-align: left;
}

.red {
}