/* General styling */
    /* Mobile and Tablet */
    @media screen and (max-aspect-ratio: 1080/1080) {
        .authentication-container, .config-container.min, .logout-container {
            margin-top: var(--11_25rem);
            min-height: calc(100svh - var(--11_25rem));
        }
        .config-container, .config-container.min {
            margin-top: 0;
        }
    }
    /* Tablet */
    @media screen and (min-aspect-ratio: 742/1080) and (max-aspect-ratio: 1080/1080) {
        .authentication-container, .config-container.min, .logout-container {
            margin-top: var(--8_75rem);
            min-height: calc(100svh - var(--8_75rem));
        }
        .config-container.min {
            margin-top: 0;
        }
    }
    /* Tallview and Display 16:9 */
    @media screen and (min-aspect-ratio: 1080/1080) and (max-aspect-ratio: 2495/1080) {
        .authentication-container, .config-container.min, .logout-container {
            margin-top: var(--7_5rem);
            min-height: calc(100svh - var(--7_5rem));
        }
        .config-container {
            margin-top: var(--4_5rem);
        }
    }
    /* Display 21:9 */
    @media screen and (min-aspect-ratio: 2495/1080) and (max-aspect-ratio: 3485/1080) {
        .authentication-container, .config-container.min, .logout-container {
            margin-top: var(--5_625rem);
            min-height: calc(100svh - var(--5_625rem));
        }
        .config-container {
            margin-top: var(--3_375rem);
        }
    }
    /* Display 32:9 */
    @media screen and (min-aspect-ratio: 3485/1080) {
        .authentication-container, .config-container.min, .logout-container {
            margin-top: var(--3_75rem);
            min-height: calc(100svh - var(--3_75rem));
        }
        .config-container {
            margin-top: var(--2_25rem);
        }
    }

/* Overview */
.config-container .overview {
    align-self: start;
    background-color: var(--color-white-1);
}
.config-container.dark .overview {
    background-color: var(--color-black-1);
}
.config-container .gallery-background {
    background-color: var(--color-white-3);
}
.config-container.dark .gallery-background {
    background-color: black;
}
.config-container.dark .summary {
    color: var(--color-white-2);
}
.config-container.dark .total-price {
    color: var(--color-white-1);
}
    /* Mobile and Tablet */
    @media screen and (max-aspect-ratio: 1080/1080) {
        .config-container .overview {
            top: 0;
            padding-top: calc(var(--6_75rem) + var(--spacer-mobile));
            height: calc(60vh + var(--6_75rem) + var(--spacer-mobile));
        }
        .config-container.min .overview {
            padding-top: calc(var(--11_25rem) + var(--spacer-mobile));
            height: calc(60vh + var(--11_25rem) + var(--spacer-mobile));
        }
    }
    @media screen and (max-aspect-ratio: 1080/1080) and (prefers-color-scheme: dark) {
        .config-container .overview {
            background-color: var(--color-black-2) !important;
        }
        .config-container.dark .overview {
            background-color: var(--color-black-2) !important;
        }
    }
    /* Tablet */
    @media screen and (min-aspect-ratio: 742/1080) and (max-aspect-ratio: 1080/1080) {
        .config-container .overview {
            padding-top: calc(var(--5_25rem) + var(--spacer-tablet));
            height: calc(60vh + var(--5_25rem) + var(--spacer-tablet));
        }
        .config-container.min .overview {
            padding-top: calc(var(--8_75rem) + var(--spacer-tablet));
            height: calc(60vh + var(--8_75rem) + var(--spacer-tablet));
        }
    }
    /* Tallview and Display 16:9 */
    @media screen and (min-aspect-ratio: 1080/1080) and (max-aspect-ratio: 2495/1080) {
        .config-container .overview {
            top: calc(var(--4_5rem) + var(--spacer-tallview169));
            height: calc(100vh - var(--4_5rem) - 2*var(--spacer-tallview169));
        }
        .config-container.min .overview {
            top: calc(var(--7_5rem) + var(--spacer-tallview169));
            height: calc(100svh - var(--7_5rem) - 2*var(--spacer-tallview169));
        }
    }
    /* Display 21:9 */
    @media screen and (min-aspect-ratio: 2495/1080) and (max-aspect-ratio: 3485/1080) {
        .config-container .overview {
            top: calc(var(--3_375rem) + var(--spacer-disp219));
            height: calc(100vh - var(--3_375rem) - 2*var(--spacer-disp219));
        }
        .config-container.min .overview {
            top: calc(var(--5_625rem) + var(--spacer-disp219));
            height: calc(100svh - var(--5_625rem) - 2*var(--spacer-disp219));
        }
    }
    /* Display 32:9 */
    @media screen and (min-aspect-ratio: 3485/1080) {
        .config-container .overview {
            top: calc(var(--2_25rem) + var(--spacer-disp329));
            height: calc(100vh - var(--2_25rem) - 2*var(--spacer-disp329));
        }
        .config-container.min .overview {
            top: calc(var(--3_75rem) + var(--spacer-disp329));
            height: calc(100svh - var(--3_75rem) - 2*var(--spacer-disp329));
        }
    }
    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .config-container .overview {
            background-color: var(--color-black-1);
        }
        .config-container .gallery-background {
            background-color: black;
        }
        .config-container .summary {
            color: var(--color-white-2);
        }
        .config-container .total-price {
            color: var(--color-white-1);
        }
    }

/* Product configuration */
.config-container .config-item {
    cursor: pointer;
}
.config-container .config-title {
    color: var(--color-gray-1);
    background-color: var(--color-white-2);
}
.config-container.dark .config-title {
    color: var(--color-white-1);
    background-color: var(--color-black-3);
}
.config-container .config-list {
    background-color: var(--color-black-3);
}
.config-container.dark .config-list {
    background-color: black;
}
.config-container .config-list p {
    color: var(--color-white-1);
}
.config-container .config-list .description {
    color: var(--color-gray-2);
}
.config-container .config-item:hover {
    background-color: black;
}
.config-container.dark .config-item:hover {
    background-color: var(--color-black-2);
}
.config-container .config-item.unavailable p {
    color: var(--color-gray-1);
}
.config-container .config-item:not(.unavailable).selected {
    background-image: var(--gradient-1);
}
.config-container .config-item.unavailable.selected {
    background-image: var(--gradient-gray-1);
}
.config-container .config-item.multi-item.selected, .config-container .upgrades .config-item.selected {
    background-image: var(--gradient-1-hor);
}
.config-container .config-item.multi-item.selected.addon-required, .config-container .upgrades .colors .config-item.selected {
    background-image: var(--gradient-2-hor);
}
.config-container .config-item:not(.unavailable).selected .description {
    color: var(--color-white-1);
}
.config-container .config-item.unavailable.selected p {
    color: var(--color-black-1);
}
.config-container :is(.config-list, .config-item):not(:last-of-type)::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--color-white-transp-2);
}
.config-container .config-item:not(:last-of-type)::after {
    width: -webkit-fill-available;
}
    /* Mobile and Tablet */
    @media screen and (max-aspect-ratio: 1080/1080) {
        .config-container .config-title {
            height: var(--6rem);
        }
        .config-container .config-item:hover {
            background-color: unset;
        }
        .config-container .config-item:not(:last-of-type)::after {
            margin: 0 var(--spacer-mobile);
        }
        .config-container .config-item:hover {
            background-color: unset !important;
        }
        .config-container.dark .config-item:hover {
            background-color: unset !important;
        }
        .config-container .config-list:not(:last-of-type)::after {
            left: var(--spacer-mobile);
            right: var(--spacer-mobile);
        }
    }
    /* Tablet */
    @media screen and (min-aspect-ratio: 742/1080) and (max-aspect-ratio: 1080/1080) {
        .config-container .config-item:not(:last-of-type)::after {
            margin: 0 var(--spacer-tablet);
        }
        .config-container .config-list:not(:last-of-type)::after {
            left: var(--spacer-tablet);
            right: var(--spacer-tablet);
        }
    }
    /* Tallview and Display 16:9 */
    @media screen and (min-aspect-ratio: 1080/1080) and (max-aspect-ratio: 2495/1080) {
        .config-container .config-title {
            height: var(--6rem);
        }
        .config-container .config-item:not(:last-of-type)::after {
            margin: 0 var(--spacer-tallview169);
        }
        .config-container .config-list:not(:last-of-type)::after {
            left: var(--spacer-tallview169);
            right: var(--spacer-tallview169);
        }
    }
    /* Display 21:9 */
    @media screen and (min-aspect-ratio: 2495/1080) and (max-aspect-ratio: 3485/1080) {
        .config-container .config-title {
            height: var(--4_5rem);
        }
        .config-container .config-item:not(:last-of-type)::after {
            margin: 0 var(--spacer-disp219);
        }
        .config-container .config-list:not(:last-of-type)::after {
            left: var(--spacer-disp219);
            right: var(--spacer-disp219);
        }
    }
    /* Display 32:9 */
    @media screen and (min-aspect-ratio: 3485/1080) {
        .config-container .config-title {
            height: var(--3rem);
        }
        .config-container .config-item:not(:last-of-type)::after {
            margin: 0 var(--spacer-disp329);
        }
        .config-container .config-list:not(:last-of-type)::after {
            left: var(--spacer-disp329);
            right: var(--spacer-disp329);
        }
    }
    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .config-container .config-title {
            color: var(--color-white-1);
            background-color: var(--color-black-3);
        }
        .config-container .config-list {
            background-color: black;
        }
        .config-container .config-item:hover {
            background-color: var(--color-black-2);
        }
    }

/* Misc */
.config-container .color-ball {
    border: 2px solid var(--color-white-transp-1);
}
    /* Mobile and Tablet */
    @media screen and (max-aspect-ratio: 1080/1080) {
        .config-container .color-ball {
            height: var(--3rem);
            width: var(--3rem);
        }
    }
    /* Tablet */
    @media screen and (min-aspect-ratio: 742/1080) and (max-aspect-ratio: 1080/1080) {
        .config-container .color-ball {
            height: var(--2rem);
            width: var(--2rem);
        }
    }
    /* Tallview and Display 16:9 */
    @media screen and (min-aspect-ratio: 1080/1080) and (max-aspect-ratio: 2495/1080) {
        .config-container .color-ball {
            height: var(--2rem);
            width: var(--2rem);
        }
    }
    /* Display 21:9 */
    @media screen and (min-aspect-ratio: 2495/1080) and (max-aspect-ratio: 3485/1080) {
        .config-container .color-ball {
            height: var(--1_5rem);
            width: var(--1_5rem);
        }
    }
    /* Display 32:9 */
    @media screen and (min-aspect-ratio: 3485/1080) {
        .config-container .color-ball {
            height: var(--1rem);
            width: var(--1rem);
        }
    }