/* main menu */
#settingsPanel[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    border: none;
    width: 100vw;
    height: 50vh;
    background-color: var(--invis);
    overflow: visible;
}

#settingMenuTop,
#settingMenuBottom,
#settingMenuMiddle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100vw;
}

#settingMenuTop > *,
#settingMenuBottom > *,
#settingMenuMiddle > * {
    opacity: 0;
} 

.fullWidth {
    width: 100%;
}

button>img {
    -webkit-user-drag: none;
}

.settingPanelButton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 1%;
    height: 18vh;
    aspect-ratio: 1/1;
    border: 0.3vh solid var(--l-gray);
    border-radius: 1.5vh;
    transition: all 0.5s ease-out;
    background-color: var(--invis);
    padding: 0.5vh;
    outline: none;
}


.settingPanelButton>p {
    color: white;
    margin: 0;
    padding: 0;
    opacity: 0.3;
    transform: translateY(1vh);
    letter-spacing: 0.1em;
}

.settingPanelButton>img {
    height: 75%;
}

.settingPanelButton:hover {
    border: 0.3vh solid var(--cl-blue);
    transition: opacity 0.1s ease;
}

.settingPanelButton:disabled,
.smallPanelButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.smallPanelButton,
.smallerPanelButton {
    height: 6vh;
    width: 6vh;
    border-radius: 1vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.smallerPanelButton {
    height: 4vh;
    width: 4vh;
    border-radius: 0.7vh;
    border-width: 0.2vh;
}

.smallerPanelButton:hover {
    border-width: 0.2vh;
}

.smallerPanelButton>img {
    height: 100%
}

.spanleft {
    flex: 1;
    text-align: right;
    padding-right: 1vw;
    width: 9vw;
}

.spanright {
    flex: 1;
    padding-left: 1vw;
}

/* songs */
#songSelector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40vw;
    height: 15vh;
    overflow: visible;
    white-space: nowrap;
    opacity: 0.4;
    transition: all 0.5s ease;
}

#songSelector:hover {
    opacity: 0.8;
    transition: all 0.1s ease;
}

#songText {
    position: absolute;
    transform: translateY(-4vh);
    align-self: center;
    padding: 0;
    margin: 0;
}

#songProgress {
    height: 0.8vh;
    border-radius: 5vh;
    border: none;
    background-color: var(--e-black); /* fallback for Firefox "empty" area */
}

#songProgress::-webkit-progress-bar {
    background-color: var(--e-black);
}

#songProgress::-webkit-progress-value {
    background-color: var(--cl-blue);
    border-radius: 5vh;
}

#songProgress::-moz-progress-bar {
    background-color: var(--cl-blue);
}

/* option styles */
.range {
    appearance: none;
    -webkit-appearance: none;
    height: 1vh;
    width: 40%;
    right: 3%;
    border: 0.2vmin solid white;
    background: var(--e-black);
    outline: none;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
}

.range:hover {
    border-color: var(--p-green);
}

.check {
    width: 3.5vh;
    height: 3.5vh;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--almost-invis);
    border: 0.2vmin solid white;
    border-radius: 3vh;
    transition: all 0.1s ease;
}

.check:hover {
    border-color: var(--p-green);
}

.check:checked {
    background-color: var(--p-green);
    border: none;
}

.textInput,
.dropdown,
.number {
    padding: 0.6vh;
    background-color: var(--almost-invis);
    border: 0.1vmin solid white;
    color: rgb(225, 225, 225);
    font-size: 1em;
}

.number {
    width: 20%;
    appearance: initial;
    -moz-appearance: textfield;
}

.textInput:hover,
.textInput:focus,
.dropdown:hover,
.dropdown:focus,
.number:hover,
.number:focus {
    border-radius: 0;
    outline: none;
    border-color: var(--p-green);
}

.fileInputContainer{
    border: 0.1vmin solid white;
}

.fileInputContainer:hover{
    border-color: var(--p-green);
}

.fileInputContainer .img{
    -webkit-mask-image: url('../assets/icons/upload.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url('../assets/icons/upload.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    background: white;
    height: 90%;
    width: 75%;
    transform: translateY(10%);
}

.fileInputContainer:hover .img{
    background: var(--p-green);
}

.keybind {
    padding: 0.5vh;
    background-color: var(--invis);
    border: none;
    font-size: 1em;
    color: var(--c-blue);
}

.settingRow:hover>.keybind {
    color: var(--p-green);
}

/* change keybinds */
#frontdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: var(--slight-invis);
    overflow: hidden;
    color: var(--cl-blue);
    outline: none;
    user-select: none;
    border: none;
    animation: fadein 0.4s forwards ease;
    font-family: "Montserrat";
}

#frontdrop.closingAnimation {
    animation: fadeout 0.2s forwards ease;
}

#selectkeydiv {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    text-shadow: 0 0 3vh white;
}

#selectkeybigtext {
    transform: translateY(-8vh);
}

#selectkeytext {
    position: absolute;
    top: 46vh;
    font-size: 0.3em;
    text-shadow: 0 0 3vh white;
}

/* do not remove, used in menu */
.statText {
    opacity: 1;
    display: flex;
    margin: 0.5vmin;
}

/* focus */
#nofocus {
    font-family: "Montserrat";
    display: none;
    opacity: 1;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid red;
    color: red;
    font-size: 2.5em;
    padding: .2em;
    background-color: #000A;
    transition: 0.2s;
}

#nofocus span {
    display: block;
    color: #fff;
    font-size: .6em;
}

#explanationText,
#updatetext {
    display: flex;
    margin: 0;
    opacity: 0.4;
}