html {
	background-color: rgba(175, 197, 221, 0.4);
}

body {
	height: auto;
	margin: auto auto;
	padding: 10px 40px;
	font-family:'Noto Sans', 'Lato', sans-serif;
	font-size: 12pt;
}

table {
	border-collapse: collapse;
	width: auto;
	font-family: 'Doulos SIL', serif;
	text-align: center;
	font-size: 13pt;
}

td, th {
	min-width: 2em;
	width: auto;
	height: auto;
	background-color: inherit;
	padding: 2px 2px;
	margin: auto auto;
	/* text-align: center; */
}
tr:nth-child(odd) td {
	background: #DAE5F2;
}

tr:nth-child(odd) th {
	background: #DAE5F2;
}
.mainHeaders{
  grid-column: 1 / 11;
  grid-row: 1;
  text-align: center;
  display: none;
}
.selectHeaders{
  display: none;
  justify-self: center;
}
.ipaSelects{
  display: none;
  justify-self: center;
  align-self: center;
}
#arrow{
  display: none;
  font-size: xx-large;
  grid-row: 4;
  grid-column: 3;
  justify-self: center;
}
input[type="button"], input[type="submit"] {
  min-width: 7em;
  min-height: 2em;
  border-radius: 5px;
  border-style: solid;
  border-color: #7E9ABB;
  background-color: #F7FAFD;
  font-weight:bold;
  transition: color, 0.5s;
}
input[type="button"]:hover {
  background-color: #DAE5F2;
}
#mainHeader{
  grid-row: 1;
  /* grid-column: 1/6; */
}
#subHeader{
  grid-row: 2;
  /* grid-column: 1/7; */
}
#submitButton{
  grid-row: 4;
  grid-column: 10;
  justify-self: start;
  align-self: center;
  /* transform: translate(0, 120%); */
  display: none;
}
#startButton{
  min-height: 1.7em;
}
#cancelButton{
  grid-row: 4;
  grid-column: 10;
  justify-self: start;
  align-self: center;
  transform: translate(0, 120%);
  display: none;
}
.Button:active {
  position:relative;
  top:1px;
}
#ipaHeader{
  grid-row: 3;
  grid-column: 2;
}
#h1{
  grid-row: 3;
  grid-column: 4;
}
#h2{
  grid-row: 3;
  grid-column: 6;
}
#h3{
  grid-row: 3;
  grid-column: 8;
}
#phon_1{
  grid-row: 4;
  grid-column: 4;
}
#phon_2{
  grid-row: 4;
  grid-column: 6;
}
#phon_3{
  grid-row: 4;
  grid-column: 8;
}
h1 {
	font-family: 'Lato', sans-serif;
	font-size: 24pt; 
}

h2 {
	font-family: 'Lato', sans-serif;
	font-size: 20pt;
}

input[type="button"], input[type="submit"] {
	font-size: 17;
}
option{
  font-size: 17;
  text-align: center;
  height: auto;
  background-color: #F7FAFD;
  transition: all .3s ease-in-out;
}
select{
  height: auto;
  font-size: 13pt;
  font-family:'Noto Sans';
  text-align: center;
  /* width: 153px; */
  min-width: 7em;
  text-align-last: center;
  border-radius: 5px;
  background-color: #F7FAFD;
  transition: all .3s ease-in-out;
}
select:hover{
  background-color: #DAE5F2;
}
#ipa_symbol{
  font-size: 15pt;
  height: 50px;
  grid-row: 4;
  grid-column: 2;
  justify-self: center;
}
#page {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr) 0.3fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr;
  /* justify-content: center; */
}
#myProgressBorder {
  grid-row: 4 / 17;
  grid-column: 1;
  width: 20px;
  justify-self: center;
  writing-mode: vertical-rl;
  font-size: 1.3em;
  padding-left: 3px;
  background-color: rgba(175, 197, 221, 0.15);
}

#myProgress {
  justify-self: center;
  align-self: end;
  grid-row: 4 / 17;
  grid-column: 1;
  width: 20px;
  height: 0%;
  padding-left: 3px;
  background-color: lightsteelblue;
  transition: width, 1s;
}

#Pulmonic{
  width: auto;
}
#VC{
  width: auto;
}
#exerciseCount{
  width: auto;
}
#progressHeader{
  grid-row: 3;
  grid-column: 1;
  /* margin: 0; */
}
.cell1.cells{
  font-size:20pt;
}
.cell1{
  grid-column: 2;
}
.cell2{
  grid-column: 4;
}
.cell3{
  grid-column: 6;
}
.cell4{
  grid-column: 8;
}
.cell1.feedback{
  grid-column: 3;
  transform: translate(-3vw);
}
.cell2.feedback{
  grid-column: 5;
}
.cell3.feedback{
  grid-column: 7;
}
.cell4.feedback{
  grid-column: 9;
}
.cells.feedback{
  justify-self: start;
}
.cells{
  text-align: center;
  justify-self: center;
  font-family: 'Doulos SIL';
  font-size: 15pt;
  margin: 0;
  /* grid-row: 6; */
  color: green;
}
/*Firefox specific stuff*/
@-moz-document url-prefix() {
  select{
    padding-right: 25px;
    background-image: url("data:image/svg+xml,\
    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
    height='14px' viewBox='0 0 1200 1000' fill='rgb(126,154,187)'>\
    <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
    </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 50%;
    -moz-appearance: none;
    border-style: solid;
    border-color: #7E9ABB;
  }
  option{
    background-color: #F7FAFD;
    color: #6882a0;
  }
}