* {
  font-family: arial;
}

/******************** TITLE HEADER **************/
header {
  text-align: center;
  background-color: #e2e2e2;
  font-family: arial;
  font-size: 1.3em;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  margin: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

a {
  text-decoration: none;
  color: black;
}

#subBanner {
  text-align: center;
  font-family: arial;
  font-size: 1.0em; 
  margin-top: 180px;
}

/******************* SECTION TITLE & CONTENT *******************/
/* describes the look of the section header */
.section {
  display: block;
  background-color: #e2e2e2;
  outline: none;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* hor offset, ver offset, blur, spread, colour */
  border-radius: 25px 0 0 0;
  margin: auto;
  width: 80%;
/*  min-width: 250px; */
  padding: 20px;
  font-size: 1.0em;
  text-align: left; 
}

/* describes the wrapper holding content inside the collapsible */
.content {
  display: block;
  background-color: #f0f0f0;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 0 0 25px 25px;
  margin: auto;
  width: 80%;
/*  min-width: 250px; */
  max-height: auto;
  padding: 20px;
  font-size: 1.0em; 
}

.content p {
  margin: 0 auto;
  padding: 5px;
}

/*********************** IDENTIFICATION SECTION **********************/
#idTable td {
  padding: 8px;
}

input[type=date] {
  padding: 5px;
  width: 150px;
  height: 35px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  border: none;
  outline: none;
}

/* define the sex buttons*/
.sexButton {
  background-color: white;
  border: none;
  outline: none;
  border-radius: 100px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: auto;
  font-size: 1.0em;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}

/* define the sex buttons if clicked*/
.sexButtonClicked {
  background-color: white;
  border: solid black 1px;
  outline: none;
  border-radius: 100px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: auto;
  font-size: 1.0em;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}


/********************** GROWTH DATA SECTION **********************/

/* define the growth chart select button note: will have more selections later... */
.chartButton {
  background-color: white;
  border: solid black 1px;
  outline: none;
  border-radius: 100px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: auto;
  font-size: 1.0em;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}

/* define the percentile/Zscore buttons div*/
#perc_Zscore_Buttons {
  display: block;
  margin: auto;
  float: right;
}

/* define the percentile/Zscore/growth velocity buttons themselves*/
.perc_Zscore_gv_Button {
  background-color: white;
  border: none;
  outline: none;
  border-radius: 100px;
  box-shadow: 3px 4px 4px 3px rgba(0, 0, 0, 0.2);
  margin: auto;
  margin-right: 20px;
  font-size: 1.0em;
  width: 100px;
  height: 40px;
  cursor: pointer;
  font-weight: bold;
}

/* define the percentile/Zscore/growth velocity buttons when clicked */
.perc_Zscore_gv_Button_Clicked {
  background-color: white;
  border: 1px solid black;
  outline: none;
  border-radius: 100px;
  box-shadow: 3px 4px 4px 3px rgba(0, 0, 0, 0.2);
  margin: auto;
  margin-right: 20px;
  font-size: 1.0em;
  width: 100px;
  height: 40px;
  cursor: pointer;
  font-weight: bold;
}

#growthTable {
  width: 95%;
  margin: auto;
  border: none;
  border-radius: 10px 10px 2px 2px;
  border-collapse: collapse;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  text-align: left;
  font-family: arial;
  background-color: white;
}

#growthTable tr, 
#growthTable th, 
#growthTable td {
  border-collapse: collapse;
  border-radius: 10px;
  padding: 8px;
  background-color: white;
  font-size: 0.95em;
}

/* need to show the percentile headers and entries initially */
.perc {
  display: block;
}

/* and hide the Z score headers and entries */
.zScore {
  display: none;
}

/* and hide the growth velocity headers and entries */
.growthVelocity {
  display: none;
}

/* this is a small hack to make the percentile/Zscore data cells look better */
#growthTable td.perc, #growthTable td.zScore {
  font-size: 0.9em;
  padding: 16px;
}

input[type=date] {
  padding: 5px;
  width: 150px;
  height: 35px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  border: none;
  outline: none;
}

#growthTable input[type=date] {
  width: 150px;
  height: 25px;
  box-shadow: none;
  border-radius: 5px;
  border: 0.5px solid grey;
}

.plusButton {
  background-color: white;
  border: 0.2px solid black;
  outline: none;
  border-radius: 100px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  float: right;
  margin: auto;
  color: #CF1928;
  font-size: 0.9em;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.minusButton {
  background-color: white;
  border: 0.2px solid black;
  outline: none;
  border-radius: 100px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  float: right;
  margin: auto;
  color: #CF1928;
  font-size: 0.9em;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* define copy button */
#copy {
  background-color: white;
  border: none;
  outline: none;
  border-radius: 25px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  float: right;
  font-size: 1.0em;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

/* define copy button on hover */
#copy:hover {
  border: 1px solid black;
}

/* hide the clipboard text area */
#clipboardGhost textarea, #clipboardGhostMPH textarea {
  width: 0;
  height: 0;
  border: none;
  outline: none;
  resize: none;
  background-color: #f0f0f0;
}

#tableNote {
  display: none;
}

/* define BAILI button */
#BAILI {
  background-color: white;
  border: none;
  outline: none;
  border-radius: 100px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  float: left;
  margin: auto;
  font-size: 1.2em;
  width: 80px;
  height: 40px;
  cursor: pointer;
  font-weight: bold;
}

/* define print button */
#print {
  background-color: #f1f1f1;
  border: 0.5px solid black;
  outline: none;
  border-radius: 25px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 0.9em;
  text-align: center;
  width: 60px;
  height: 25px;
  cursor: pointer;
}

#bailiAdvice {
  background-color: white;
  border: none;
  outline: none;
  border-radius: 50px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  clear: left;
  margin: auto;
  font-size: 1.0em;
  text-align: center;
  height: auto;
  display: none;
}

/* define the weight/height/HC plot buttons div*/
#plotGrowthButtons {
  display: block;
  margin: auto;
}

/* define the weight/height/HC plot buttons themselves*/
.plotGrowthButton {
  background-color: white;
  border: none;
  outline: none;
  border-radius: 100px;
  box-shadow: 3px 4px 4px 3px rgba(0, 0, 0, 0.2);
  margin: auto;
  font-size: 1.1em;
  width: 100px;
  height: 40px;
  cursor: pointer;
  font-weight: bold;
}

/* define the weight/height/HC plot buttons when clicked */
.plotGrowthButtonClicked {
  background-color: white;
  border: 1px solid black;
  outline: none;
  border-radius: 100px;
  box-shadow: 3px 4px 4px 3px rgba(0, 0, 0, 0.2);
  margin: auto;
  font-size: 1.1em;
  width: 100px;
  height: 40px;
  cursor: pointer;
  font-weight: bold;
}

#chartContainer {
  display: block;
  clear: left;
  margin: auto;
  height: 500px;
  width: 450px;
  max-width: 70%;
  z-index: -1;
}

/* define look of tool tip when hovering on buttons */
.tooltip {
  position: relative;
  float: right;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 75%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

/* change the tooltip text once data is copied */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/*********************** MPH SECTION **********************/
#mphTable td {
  padding: 8px;
}

#mphTable input[type=number] {
  padding: 5px;
  width: 75px;
  height: 25px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  border: none;
  outline: none;
}

/* define the percentile/Zscore/growth velocity buttons themselves*/
.cent_inches_Button {
  background-color: white;
  border: none;
  outline: none;
  border-radius: 100px;
  box-shadow: 3px 4px 4px 3px rgba(0, 0, 0, 0.2);
  margin: auto;
  margin-right: 20px;
  font-size: 1.0em;
  width: 120px;
  height: 40px;
  cursor: pointer;
  font-weight: bold;
}

/* define the percentile/Zscore/growth velocity buttons when clicked */
.cent_inches_Button_Clicked {
  background-color: white;
  border: 1px solid black;
  outline: none;
  border-radius: 100px;
  box-shadow: 3px 4px 4px 3px rgba(0, 0, 0, 0.2);
  margin: auto;
  margin-right: 20px;
  font-size: 1.0em;
  width: 120px;
  height: 40px;
  cursor: pointer;
  font-weight: bold;
}

#copyMPH {
  background-color: white;
  border: none;
  outline: none;
  border-radius: 25px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  margin: auto;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 10px;
  float: right;
  font-size: 1.0em;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

#copyMPH:hover {
  border: 1px solid black;
}

/************************************* FOOTER ***************************************/
footer {
  text-align: center;
  font-family: arial;
  font-size: 0.75em;
  padding: 10px;
}


/******************************* INPUT ELEMENTS *****************************/

/* note that input type datetime local is styled in each section above because it needs to look different 
depending on where the input element is located (i.e. different in identification vs growth data table */

input[type=text] {
  width: 125px;
  height: 20px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  border: none;
  font-size: 1.0em;
  outline: none;
}

input[type=number] {
  width: 50px;
  height: 25px;
  text-align: center;
}

/* to get rid of the arrows for input type number use this */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

select {
  width: 100px;
  height: 30px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  border: none;
  font-size: 0.9em;
  outline: none;
}

/* when the data element is selected give it a nicer look */
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, select:focus {
  box-shadow: 0 0 0.75px 0.75px black;
}

/* if the data is missing highlight it */
/* note need to be highly specific for this style to take precedence */
table.basicTable input[type=datetime-local].highlight, select.highlight, table.biliTable input[type=datetime-local].highlight, table.biliTable input[type=number].highlight {
  box-shadow: 0 0 2px 2px red;
  border: none;
  outline: none;
}

/* if the data is missing highlight it */
/* note need to be highly specific for this style to take precedence */
input[type=date].highlight, select.highlight, input[type=number].highlight {
  box-shadow: 0 0 2px 2px red;
  border: none;
  outline: none;
}

/*************************************** CSS RESPONSIVE ***************************************/
/* need to adjust css based on screen size
note: can target 5 groups but I chose 3 as a start and can adjust later if needed 
reference: https://www.w3schools.com/css/css_rwd_mediaqueries.asp*/

/* desktop and larger screens use css above */

/* for tablets and medium sized screens */
@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 1100px) {
    .section, .content {
      width: 85%;
    }
    #growthTable th, #growthTable p {
      font-size: 0.9em;
    }
    #growthTable input[type=date] {
      width: 125px;
    }
}

@media screen and (max-width: 992px) {
    #growthTable th, #growthTable p {
      font-size: 0.8em;
    }
    #growthTable input[type=date] {
      width: 115px;
      height: 20px;
      font-size: 0.8em;
    }
    #growthTable input[type=number] {
      width: 40px;
      height: 20px;
      font-size: 0.8em;
    }
}

/* for mobile phones */
@media screen and (max-width: 820px) {
    .section, .content {
      width: 95%;
    }
    #growthTable {
      width: 95%; 
    }
    #growthTable th, #growthTable p {
      font-size: 0.8em;
    }
    #growthTable input[type=date] {
      width: 110px;
      height: 20px;
      font-size: 0.8em;
    }
    #growthTable input[type=number] {
      width: 30px;
      height: 20px;
      font-size: 0.8em;
    }
    #percentile, #zScore, #growthVelocity {
      font-size: 0.8em;
      width: 80px;
    }
}

/* for very small screens */
@media screen and (max-width: 600px) {
    .section, .content {
      width: 90%;
    }
    h4, p, tr, th, td {
      font-size: 0.8em;
    }
    input[type=number] {
      width: 50px;
      height: 20px;
      font-size: 1.0em;
    }
    #tableNote {
      display: block;
      margin-left: 10px;
    }
    #percentile, #zScore, #growthVelocity {
      font-size: 0.6em;
      width: 70px;
      height: 30px;
      margin-right: 10px;
    }
    #mphTable td {
      padding: 6px;
      font-size: 0.9em;
    }    
    #mphTable input[type=number] {
      width: 35px;
    }
    /* define the percentile/Zscore/growth velocity buttons themselves*/
    .cent_inches_Button {
      font-size: 0.9m;
      width: 90px;
      height: 35px;
    }
}

@media print {
  #bailiAdvice {
    display: block;
    background-color: white;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 15px;
    box-shadow: 0;
  }
  header, #subBanner, .collapsible, #welcome, #identification, #weight, #print, #plotGrowthButtons, footer {
    display: none;
  }
}