/* Variables */
:root {
    --primary-accent-color: #00a4dc;
    --secondary-accent-color: #00a4dc20;
    --primary-background-color: #101010;
    --secondary-background-color: #181818;
    --primary-background-transparent: rgba(35,35,35,0.5);
    --secondary-background-transparent: rgba(0,0,0,0.6);
    --rounded-cards: 15px;
    --blur: 10px;
}

/* Setting accent color variable */
.emby-checkbox:checked + span + .checkboxOutline,
.selectionCommandsPanel,
.countIndicator,
.MuiButton-root,
.MuiChip-root:not(.MuiChip-colorError) {
    background: var(--primary-accent-color) !important;
}
.MuiAlert-root {
    background: var(--secondary-accent-color) !important;
}
.emby-checkbox:checked + span + .checkboxOutline,
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline,
.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor:focus,
.mdl-spinner__layer-1,
.mdl-spinner__layer-2,
.mdl-spinner__layer-3,
.mdl-spinner__layer-4,
.progressring-spiner {
    border-color: var(--primary-accent-color) !important;
}
.button-link:not(.itemDetailPage .button-link),
.selectLabelFocused,
.textareaLabelFocused,
.inputLabelFocused,
.emby-tab-button:hover,
.metadataSidebarIcon,
.upNextDialog-countdownText,
.MuiAlert-icon {
    color: var(--primary-accent-color) !important;
}
@media (hover: hover) and (pointer: fine) {
    .paper-icon-button-light:hover:not(:disabled) {
        color: var(--primary-accent-color) !important;
        background-color: var(--secondary-accent-color) !important;
    }
}

/* Increase size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo {
    margin-left: 25px !important;
    height: 40px !important;
}

/* Static left drawer */
.layout-desktop .mainDrawer {
    left: 0 !important;
    top: 0 !important;
    width: 250px !important;
    /* Modified background color */
    background-color: var(--secondary-background-color) !important;
    /* Move drawer behind header */
    z-index: 998 !important;
}
/* Lower drawer buttons */
.layout-desktop .mainDrawer-scrollContainer {
    margin-top: 95px !important;
    margin-left: 10px !important;
}
.layout-mobile .mainDrawer-scrollContainer {
    margin-top: 15px !important;
}
/* Shift content to the right */
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
    margin-left: 250px !important;
}
/* Fix for Jellyfin Media Player */
.quickConnectSettingsContainer {
    margin-left: 250px !important;
}
/* Hide transition on page load */
.layout-desktop .touch-menu-la.transition {
    transition: none !important;
}
/* Hide hamburger button */
.layout-desktop .mainDrawerButton {
    display: none !important;
}
/* Fix for dashboard leaking out of the sections */
.dashboardColumn {
    flex-shrink: inherit;
}
/* Fix for dashboard drawer button height */
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
    padding-top: 0 !important;
}
/* Hide home button */
.layout-desktop .headerHomeButton {
    display: none !important;
}
.layout-desktop .dashboardDocument .headerHomeButton {
    display: block !important;
}
/* Fix for video player and login page */
.layout-desktop .hide-scroll .mainDrawer,
.layout-desktop .hideMainDrawer .mainDrawer {
    left: -320px !important;
}
/* Fix for scroll menus on home page */
.emby-scroller {
    margin-right: -2% !important;
}
/* Fix for collection items misalignment */
.layout-desktop .collectionItems .collectionItemsContainer {
    padding-left: 0% !important;
}
/* Dynamic buttons */
.layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) {
    transform: scale(1.05) !important;
}
.layout-desktop .listItem {
    transition: .2s !important;
    border-radius: var(--rounded-cards) !important;
}
.layout-desktop #myPreferencesMenuPage .listItem:hover {
    transform: scale(1.015);
}



/* Rounded cards */
.cardContent,
.cardPadder,
.cardOverlayContainer,
.blurhash-canvas,
.dialog,
.itemSelectionPanel {
    border-radius: var(--rounded-cards) !important;
}
/* Rounded selection menu */
.itemSelectionPanel {
    border: 2px solid var(--primary-accent-color) !important;
}
.itemSelectionPanel .checkboxOutline {
    margin: 7px !important;
}



/* Floating progress bar */
.innerCardFooter {
    border-radius: var(--rounded-cards) !important;
    margin-left: 5px !important;
    margin-bottom: 5px !important;
    padding: 5px 15px 5px 5px !important;
    bottom: 0% !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(var(--blur)) !important;
}
.fullInnerCardFooter {
    bottom: 5% !important;
    width: 90% !important;
    margin: auto !important;
    border-radius: 100px !important;
    padding: 0px !important;
    backdrop-filter: none !important;
}
.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
    height: 10px !important;
    background: var(--primary-background-transparent) !important;
    backdrop-filter: blur(2px) !important;
}
.innerCardFooterClear {
    background-color: none !important;
}
.innerCardFooter .cardText {
    padding: 0 0 0 10px !important
}
.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
    background: var(--primary-accent-color) !important;
}
.itemProgressBarForeground {
    border-radius: 100px !important;
}
.transcodingProgress > div {
    background-color: hsla(0,0%,100%,.2) !important;
}
.activeSession .backgroundProgress,
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
    bottom: 10px !important;
    border-radius: 100px !important;
    width: 90% !important;
    left: 5% !important;
}
.sessionNowPlayingInnerContent {
    padding-bottom: 12px !important;
    padding-inline: 17px !important;
}
.sessionAppInfo {
    padding: .5em 0em !important;
}
.sessionNowPlayingInfo {
    padding: .8em 0em !important;
}



/* Green watched indicator */
.playedIndicator {
    background: #409843 !important;
}



/* Rounded left drawer buttons */
.navMenuOption,
.navMenuOption:hover,
.navMenuOption-selected {
    border-radius: 100px !important;
    width: 85% !important;
    margin: auto !important;
    text-align: center !important;
    height: 45px !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}
.navMenuOption:hover:not(.navMenuOption-selected) {
    background-color: rgba(44, 44, 44, 0.7);
}
/* Center icons and text and shift to the left */
.navMenuOptionIcon,
.navMenuOptionText {
    position: inherit !important;
    left: -10% !important;
    margin-top: 0 !important;
}
/* Fix for header buttons */
.layout-desktop .emby-button-foreground {
    top: -9px !important;
}
.layout-tv .emby-button-foreground {
    top: -14px !important;
}



/* Custom button color */
.navMenuOption-selected {
    background: var(--secondary-accent-color) !important;
    color: var(--primary-accent-color) !important;
}

/* Modified background color */
html,
.backgroundContainer:not(.withBackdrop):not(.backgroundContainer-transparent),
.noBackdropTransparency .detailPageSecondaryContainer {
    background-color: var(--primary-background-color) !important;
}
.backgroundContainer.withBackdrop {
    background: var(--secondary-background-transparent) !important;
}


/* Transparent header bar */
.skinHeader {
    background-color: transparent !important;
}
.layout-desktop .skinHeader,
.layout-tv .skinHeader {
    padding-top: 1.5em !important;
}
.layout-tv .skinHeader {
    padding-bottom: 10px !important;
}
/* Rounded header buttons */
.headerTabs,
.headerRight {
    background-color: var(--primary-background-transparent) !important;
    border-radius: 50px !important;
    backdrop-filter: blur(var(--blur)) !important;
}
.layout-desktop .headerTabs,
.layout-desktop .headerRight,
.layout-tv .headerTabs,
.layout-tv .headerRight {
    margin-bottom: 10px !important;
}
.layout-desktop .headerTabs {
    margin-left: 160px !important;
}
/* Button height */
.headerRight,
.emby-tab-button {
    height: 45px !important;
}
/* Lower header and add padding to right buttons */
.layout-desktop .headerRight {
    padding: 0px 5px !important;
}
.layout-tv .headerRight {
    padding: 20px 10px !important;
}
/* Move left header back up */
.layout-desktop .headerLeft
.layout-tv .headerLeft {
    position: relative !important;
    top: -17px !important;
}
/* Mobile fixes */
.layout-mobile .headroom--unpinned {
    transform: translateY(-50%);
}
.layout-mobile .sectionTabs {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
}
.layout-mobile .emby-button-foreground {
    top: -2px !important;
}



/* Player modifications */
.upNextContainer, .toastVisible {
    backdrop-filter: blur(var(--blur)) !important;
}
.upNextContainer {
    border-radius: var(--rounded-cards) !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    margin: 4% !important;
}
.toastVisible {
    border-radius: 30px !important;
    background-color: var(--primary-background-transparent) !important;
}
.sliderBubble {
    border-radius: var(--rounded-cards) !important;
    background-color: var(--secondary-background-transparent) !important;
    backdrop-filter: blur(var(--blur)) !important;
}
.sliderBubble:not(.osdVolumeSliderContainer .sliderBubble):has(.chapterThumbContainer) {
    background-color: #ffffff00 !important;
    top: 25px !important;
    backdrop-filter: unset !important;
}
.mdl-slider-background-flex {
    height: 10px !important;
    margin-top: -5px !important;
    border-radius: 100px !important;
    background: hsla(0,0%,100%,.2) !important;
}
.mdl-slider-background-lower {
    border-radius: 100px !important;
    background-color: var(--primary-accent-color) !important;
}
.mdl-slider::-moz-range-thumb,
.mdl-slider::-webkit-slider-thumb {
    background: #ffffff00 !important;
    height: 10px !important;
    width: 8px !important;
    border-radius: 2px !important;
}
.mdl-slider-hoverthumb:hover::-moz-range-thumb,
.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
    transform: scaleY(2);
    background: #fff !important;
}
.mdl-slider-background-upper {
    border-top-right-radius: 100px !important;
    border-bottom-right-radius: 100px !important;
    background: hsla(0,0%,100%,.2) !important;
    transform: translateX(-3px) !important;
}
.iconOsdProgressInner {
    background: var(--primary-accent-color) !important;
}

/* Up next card */
.upNextDialog-buttons .upNextDialog-button {
    transition: .2s !important;
}
.upNextDialog-buttons .upNextDialog-button:hover {
    transform: scale(1.1);
}

/* Support for Jellyscrub plugin */
.chapterThumbContainer {
    background: none !important;
    border-radius: var(--rounded-cards) !important;
    box-shadow: unset !important;
}
.chapterThumb {
    border-radius: var(--rounded-cards) !important;
    margin-bottom: 47px !important;
    box-shadow: 0 0 1.9vh #000 !important;
}
.chapterThumbTextContainer {
    background: none !important;
}
.chapterThumbText {
    text-align: center !important;
}
.chapterThumbText-dim {
    display: none !important;
}

/* Support for IntroSkipper plugin */
.skipIntro {
    transition: 0.2s;
    border-radius: 100px !important;
    padding: 5px 10px !important;
    backdrop-filter: blur(var(--blur)) !important;
    border: none !important;
}
.skipIntro:hover {
    box-shadow: unset !important;
    transition: .2s;
    transform: scale(1.05);
}
.skipIntro .paper-icon-button-light:hover:not(:disabled) {
    color: #FFF !important;
}
.sliderMarker {
    display: none !important;
}



/* Settings and dashboard modifications */
.emby-input,
.emby-textarea,
.paperList,
.listItem:hover,
.subtitleappearance-preview {
    border-radius: var(--rounded-cards) !important;
}
.button-submit,
.emby-select,
.checkboxOutline,
.btnRefresh,
#btnShutdown,
.raised {
    border-radius: 100px !important;
}
.button-submit {
    background: var(--primary-accent-color) !important;
}
/* Modify username placement on profile page */
.layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{
    align-items: initial !important;
}
.layout-desktop .username {
    margin: 0px 0px 10px 10px !important;
}
/* Red shutdown button */
#btnShutdown {
    background: #AE3739 !important;
}
/* Remove border under certain dashboard items */
.listItem-border {
    border: 0 !important;
}
/* Add padding to list items */
.layout-desktop .listItem,
.layout-tv .listItem {
    padding-inline: 15px !important;
}
/* Rounded dashboard cards */
.cardBox {
    border-radius: var(--rounded-cards) !important;
}
/* Removed ugliness of border-card styling */
.layout-desktop fieldset.verticalSection-extrabottompadding,
.layout-tv fieldset.verticalSection-extrabottompadding {
    border-radius: var(--rounded-cards) !important;
    border-color: #3B3B3B !important;
    padding: 10px 35px !important;
}
/* Rounded tab selections in dashboard */
.layout-desktop .localnav {
    border-radius: 100px !important;
    background: #202020 !important;
    width: fit-content !important;
}
.layout-desktop a[data-role="button"] {
    background: none !important;
}
.layout-desktop div[data-role="controlgroup"] a.ui-btn-active {
    background: var(--primary-accent-color) !important;
    border-radius: 100px !important;
}
.layout-desktop .dashboardDocument .mainAnimatedPage {
    left: 260px !important;
}
#libraryDisplayPage,
#metadataImagesConfigurationPage,
#metadataNfoPage {
    margin-top: 40px !important;
}
#mediaLibraryPage {
    margin-top: 10px !important;
}
/* Re-align active devices in dashboard */
.activeDevices.itemsContainer {
    margin: 0px !important;
}
.playbackProgress > div {
    background: var(--primary-accent-color) !important;
}
/* IntroSkipper settings */
.layout-desktop summary {
    border-radius: 100px !important;
}
.layout-desktop fieldset.verticalSection-extrabottompadding,
.layout-tv fieldset.verticalSection-extrabottompadding {
    padding: 10px 35px 20px 35px !important;
}
#intro_reqs,
#edl,
#silence,
#support {
    padding-bottom: 10px !important;
}
/* Dashboard fixes for 10.9.x */
.layout-desktop #userProfilesPage {
    left: 260px !important;
}
.MuiAlert-message {
    color: #fff !important;
}
.MuiDataGrid-root {
    border-radius: var(--rounded-cards) !important;
}
.infoBanner,
.MuiPopover-paper {
    border-radius: var(--rounded-cards) !important;
}
.MuiToggleButton-root {
    border-radius: var(--rounded-cards);
    padding-inline: 15px !important;
}
.MuiAppBar-root {
    padding: 10px !important;
}
.MuiList-subheader .MuiListItemButton-root {
    border-radius: 100px !important;
    margin: 2px 15px !important;
    transition: .2s !important;
    height: 45px !important
}
.MuiList-subheader .MuiListItemButton-root:not(.Mui-selected) {
    color: #D1D1D1
}
.MuiList-subheader .MuiListItemButton-root:hover:not(.Mui-selected) {
    transform: scale(1.05) !important;
    background: rgba(44, 44, 44, 0.7) !important;
}
.Mui-selected {
    color: var(--primary-accent-color) !important;
    background: var(--secondary-accent-color) !important;
}
.MuiDrawer-paper {
    border-right: none !important;
    background: var(--secondary-background-color) !important;
    width: 250px !important;
}
.MuiListItemIcon-root {
    color: inherit !important;
}
.MuiPopover-paper {
    background: #252525 !important;
    color: #D1D1D1 !important;
}
.listItemIcon:not(.listItemIcon-transparent):not(.notification_important) {
    background: var(--secondary-accent-color) !important;
    color: var(--primary-accent-color) !important;
}



/* Metadata editor fixes */
.layout-desktop .editPageSidebar {
    width: 25vw !important;
}
.layout-desktop .editPageInnerContent {
    width: 74vw !important;
}
.jstree-default-large .jstree-node {
    line-height: 35px !important;
}
.jstree-default .jstree-wholerow-clicked {
    background: var(--secondary-accent-color) !important;
}
.jstree-wholerow-hovered {
    background: var(--primary-background-transparent) !important;
}
.jstree-children {
    margin-left: -10px !important;
}
#editItemMetadataPage .btnHeaderSave {
    background: var(--primary-accent-color) !important;
    border-radius: 100px !important;
    height: 40px !important;
    color: white !important;
}



/* Resize show/movie image on details page */
.layout-desktop .detailImageContainer .card {
    top: 9em !important;
    width: 18.3vw !important;
}

/* Re-position content on details page */
.layout-desktop .detailSection {
    margin-right: 0 !important;
}
.layout-desktop .detailPageContent {
    padding-left: 3.3% !important;
}

/* Re-position logo */
.layout-desktop .detailLogo,
.layout-tv .detailLogo {
    right: 0 !important;
    left: 4% !important;
    top: 10% !important;
}

/* Transparent ribbon bar */
.detailRibbon {
    background: transparent !important;
}

/* Add card around top-right buttons */
.mainDetailButtons {
    background: var(--primary-background-transparent) !important;
    border-radius: 100px !important;
    backdrop-filter: blur(var(--blur)) !important;
}

/* Add card around groups section */
.layout-desktop .detailsGroupItem {
    background: var(--secondary-background-color) !important;
    padding: 10px 20px !important;
    border-radius: 100px !important;
    width: fit-content !important;
    max-width: max-content !important;
    display: flex;
    gap: 1em;
}

/* Fix for group section labels */
.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
    min-width: 75px;
    flex-basis: unset;
    margin: unset;
}

/* Alternative mobile group section card */
.layout-mobile .itemDetailsGroup {
    background: var(--secondary-background-color) !important;
    padding: 15px 20px 5px 20px !important;
    border-radius: var(--rounded-cards) !important;
}

/* Add card around description */
.layout-desktop .detailSectionContent {
    background: var(--secondary-background-color) !important;
    border-radius: var(--rounded-cards) !important;
    padding: 40px 20px 10px 20px !important;
    margin-top: 50px !important;
}
.layout-mobile .detailSectionContent {
    background: var(--secondary-background-color) !important;
    border-radius: var(--rounded-cards) !important;
    padding: 10px 20px !important;
}

/* Add card around track selection */
.trackSelections {
    background: var(--secondary-background-color) !important;
    border-radius: var(--rounded-cards) !important;
    padding: 10px 20px !important;
    margin-top: 20px !important;
}

/* Fix for track select dropdowns */
.trackSelections .selectContainer .detailTrackSelect {
    padding: 0 10px;
}

/* Re-position title */
.layout-desktop .infoWrapper {
    margin-top: 245px !important;
    margin-left: 20.4vw !important;
}
.layout-desktop .detailPagePrimaryContainer {
    padding-left: 3.3% !important;
}
.layout-desktop .nameContainer {
    position: absolute !important;
    margin-top: -55px !important;
}
.layout-desktop .itemMiscInfo {
    position: absolute !important;
    margin-left: 21px !important;
    margin-top: 16px !important;
}

/* Move description box */
.layout-desktop .detailPagePrimaryContent {
    padding-left: 20.4vw !important;
}
/* Padding for 2:3 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .portraitCard) .detailPagePrimaryContent {
    min-height: 29vw !important;
}
/* Padding for 1:1 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .squareCard) .detailPagePrimaryContent {
    min-height: 20vw !important;
} 
/* Padding for 16:9 posters */
.layout-desktop .detailPageWrapperContainer:has(.detailImageContainer .backdropCard) .detailPagePrimaryContent {
    min-height: 12vw !important;
}

/* Move track selection box */
.detailSection {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
.detailSection .detailSectionContent {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}
.detailSection .recordingFields {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
.detailSection .trackSelections {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
.detailSection .itemDetailsGroup {
    -webkit-box-ordinal-group: 4;
    -moz-box-ordinal-group: 4;
    box-ordinal-group: 4;
}
/* Move episode title */
.layout-desktop .nameContainer {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
}
.layout-desktop .nameContainer .parentName {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}
.layout-desktop .nameContainer .itemName {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    margin: 0.45em 0 0 0 !important;
}
/* Modify play button */
.layout-desktop .mainDetailButtons .btnPlay::after {
    content: "Play" !important;
}
.layout-desktop .mainDetailButtons .btnPlay {
    position: relative !important;
    margin-right: -85px !important;
    padding-right: 20px !important;
    right: 110px !important;
    background: var(--primary-accent-color) !important;
    border-radius: 100px !important;
    color: var(--secondary-background-color) !important;
}
.layout-desktop .mainDetailButtons .detailButton {
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
}



/* Live TV */
/* Modified background color of active guide cells */
.programCell-active {
    background: var(--secondary-background-color) !important;
}
/* Repositioned record button */
.recordingFields {
    margin: 5px 0 -7px 0 !important;
}
.recordingButton {
    height: 40px !important;
}
.recordingIcon {
    color: red !important;
}
/* Remove overlapping text */
.itemMiscInfo.itemMiscInfo-secondary {
    margin-left: 65px !important;
}



/* Music Player */
.layout-desktop .appfooter {
    margin-left: 250px !important;
}
.layout-desktop .appfooter .nowPlayingBarInfoContainer {
    margin-left: 10px !important;
}
.layout-desktop .volumeOsd {
    border-radius: var(--rounded-cards) !important;
    background: var(--secondary-background-transparent) !important;
}
.layout-desktop .nameContainer .musicParentName {
    margin-top: 18px !important;
    margin-right: 22px !important;
}
.layout-desktop .appfooter .nowPlayingBar {
    margin-top: 20px !important;
}
.layout-desktop .appfooter .nowPlayingBar .nowPlayingBarPositionContainer {
    top: -15px !important;
}



/* Fix for scaling issues */
@media (width: 1600px) {
    .layout-desktop .headerRight {
        margin-bottom: 0 !important;
    }
    .layout-desktop .emby-button-foreground {
        top: -4px !important;
    }
}
@media (max-width: 1599px) {
    .layout-desktop .pageTitleWithLogo {
        margin-left: 25px !important;
    }
    .layout-desktop .headerTabs {
        margin-top: -65px !important;
    }
    .layout-desktop .headerRight {
        margin-right: 15px !important;
    }
    .layout-desktop .sectionTabs {
        width: auto !important;
        align-self: center !important;
    }
    .layout-desktop .emby-button-foreground {
        top: -2px !important;
    }
}



/* Fixes for TV Layout */
.layout-tv .sectionTabs {
    width: auto !important;
}
.layout-tv .headerLeft {
    padding: 5px !important;
}



/* Login page */
.layout-desktop #loginPage {
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
    background: var(--secondary-background-color) !important;
    width: 400px !important;
    border-radius: 25px !important;
    padding: 50px !important;
}
.layout-desktop #loginPage .manualLoginForm .btnCancel {
    position: absolute !important;
    background: none !important;
    width: 100px !important;
    margin-left: -10px !important;
    margin-top: 70px !important;
    text-align: left !important;
}
.layout-desktop #loginPage .visualLoginForm {
    position: relative !important;
    background: var(--secondary-background-color) !important;
    z-index: 1000 !important;
}
.layout-desktop #loginPage .btnForgotPassword {
    background: none !important;
    font-weight: normal !important;
    width: 150px !important;
    text-align: right !important;
    position: absolute !important;
    margin-left: 255px !important;
    margin-top: -195px !important;
    font-size: smaller !important;
    color: rgba(255, 255, 255, 0.5) !important;
    z-index: 1 !important;
}
.layout-desktop #loginPage .loginDisclaimerContainer {
    top: 130px !important;
    position: relative !important;
    left: -50px !important;
    width: 500px !important;
    margin-top: -35px !important;
}
.layout-desktop #loginPage .squareCard {
    width: 25% !important;
    font-size: smaller !important;
}
@media (max-width: 100em) {
    .layout-desktop #loginPage .squareCard {
        width: 20% !important;
    }
    .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
        width: 600px !important;
    }
    .layout-desktop #loginPage .btnForgotPassword {
        margin-left: 450px !important;
    }
    .layout-desktop #loginPage .disclaimerContainer {
        width: 700px !important;
    }
}
@media (max-width: 87.5em) {
    .layout-desktop #loginPage .squareCard {
        width: 20% !important;
    }
}
@media (max-width: 75em) {
    .layout-desktop #loginPage .squareCard {
        width: 20% !important;
    }
}
@media (max-width: 43.75em) {
    .layout-desktop #loginPage .squareCard {
        width: 20% !important;
    }
}



/* Dialog box */
.dialog {
    background-color: var(--secondary-background-color) !important;
}
.actionSheetTitle {
    margin: 10px 20px !important;
}