:root {
  --findmedia-bg-url: url("findmedia-plex-background-1.jpg");
  --findmedia-ink: #f6fbff;
  --findmedia-muted: #9fb4c4;
  --findmedia-panel: rgba(8, 17, 25, 0.82);
  --findmedia-panel-solid: #0b141d;
  --findmedia-line: rgba(141, 211, 255, 0.22);
  --findmedia-accent: #62d2fa;
  --findmedia-green: #7ee0b2;
  --findmedia-amber: #f5c86a;
}

html,
body,
body.mat-typography {
  background:
    linear-gradient(180deg, rgba(4, 10, 15, 0.38), rgba(6, 12, 18, 0.74)),
    var(--findmedia-bg-url) center center / cover fixed !important;
  color: var(--findmedia-ink);
}

body.findmedia-skin::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 12, 18, 0.12), rgba(5, 12, 18, 0.36)),
    var(--findmedia-bg-url) center center / cover fixed;
  filter: saturate(1.04) contrast(1.04);
  opacity: 0.9;
  transform: none;
}

ombi-image-background .bg {
  background-image:
    linear-gradient(90deg, rgba(3, 8, 12, 0.36) 0%, rgba(3, 8, 12, 0.22) 42%, rgba(3, 8, 12, 0.12) 100%),
    var(--findmedia-bg-url) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: saturate(1.06) contrast(1.04);
}

ombi-image-background .login-gradient-bar {
  background:
    linear-gradient(90deg, rgba(3, 8, 12, 0.2), rgba(4, 12, 18, 0.16) 54%, rgba(4, 12, 18, 0.08)) !important;
}

ombi-image-background .poster-desc {
  display: none !important;
}

.custom-background,
.mat-drawer-container,
.mat-sidenav-content,
.mat-drawer-content {
  background: transparent !important;
}

.sidenav,
.mat-drawer,
.mat-sidenav,
mat-sidenav {
  background: rgba(11, 20, 29, 0.92) !important;
  border-right: 1px solid var(--findmedia-line) !important;
  box-shadow: 10px 0 34px rgba(0, 0, 0, 0.24);
}

.mat-card,
.p-card,
.request-card,
.media-card,
.card,
.mat-dialog-container,
.p-dialog,
.p-dialog-content {
  background: rgba(8, 17, 25, 0.68) !important;
  border: 1px solid rgba(141, 211, 255, 0.14) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(14px);
}

.mat-toolbar,
.p-toolbar,
.top-bar,
.navbar,
.main-toolbar {
  background: rgba(8, 17, 25, 0.58) !important;
  border-bottom: 1px solid rgba(141, 211, 255, 0.13) !important;
  backdrop-filter: blur(16px);
}

.mat-button-toggle-checked,
.mat-raised-button.mat-primary,
.mat-flat-button.mat-primary,
.p-button,
.btn-primary {
  background: var(--findmedia-accent) !important;
  color: #051019 !important;
}

.mat-stroked-button,
.mat-button-toggle,
.discover-filter-buttons-group,
.p-inputtext,
input,
select,
textarea,
.mat-form-field-appearance-outline .mat-form-field-outline {
  border-color: rgba(141, 211, 255, 0.25) !important;
}

.p-inputtext,
input,
select,
textarea,
.form-control {
  background: rgba(5, 12, 18, 0.7) !important;
  color: var(--findmedia-ink) !important;
}

input::placeholder,
textarea::placeholder,
.mat-input-element::placeholder {
  color: rgba(226, 240, 249, 0.68) !important;
  opacity: 1 !important;
}

.mat-checkbox-frame,
input[type="checkbox"] {
  border-color: rgba(226, 240, 249, 0.72) !important;
}

.mat-checkbox-label,
label {
  color: rgba(246, 251, 255, 0.9) !important;
}

.mat-card-title,
h1,
h2,
h3 {
  color: var(--findmedia-ink) !important;
}

a,
.mat-button,
.mat-icon,
.nav-link.active,
.active-link {
  color: var(--findmedia-accent) !important;
}

.badge-success,
.success,
.available,
.p-tag-success {
  color: #052015 !important;
  background: var(--findmedia-green) !important;
}

.badge-warning,
.warning,
.p-tag-warning {
  color: #241807 !important;
  background: var(--findmedia-amber) !important;
}

.poster,
.poster-card,
ombi-image img,
img[src*="poster"],
img[src*="Poster"] {
  border-radius: 6px !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
}

@media (max-width: 720px) {
  body.findmedia-skin::before {
    opacity: 0.78;
  }

  ombi-image-background .bg {
    background-position: 62% center !important;
  }
}