/* ==========================================
   Panel Overlay Utility Classes
   NOFCC Design System
========================================== */
/* ==========================================
   Effects
========================================== */
.panel-glass,
.is-style-panel-glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.panel-soft-shadow,
.is-style-panel-soft-shadow {
    box-shadow:
        0 12px 36px rgba(0,0,0,.08),
        0 2px 6px rgba(0,0,0,.04);
}
/* ==========================================
   No Panel / Transparent
========================================== */
.panel-none,
.is-style-panel-none {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* ==========================================
   White Panels
========================================== */
.panel-white-90,
.is-style-panel-white-90 { background: rgba(255,255,255,.90); }
.panel-white-80,
.is-style-panel-white-80 { background: rgba(255,255,255,.80); }
.panel-white-70,
.is-style-panel-white-70 { background: rgba(255,255,255,.70); }
.panel-white-60,
.is-style-panel-white-60 { background: rgba(255,255,255,.60); }
.panel-white-50,
.is-style-panel-white-50 { background: rgba(255,255,255,.50); }
.panel-white-40,
.is-style-panel-white-40 { background: rgba(255,255,255,.40); }
.panel-white-30,
.is-style-panel-white-30 { background: rgba(255,255,255,.30); }
/* ==========================================
   Blue Panels
========================================== */
.panel-blue-90,
.is-style-panel-blue-90 { background: rgba(142,209,252,.90); }
.panel-blue-80,
.is-style-panel-blue-80 { background: rgba(142,209,252,.80); }
.panel-blue-70,
.is-style-panel-blue-70 { background: rgba(142,209,252,.70); }
.panel-blue-60,
.is-style-panel-blue-60 { background: rgba(142,209,252,.60); }
.panel-blue-50,
.is-style-panel-blue-50 { background: rgba(142,209,252,.50); }
.panel-blue-40,
.is-style-panel-blue-40 { background: rgba(142,209,252,.40); }
.panel-blue-30,
.is-style-panel-blue-30 { background: rgba(142,209,252,.30); }
/* ==========================================
   Gold Panels
========================================== */
.panel-gold-90,
.is-style-panel-gold-90 { background: rgba(255,243,207,.90); }
.panel-gold-80,
.is-style-panel-gold-80 { background: rgba(255,243,207,.80); }
.panel-gold-70,
.is-style-panel-gold-70 { background: rgba(255,243,207,.70); }
.panel-gold-60,
.is-style-panel-gold-60 { background: rgba(255,243,207,.60); }
.panel-gold-50,
.is-style-panel-gold-50 { background: rgba(255,243,207,.50); }
.panel-gold-40,
.is-style-panel-gold-40 { background: rgba(255,243,207,.40); }
.panel-gold-30,
.is-style-panel-gold-30 { background: rgba(255,243,207,.30); }
/* ==========================================
   Sage Panels
========================================== */
.panel-sage-90,
.is-style-panel-sage-90 { background: rgba(237,245,234,.90); }
.panel-sage-80,
.is-style-panel-sage-80 { background: rgba(237,245,234,.80); }
.panel-sage-70,
.is-style-panel-sage-70 { background: rgba(237,245,234,.70); }
.panel-sage-60,
.is-style-panel-sage-60 { background: rgba(237,245,234,.60); }
.panel-sage-50,
.is-style-panel-sage-50 { background: rgba(237,245,234,.50); }
.panel-sage-40,
.is-style-panel-sage-40 { background: rgba(237,245,234,.40); }
.panel-sage-30,
.is-style-panel-sage-30 { background: rgba(237,245,234,.30); }
/* ==========================================
   Rose Panels
========================================== */
.panel-rose-90,
.is-style-panel-rose-90 { background: rgba(251,231,233,.90); }
.panel-rose-80,
.is-style-panel-rose-80 { background: rgba(251,231,233,.80); }
.panel-rose-70,
.is-style-panel-rose-70 { background: rgba(251,231,233,.70); }
.panel-rose-60,
.is-style-panel-rose-60 { background: rgba(251,231,233,.60); }
.panel-rose-50,
.is-style-panel-rose-50 { background: rgba(251,231,233,.50); }
.panel-rose-40,
.is-style-panel-rose-40 { background: rgba(251,231,233,.40); }
.panel-rose-30,
.is-style-panel-rose-30 { background: rgba(251,231,233,.30); }
/* ==========================================
   Dark Panels
========================================== */
.panel-dark-90,
.panel-dark-80,
.panel-dark-70,
.panel-dark-60,
.panel-dark-50,
.panel-dark-40,
.panel-dark-30,
.is-style-panel-dark-90,
.is-style-panel-dark-80,
.is-style-panel-dark-70,
.is-style-panel-dark-60,
.is-style-panel-dark-50,
.is-style-panel-dark-40,
.is-style-panel-dark-30 {
    color: #fff;
}
.panel-dark-90,
.is-style-panel-dark-90 { background: rgba(31,41,55,.90); }
.panel-dark-80,
.is-style-panel-dark-80 { background: rgba(31,41,55,.80); }
.panel-dark-70,
.is-style-panel-dark-70 { background: rgba(31,41,55,.70); }
.panel-dark-60,
.is-style-panel-dark-60 { background: rgba(31,41,55,.60); }
.panel-dark-50,
.is-style-panel-dark-50 { background: rgba(31,41,55,.50); }
.panel-dark-40,
.is-style-panel-dark-40 { background: rgba(31,41,55,.40); }
.panel-dark-30,
.is-style-panel-dark-30 { background: rgba(31,41,55,.30); }
/* Dark Panel Headings */
.panel-dark-90 h1,
.panel-dark-90 h2,
.panel-dark-90 h3,
.panel-dark-80 h1,
.panel-dark-80 h2,
.panel-dark-80 h3,
.panel-dark-70 h1,
.panel-dark-70 h2,
.panel-dark-70 h3,
.panel-dark-60 h1,
.panel-dark-60 h2,
.panel-dark-60 h3,
.panel-dark-50 h1,
.panel-dark-50 h2,
.panel-dark-50 h3,
.panel-dark-40 h1,
.panel-dark-40 h2,
.panel-dark-40 h3,
.panel-dark-30 h1,
.panel-dark-30 h2,
.panel-dark-30 h3,
.is-style-panel-dark-90 h1,
.is-style-panel-dark-90 h2,
.is-style-panel-dark-90 h3,
.is-style-panel-dark-80 h1,
.is-style-panel-dark-80 h2,
.is-style-panel-dark-80 h3,
.is-style-panel-dark-70 h1,
.is-style-panel-dark-70 h2,
.is-style-panel-dark-70 h3,
.is-style-panel-dark-60 h1,
.is-style-panel-dark-60 h2,
.is-style-panel-dark-60 h3,
.is-style-panel-dark-50 h1,
.is-style-panel-dark-50 h2,
.is-style-panel-dark-50 h3,
.is-style-panel-dark-40 h1,
.is-style-panel-dark-40 h2,
.is-style-panel-dark-40 h3,
.is-style-panel-dark-30 h1,
.is-style-panel-dark-30 h2,
.is-style-panel-dark-30 h3 {
    color: #fff;
}