.noselect { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.spacer { flex: 1; }
.dialogcontainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.5); display: none; align-items: center; justify-content: center; }

body { background-color: #D0D0FF; margin: 0; padding: 0; }

#maincontainer { position: relative; width: 960px; height: 540px; display: flex; }
#maincontainer:focus { outline: 0; }

#visualizer { width: 720px; height: 540px; position: relative; }
#visualizerposition { width: 490px; height: 35px; position: absolute; right: 0; border: 5px solid black; border-top-right-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background-color: lightgray; }
#visualizertrackcontrols { width: 219px; height: 528px; position: absolute; top: 5px; left: 0; border: 1px solid black; border-radius: 10px 0 0 10px; background-color: lightgray; }
#visualizertrackcontrols > div { width: 215px; height: 48px; padding-right: 4px; border-bottom: 1px solid black; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
#visualizertrackcontrols > div:last-child { border-bottom: 0; }
#visualizertrackcontrols > div > input { width: 30px; }
#visualizertrackcontrols > div > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#visualizertracktopcontrols { height: 38px !important; }
#visualizertracks { width: 490px; height: 490px; position: absolute; bottom: 0; right: 0; border: 5px solid black; border-bottom-right-radius: 10px; background-color: gray; }
#visualizertracks > div { width: 490px; height: 48px; border-bottom: 1px solid black; position: relative; overflow: hidden; }
#visualizertracks > div > div { height: 42px; position: absolute; top: 1px; border: 2px solid black; border-radius: 8px; background-color: white; text-align: center; white-space: pre-wrap; overflow: hidden; cursor: pointer; }
#visualizertracks > div > div.disabled { background-color: gray; }
#visualizerpositionline { position: absolute; right: 250px; bottom: 0; margin: 0; padding: 0; width: 2px; height: 500px; background-color: rgba(0, 0, 0, 0.3); display: none; pointer-events: none; }

#controls { width: 222px; height: 532px; border: 2px solid black; border-radius: 10px; margin-left: 10px; padding: 2px; display: flex; flex-direction: column; background-color: #B0B0FF; }
.controlinputrow { display: flex; }
.controlinputrow > input { flex: 1; }
#recordtimerrow { display: none; white-space: pre-wrap; }
#recordcheckboxrow { display: none; }

.dialogtitlebar { width: 100%; height: 20px; border: 2px solid black; background-color: lightgray; margin-top: -2px; margin-left: -2px; flex-shrink: 0; display: flex; justify-content: space-between; }
.dialogtitlelabel { padding-left: 10px; }
.dialogclosebox { border: 2px solid black; width: 20px; height: 20px; margin-top: -2px; margin-right: -2px; font-size: 1.2em; text-align: center; background-color: lightgray; cursor: pointer; }
.dialogclosebox:before { content: "✖"; }
.dialogbody { padding: 10px; }

#modaldialog { max-width: 904px; max-height: 484px; background-color: white; border: 4px solid black; text-align: center; }
#modalmessage { font-size: 32px; overflow: auto; white-space: pre-wrap; }

#recordingbox { width: 40%; position: relative; background-color: white; border: 4px solid black; text-align: center; display: flex; flex-direction: column; justify-content: center; }
#recordingaudio { margin-top: 15px; }

#samplelistbox { width: 50%; position: relative; background-color: white; border: 4px solid black; text-align: center; display: flex; flex-direction: column; justify-content: center; }
#samplelistselect { max-width: 75%; }
#samplelistplayer { margin-top: 5px; }
#samplelistfileinput { display: none; }
#samplelistdeleterow { margin-top: 20px; display: flex; justify-content: space-between; }

#trackeditbox { width: 60%; position: relative; background-color: white; border: 4px solid black; display: flex; flex-direction: column; justify-content: center; }
#trackeditsampleselect { max-width: 75%; }
#trackeditparametervalues { display: flex; justify-content: space-between; }
#trackeditbuttons { margin-top: 20px; display: flex; }

#helpindexbox { width: 792px; height: 442px; position: relative; background-color: white; border: 4px solid black; display: flex; flex-direction: column; }
#helptopicbox { width: 792px; height: 442px; position: relative; background-color: white; border: 4px solid black; display: flex; flex-direction: column; }
#helptopicbox > section { overflow: auto; }
#helptopicbox > section > div { display: none; }
#helpyoutubeiframe { margin-bottom: 10px; }
#helptopicnavigation { display: flex !important; flex-direction: row; }
#helptopicnavigation > div { flex: 1; }
#helptopicnavigation > div:nth-child(2) { text-align: center; }
#helptopicnavigation > div:nth-child(3) { text-align: right; }
h1 { font-size: 2em; }
.paragraphandfigure { display: flex; flex-direction: row; justify-content: space-between; }

iframe { border: 2px solid black; }