/* Extra small devices (portrait phones, less than 576px)
   No media query since this is the default in Bootstrap */

 .header {
     font-family: 'Raleway', sans-serif;
     text-align: center;
     font-weight:300;
     margin-top: 30px;
     margin-bottom: 30px;
 }
 .browserWarning {
     width: 100%;
     background-color: lemonchiffon;
     color: maroon;
     font-family: 'Century Gothic','Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     line-height: 1.6em;
     padding: 6px;
     text-align: center;
     margin-top: 0px;
     display: none;
 }
 .content-cards {
    box-shadow: 1px 2px rgba(0,0,0,0.2);
 }
#body {
    position: relative;
    top: 30px;
}
 /* .radio-buttons{
   float: right;
 } */
 .container {
	flex: 1 0 auto;
	padding: 10px;
	margin: 10px auto 10px;
	/*position: relative;
	top: 10px;*/
}
 label {
     width: 96%;
 }
 .submit-button {
   /* margin-top: 5%; */
   width: 70%;
   background-color: #0181B6;
   border-color: #0181B6;
   color: white;
 }
h2 {
    text-align: center;
    color: #333;
    font-size: 2rem;
}
.q-question {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.2rem;
    padding: 4px 0;
    height: 6em;
    border-top: 1px solid #eaeaea;
}
.q-question:nth-child(1) {
    border-top: none;
}
.text-muted {
    color: #868e96 !important;
    font-weight: normal !important;
    font-family: 'Century Gothic', Roboto, arial, sans-serif;
}
.my-auto {
    padding-bottom: 18px;
    display: block;
}
.my-a {
    padding-bottom: 18px;
    display: block;
}
.col-6 {
    float: none;
}
.card-body {
	padding: 0.8rem;
}
#infoCards {
    padding: 0.2em;
}
.form-group {
    margin-bottom: .8rem;
    width: 100%;
}
#WhatButton, #PerilsButton, #WhyButton, #RefButton, #AckButton {
    font-size: .7rem;
    padding: 10px;
    margin: 2px 4px;
    border-radius: 4px;
}
#result, #reasons {
    font-size: .8rem;
    padding: 10px;
}
label.btn {
    width: 50%;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #WhatButton, #PerilsButton, #WhyButton, #RefButton, #AckButton {
        font-size: 1rem;
    }
    #result, #reasons {
        font-size: 1.2rem;
        padding: 10px;
    }
    ol#reasons li {
        margin: 6px 20px;
    }
    label {
        width: 40%;
    }
    select {
        width: 60%;
    }
    .q-question {
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 1.2rem;
        padding: 0;
        height: 3em;
        border: none;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
      flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
      padding: 20px 0;
      margin: 0px auto 0px;
      position: relative;
      top: 20px;
    }
  .header {
      text-align: center;
      font-weight:300;
      margin-top: 30px;
      margin-bottom: 30px;
  }

  .content-cards {
    width: 75%;
  }

  .radio-buttons{
    float: right;
    margin-top: 5%;
  }

  .select-label {
    font-size: 1.25em;
    font-weight: 300;
  }

  .custom-select {
    width: 50%;
    float: right;  }

  .submit-button {
    /* margin-top: 5%; */
    width: 70%;
    background-color: #0181B6;
    border-color: #0181B6;
    color: white;
  }

  .q-question{
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .info-cards{
      width: 75%;
  }

 }

/* Extra large devices (large desktops, 1200px and up) */
/* @media (min-width: 1200px) {  } */

html {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
  line-height: 1.5em;
}

p {
  font-size: 1.25em;
  font-weight: 300;
}

td {
  font-size: 0.8em;
  font-weight: 300;
}
#form2, #form3, #form4, #form5, #form6,#result {
  display: none;
}

#result p {
  font-size: 1em;
  font-weight: bold;
}

.btn-secondary:not([disabled]):not(.disabled).active{
    color: #fff;
    background-color: #0181B6;
    border-color: #0181B6; /*set the color you want here*/
    box-shadow: 0 0 0 0.1rem rgba(34,42,50,.5);
} 
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn.btn-secondary.focus.active{
    color: #fff;
    background-color: #0181B6;
    border-color: #0181B6; /*set the color you want here*/
}

.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}
main {
}
.chw-header-search-button {
    padding: 5px;
}