#main {
    display: grid;
    grid-template-columns: 100px repeat(8, 1fr) 100px;
    grid-template-rows: 40px 1fr 30px;
    grid-gap: 0.2em;
}
.tracker {
    display: grid;
    grid-template-columns: inherit;
    grid-template-rows: 80px 1fr 30px;
    grid-row: 2;
    min-height: 200px;
    grid-column-start: 1;
    grid-column-end: 11;
    grid-gap: 0.3em;
}
.header {
    display: grid;
    grid-template-columns: inherit;
    grid-row: 1;
    grid-column: 1 / 11;
}
#tracker_head {
    display: grid;
    grid-template-columns: inherit;
    grid-column-start: 1;
    grid-column-end: 11;
    grid-gap: inherit;
}
.tracker_body {
    display: grid;
    grid-template-columns: inherit;
    grid-gap: inherit;
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 11;
}
.tracker_body .info {
    display: grid;
    grid-template-rows: 1fr 10px;
}
.tracker .row {
    display: grid;
    grid-template-columns: inherit;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 11;
    grid-gap: inherit;
}
.rowbttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.2em;
}
.tranport {
    display: grid;
    grid-column: 1 / 11;
    grid-template-columns: inherit;
    grid-gap: inherit;
    padding-top: 5px;
    padding-bottom: 5px;
}
.transportctrl {
    display: grid;
    grid-column: 2 /4;
}
#transportinfo {
    display: grid;
    grid-column: 4;
}
#paramswitcherholder {
    grid-column: 6 / 10;
    display: grid;
}
.paramswitcher {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 0.5em;
    height: 100%;
}
#gridmodal {
    display: grid;
    grid-template-columns: inherit;
    grid-template-rows: inherit;
    background: #222;
    grid-row: 1 / 4;
    grid-column: 1 / 11;
}
#gridmodalcontent {
    display: grid;
    grid-row: 2 / 2;
    grid-column: 2 / 10;
    background: #ddd;
}
.phrasevisualholder {
    display: grid;
    grid-template-columns: 1fr 440px 1fr;
    grid-template-rows: 30px 1fr;
    /* grid-row: 1 / 4;
    grid-column: 1 / 11; */
    height: 90%;
}
.modebuttonholdertwo, .modebuttonholderthree {
    display: grid;
    grid-column: 2 / 3;
    grid-gap: 0.2em;
    padding: 0.2em;
}
.modebuttonholdertwo {
    grid-template-columns: 1fr 1fr;
}
.modebuttonholderthree {
    grid-template-columns: 1fr 1fr 1fr;
}
.leftcell, .rightcell, .phrasevisualizer {
    display: grid;
    grid-row: 2;
}
.leftcell {
    grid-column: 1 / 2;
}
.rightcell {
    grid-column: 3 / 4;
}
.phrasevisualizer {
    grid-column: 2 / 3;
}
.valuegrid {
    display: grid;
    grid-row-start: 2;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-gap: 0.1em;
}
.barselector {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 0.1em;
}
.barselectorcell {
    display: grid;
    grid-template-rows: 1fr, 20px;
    grid-gap: 0.1em;
}
.verticalSplit {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1em;
}