/* ---------------------------------- ---
   --- GLOBAL                         ---
   ----------------------------------  */

@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

html, body {
  padding: 0;
  margin: 0;
  min-width: 720px;
  height: 100vh;
  font-family: Nunito, Arial;
  font-size: 1em;
}

/* ---------------------------------- ---
   --- NAVIGATION MENU                ---
   ----------------------------------  */

nav {
  width: calc(100vw-40px);
  height: 20px;
  padding: 20px;
  font-size: 20px;
  text-decoration: none;
  color: #FAFAFA;
  background-color: #2A334B;
  border-bottom: 2px solid #333;
}

nav a, nav a:visited {
  color: #CACACA;
  text-decoration: none;
  margin-right: 40px;
}

nav a:hover, nav a:focus {
  color: #FCFCFC;
  font-style: bold;
}

/* ---------------------------------- ---
   --- ERROR AND INFORMATION BOXES    ---
   ----------------------------------  */

#errbox, #infobox {
  margin: 5px;
  width: calc(100vw-20px);
  border: 1px solid #BB3333;
  border-radius: 5px;
  background: #FFACAC;
  font-size: 0.8em;
  color: #883333;
}

#infobox {
  border: 1px solid #33BB33;
  background: #ACFFAC;
  color: #338833;
}

#errbox:empty, #infobox:empty {
  display: none;
}

#errbox p, #infobox p {
  margin: 0;
  padding: 5px;
  display: block;
  width: calc(100%-10px);
}

#errbox p.title {
  color: #EAEAEA;
  background: #CC3333;
  border-bottom: 1px solid #BB3333;
  font-weight: bold;
}

#infobox p.title {
  color: #EAEAEA;
  background: #33BB33;
  border-bottom: 1px solid #338833;
  font-weight: bold;
}

#errbox p.title:hover, #infobox p.title:hover {
  color: #FCFCFC;
  cursor: pointer;
}

#errbox p.message {
  max-height: 40vh;
  transition: max-height 0.2s ease-out;
}

/* ---------------------------------- ---
   --- MAIN AREA                      ---
   ----------------------------------  */

#content {
  margin: 5px;
  width: calc(100%-10px);
  min-width: 670px;
  background: #FFF;
}

/* --- Tabs definition --------------- */
#tabs {
  margin: 0;
  padding: 0;
  display: flex;
}

#tabs button {
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  background: #CCC;
  border: 1px solid #AAA;
  border-right: none;
  cursor: pointer;
  color: #555;
  font-size: 1.5em;
}

#tabs button:hover {
  background: #EDEDED;
  color: #333;
}

#tabs button[active] {
  background: #FFF;
  border-bottom: none;
  color: #111;
}

#tabs button:first-child {
  border-radius: 10px 0 0 0;
}

#tabs button:nth-last-child(2) {
  border-radius: 0 10px 0 0;
  border-right: 1px solid #AAA;
}

#tabs button:last-child {
  background: #FFF;
  color: #FFF;
  border: none;
  border-bottom: 1px solid #AAA;
  flex: 1;
}

#tabs button:last-child:hover {
  background: transparent;
}

/* --- Content definition ------------ */
#tab_content {
  border: 1px solid #AAA;
  border-top: 1px solid transparent;
  padding: 5px;
  min-height: 20px;
}

#tab_content form {
  display: block;
  margin: 0;
  padding: 0;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

#tab_content form div {
  margin-top: 20px;
}

#tab_content p.legend {
  opacity: 0;
  margin: 0;
  margin-left: 10px;
  display: inline-block;
  font-style: italic;
  color: #888; 
  font-size: 1.2em;
}

#tab_content label, #tab_content input {
  display: inline-block;
  border: 1px solid #888;
  border-radius: 3px;
  padding: 10px;
  min-width: 200px;
  text-align: center;
  font-size: 2em;
}

.icon {
  width: 50px;
  height: 50px;
}

#tab_content label {
  background: #CCC;
}
#tab_content label:hover, #tab_content label:active {
  background: #EDEDED;
  cursor: pointer;
  transition: .3s ease;
}
#tab_content input[type="radio"]:checked+label {
  background: #FFF;
}

#tab_content input[type="radio"] {
  display: none;
}

#tab_content .slider {
  position: relative;
  width: 100%; 
  padding: 0;
  background: #FFF;
  display: flex;
  align-items: center;
}

#tab_content .slider p {
  padding: 0;
  margin: 0;
  margin-left: 10px;
  margin-bottom: 10px;
  font-size: 1.5em;
  color: #888;
}

#tab_content .slider input[type="range"] {
  -webkit-appearance: none !important;
  padding: 0;
  margin: 0;
  width: 672px;
  height: 8px;
  background: #CCC;
  border: none;
  border-radius: 3px;
  outline: none;
  z-index: 30;
}

#tab_content .slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 25px;
  height: 25px;
  background: #FFF;
  border: 1px solid #888;
  border-radius: 50%;
  cursor: pointer;
  z-index: 70;
}

#tab_content .slider input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: #55C0E0 0 0 5px;
  transition: .2s ease;
  z-index: 70;
}

#tab_content span {
  position: absolute;
  left: 0;
  top: 11px;
  display: block;
  width: 55px;
  height: 8px;
  background: #3388C8; 
  border-radius: 3px;
  z-index: 50;
}

#tab_content .boobies, #tab_content .slider {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: .3s ease;
}

#tab_content input[id^="feeding_boobies_"]:checked ~ .boobies,
#tab_content input[id^="feeding_supplmt_"]:checked ~ .boobies,
#tab_content input[id^="feeding_bottles_"]:checked ~ .slider,
#tab_content input[id^="feeding_supplmt_"]:checked ~ .slider {
  max-height: 100px;
  opacity: 1;
  margin-top: 10px;
}

#tab_content select {
  min-width: 220px;
  font-size: 1.2em;
  padding: 10px 0 10px 0;
  border-radius: 3px;
  cursor: pointer;
}

/* ---------------------------------- ---
   --- FOOTER                         ---
   ----------------------------------  */

footer {
  width: 100vw;
  border-top: 1px solid #333;
  background-color: #2A334B;
  text-align: center;
  text-decoration: none;
  font-size: 0.7em;
  color: #CACACA;
  padding: 5px 0 5px 0;
  position: absolute;
  bottom: 0;
  left: 0;
}