:root {
    /* --settings-light: var(--illi-blue);
    --settings-dark: var(--illi-dark-blue); */
    --settings-light: rgb(239, 226, 226);
    --settings-dark: var(--illi-red);
}

.settings-page {
    display: flex;
    flex-direction: row;
    height: 80vh;
    width: 150vw;
    overflow: hidden;
}

.settings-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 3vh;
    align-items: center;
    transition: width 0.5s;
    background-color: white;
}

.settings-column-one {
    height: 100%;
    width: 35vw;
    display: flex;
    align-items: flex-start;
}

.settings-column-one.three-columns {
    width: 9vw;
}

.settings-column-one.three-columns .icon-button {
    margin-left: 1.5vw;
}

.settings-column-one .icon-button {
    width: 22vw;
    margin-left: 7vw;
    transition: margin-left 0.5s;
}

.settings-name {
    overflow: hidden;
    white-space: nowrap;
}

.settings-column-two {
    width: 65vw;
    padding-top: 3vh;
    justify-content: flex-start;
    align-items: flex-start;
}

.settings-column-two.three-columns {
    width: 32vw;
}

.settings-column-three {
    width: 50vw;
    padding-left: 5vw;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 1vh;
}

.settings-divider {
    width: 3vw;
    background: #ffffff;
    height: 83vh;
    position: absolute;
    bottom: 0;
    left: 33vw;
    box-shadow: 20px 0px 20px rgba(0, 0, 0, 0.0588);
    transition: left 0.5s;
}

.settings-divider.three-columns {
    left: 6vw;
}

.settings-divider-two {
    left: 97vw;
}

.settings-divider-two.three-columns {
    left: 38vw;
}

.settings-content {
    margin-left: 7.5vw;
}

.settings-subcategories {
    width: 32vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.settings-faq p,
.settings-faq ul,
.settings-faq ol {
    margin: 0;
    font-size: 1.5vw;
}

/* ACCOUNT */
.account-info-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 2vh;
}

.settings-column h1 {
    margin: 0;
    font-size: 2.5vw;
    color: var(--settings-dark);
}

.settings-column h2 {
    margin: 0;
    margin-bottom: 1vh;
    color: var(--illi-black);
}

.settings-column p {
    font-size: 1.5vw;
    margin: 0;
    margin-bottom: 2vh;
    margin-top: 1vh;
    color: var(--illi-gray)
}

.account-info b {
    margin-left: 1vw;
    font-weight: 100;
    color: var(--illi-gray);
    font-family: monospace;
    font-size: 1.2vw;
    opacity: 0.5;
}

/* APP INFO */
.version-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 2vh;
}

.app-info .version-container p {
    margin: 0;
}

.app-info .version-container i {
    margin-right: 0.5vw;
}

#update-app,
#logout-app {
    background-color: var(--illi-dark-blue);
    color: white;
    width: 9vh;
    height: 4vh;
    font-size: 1vw;
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 0.6vw;
    opacity: 0.7;
    margin-left: 1vw;
}

#update-app:focus,
#logout-app:focus {
    opacity: 1;
}

#update-app:focus::before,
#logout-app:focus::before {
    border: 0.25vw solid var(--illi-dark-blue);
    content: "";
    position: absolute;
    width: calc(9vh + 0.5vw);
    height: calc(4vh + 0.5vw);
    border-radius: 1vw;
}

#logout-app {
    background-color: white;
    color: black;
    width: 10vh;
    border-color: black;
    border-style: solid;
    border-width: 0.1vw;
    margin-left: 1.25vw;
}

#logout-app:focus {
    color: var(--illi-red);
    text-decoration: underline;
    border-color: var(--illi-red);
}

#logout-app:focus::before {
    display: none;
    /* border: 0.25vw solid var(--illi-red);
    width: calc(10vh + 0.5vw); */
}

/* VIDEO SETTINGS */
.video-settings-quality,
.subtitle-settings {
    position: relative;
    height: 4vh;
    width: 20vw;
    margin: 1vh;
    margin-left: 2vw;
    display: flex;
    align-items: center;
    padding-left: 1vw;
    padding-right: 1vw;
}

.video-settings-quality:focus,
.subtitle-settings:focus {
    font-weight: 600;
    color: var(--illi-red);
    outline: none;
    text-decoration: underline;
}

.video-settings-quality::before,
.subtitle-settings::before {
    content: " ";
    display: flex;
    height: 3.5vh;
    width: 3.5vh;
    position: absolute;
    background-color: none;
    box-sizing: border-box;
    left: -2vw;
    border-radius: 2vw;
    border-style: solid;
    background-color: #ebebeb;
    border-color: #ebebeb;
    border-width: 0.65vw;

}

.video-settings-quality.active,
.subtitle-settings.active {
    font-weight: bold;
}

.video-settings-quality.active::before,
.subtitle-settings.active::before {
    content: "";
    background-color: var(--illi-lighter-gray);
    border-color: var(--settings-dark);
}

.settings-scroller {
    height: 58vh;
    width: 50vw;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.settings-scroller p,
.settings-scroller ul,
.settings-scroller ol {
    font-size: 1.5vw;
}

.scroll-buttons {
    display: flex;
    position: relative;
    width: 50vw;
    justify-content: flex-end;
    z-index: 60;
}

.scroll-button,
.settings-page .button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 15vw;
    height: 8.5vh;
    padding: 0;
    background-color: var(--illi-black);
}

.scroll-button:focus,
.settings-page .button:focus {
    background-color: var(--illi-red);
}

.scroll-button:focus::before,
.settings-page .button:focus::before {
    border: 0.25vw solid var(--illi-red);
    content: "";
    position: absolute;
    width: calc(15vw + 0.5vw);
    height: calc(8.5vh + 0.5vw);
    background: rgba(209, 132, 134, 0.15);
    border-radius: 1vw;
}

.settings-column-three h1 {
    /* width: 90%; */
    width: 100%;
}

.settings-column-three .menu-item {
    width: 23vw;
}

.settings-column-three .thumbnail-view {
    padding: 0;
}

.settings-column-three .thumbnail-view .menu-item .dir-image {
    height: 21vh;
}

.settings-column-three .diagnostics-page {
    padding-left: 0;
}

.settings-content .buttons {
    display: flex;
    flex-direction: row;
    width: 27vw;
    justify-content: space-between;
    margin-top: 4vh;
}

.settings-content .buttons i {
    margin-right: 1vw;
}

.settings-content .buttons .button {
    position: relative;
    background-color: var(--illi-black);
    color: white;
    width: 13vw;
    height: 8vh;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-content .buttons .button:focus {
    color: white;
    background-color: var(--settings-dark);
}

.settings-content .buttons .button:focus::before {
    border: 0.25vw solid var(--settings-dark);
    content: "";
    position: absolute;
    width: calc(13vw + 0.5vw);
    height: calc(8vh + 0.5vw);
    border-radius: 1vw;
}

.settings-content .buttons .button.cancel-button {
    color: var(--illi-gray);
    border-color: var(--illi-black);
    background-color: white;
    border-style: solid;
    border-width: 0.15vw;
}

.settings-content .buttons .button.cancel-button:focus {
    color: white;
    background-color: var(--settings-dark);
    border-color: var(--settings-dark);
}

.dayprogram-segment {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 1vh;
    margin-left: 0;
}

.dayprogram-segment input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--illi-lighter-gray);
    /* background-color: var(--illi-black); */
    margin: 0;
    margin-right: 1vw;
    width: 3.5vh;
    height: 3.5vh;
    border-radius: 0.5vh;
}

.dayprogram-segment input[type="checkbox"]:checked {
    background-color: var(--settings-dark);
    /* background-color: var(--settings-light); */
}

.dayprogram-segment input[type="checkbox"]::before {
    content: "";
    font-family: "Font Awesome 6 Pro";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.25vh;
    font-weight: bold;
    color: white;
    /* color: var(--settings-dark); */
}

.dayprogram-segment input[type="checkbox"]:checked::before {
    content: "\f00c";
}

.dayprogram-segment:focus {
    color: var(--settings-dark);
    text-decoration: underline;
    font-weight: bold;
    outline: none;
}