* {
    font-family: Montserrat;
    user-select: none;
    color: white;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    --scale: 1vw;
    background-color: black;
}

.container {
    aspect-ratio: 2 / 1;
    /* width: 100%; */
    max-width: 100vw;
    max-height: 100vh;
    background-color: rgb(25, 25, 25);
    display: grid;
    grid-template-rows: calc(var(--scale) * 5) calc(var(--scale) * 35) calc(var(--scale) * 10);
    font-size: calc(var(--scale));
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    transition-duration: 0.1s;
}

.top-section {
    background-color: rgb(50, 50, 50);
    display: grid;
    grid-template-columns: calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 9.25) calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 10.75) calc(var(--scale) * 5);
}

div.logo {
    height: calc(var(--scale) * 5);
    overflow: hidden;
}

div.logo img {
    height: calc(100% - var(--scale) * 1);
    padding: calc(var(--scale) * .5);
}

.middle-section {
    display: grid;
    grid-template-columns: calc(var(--scale) * 39.25) calc(var(--scale) * 60.75);
}

.middle-left-section, .middle-right-section {
    display: grid;
    overflow-y: hidden;
    grid-template-rows: calc(var(--scale) * 5) auto;
}

.middle-right-section#sequences, .middle-right-section#palettes {
    display: none;
}

.middle-right-top-section, .middle-left-top-section {
    display: grid;
    grid-template-columns: calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 15);
}

.middle-left-bottom-section, .middle-right-bottom-section {
    overflow-y: scroll;
}

.middle-left-bottom-section {
    width: calc(var(--scale) * 39.25);
}

.middle-left-section {
    grid-template-columns: calc(var(--scale) * 15);
}

.bottom-section {
    background-color: rgb(50, 50, 50);
    display: grid;
    grid-template-columns: calc(var(--scale) * 10) calc(var(--scale) * 90);
}

.bottom-right-section {
    display: grid;
    grid-template-rows: calc(var(--scale) * 5) calc(var(--scale) * 5);
}

.bottom-right-section div {
    display: grid;
    grid-template-columns: repeat(5, calc(var(--scale) * 18));
}

.bottom-left-section {
    display: grid;
    grid-template-rows: 50% 50%;
}

#fixtures-list, #cues-cuelist {
    display: grid;
    grid-template-columns: auto;
}

#sequences-sequencelist, #palettes-palettelist {
    display: grid;
    grid-template-columns: auto;
}

input, select {
    font-size: calc(var(--scale) * 2);
    background-color: rgb(60, 60, 60);
    border-radius: calc(var(--scale) * 1);
    border: solid calc(var(--scale) * 0.2);
    border-color: rgb(80, 80, 80) rgb(40, 40, 40) rgb(40, 40, 40) rgb(80, 80, 80);
}

select:hover, input:hover {
    background-color: rgb(70, 70, 70);
}

select:focus, input:focus {
    background-color: rgb(70, 70, 70);
}

input::placeholder {
    color: rgba(255,255,255,0.125);
}

input:checked + label {
    color: orange !important;
}

label:hover {
    color: rgb(0, 200, 255) !important;
}

label {
    transition-duration: .1s;
    font-size: calc(var(--scale) * 2);
}

label:hover {
    cursor: pointer;
}

button {
    background-color: rgb(60, 60, 60);
    transition-duration: .1s;
    border-radius: calc(var(--scale) * 1);
    border: solid calc(var(--scale) * 0.2);
    border-color: rgb(80, 80, 80) rgb(40, 40, 40) rgb(40, 40, 40) rgb(80, 80, 80);
    font-size: calc(var(--scale));
    height: 100%;
    padding: 0px;
}

button:hover {
    background-color: rgb(70, 70, 70);
    cursor: pointer;
}

button.selected {
    background-color: orange;
    color: black;
}

@media (min-aspect-ratio: 2/1) {
    html, body {
        --scale: 2vh;
    }
}

.menu {
    width: calc(var(--scale) * 90);
    height: calc(var(--scale) * 45);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    background-color: rgb(50, 50, 50);
    border-radius: calc(var(--scale) * 1);
    display: none;
    /* display: grid; */
    grid-template-rows: calc(var(--scale) * 5) auto auto;
    box-shadow: 0px 0px calc(var(--scale) * 1) calc(var(--scale) * 0.5) black;
    overflow: hidden;
}

.menu-top-section {
    display: grid;
    grid-template-columns: calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 5);
}

.menu-bottom-section {
    display: grid;
    grid-template-rows: calc(var(--scale) * 5) calc(var(--scale) * 35);
}

.menu-bottom-top-section {
    display: grid;
    grid-template-columns: calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 15);
}

.menu-bottom-bottom-section {
    display: grid;
}

.menu-bottom-bottom-section.fixture-list {
    overflow-y: scroll;
    overflow-x: hidden;
}

button.exit-button {
    font-size: calc(var(--scale) * 2.5);
    width: calc(var(--scale) * 5);
    margin-left: calc(var(--scale) * 55);
    text-align: center;
}

img.button-image {
    height: calc(var(--scale) * 2);
}

.menu-bottom-bottom-section.network-page, .menu-bottom-bottom-section.patch-fixture, .menu-bottom-bottom-section.save-page {
    display: grid;
    grid-template-columns: calc(var(--scale) * 30) calc(var(--scale) * 30);
    grid-template-rows: calc(var(--scale) * 4) calc(var(--scale) * 4);
}

.menu#parameter-menu, .menu#cue-menu, .menu#sequence-menu, .menu#palette-menu, .menu#palette-store-menu {
    width: calc(var(--scale) * 50);
    height: calc(var(--scale) * 20);
    /* display: grid; */
}

.menu#parameter-menu button.exit-button, .menu#cue-menu button.exit-button, .menu#sequence-menu button.exit-button, .menu#palette-menu button.exit-button {
    font-size: calc(var(--scale) * 2.5);
    width: calc(var(--scale) * 5);
    margin-left: 0px;
    text-align: center;
}

.menu#sequence-menu button.exit-button, .menu#palette-menu button.exit-button, .menu#palette-store-menu button.exit-button{
    margin-left: calc(var(--scale) * 30);
}

.menu#parameter-menu .menu-bottom-top-section {
    grid-template-columns: calc(var(--scale) * 15) calc(var(--scale) * 15) calc(var(--scale) * 15);
}

.menu#parameter-menu .menu-bottom-section {
    display: grid;
    grid-template-rows: calc(var(--scale) * 5) auto;
}

.menu#cue-menu .menu-bottom-section.cue-settings, .menu#cue-menu .menu-bottom-section.cue-edit-settings, .menu#sequence-menu .menu-bottom-section, .menu#palette-menu .menu-bottom-section, .menu#palette-store-menu .menu-bottom-section {
    display: grid;
    grid-template-columns: calc(var(--scale) * 10) auto;
    grid-template-rows: calc(var(--scale) * 5) calc(var(--scale) * 5);
}

.menu#cue-menu .menu-bottom-section.cue-timings table {
    width: calc(var(--scale) * 50);
    font-size: calc(var(--scale) * 1.5);
    text-align: center;
    border-spacing: 0px;
    padding-top: calc(var(--scale) * 1);
}

.menu#cue-menu .menu-bottom-section.cue-timings table *:not(input) {
    padding: 0px;
}

.menu#cue-menu .menu-bottom-section.cue-timings table input {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.menu#cue-menu .menu-bottom-section.cue-timings table td {
    padding-top: calc(var(--scale) * 1);
    width: calc(var(--scale) * 7);
}

.menu#cue-menu .menu-bottom-section.cue-timings table input {
    padding-top: 0px;
    width: calc(var(--scale) * 5);
}

.menu-top-section#cue-edit-section, .menu-top-section#cue-edit-settings {
    display: none;
}

p {
    font-size: calc(var(--scale) * 2);
}

::-webkit-scrollbar {
    width: calc(var(--scale) * 0.75);
}

::-webkit-scrollbar-track {
    background-color: rgba(60, 60, 60, 0.5);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(80, 80, 80);
    border-radius: calc(var(--scale) * 0.5);
}

.menu-bottom-bottom-section.fixture-list::-webkit-scrollbar-track {
    background-color: rgba(40, 40, 40);
    border-radius: calc(var(--scale) * 0.5);
}

.menu-bottom-bottom-section.fixture-list::-webkit-scrollbar-thumb {
    background-color: rgba(80, 80, 80);
    border-radius: calc(var(--scale) * 0.5);
}

.current-cue {
    background-color: purple;
    transition-duration: 0.1s;
}

.active-cue {
    background: linear-gradient(90deg, green var(--percentage), rgba(255, 255, 255, 0.1) var(--percentage));
    transition-duration: 0.1s;
}

.current-cue.active-cue {
    background: linear-gradient(90deg, purple var(--percentage), rgba(255, 255, 255, 0.1) var(--percentage));
    transition-duration: 0.1s;
}

.manual-channel {
    background-color: rgba(255, 0, 0, 0.75) !important;
}

.sequence-channel {
    background-color: rgba(0, 200, 255, 0.75) !important;
}

.section-button {
    border-bottom: none;
    border-radius: calc(var(--scale) * 1) calc(var(--scale) * 1) 0px 0px;
}

label.selected {
    color: orange !important;
}

.version-number{
    font-size: calc(var(--scale) * 0.75);
    margin: auto;
}