div#tzAlert { z-index: 1; font-family: arial; position: absolute; width: 100%; left:0; top: 30%; text-align: center; padding: 20px; background-color: #f44336; /* Red */ color: white; margin-bottom: 15px; }

input, input:focus, input:disabled { text-align: center; border: none; display: block; outline: none; font-family: arial; line-height:1; opacity: 1.0; background-color: transparent; }
input::placeholder, textarea::placeholder { color: lightgrey; } 

h2, p { font-family: arial; text-align: center }

div#reasonDiv { position: absolute; width: 100%; height: auto; left: 0; top: 5% }
input#reasonInput { font-size: 5vh;  margin: 0px auto; padding: 0px; width: 96% }

table#countdownTable { border: 1px solid black; border-collapse: collapse; position: absolute; width: 96%; top: 15%; left: 2%; padding: 0px; margin: 0px; table-layout: fixed }
table#countdownTable > tbody > tr > td { border: 1px solid black; padding: 0px; margin: 0px; vertical-align: top }

div.countdownDiv { margin: 0px auto; padding: 0px }
img.countdownImg { position: absolute; left: 2vh; top: 2vh; height: 8vh; padding: 0px }
input.countdownInput { font-size: 8vh; margin: 1vh auto; padding: 0; overflow: visible }

table#timezoneTable { border: 1px solid black; border-collapse: collapse; position: absolute; width: 96%; top: 30%; left: 2%; padding: 0px; margin: 0px; table-layout: fixed }
table#timezoneTable > tbody > tr > td { border: 1px solid black; padding: 0px; margin: 0px; vertical-align: top }

div.timezoneDiv { position: relative; margin: 0px auto; padding: 0px }
select.tzSelect { text-align: center; display: block; font-size: 2vh; margin: 1vh auto; padding: 0 }
div.clockDiv { position: relative; margin: 0px auto; padding: 0px }
img.clockImg { position: absolute; height: 4vh; left: 1vh; top: 0px }
div.endDiv { position: relative; margin: 0px auto; padding: 0px }
img.endImg { position: absolute; height: 4vh; left: 1vh; top: 0px }
input.clockInput, input.endtimeInput { font-size: 4vh; width: 90%;  margin: 1vh auto; padding: 0; overflow: visible }

table#notesTableFull { border: 1px solid black; border-collapse: collapse; position: absolute; width: 96%; top: 50%; height: 35%; left: 2%; padding: 0px; margin: 0px; table-layout: fixed }
table#notesTableHalf { border: 1px solid black; border-collapse: collapse; position: absolute; width: 96%; top: 65%; height: 20%; left: 2%; padding: 0px; margin: 0px; table-layout: fixed }
table#notesTableFull > tbody > tr > td { border: 1px solid black; padding: 1vh; margin: 0px; width: 100%; height: 100% }
table#notesTableHalf > tbody > tr > td { border: 1px solid black; padding: 1vh; margin: 0px; width: 100%; height: 100% }
textarea#notesInput { font-size: 2vh; width: 100%; height: 100%; border: none; outline: none; resize: none }

div#startStopButtonDiv { position: absolute; width: 100%; height: auto; left: 0; bottom: 5% }
img#startButton { display: block; margin: 0px auto; height: 8vh }
img#stopButton { display: none; margin: 0px auto; height: 8vh }

div#bottomDiv { display: grid; grid-template-columns: 1fr 1fr 1fr; position: absolute; width: 96%; height: auto; left: 2%; bottom: 1% }
div.bottomleft { width: auto; margin: 0px auto; float: left; text-align: left }
div.bottom { width: auto; margin: 0px auto; text-align: center }
div.bottomright { width: auto; margin: 0px auto; float: right; text-align: right }

p.bottomleft { font-size: 1.5vh; text-align: left }
p.bottom { font-size: 1.5vh; text-align: center }
p.bottomright { font-size: 1.5vh; text-align: right }