/* Homarr-inspired Homepage layout. Original configuration is in the dated backup. */
:root { color-scheme: dark; }
body, #page_wrapper { background: #242424 !important; color: #c6c8ce; }
#inner_wrapper > div:first-child { max-width: none !important; width:100%; padding:0 12px; display:grid !important; grid-template-columns:minmax(300px,28fr) minmax(280px,44fr) minmax(300px,28fr); grid-template-rows:60px 180px 100px auto auto auto; gap:10px; align-items:start; }
#inner_wrapper > div:first-child::before { content:""; display:block; grid-column:2; grid-row:2 / 6; align-self:stretch; min-height:calc(100vh - 80px); background:#17221c var(--homarr-artwork) center top / 100% auto no-repeat; }
#information-widgets, #widgets-wrap, #information-widgets-right, #layout-groups { display:contents !important; }
.information-widget-logo { grid-column:1; grid-row:1; display:flex !important; flex-direction:row !important; align-items:center; gap:8px; }
.information-widget-logo::after { content:"Richards Homepage"; font-size:19px; font-weight:700; }
.information-widget-logo img { width:28px !important; height:28px !important; }
.information-widget-search { grid-column:2; grid-row:1; width:100%; max-width:440px; justify-self:center; }
.information-widget-datetime { grid-column:3; grid-row:3; border:1px solid #454545; border-radius:3px; background:#2c2c2c; min-height:100px; width:100%; padding:18px; text-align:center; }
.information-widget-datetime > div { justify-content:center !important; }
.information-widget-datetime span { font-size:17px !important; }
.information-widget-openweathermap { grid-column:3; grid-row:2; border:1px solid #66528b; border-radius:3px; background:#2c2c2c; width:100%; height:180px; padding:18px; }
.information-widget-openweathermap::before { content:"Weather"; font-size:13px; font-weight:600; margin-bottom:25px; }
.information-widget-openweathermap .widget-inner { justify-content:center !important; }
.information-widget-openweathermap .widget-inner-icon { transform:scale(1.3); margin-right:12px; }
#widgets-wrap > .widget-container:not(.information-widget-logo) { grid-column:1 / 4; grid-row:6; justify-self:end; }
#layout-groups > .services-group:first-child { grid-column:1; grid-row:2 / 5; }
#layout-groups > .services-group:nth-child(2) { grid-column:3; grid-row:4 / 6; }
.services-group { min-width:0; width:100% !important; padding:0 !important; flex-basis:auto !important; }
.services-group .services-group { border:1px solid #404040; border-radius:3px; padding:6px !important; margin-bottom:8px; background:#2b2b2b; }
.service-group-name { font-size:13px !important; font-weight:600 !important; color:#c2c6cf !important; }
.services-list { gap:10px !important; margin-top:6px !important; }
#layout-groups > .services-group:first-child .services-list, #layout-groups > .services-group:nth-child(2) .services-group:has(.service[data-name="Portainer"]) .services-list { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.service-card { background:#2d2d2d !important; border:1px solid #404040; box-shadow:none !important; border-radius:3px !important; }
#layout-groups > .services-group:first-child .service-card, #layout-groups > .services-group:nth-child(2) .services-group:has(.service[data-name="Portainer"]) .service-card { height:90px; margin:0 !important; padding:5px !important; }
#layout-groups > .services-group:first-child .service-title, #layout-groups > .services-group:nth-child(2) .services-group:has(.service[data-name="Portainer"]) .service-title { flex-direction:column-reverse; align-items:center; height:100%; }
#layout-groups > .services-group:first-child .service-icon, #layout-groups > .services-group:nth-child(2) .services-group:has(.service[data-name="Portainer"]) .service-icon { width:100% !important; flex:1; }
#layout-groups > .services-group:first-child .service-icon img, #layout-groups > .services-group:nth-child(2) .services-group:has(.service[data-name="Portainer"]) .service-icon img { width:48px !important; height:48px !important; }
#layout-groups > .services-group:first-child .service-title-text, #layout-groups > .services-group:nth-child(2) .services-group:has(.service[data-name="Portainer"]) .service-title-text { flex:none; max-width:100%; width:100%; }
#layout-groups > .services-group:first-child .service-name, #layout-groups > .services-group:nth-child(2) .services-group:has(.service[data-name="Portainer"]) .service-name { padding:0 !important; font-size:11px !important; font-weight:600; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#layout-groups > .services-group:first-child .service-description, #layout-groups > .services-group:nth-child(2) .services-group:has(.service[data-name="Portainer"]) .service-description { display:none; }
.service-card:hover { background:#373737 !important; border-color:#75638e; }
.service-card:focus-within { outline:2px solid #927bbb; outline-offset:2px; }
#bookmarks { grid-column:1; grid-row:5; margin:0 !important; display:flex; flex-direction:column; gap:8px; width:100%; }
.bookmark-group { width:100% !important; flex-basis:100% !important; padding:6px !important; border:1px solid #404040; background:#2b2b2b; border-radius:3px; }
.bookmark-group h2 { font-size:13px !important; }
#footer { grid-column:1 / 4; grid-row:7; padding:12px !important; }
@media(min-width:1800px) { #inner_wrapper > div:first-child { grid-template-columns:minmax(380px,28fr) minmax(400px,44fr) minmax(360px,28fr); } }
@media(max-width:1000px) { #inner_wrapper > div:first-child { grid-template-columns:minmax(260px,1fr) minmax(280px,1fr); grid-template-rows:60px 180px 100px auto auto auto; } #inner_wrapper > div:first-child::before { display:none; } .information-widget-search { grid-column:2; } .information-widget-openweathermap, .information-widget-datetime, #layout-groups > .services-group:nth-child(2) { grid-column:2; } #widgets-wrap > .widget-container:not(.information-widget-logo), #footer { grid-column:1 / 3; } }
@media(max-width:620px) { #inner_wrapper > div:first-child { display:flex !important; flex-direction:column; padding:10px; gap:12px; } .information-widget-logo, .information-widget-search, .information-widget-datetime, .information-widget-openweathermap { width:100%; } #layout-groups > .services-group, #bookmarks { width:100%; } #widgets-wrap > .widget-container:not(.information-widget-logo) { width:100%; } }
:root { --homarr-artwork: none; }
#layout-groups > .services-group > button { display:none; }

.service-icon img[src*="@mdi/"] { filter: invert(0.8); }

#layout-groups > .services-group > div > .services-list:empty { display:none; }