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;
  display:  grid;
}

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

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

input[type="button"], input[type="submit"] {
  /* height: 40px; */
  /* min-height: 2em; */
  border-radius: 5px;
  border-style: solid;
  border-color: #7E9ABB;
  background-color: #F7FAFD;
  font-weight:bold;
  font-size: 13pt;
  /* align-self: end; */
}

.Button:active {
  position:relative;
  top:1px;
}
input[type="submit"]:hover, input[type="submit"]:focus{
  -webkit-animation: pulsate 1.2s linear infinite;
  animation: pulsate 1.2s linear infinite;
}
option{
  font-size: 20px;
  font-family: 'Doulos SIL', 'Noto Sans', 'Lato';
}
select{
  align-self: end;
  font-size: 20px;
  font-family:'Doulos SIL';	
  text-align: center;
  text-align-last: center;
  border-radius: 5px;
  background-color: #F7FAFD;
  transition: all .3s ease-in-out;
}
select:hover{
  background-color: #DAE5F2;
}
#copyright{
  padding-top: 2vh;
  grid-row: 99;
  font-size: 10pt;
  /* margin: auto; */
}
#startButton{
  /* margin-bottom: 10px; */
  min-height: 2em;
}
.tableFeedbackCircle {
  min-height: 1.6em;
  min-width: 1.8em;
  border-radius: 50%;
  background-color: #bbb;
  border-style: solid;
  border-width: 1px;
  /* border-color: red; */
  text-align: center;
  align-self: center;
  justify-self: center;
  font-size: 10pt;
  color: white;
  grid-column: 2;
  padding-left: 1.5px;
}
.tableFeedbackCircle:hover{
  cursor:pointer;
}
#page {
  display: grid;
  grid-gap: 10px;
  grid-auto-columns: min-content;
  margin: auto;
}

#progressHeader {
  margin: unset;
  align-self: center;
  grid-column: 1;
  grid-row: 2;
}
#myProgressBorder {
  justify-self: center;
  writing-mode: vertical-rl;
  grid-row: 3 / 8;
  grid-column: 1;
  width: 20px;
  background-color: rgba(175, 197, 221, 0.15);
  padding-left: 2px;
}
#myProgress {justify-self: center;grid-row: 3 / 8;grid-column: 1;width: 20px;height: 0%;align-self: end;background-color: lightsteelblue;padding-left: 2px;font-size: 20px;transition: width, 1s;}
#pie_chart{
  grid-row: 1;
  grid-column: 2;
}
#bigHeader{
  grid-row: 1;
  grid-column: 1 / 8;
  justify-self: center;
}
#secondHeader{
  grid-row: 2;
  grid-column: 1 / 6;
}
@keyframes changeBackground{
  from {background-color: #F7FAFD;}
  to {background-color: #7E9ABB;}
}
#playButton {
  grid-row: 3;
  border-radius: 50%;
  grid-column: 2;
  min-width: 3em;
  min-height: 2.3em;
  justify-self: center;
  animation-name: changeBackground;
  animation-duration: 1s;
  animation-iteration-count: 6;
  animation-direction: alternate;
}
#cancelButton {
  max-width: 250px;
  grid-row: 4;
  grid-column: 4;
}
#submitButton {
  max-width: 250px;
  grid-row: 3;

}
#phon_1 {
  grid-row: 3;
  grid-column: 3;
  align-self: auto;
}
#phon_2 {
  grid-row: 3;
  grid-column: 4;
  align-self: auto;
}
#phon_3 {
  grid-row: 3;
  grid-column: 5;
  align-self: auto;
}
#ipa_symbol{
  grid-row: 3;
  grid-column:3;
  align-self: auto;
}
/*#historyTable {
  grid-row: 3;
  grid-column: 2 / 5;
  font-size: 25px;
}*/

.cell1{
  text-align: center;
  font-family:'Doulos SIL';
  font-size: 20pt;
  grid-column: 3;
  margin: 2px 2px;
}
.cell2{
  text-align: center;
  font-family:'Doulos SIL';
  font-size: 15pt;
  grid-column: 4;
  margin: 2px 2px;
}
.cell3{
  text-align: center;
  font-family:'Doulos SIL';
  font-size: 15pt;
  grid-column: 5;
  margin: 2px 2px;
}
#phon_1Header{
  text-align: center;
  grid-column: 3;
  grid-row: 2;
}
#phon_2Header{
  text-align: center;
  grid-column: 4;
  grid-row: 2;
}
#phon_3Header{
  text-align: center;
  grid-column: 5;
  grid-row: 2;
}


/*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;
  }
  /*select{

    text-indent: 0.01px;
  }*/
  option{
    background-color: #F7FAFD;
  }