2024-05-14, 12:42 AM
Hello everyone,
After a recent DNS server change, my CSS has stopped functioning correctly. On the dashboard and general settings pages, the menu on the left is right, but the container for the settings is being placed at the top of the page with only a sliver of the container being visible. I was hoping someone would look at my CSS and see if they can find the issue.
Thanks in advance!
/*Top menu transparency*/
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {background:none; background-color:rgba(0, 0, 0, 0);}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {background:none; background-color:rgba(0, 0, 0, 0);}
/*Adjust both "size-adjust" and "size" to modify size*/
.headerTabs.sectionTabs {text-size-adjust: 110%; font-size: 110%;}
.pageTitle {margin-top: auto; margin-bottom: auto;}
.emby-tab-button {padding: 1.75em 1.7em;}
/*New progress bar*/
#indexPage .innerCardFooterClear,
#itemDetailPage .innerCardFooterClear {
background-color: transparent !important;
box-shadow: none;
}
#indexPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground,
#indexPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
border-radius: .5em;
}
#indexPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground {
background-color: rgba(39, 157, 245, 0.
!important;
}
#indexPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
height: 6px;
background: rgba(0,0,0,0.4);
margin: .5em .8em;
}
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css");
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
body, h1, h2, h3, h4 {
font-family: 'Quicksand', sans-serif;
}
/*Banner transparency*/
#dashboardPage,
#dashboardGeneralPage,
#userProfilesPage,
#devicesPage,
#serverActivityPage,
#liveTvStatusPage,
#liveTvSettingsPage,
#networkingPage,
#apiKeysPage,
#logPage,
#notificationSettingsPage,
#scheduledTasksPage,
#itemDetailPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
overflow: scroll;
}
@media all and (min-width: 100em){
#indexPage,
#moviesPage,
#tvRecommendedPage,
#musicRecommendedPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px);
overflow: scroll;
}
#encodingSettingsPage,
#mediaLibraryPage,
#dlnaSettingsPage,
#pluginsPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
overflow: scroll;
}
}
@media all and (max-width: 100em){
#indexPage,
#moviesPage,
#tvRecommendedPage,
#encodingSettingsPage,
#mediaLibraryPage,
#dlnaSettingsPage,
#pluginsPage,
#musicRecommendedPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 135px);
overflow: scroll;
margin-top: 30px;
}
}
@media all and (max-width: 100em){
#indexPage,
#moviesPage,
#tvRecommendedPage,
#encodingSettingsPage,
#mediaLibraryPage,
#dlnaSettingsPage,
#pluginsPage,
#musicRecommendedPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
overflow: scroll;
margin-top: 20px;
}
}
/*Library Page - remove vertical alpha Picker*/
div.alphaPickerRow-vertical {display: none !important;}
/*Library (Folders) - Remove Shuffle and play all buttons*/
.btnPlay.button-flat {display: none;}
.btnShuffle.button-flat {display: none;}
/*Item Page - resize Subtitle bar*/
.trackSelections {max-width: 22em;}
/*Item Page - simplify Item page*/
.detailPagePrimaryContainer {background: rgba(0, 0, 0, 0) !important; margin-top: 0 !important;}
.itemBackdrop::after {background-color: rgba(0, 0, 0, 0) !important; background: none;}
.itemBackdrop {height: 0; background-image: none !important;}
.detailPageWrapperContainer {margin-top: 30vh;}
.detailButtonHideonMobile {display: inline !important;}
.detailFloatingButton {display: none !important;}
/*.detailLogo {display: none;}*/
/*Universal - Rounded corners and square hover buttons*/
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardOverlayButton-hover,
.cardOverlayContainer,
.cardImageContainer,
.cardPadder,
.listItemImage,
.listItemImageButton,
.listItemButton,
.headerButton,
.paper-icon-button-light,
.innerCardFooter,
.blurhash-canvas,
.actionSheetMenuItem:hover,
.dialog
{border-radius: 10px !important;}
.cardContent-button,
.itemDetailImage {
border-radius: 1em;
}
/* Narrow the login form */
#loginPage .readOnlyContent,
#loginPage form {
max-width: 22em;
}
/* Hide "please login" text, margin is to prevent login form moving too far up */
#loginPage h1 {
display: none;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
margin-top: 50px;
}
/* Hide "manual" and "forgot" buttons */
#loginPage .raised.cancel.block.btnManual.emby-button {
display: none;
}
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
display: none;
}
/* Size episode preview images in a more compact way */
.listItemImage.listItemImage-large.itemAction.lazy {
height: 110px;
}
.listItem-content {
height: 115px;
}
.secondary.listItem-overview.listItemBodyText {
height: 61px;
margin: 0;
}
#castContent .card.overflowPortraitCard {
width: 4.2cm;
font-size: 90%;
}
#castContent .personCard {
width: auto;
}
#castContent .personCard .cardBox {
margin-bottom: 0px;
margin-right: 0px;
}
#castContent {
flex-wrap: wrap;
max-height: 9.75em;
}
div.personCard > :first-child > :first-child {
display: none;
}
.itemDetailPage .cardText {
text-align: left;
}
.itemDetailPage .textActionButton {
text-align: left;
}
/*Tweak entry fields*/
.selectContainer {margin-right: 1em !important;}
.emby-input, .emby-textarea, .emby-select-withcolor
{background: rgba(0, 0, 0, 0.4); border: 0.01em solid rgba(255, 255, 255, 0.22); border-radius: 6px;}
.emby-input:focus, .emby-textarea;focus, .emby-select-withcolor:focus
{background: rgba(0, 0, 0, 0.; border: 0.01em solid #00a4dcc2 !important;}
/*Make the red checkmark and likes blue like everything else*/
.playstatebutton-icon-played, .ratingbutton-icon-withrating {color: #00a4dc;}
/*Library Page - Make watched icon dark and transparent*/
.playedIndicator {background: #00000058;}
/*Library Page - Make Collection count icon dark and transparent*/
.countIndicator {background: #00000058;}
/*Library Page - Movie Versions icon dark and transparent*/
.mediaSourceIndicator {background: #00000058;}
/*Fix weird shevron off centering*/
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
padding-top:0em;
}
.sectionTitle {
margin-left: .4em !important;
margin-top: .2em !important;
margin-bottom: .2em !important;
}
.sectionTitleTextButton > .material-icons {
margin: 0;
}
.layout-mobile .sectionTitleTextButton > .material-icons {
padding-top: .2em;
}
/*Fix the UI shifting around*/
.nowPlayingBarCurrentTime {
width: 6em;
}
.osdTextContainer {
margin: 0 !important;
margin-top: 0.2em !important;
padding-left: 0.5em !important;
padding-right: 0.5em !important;
}
/*Fix top right user icon when using a profile image*/
.headerUserButtonRound {
border-radius: 50px !important;
}
/*Hover background for buttons*/
.button-flat:hover {
background: rgba(0,0,0,0.4);
}
.button-flat {
padding: .5em !important;
margin: .2em !important;
}
/*Some themeing for the dashboard*/
#user_usage_report_table,
.detailTable {
background: rgba(0,0,0,.5);
border-radius: .5em;
}
.detailTableBodyRow-shaded {
background: #0000 !important;
}
.infoBanner {
background: #101010;
}
.navMenuOptionText {
margin-top: 0;
}
.backgroundProgress > div {
background-color: #0000;
}
.visualCardBox, .cardImageContainer {
box-shadow: none;
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
background: rgba(120, 120, 120, 0.6);
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
background: white;
}
.dashboardSection h3 {
margin-left: 0.5em;
}
.sessionCardFooter {
border: none;
}
.paperList,
.visualCardBox {
background-color: rgba(0, 0, 0, 0.5);
}
.listItem-border {
border-color: rgba(255, 255, 255, 0) !important;
}
fieldset {
border: 1px solid rgba(40, 40, 40, 0.;
border-radius: 0.4em;
}
/*Enlarge button row on item page, even more on mobile*/
.mainDetailButtons {
font-size: 120%;
}
/*Tweak entry field padding and alignment/sizes*/
.emby-input,
.emby-textarea {
padding: .4em .55em;
}
.emby-select {
padding: .35em 1.9em .35em .35em;
}
.selectArrow {
margin-top: 1.05em;
}
/*Fix weird shevron off centering*/
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
padding-top:0em;
}
.sectionTitle {
margin-left: .4em !important;
margin-top: .2em !important;
margin-bottom: .2em !important;
}
.sectionTitleTextButton > .material-icons {
margin: 0;
}
.layout-mobile .sectionTitleTextButton > .material-icons {
padding-top: .2em;
}
/*Fix the UI shifting around*/
.nowPlayingBarCurrentTime {
width: 6em;
}
.osdTextContainer {
margin: 0 !important;
margin-top: 0.2em !important;
padding-left: 0.5em !important;
padding-right: 0.5em !important;
}
/*Fix top right user icon when using a profile image*/
.headerUserButtonRound {
border-radius: 50px !important;
}
/*Improve some menu alignments*/
.navMenuOptionText {
margin-top: 0;
}
.formDialogHeaderTitle {
margin-left: 1em;
}
.formDialogContent {
margin-bottom: 6.2em;
}
.dialogContentInner {
padding: .5em 1em 1em;
padding-right: 1em;
padding-left: 1em;
}
.listItem-indexnumberleft {
margin: 1em;
}
.listItem {
padding-left: 1em;
}
/*Theme some dialogue
.dialog {background-color: rgba(0, 0, 0, 0.9);}
.actionSheetMenuItem:hover {background-color: rgba(39, 157, 245, 0.4);}
.mainDrawer {background-color: rgba(0, 0, 0, 0.9);}
.navMenuOption:hover {background: rgba(39, 157, 245, 0.4);}*/
After a recent DNS server change, my CSS has stopped functioning correctly. On the dashboard and general settings pages, the menu on the left is right, but the container for the settings is being placed at the top of the page with only a sliver of the container being visible. I was hoping someone would look at my CSS and see if they can find the issue.
Thanks in advance!
/*Top menu transparency*/
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {background:none; background-color:rgba(0, 0, 0, 0);}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {background:none; background-color:rgba(0, 0, 0, 0);}
/*Adjust both "size-adjust" and "size" to modify size*/
.headerTabs.sectionTabs {text-size-adjust: 110%; font-size: 110%;}
.pageTitle {margin-top: auto; margin-bottom: auto;}
.emby-tab-button {padding: 1.75em 1.7em;}
/*New progress bar*/
#indexPage .innerCardFooterClear,
#itemDetailPage .innerCardFooterClear {
background-color: transparent !important;
box-shadow: none;
}
#indexPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground,
#indexPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
border-radius: .5em;
}
#indexPage .itemProgressBarForeground,
#itemDetailPage .itemProgressBarForeground {
background-color: rgba(39, 157, 245, 0.
!important;}
#indexPage .itemProgressBar,
#itemDetailPage .itemProgressBar {
height: 6px;
background: rgba(0,0,0,0.4);
margin: .5em .8em;
}
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css");
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
body, h1, h2, h3, h4 {
font-family: 'Quicksand', sans-serif;
}
/*Banner transparency*/
#dashboardPage,
#dashboardGeneralPage,
#userProfilesPage,
#devicesPage,
#serverActivityPage,
#liveTvStatusPage,
#liveTvSettingsPage,
#networkingPage,
#apiKeysPage,
#logPage,
#notificationSettingsPage,
#scheduledTasksPage,
#itemDetailPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
overflow: scroll;
}
@media all and (min-width: 100em){
#indexPage,
#moviesPage,
#tvRecommendedPage,
#musicRecommendedPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px);
overflow: scroll;
}
#encodingSettingsPage,
#mediaLibraryPage,
#dlnaSettingsPage,
#pluginsPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
overflow: scroll;
}
}
@media all and (max-width: 100em){
#indexPage,
#moviesPage,
#tvRecommendedPage,
#encodingSettingsPage,
#mediaLibraryPage,
#dlnaSettingsPage,
#pluginsPage,
#musicRecommendedPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 135px);
overflow: scroll;
margin-top: 30px;
}
}
@media all and (max-width: 100em){
#indexPage,
#moviesPage,
#tvRecommendedPage,
#encodingSettingsPage,
#mediaLibraryPage,
#dlnaSettingsPage,
#pluginsPage,
#musicRecommendedPage {
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
overflow: scroll;
margin-top: 20px;
}
}
/*Library Page - remove vertical alpha Picker*/
div.alphaPickerRow-vertical {display: none !important;}
/*Library (Folders) - Remove Shuffle and play all buttons*/
.btnPlay.button-flat {display: none;}
.btnShuffle.button-flat {display: none;}
/*Item Page - resize Subtitle bar*/
.trackSelections {max-width: 22em;}
/*Item Page - simplify Item page*/
.detailPagePrimaryContainer {background: rgba(0, 0, 0, 0) !important; margin-top: 0 !important;}
.itemBackdrop::after {background-color: rgba(0, 0, 0, 0) !important; background: none;}
.itemBackdrop {height: 0; background-image: none !important;}
.detailPageWrapperContainer {margin-top: 30vh;}
.detailButtonHideonMobile {display: inline !important;}
.detailFloatingButton {display: none !important;}
/*.detailLogo {display: none;}*/
/*Universal - Rounded corners and square hover buttons*/
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardOverlayButton-hover,
.cardOverlayContainer,
.cardImageContainer,
.cardPadder,
.listItemImage,
.listItemImageButton,
.listItemButton,
.headerButton,
.paper-icon-button-light,
.innerCardFooter,
.blurhash-canvas,
.actionSheetMenuItem:hover,
.dialog
{border-radius: 10px !important;}
.cardContent-button,
.itemDetailImage {
border-radius: 1em;
}
/* Narrow the login form */
#loginPage .readOnlyContent,
#loginPage form {
max-width: 22em;
}
/* Hide "please login" text, margin is to prevent login form moving too far up */
#loginPage h1 {
display: none;
}
#loginPage .padded-left.padded-right.padded-bottom-page {
margin-top: 50px;
}
/* Hide "manual" and "forgot" buttons */
#loginPage .raised.cancel.block.btnManual.emby-button {
display: none;
}
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
display: none;
}
/* Size episode preview images in a more compact way */
.listItemImage.listItemImage-large.itemAction.lazy {
height: 110px;
}
.listItem-content {
height: 115px;
}
.secondary.listItem-overview.listItemBodyText {
height: 61px;
margin: 0;
}
#castContent .card.overflowPortraitCard {
width: 4.2cm;
font-size: 90%;
}
#castContent .personCard {
width: auto;
}
#castContent .personCard .cardBox {
margin-bottom: 0px;
margin-right: 0px;
}
#castContent {
flex-wrap: wrap;
max-height: 9.75em;
}
div.personCard > :first-child > :first-child {
display: none;
}
.itemDetailPage .cardText {
text-align: left;
}
.itemDetailPage .textActionButton {
text-align: left;
}
/*Tweak entry fields*/
.selectContainer {margin-right: 1em !important;}
.emby-input, .emby-textarea, .emby-select-withcolor
{background: rgba(0, 0, 0, 0.4); border: 0.01em solid rgba(255, 255, 255, 0.22); border-radius: 6px;}
.emby-input:focus, .emby-textarea;focus, .emby-select-withcolor:focus
{background: rgba(0, 0, 0, 0.
; border: 0.01em solid #00a4dcc2 !important;}/*Make the red checkmark and likes blue like everything else*/
.playstatebutton-icon-played, .ratingbutton-icon-withrating {color: #00a4dc;}
/*Library Page - Make watched icon dark and transparent*/
.playedIndicator {background: #00000058;}
/*Library Page - Make Collection count icon dark and transparent*/
.countIndicator {background: #00000058;}
/*Library Page - Movie Versions icon dark and transparent*/
.mediaSourceIndicator {background: #00000058;}
/*Fix weird shevron off centering*/
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
padding-top:0em;
}
.sectionTitle {
margin-left: .4em !important;
margin-top: .2em !important;
margin-bottom: .2em !important;
}
.sectionTitleTextButton > .material-icons {
margin: 0;
}
.layout-mobile .sectionTitleTextButton > .material-icons {
padding-top: .2em;
}
/*Fix the UI shifting around*/
.nowPlayingBarCurrentTime {
width: 6em;
}
.osdTextContainer {
margin: 0 !important;
margin-top: 0.2em !important;
padding-left: 0.5em !important;
padding-right: 0.5em !important;
}
/*Fix top right user icon when using a profile image*/
.headerUserButtonRound {
border-radius: 50px !important;
}
/*Hover background for buttons*/
.button-flat:hover {
background: rgba(0,0,0,0.4);
}
.button-flat {
padding: .5em !important;
margin: .2em !important;
}
/*Some themeing for the dashboard*/
#user_usage_report_table,
.detailTable {
background: rgba(0,0,0,.5);
border-radius: .5em;
}
.detailTableBodyRow-shaded {
background: #0000 !important;
}
.infoBanner {
background: #101010;
}
.navMenuOptionText {
margin-top: 0;
}
.backgroundProgress > div {
background-color: #0000;
}
.visualCardBox, .cardImageContainer {
box-shadow: none;
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
background: rgba(120, 120, 120, 0.6);
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
background: white;
}
.dashboardSection h3 {
margin-left: 0.5em;
}
.sessionCardFooter {
border: none;
}
.paperList,
.visualCardBox {
background-color: rgba(0, 0, 0, 0.5);
}
.listItem-border {
border-color: rgba(255, 255, 255, 0) !important;
}
fieldset {
border: 1px solid rgba(40, 40, 40, 0.
; border-radius: 0.4em;
}
/*Enlarge button row on item page, even more on mobile*/
.mainDetailButtons {
font-size: 120%;
}
/*Tweak entry field padding and alignment/sizes*/
.emby-input,
.emby-textarea {
padding: .4em .55em;
}
.emby-select {
padding: .35em 1.9em .35em .35em;
}
.selectArrow {
margin-top: 1.05em;
}
/*Fix weird shevron off centering*/
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
padding-top:0em;
}
.sectionTitle {
margin-left: .4em !important;
margin-top: .2em !important;
margin-bottom: .2em !important;
}
.sectionTitleTextButton > .material-icons {
margin: 0;
}
.layout-mobile .sectionTitleTextButton > .material-icons {
padding-top: .2em;
}
/*Fix the UI shifting around*/
.nowPlayingBarCurrentTime {
width: 6em;
}
.osdTextContainer {
margin: 0 !important;
margin-top: 0.2em !important;
padding-left: 0.5em !important;
padding-right: 0.5em !important;
}
/*Fix top right user icon when using a profile image*/
.headerUserButtonRound {
border-radius: 50px !important;
}
/*Improve some menu alignments*/
.navMenuOptionText {
margin-top: 0;
}
.formDialogHeaderTitle {
margin-left: 1em;
}
.formDialogContent {
margin-bottom: 6.2em;
}
.dialogContentInner {
padding: .5em 1em 1em;
padding-right: 1em;
padding-left: 1em;
}
.listItem-indexnumberleft {
margin: 1em;
}
.listItem {
padding-left: 1em;
}
/*Theme some dialogue
.dialog {background-color: rgba(0, 0, 0, 0.9);}
.actionSheetMenuItem:hover {background-color: rgba(39, 157, 245, 0.4);}
.mainDrawer {background-color: rgba(0, 0, 0, 0.9);}
.navMenuOption:hover {background: rgba(39, 157, 245, 0.4);}*/