/* Variables */
:root {
    --primary-background-color: #fff;
    --secondary-background-color: #f5f5f5;
    --tertiary-background-color: #e0e0e0;
    --outline-color: #cccccc;
    --primary-background-transparent: rgba(245,245,245,0.5);
    --secondary-background-transparent: rgba(255,255,255,0.6);
}

.mainDrawer,
.headerButton,
.detailButton-content{color: black;}

.fab,
.raised,
.collapseContent,
.formDialogFooter:not(.formDialogFooter-clear),
.formDialogHeader:not(.formDialogHeader-clear),
.paperList,
.visualCardBox {
    background: var(--secondary-background-color) !important;
}

.checkboxList.paperList {
    background: var(--primary-background-color) !important;
    border: 2px solid var(--outline-color) !important;
}

.MuiPaper-root.MuiPopover-paper {
    background: var(--tertiary-background-color) !important;
}

.button-submit {
    background: var(--secondary-accent-color) !important;
    color: var(--primary-accent-color) !important;
}

.emby-checkbox:checked + span + .checkboxOutline {
    background: var(--secondary-accent-color) !important;
    border-color: var(--secondary-accent-color) !important;
}
.checkboxIcon {
    color: var(--primary-accent-color)
}

.layout-desktop .detailSectionContent,
.trackSelections,
.layout-desktop .detailsGroupItem,
.layout-desktop .localnav {
    background: var(--primary-background-color) !important;
    border: 2px solid var(--outline-color) !important;
}

.listItem:hover {
    background: var(--secondary-background-color) !important;
}

select,
textarea,
input:not(.mdl-slider) {
    background: var(--primary-background-color) !important;
    border: 2px solid var(--outline-color) !important;
}

.navMenuOption:hover:not(.navMenuOption-selected) {
    background: var(--tertiary-background-color) !important;
}

.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
    border-color: var(--secondary-accent-color) !important;
}
.checkboxOutline {
    border-color: var(--outline-color) !important;
}