/* ##########GLOBAL CSS########## */
html,
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
}
a,
a:link,
a:visited,
a span {
  color: #003366;
  cursor: pointer;
  font-weight: bold;
}
.bold {
  font-weight: bold;
}
.blue {
  color: #003366;
}
.green {
  color: #71a100;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.flex p {
  width: 100%;
}
.flex span {
  margin: 0 5px;
}
.flex input,
.flex select {
  flex: 1;
}
/* Overrides USGS CSS */
#maincontent {
  padding: 0;
  flex: 1;
  display: flex;
  font-size: 1em;
  flex-direction: column;
}

main {
  flex: 1;
}
/* ##########CONTAINER CSS########## */
.container {
  padding: 0 10px 10px 10px;
  max-width: 1024px;
}
.container h1 {
  color: #003366;
  margin: 0 0 10px 0;
  font-size: 1.6em;
}
.container h2 {
  margin: 0;
  padding: 0;
}
/* ##########BUTTON CSS########## */
.button {
  background: #003366;
  border: 0;
  color: #fff;
  font-size: 0.9rem;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.button:hover {
  background: #71a100;
}
#buttons button {
  flex: 1;
  max-width: 200px;
}
#buttons button:first-child {
  margin-right: 10px;
}
/* ##########INPUT/SELECT/RADIAL CSS########## */
.inputStyles {
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  border: 1px solid #dadcdb;
  color: #404040;
  font-size: 1em;
  background: #fff;
}
.chooseRegion,
.radialRow,
.sources,
.stars,
.maxWidth {
  max-width: 600px;
  margin: 0 auto;
}
.radialRow {
  margin-bottom: 25px;
}
.radialRow:last-child {
  margin-bottom: 0;
}
.blocks {
  align-items: center;
  justify-content: center;
}
.radialInputs .radialBlock:last-child {
  margin-right: 0;
}
.radialBlock {
  margin-right: 20px;
}
.radial {
  flex: 1;
  font-size: 1em;
  margin-bottom: 5px;
}
.radialText {
  font-size: 1em;
  margin-bottom: 10px;
}
input[type="radio" i] {
  width: 15px;
  height: 15px;
  margin-right: 10px;
}
/* ##########OPTIONS CSS########## */
.options {
  margin-top: 20px;
}
.option {
  margin-bottom: 20px;
}
.option p {
  margin: 0 0 5px 0;
}
/* ##########METHOD CSS########## */
.method {
  margin: 20px 0 10px 0;
}
/* ##########OVERLAY CSS########## */
#overlay {
  background: #000;
  opacity: 0.5;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
}
/* ##########MODAL CSS########## */
.modalCenter {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  width: 90%;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
}
#left .modal p {
  margin-bottom: 10px;
}
#left .modal ul {
  margin-top: 10px;
  padding-left: 20px;
}
#left .modal li {
  margin-bottom: 5px;
  font-size: 14px;
}
.modalTitle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modalTitle h2 {
  flex: 1;
  margin: 0 20px 0 0;
  color: #000;
  font-size: 1.5em;
}
.exit {
  width: 25px;
  height: 25px;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
/* ##########SUBMIT CSS########## */
#submit {
  margin: 20px 0 20px 0;
  align-items: center;
  justify-content: center;
}
#submit input {
  flex: 1;
  max-width: 200px;
}
/* ##########HIDDEN CLASS CSS########## */
.hidden {
  display: none;
}
/* ##########EXTRA SECTION CSS########## */
#extra {
  background: rgb(100, 100, 100);
  padding: 10px 10px 0 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#extra ul {
  padding-left: 20px;
}
#extra li {
  margin-bottom: 15px;
}
.extraCenter {
  max-width: 900px;
}
.extraCenter h2 {
  color: #fff;
  font-size: 1.5em;
}
/* ##########RESULT SECTION CSS########## */
.useTotal {
  font-size: 1.5em;
}
.shock {
  color: #71a100;
}
#results {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.resultBox {
  flex: 1;
  margin: 0 2px 10px 0;
}
.resultTextBox {
  width: 100%;
  text-align: left;
  border: 1px solid #dadcdb;
  margin-bottom: 5px;
}
.resultTextBox span {
  margin: 0;
}
.resultTextBoxTitle {
  flex: 1;
  padding: 10px;
  background: #003366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.textBox {
  flex: 4;
  padding: 10px;
  border-left: 1px solid #dadcdb;
  font-size: 1em;
}
.resultTitle {
  background: #003366;
  color: #fff;
}
.resultTitle {
  border-radius: 5px 5px 0 0;
  padding: 10px;
  height: 50px;
}
.resultTitle,
.result {
  display: flex;
  align-items: center;
  justify-content: center;
}
.result {
  padding: 10px;
  color: #404040;
  height: 86px;
  border-bottom: 1px solid #dadcdb;
  border-left: 1px solid #dadcdb;
  border-right: 1px solid #dadcdb;
}
.resultText {
  text-align: left;
}
.tip {
  margin-top: 10px;
}
/* ##########SURVEY CSS########## */
/* 
Generic Styling, for Desktops/Laptops 
*/
.surveyResults {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}
/* Zebra striping */
.surveyResults tr:nth-of-type(even) {
  background: #eee;
}
.surveyResults th {
  background: #003366;
  color: white;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}
.surveyResults td,
.surveyResults th {
  padding: 6px;
  border: 1px solid #ccc;
}
.surveyResults td:nth-of-type(1) {
  text-align: left;
}
.surveyResults td {
  text-align: right;
}
.surveyResults caption {
  margin: 0 0 10px 0;
  font-size: 1em;
}
.totals td {
  background: #003366;
  color: #fff;
}
.whiteSpace {
  white-space: nowrap;
}
/* ##########SOURCES CSS########## */
.sources {
  border: 1px solid #dadcdb;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 70px;
}
.sources a {
  display: block;
  padding: 10px;
}
.sourcesTitle {
  background: #003366;
  padding: 10px;
}
.sourcesTitle h2 {
  color: #fff;
}
/* ##########SHORTAGE ACTIVITY CSS########## */
.upDownArrow {
  background: #003366;
  color: #fff;
  font-size: 1.5em;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.shortageModalContainer {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  z-index: 2001;
  justify-content: center;
  padding: 10px;
}
.shortageModal {
  background: #fff;
  max-width: 900px;
  border-radius: 10px;
}
.shortageModalTitle {
  display: flex;
  border-bottom: 1px solid #dadcdb;
  padding: 10px;
}
.shortageModalTitle h2 {
  margin: 0;
  padding: 0;
  flex: 1;
}
#shortageModalExit {
  width: 25px;
  height: 25px;
  font-weight: bold;
  font-size: 1.5em;
  justify-content: center;
  cursor: pointer;
}
.shortageModalOverflow {
  padding: 10px;
  line-height: 1.5em;
}
.shortageModalOverflow h2 {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
}
.problem p:first-child {
  margin-top: 0;
}
/* ##########WATER CONTENT ACTIVITY CSS########## */
.waterContentResultBox {
  margin-top: 10px;
  border: 1px solid #dadcdb;
}
.waterContentResultBox span {
  margin: 0;
}
.waterContentResultTitle {
  background: #003366;
  color: #fff;
  font-size: 1.2em;
  padding: 10px;
  border-radius: 5px 5px 0 0;
}
.waterContentResult {
  align-items: flex-start;
  flex-wrap: nowrap;
}
.face {
  font-size: 3em;
  margin-right: 10px;
  padding: 10px;
}
.waterContentText {
  padding: 0 10px;
}

/* ##########LARGER SCREEN CSS########## */
@media screen and (min-width: 768px) {
  main {
    display: flex;
  }
  #buttons,
  .exit,
  #rightModal .modalTitle {
    display: none;
    padding: 0;
  }
  #left {
    flex: 1;
    max-width: 300px;
    min-width: 200px;
    border-right: 1px solid #dadcdb;
  }
  #right {
    flex: 5;
    display: flex;
    justify-content: center;
  }
  .modalCenter {
    width: 100%;
    height: inherit;
    position: relative;
    justify-content: left;
  }
  .modal {
    width: 100%;
    border-radius: 0;
  }
  #rightModal .modal {
    padding: 0;
  }
  #left .modalTitle {
    text-align: center;
  }
  #left .modal p {
    font-size: 1.2em;
  }

  #left .modal li {
    margin-bottom: 10px;
  }
  .optionBlocks {
    display: flex;
    flex-wrap: wrap;
  }
  .optionBlock {
    margin-right: 2%;
    width: 46%;
  }
  .resultTextBox {
    display: flex;
  }
  /* ##########INPUTS SELECTS CSS########## */
  .radialInputs {
    display: flex;
  }
  /* ##########SHORTAGE ACTIVITY CSS########## */
  .stars {
    display: flex;
  }
  .star {
    margin-right: 20px;
  }
}
/* ##########SURVEY RESULT TABLE CARDS CSS########## */
@media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
  .surveyResults,
  .surveyResults caption,
  .surveyResults thead,
  .surveyResults tbody,
  .surveyResults th,
  .surveyResults td,
  .surveyResults tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  .surveyResults thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .surveyResults tr {
    border: 1px solid #ccc;
  }

  .surveyResults td:nth-of-type(1) {
    text-align: right;
  }
  .surveyResults td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 70%;
    text-align: right;
  }

  .surveyResults td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    text-align: left;
    white-space: nowrap;
  }
  .totals td:nth-of-type(1) {
    color: #003366;
  }

  .surveyResults tr.totals td:nth-of-type(1):before {
    content: "Totals";
    color: #fff;
  }
  .surveyResults.global td:nth-of-type(1):before {
    content: "Continent/area";
  }
  .surveyResults td:nth-of-type(1):before {
    content: "State";
  }
  .surveyResults td:nth-of-type(2):before {
    content: "We will not have enough water";
  }
  .surveyResults td:nth-of-type(3):before {
    content: "Water will be too polluted";
  }
  .surveyResults td:nth-of-type(4):before {
    content: "Drinking water will be unsafe";
  }
  .surveyResults td:nth-of-type(5):before {
    content: "Water systems will break down";
  }
  .surveyResults td:nth-of-type(6):before {
    content: "There won't be major water problems";
  }
  .surveyResults td:nth-of-type(7):before {
    content: "Total";
  }
}