/* =========================================================
   GLOBAL
   ========================================================= */

:root {
  --glass-bg-hover: rgba(35, 52, 72, 0.72);
  --glass-border: rgba(150, 190, 220, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(210, 220, 230, 0.62);
}


/* =========================================================
   PAGE
   ========================================================= */

body {
  background: transparent !important;
}

#page_wrapper {
  background: transparent !important;
}

#inner_wrapper {
  background: transparent !important;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

#information-widgets {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.container {
  max-width: 1500px !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}


/* Hide Homepage refresh button */
#footer {
    display: none !important;
}

/* Fix the last service group to the bottom */
#layout-groups > div:last-child {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 32px !important;
    z-index: 50 !important;
}
/* =========================================================
   BACKGROUND
   ========================================================= */


/* =========================================================
   SERVICE ICON
   ========================================================= */

.service-icon {
  width: 38px !important;
  height: 38px !important;
}


/* =========================================================
   SERVICE TITLE
   ========================================================= */

.service-title {
  color: var(--text-primary) !important;
}

.service-description {
  color: var(--text-secondary) !important;
}


/* =========================================================
   WIDGET METRICS
   ========================================================= */

.service-container .text-2xl,
.service-container .text-xl {
  color: rgba(255, 255, 255, 0.85) !important;
}

.service-container .text-xs {
  color: rgba(210, 220, 230, 0.55) !important;
}


/* =========================================================
   STATUS DOT
   ========================================================= */

.service-container .status-dot {
  opacity: 0.8;
}


/* =========================================================
   REMOVE DEFAULT SECTION VISUALS
   ========================================================= */

h2 {
  margin-top: 0 !important;
}


/* =========================================================
   SPACING
   ========================================================= */

#information-widgets {
  margin-bottom: 0.6rem !important;
}

.group {
  margin-bottom: 0.6rem !important;
}


/* =========================================================
   TOP INFO WIDGETS
   ========================================================= */

#information-widgets > div {
  gap: 6px !important;
}

#information-widgets .information-widget {
  background: rgba(25, 40, 58, 0.65) !important;

  border: 1px solid rgba(150, 190, 220, 0.10) !important;

  border-radius: 7px !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .service-container {
    border-radius: 6px !important;
  }
}

[id^="grafana-homewidgets"] .service-card {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

[id^="grafana-homewidgets"] .service-block {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Remove the service title/header */
[id^="grafana-homewidgets"] .service-name,
[id^="grafana-homewidgets"] .service-title,
[id^="grafana-homewidgets"] .service-block > div:first-child {
    display: none !important;
}

#information-widgets {
    margin-bottom: 0 !important;
}

#layout-groups {
    margin-top: 0 !important;
}