#
# LCARS Theme
# Color codes and font choice from https://www.thelcars.com
#     --thanks Jim Robertus!
# Custom themes can be created down at the bottom of this
# file. Or, search for "===THEMES", which will take you
# right there.
(DO NOT USE/MODIFY)=== LCARS Colors: &lcars-colors
  lcars-space-white: "#f5f6fa"
  lcars-violet-creme: "#ddbbff"
  lcars-green: "#33cc99"
  lcars-magenta: "#cc4499"
  lcars-blue: "#4455ff"
  lcars-yellow: "#ffcc33"
  lcars-violet: "#9944ff"
  lcars-orange: "#ff7700"
  lcars-african-violet: "#cc88ff"
  lcars-text-purple: "#cc77ff"
  lcars-red: "#dd4444"
  lcars-almond: "#ffaa90"
  lcars-almond-creme: "#ffbbaa"
  lcars-sunflower: "#ffcc66"
  lcars-bluey: "#7788ff"
  lcars-gray: "#666688"
  lcars-sky: "#aaaaff"
  lcars-ice: "#88ccff"
  lcars-gold: "#ffaa00"
  lcars-mars: "#ff2200"
  lcars-peach: "#ff8866"
  lcars-butterscotch: "#ff9966"
  lcars-tomato: "#ff5555"
  lcars-lilac: "#cc33ff"
  lcars-evening: "#2255ff"
  lcars-midnight: "#1111ee"
  lcars-ghost: "#88bbff"
  lcars-wheat: "#ccaa88"
  lcars-roseblush: "#cc6666"
  lcars-honey: "#ffcc99"
  lcars-cardinal: "#cc2233"
  lcars-pumpkinshade: "#ff7744"
  lcars-tangerine: "#ff8833"
  lcars-martian: "#99dd66"
  lcars-text-blue: "#2266ff"
  lcars-moonbeam: "#ccdeff"
  lcars-cool: "#5588ff"
  lcars-galaxy: "#444a77"
  lcars-moonshine: "#ddeeff"
  lcars-october-sunset: "#ff4400"
  lcars-harvestgold: "#ffaa44"
  lcars-butter: "#ffeecc"
  lcars-c43: "#5588ee"
  lcars-c44: "#88ffff"
  lcars-c45: "#344470"
  lcars-c46: "#455580"
  lcars-c47: "#7799dd"
  lcars-c48: "#66ccff"
  lcars-c49: "#99ccff"
  lcars-c50: "#ff3500"
  lcars-c51: "#552255"
  lcars-c52: "#663366"
  lcars-c53: "#774477"
  lcars-c54: "#885588"
  lcars-c55: "#996699"
  lcars-c56: "#ff8800"
  lcars-c57: "#d0b0a0"
  lcars-c58: "#bbbbff"
  lcars-c59: "#99aa66"
  lcars-c60: "#00bb00"
  lcars-c61: "#33ff33"
  lcars-c62: "#ddffdd"
  lcars-c63: "#ffebde"
  lcars-c64: "#cc99cc"
  lcars-c65: "#f6eef6"
  lcars-c66: "#aa66aa"
  lcars-c67: "#dd88dd"
  lcars-c68: "#ff0000"
  lcars-c69: "#cc0000"
  lcars-c70: "#ee0000"
  lcars-c71: "#dfdfdf"
  lcars-c72: "#f7f7f7"
  lcars-dunkelgrau: "#30374AFF"
  lcars-mittelgrau: "#656B83FF"
  lcars-hellgrau: "#9FA5BDFF"
  lcars-feuerrot: "#E7432AFF"
  lcars-mango: "#E5960C"
  lcars-lavender: "#cc88ff"
  lcars-error: "#ff2200"
  lcars-text-gray: "#d3d3d3"
  lcars-medium-gray: "#B6B6C1"
  lcars-dark-gray: "#3e3e3e"
  lcars-khaki: "#ffe399"
  lcars-cardassia-maroon: "#4f1a23"
  lcars-dark-red: "#360000"
  lcars-font: Antonio
  # MSD Colors:
  msd-bright: "#fff1ab"
  msd-medium: var(--lcars-yellow) ### "#ffcc33"
  msd-normal: var(--lcars-orange) ### "#ff7700"
  msd-dark: var(--lcars-october-sunset) ### "#ff4400"
  msd-ra-bright: "#dca29e"
  msd-ra-medium: "#e97369"
  msd-ra-normal: "#ff1100"
  msd-ra-dark: "#7f0800"
  lcars-sound: "true"

(DO NOT USE/MODIFY)=== Base customizations: &base # Global
  lovelace-background: black
  primary-color: black
  light-primary-color: var(--lcars-medium-gray)
  primary-background-color: black
  secondary-background-color: var(--lcars-card-button)
  divider-color: transparent
  accent-color: var(--lcars-orange)
  box-sizing: unset !important
  # Fonts
  font-family: "var(--lcars-font), Segoe UI Variable Static Text, Segoe UI, SegoeUI, -apple-system,BlinkMacSystemFont, system-ui, sans-serif"
  primary-font-family: var(--font-family)
  paper-font-common-base_-_font-family: var(--primary-font-family)
  paper-font-common-code_-_font-family: var(--primary-font-family)
  paper-font-body1_-_font-family: var(--primary-font-family)
  paper-font-subhead_-_font-family: var(--primary-font-family)
  paper-font-headline_-_font-family: var(--primary-font-family)
  paper-font-caption_-_font-family: var(--primary-font-family)
  paper-font-title_-_font-family: var(--primary-font-family)
  ha-card-header-font-family: var(--primary-font-family)
  # Text
  primary-text-color: var(--lcars-text-gray)
  secondary-text-color: var(--lcars-text-gray)
  text-primary-color: var(--lcars-text-gray)
  disabled-text-color: "#555"
  text-dark-color: black
  # Sidebar Menu
  sidebar-background-color: var(--lcars-ui-primary)
  sidebar-icon-color: black
  sidebar-text-color: black
  sidebar-selected-background-color: var(--lcars-ui-primary)
  sidebar-selected-icon-color: black
  sidebar-selected-text-color: black
  app-drawer-width: 75px
  # States and Badges
  state-icon-color: white
  state-icon-active-color: var(--lcars-text-gray)
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: white
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: black
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: black
  label-badge-red: rgba(255, 159, 9, 0.7)
  # Cards
  card-background-color: var(--secondary-background-color)
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 34px
  ha-card-background: var(--lcars-card-button);
  paper-card-background-color: var(--ha-card-background)
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"
  switch-checked-track-color: "#30d158"
  switch-checked-button-color: white
  # Other
  paper-dialog-background-color: rgba(55, 55, 55)
  paper-item-icon-color: var(--lcars-dark-gray)
  more-info-header-background: rgba(25, 25, 25)
  app-header-background-color: var(--lcars-ui-app-header-background-color, var(--lcars-ui-primary))
  # Custom
  mini-media-player-base-color: var(--lcars-text-gray)
  mini-media-player-icon-color: var(--lcars-text-gray)
  state-lock-unlocked-color: var(--lcars-dark-red)
  sidebar-menu-button-text-color: black
  mdc-typography-button-font-family: var(--lcars-font)
  mdc-typography-body2-font-family: var(--lcars-font)
  mdc-theme-primary: var(--lcars-text-gray)
  mdc-theme-secondary: var(--lcars-orange)
  round-slider-bar-color: var(--lcars-blue)
  app-header-edit-background-color: transparent
  switch-unchecked-track-color: var(--lcars-text-gray)
  switch-unchecked-button-color: var(--lcars-text-gray)
  header-height: 40px
  app-header-text-color: var(--lcars-ui-app-header-text-color, black)
  paper-tabs-selection-bar-color: transparent
  mdc-button-outline-color: transparent
  ha-config-card-border-radius: var(--ha-card-border-radius)
  mdc-typography-font-family: Antonio
  ha-card-border-width: 0px
  paper-yellow-a100: transparent
  mdc-theme-on-primary: black
  mdc-theme-on-secondary: var(--lcars-text-gray)
  mdc-theme-text-primary-on-background: black
  mdc-theme-text-secondary-on-background: black
  data-table-background-color: black
  rgb-state-media-player-color: var(--paper-item-icon-color)

(DO NOT USE/MODIFY)=== card-mod CSS: &card-mod-css # Card modifications
  card-mod-card-yaml: &card-mod-card |
    .: |
      /* Header classes and fixes for specific card types */
      /* Border on left */
      ha-card.header {
        background: var(--lcars-card-top-color) !important;
        text-transform: uppercase;
        border-radius: var(--ha-card-border-radius) 0px 0px 0px !important;
        border-top: 10px solid var(--lcars-card-top-color);
        border-left: 35px solid var(--lcars-card-top-color);
      }
      ha-card.header > ha-markdown {
        border-radius: 20px 0 0 0;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }
      ha-card.header.type-thermostat > .content {
        border-radius: 0px 0px 0px 20px;
      }
      /* Border on right */
      ha-card.header-right {
        background: var(--lcars-card-top-color) !important;
        text-transform: uppercase;
        border-radius: 0px var(--ha-card-border-radius) 0px 0px !important;
        border-top: 10px solid var(--lcars-card-top-color);
        border-right: 35px solid var(--lcars-card-top-color);
      }
      ha-card.header-right > ha-markdown.no-header {
        background: black;
        border-radius: 0px 20px 0px 0px;
        padding-top: 0px !important;
        padding-bottom: 0 !important;
      }
      ha-card.header-right.type-thermostat > .content {
        border-radius: 0px 0px 20px 0px;
      }
      /* Border on both sides */
      ha-card.header-contained {
        background: var(--lcars-card-top-color) !important;
        text-transform: uppercase;
        border-radius: var(--ha-card-border-radius) var(--ha-card-border-radius) 0px 0px !important;
        border-top: 10px solid var(--lcars-card-top-color);
        border-right: 35px solid var(--lcars-card-top-color);
        border-left: 35px solid var(--lcars-card-top-color);
      }
      ha-card.header-contained > ha-markdown.no-header {
        background: black;
        border-radius: 20px 20px 0px 0px;
        padding-top: 0px !important;
        padding-bottom: 0 !important;
      }
      ha-card.header-right.type-thermostat > .content {
        border-radius: 0px 0px 20px 20px;
      }
      /* Border on neither side */
      ha-card.header-open {
        background: var(--lcars-card-top-color) !important;
        text-transform: uppercase;
        border-radius: 0px 0px 0px 0px !important;
        border-top: 10px solid var(--lcars-card-top-color);
      }
      ha-card.header-open > ha-markdown.no-header {
        background: black;
        border-radius: 0px 0px 0px 0px;
        padding-top: 0px !important;
        padding-bottom: 0 !important;
      }

      /* Middle classes and fixes for specific cards */
      ha-card.middle {
        background: black !important;
        text-transform: uppercase;
        border-radius: 0px !important;
        border-left: 35.5px solid var(--lcars-card-mid-left-color);
        padding-left: 6px !important;
      }
      ha-card.middle-right {
        background: black !important;
        text-transform: uppercase;
        border-radius: 0px !important;
        border-right: 35.5px solid var(--lcars-card-mid-left-color);
        padding-right: 6px !important;
      }
      ha-card.middle-blank {
        background: black !important;
        text-transform: uppercase;
        border-radius: 0px !important;
      }
      ha-card.middle-contained {
        background: black !important;
        text-transform: uppercase;
        border-radius: 0px !important;
        border-left: 35.5px solid var(--lcars-card-mid-left-color);
        border-right: 35.5px solid var(--lcars-card-mid-left-color);
        padding: 0px 6px !important;
      }
      ha-card.middle > ha-gauge, 
      ha-card.middle-right > ha-gauge, 
      ha-card.middle-contained > ha-gauge, 
      ha-card.middle-blank > ha-gauge {
        --primary-text-color: var(--lcars-text-gray);
      }
      ha-card.middle > .name, 
      ha-card.middle-right > .name, 
      ha-card.middle-contained > .name, 
      ha-card.middle-blank > .name {
        color: var(--lcars-text-gray);
      }
      /* Footer classes and fixes for specific cards */
      /* Border on the left */
      ha-card.footer {
        background: var(--lcars-card-bottom-color) !important;
        text-transform: uppercase;
        border-radius: 0px 0px 0px var(--ha-card-border-radius) !important;
        border-bottom: 10px solid var(--lcars-card-bottom-color);
        border-left: 35px solid var(--lcars-card-bottom-color);
        margin-top: unset;
      }
      ha-card.footer > span {
        background: black;
        width: 100%;
        padding-left: 0px;
        margin-top: 0px;
        border-radius: 0px 0px 0px 20px;
      }
      ha-card.footer > .entities {
        background: black;
        border-radius: 0px 0px 0px 20px;
      }
      ha-card.footer > #states {
        background: black;
        border-radius: 0px 0px 0px 20px;
        padding-top: 0px !important;
        padding-bottom: 0 !important;
      }
      ha-card.footer > ha-markdown {
        border-radius: 0px 0px 0px 20px !important;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }
      ha-card.footer.type-thermostat > .content {
        border-radius: 0px 0px 0px 20px;
      }
      ha-card.footer.type-picture-entity {
        border-radius: 0px 0px 0px 20px;
      }
      ha-card.footer > ha-state-icon {
        height: 100%;
        --mdc-icon-size: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      ha-card.footer > img {
        padding: 0px 0px 6px 6px;
        border-bottom-left-radius: 20px;
        background: black;
        box-sizing: border-box;
      }
      /* Border on the right */
      ha-card.footer-right {
        background: var(--lcars-card-bottom-color) !important;
        text-transform: uppercase;
        border-radius: 0px 0px var(--ha-card-border-radius) 0px !important;
        border-bottom: 10px solid var(--lcars-card-bottom-color);
        border-right: 35px solid var(--lcars-card-bottom-color);
        margin-top: unset;
      }
      ha-card.footer-right > span {
        background: black;
        width: 100%;
        padding-right: 0px;
        margin-top: 0px;
        border-radius: 0px 0px 20px 0px;
      }
      ha-card.footer-right > .entities {
        background: black;
        border-radius: 0px 0px 20px 0px;
      }
      ha-card.footer-right > #states {
        background: black;
        border-radius: 0px 0px 20px 0px;
        padding-top: 0px !important;
        padding-bottom: 0 !important;
      }
      ha-card.footer-right > ha-markdown {
        border-radius: 0px 0px 20px 0px !important;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }
      ha-card.footer-right.type-thermostat > .content {
        border-radius: 0px 0px 20px 0px;
      }
      ha-card.footer.type-picture-entity {
        border-radius: 0px 0px 20px 0px;
      }
      ha-card.footer-right > img {
        padding: 0px 6px 6px 0px;
        border-bottom-right-radius: 20px;
        background: black;
        box-sizing: border-box;
      }
      /* Border on both sides */
      ha-card.footer-contained {
        background: var(--lcars-card-bottom-color) !important;
        text-transform: uppercase;
        border-radius: 0px 0px var(--ha-card-border-radius) var(--ha-card-border-radius) !important;
        border-bottom: 10px solid var(--lcars-card-bottom-color);
        border-right: 35px solid var(--lcars-card-bottom-color);
        border-left: 35px solid var(--lcars-card-bottom-color);
        margin-top: unset;
      }
      ha-card.footer-contained > span {
        background: black;
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-top: 0px;
        border-radius: 0px 0px 20px 20px;
      }
      ha-card.footer-contained > .entities {
        background: black;
        border-radius: 0px 0px 20px 20px;
      }
      ha-card.footer-contained > #states {
        background: black;
        border-radius: 0px 0px 20px 20px;
        padding-top: 0px !important;
        padding-bottom: 0 !important;
      }
      ha-card.footer-contained > ha-state-icon {
        background: black;
        width: 100%;
        --mdc-icon-size: 40%
      }
      ha-card.footer-contained > ha-markdown {
        border-radius: 0px 0px 20px 20px !important;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }
      ha-card.footer-contained.type-thermostat > .content {
        border-radius: 0px 0px 20px 20px;
      }
      ha-card.footer-contained > img {
        padding: 0px 6px 6px 6px;
        border-radius: 0px 0px 20px 20px;
        background: black;
        box-sizing: border-box;
      }
      /* Border on neither side */
      ha-card.footer-open {
        background: var(--lcars-card-bottom-color) !important;
        text-transform: uppercase;
        border-radius: 0px 0px 0px 0px !important;
        border-bottom: 10px solid var(--lcars-card-bottom-color);
        margin-top: unset;
      }
      ha-card.footer-open > span {
        background: black;
        width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        margin-top: 0px;
        border-radius: 0px 0px 0px 0px;
      }
      ha-card.footer-open > .entities {
        background: black;
        border-radius: 0px 0px 0px 0px;
      }
      ha-card.footer-open > #states {
        background: black;
        border-radius: 0px 0px 0px 0px;
        padding-top: 0px !important;
        padding-bottom: 0 !important;
      }
      ha-card.footer-open > ha-state-icon {
        background: black;
        width: 100%;
        --mdc-icon-size: 40%
      }
      ha-card.footer-open > ha-markdown {
        border-radius: 0px 0px 0px 0px !important;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }
      
      /* Fixes across card types */
      ha-card.footer.type-button,
      ha-card.footer-right.type-button,
      ha-card.footer-contained.type-button
      ha-card.footer-open.type-button {
        display: flex;
        justify-content: flex-start;
        flex-direction: column-reverse;
      }
      ha-card.footer > ha-state-icon,
      ha-card.footer-right > ha-state-icon,
      ha-card.footer-contained > ha-state-icon,
      ha-card.footer-open > ha-state-icon {
        background: transparent;
        width: 100%;
        height: 100%;
        --mdc-icon-size: 48px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        top: 0;
        z-index: 1;
        border-radius: 0px 0px 20px 20px;
      }
      ha-card.footer > span.state,
      ha-card.footer-right > span.state,
      ha-card.footer-contained > span.state,
      ha-card.footer-open > span.state {
        background: transparent;
        border-radius: 0px 0px 0px 0px;
        padding-top: 55px;
        position: relative;
        margin-bottom: 16px;
      }
      ha-card.footer > span,
      ha-card.footer-right > span,
      ha-card.footer-contained > span,
      ha-card.footer-open > span {
        height: 100%;
        position: absolute;
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }
      ha-card.footer > span.usps_update,
      ha-card.footer-right > span.usps_update,
      ha-card.footer-contained > span.usps_update,
      ha-card.footer-open > span.usps_update {
        background: black;
        width: 100%;
        padding-left: 15px;
        margin-top: -4px;
        height: unset !important;
      }
      ha-card.footer.type-custom-mail-and-packages-card,
      ha-card.footer-right.type-custom-mail-and-packages-card,
      ha-card.footer-contained.type-custom-mail-and-packages-card,
      ha-card.footer-open.type-custom-mail-and-packages-card {
        border-bottom: 26px solid var(--lcars-card-bottom-color);
      }

      /* Small button class and fixes for specific cards */
      ha-card.button-small {
        display: flex;
        text-transform: uppercase;
        color: black;
        border-radius: 0px !important;
        position: relative;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
      }
      ha-card.button-small > .more-info {
        display: none;
      }
      ha-card.button-small > .content > #controls {
        display: flex;
        place-content: flex-start center;
        position: relative;
        padding: 0px;
      }
      ha-card.button-small > .content > #info {
        text-align: right;
        box-sizing: border-box;
        width: 100%;
        padding: 0px 6px 6px 0px;
        margin-top: -24px;
        position: relative;
      }
      ha-card.button-small > ha-state-icon { /*wat*/
      }
      ha-card.button-small > span {
        box-sizing: border-box;
        text-align: right;
        width: 100%;
        padding: 6px;
        margin: unset;
        position: absolute;
        bottom: 0;
      }
      ha-card.button-small > span.state {
        text-align: right;
        width: 100%;
        padding: 6px;
        padding-bottom: 22px;
        margin: unset;
        position: absolute;
        bottom: 0;
      }
      /* Large button class and fixes for specific cards */
      ha-card.button-large {
        text-transform: uppercase;
        color: black;
      }
      /* Lozenge, bullet, and capped button classes and fixes for specific cards */
      ha-card.button-lozenge {
        text-transform: uppercase;
        color: black;
        min-height: 60px;
        display: flex;
        align-items: flex-end;
        flex-direction: column-reverse;
      }
      ha-card.button-bullet {
        text-transform: uppercase;
        color: black;
        min-height: 60px;
        border-radius: 0px var(--ha-card-border-radius) var(--ha-card-border-radius) 0px !important;
        display: flex;
        align-items: flex-end;
        flex-direction: column-reverse;
      }
      ha-card.button-capped {
        text-transform: uppercase;
        color: black;
        min-height: 60px;
        border-radius: var(--ha-card-border-radius) 0px 0px var(--ha-card-border-radius) !important;
        display: flex;
        align-items: flex-end;
        flex-direction: column-reverse;
      }
      ha-card.button-lozenge > ha-state-icon, 
      ha-card.button-bullet > ha-state-icon,
      ha-card.button-capped > ha-state-icon {
        --mdc-icon-size: unset;
        display: flex;
        align-items: center;
        left: 0;
        width: 35px;
        height: 100% !important;
        border-right: black solid 6px;
        position: absolute;
        justify-content: center;
        background: var(--lcars-card-top-color);
      }
      ha-card.button-lozenge > span, 
      ha-card.button-bullet > span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: unset;
        padding-right: 26px;
        padding-bottom: 6px;
        position: absolute;
      }
      ha-card.button-capped > span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: unset;
        padding-right: 6px;
        padding-bottom: 6px;
        position: absolute;
      }
      ha-card.button-lozenge > span.state, 
      ha-card.button-bullet > span.state,
      ha-card.button-capped > span.state {
        padding-bottom: 45px;
        color: black;
      }
      ha-card.button-lozenge-right {
        text-transform: uppercase;
        color: black;
        min-height: 60px;
        display: flex;
        align-items: flex-start;
        flex-direction: column-reverse;
      }
      ha-card.button-bullet-right {
        text-transform: uppercase;
        color: black;
        min-height: 60px;
        border-radius: var(--ha-card-border-radius) 0px 0px var(--ha-card-border-radius) !important;
        display: flex;
        align-items: flex-start;
        flex-direction: column-reverse;
      }
      ha-card.button-capped-right {
        text-transform: uppercase;
        color: black;
        min-height: 60px;
        border-radius: 0px var(--ha-card-border-radius) var(--ha-card-border-radius) 0px !important;
        display: flex;
        align-items: flex-start;
        flex-direction: column-reverse;
      }
      ha-card.button-lozenge-right > ha-state-icon,
      ha-card.button-bullet-right > ha-state-icon,
      ha-card.button-capped-right > ha-state-icon {
        --mdc-icon-size: unset;
        display: flex;
        align-items: center;
        right: 0;
        width: 35px;
        height: 100% !important;
        border-left: black solid 6px;
        position: absolute;
        justify-content: center;
        background: var(--lcars-card-top-color);
      }
      ha-card.button-lozenge-right > span,
      ha-card.button-bullet-right > span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        margin-top: unset;
        padding-left: 26px;
        padding-bottom: 6px;
        position: absolute;
      }
      ha-card.button-capped-right > span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        margin-top: unset;
        padding-left: 6px;
        padding-bottom: 6px;
        position: absolute;
      }
      ha-card.button-lozenge-right > span.state,
      ha-card.button-bullet-right > span.state,
      ha-card.button-capped-right > span.state {
        padding-bottom: 45px;
        color: black;
      }
      /* Markdown bar */
      ha-card.bar {
        text-transform: uppercase;
        border-left: 35px solid var(--lcars-card-top-color);
        background-color: var(--lcars-card-top-color);
        display: flex;
      }
      ha-card.bar-right {
        text-transform: uppercase;
        border-right: 35.5px solid var(--lcars-card-top-color);
        background-color: var(--lcars-card-top-color);
        display: flex;
        justify-content: right;
      }
      ha-card.bar > ha-markdown,
      ha-card.bar-right > ha-markdown {
        padding: 2px 8px 2px !important;
        margin-top: -8px;
        margin-bottom: -3px;
      }
      /* Markdown bar large */
      ha-card.bar-large {
        text-transform: uppercase;
        border-left: 35px solid var(--lcars-card-top-color);
        background-color: var(--lcars-card-top-color);
        display: flex;
      }
      ha-card.bar-large-right {
        text-transform: uppercase;
        border-right: 35.5px solid var(--lcars-card-top-color);
        background-color: var(--lcars-card-top-color);
        display: flex;
        justify-content: right;
      }
      ha-card.bar-large > ha-markdown,
      ha-card.bar-large-right > ha-markdown {
        padding: 0px 8px 0px !important;
        margin-top: -8px;
        margin-bottom: -3px;
        font-size: 1.5em;
      }
      /* Hacky workaround to add middle-type class to horizontal and vertical stack cards */
      /* More info: https://github.com/thomasloven/lovelace-card-mod#styling-cards-without-an-ha-card-element */
      .type-custom-mod-card {
        border-radius: 0px !important;
        border-left: 35.5px solid var(--lcars-card-mid-left-color);
        padding-left: 6px !important;
      }
      /* WIP fix for aliasing ugliness on slider tracks */
      .type-light > .bar {
        stroke-width: 5px;
      }
      /* ?Fix for markdown cards that are not headers? */
      ha-markdown.no-header {
        background: black;
        border-radius: unset;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
      }
      /* Various generic card fixes */
      /*.entities {
        background: black;
        border-radius: 0px 0px 0px 20px;
      }*/
      .type-thermostat > .content {
        background: black;
        padding-top: 0px !important;
        padding-bottom: 0 !important;
      }
      .details {
        margin-top: 1em;
      }
      .color-block {
        border-radius: 0px 0px 0px 20px;
      }
      .card-actions {
        border-top: none;
        padding: 5px 16px;
        margin-top: 8px;
        background: var(--lcars-ui-primary);
        border-radius: var(--ha-card-border-radius) !important;
        --primary-text-color: black;
        --mdc-theme-primary: black;
      }
      .panel > ha-card {
        border-radius: var(--ha-card-border-radius) !important;
      }
      .button-small > .state,
      .button-large > .state,
      .button-lozenge > .state {
        border-radius: 0px 0px 0px 20px;
        padding-bottom: 0px;
        color: black;
      }
      ha-card.footer > .details {
        background: black;
        width: 100%;
        margin: 0px;
      }
      .MailImg {
        margin-top: 0;
        border-radius: 0px !important;
        padding: 0px 6px 6px 6px !important;
        width: 98%;
      }
      .details > .title {
        margin-left: 15px;
      }
      .usps_update {
        border-radius: 0px 0px 0px 20px;
        display: flex;
      }
      ha-card.footer > .content {
        background: black;
        border-radius: 0px 0px 0px 20px;
      }
      .details > p {
        margin-left: 15px;
      }
      ha-card {
        padding: 0px !important;
        border-top-right-radius: var(--ha-card-border-radius) !important;
        border-top-left-radius: var(--ha-card-border-radius) !important;
      }
      ha-card > .name {
        color: black;
      }
      ha-config-updates {
        color: black;
      }
      /* Gauge card fixes */
      ha-gauge {
        --primary-text-color: black;
      }
      ha-card:has(ha-gauge) {
        background: var(--lcars-card-top-color)
      }
      /* MSD Styles */
      ha-card.msd-left {
        margin: 0px 15px 23px 0px !important;
        background: black !important;
        font-size: 1.5em !important;
        font-weight: 700 !important;
        color: var(--lcars-orange) !important;
        text-transform: uppercase !important;
        text-align: right !important;
        display: flex !important;
        align-items: flex-end !important;
        border-radius: 0 0 0 0 !important;
      }
      ha-card.msd-right {
        margin: 0px 15px 23px 18px !important;
        background: black !important;
        font-size: 1.5em !important;
        font-weight: 700 !important;
        color: var(--lcars-orange) !important;
        text-transform: uppercase !important;
        text-align: left !important;
        display: flex !important;
        align-items: flex-start !important;
        flex-direction: column-reverse !important;
        border-radius: 0 0 0 0 !important;
      }
  # Toolbar and dashboard modifications
  card-mod-root-yaml: &card-mod-root |
    .: |
      {% if not is_state('input_boolean.lcars_sound', 'on') %}
      .header {
        --lcars-sound: false;
      }
      {% else %}
      .header {
        --lcars-sound: true;
      }
      {% endif %}
      ha-drawer {
        border-right-width: unset !important;
        border-right-style: unset !important;
      }
      ha-dialog > * {
        color: black;
      }
      paper-tab.iron-selected {
        background: var(--lcars-ui-tertiary) !important;
        color: black;
      }
      paper-icon-item::before {
        inset: 2px !important;
        margin-right: -9px !important;
        margin-left: -1px !important;
        border-radius: 20px !important;
      }
      .header,
      .toolbar,
      .edit-mode .toolbar {
        background: var(--lcars-ui-primary) !important;
      }
      .edit-mode .header {
        height: 40px;
        background: transparent;
      }
      .toolbar {
        border-right: 30px solid var(--lcars-card-top-color);
        border-radius: 0px 30px 30px 0px;
        margin-right: 1px;
        padding: 0px 12px !important;
      }
      ha-tabs {
        width: 100%;
        height: 100%;
        margin-left: 30px !important;
        border-left: solid black 4px;
      }
      .edit-mode > ha-tabs,
      .edit-mode > paper-tabs {
        --paper-tabs-selection-bar-color: transparent !important;
        border-left: solid black 4px;
        margin-left: 0px !important;
      }
      /* Code for the clock */
      .toolbar::after {
        content: "{{states('sensor.time')}}";
        margin-left: -2px;
        margin-right: 30px;
        color: var(--text-primary-color);
        visibility: visible;
        position: absolute;
        font-size: 42px;
        right: 0px;
        top: 0px;
        background: black;
        vertical-align: middle;
        height: var(--header-height);
        line-height: .8;
        border-right: 5px solid black;
        border-left: 5px solid black;
      }
      @media screen and (max-width: 870px) {
        .toolbar::after {
          content: "";
          border-left: 0px solid black;
        }
        ha-button-menu > ha-icon-button {
          margin-right: -48px;
          padding-right: unset !important;
          margin-left: unset !important;
        }
        .exit-edit-mode {
          margin-right: 0px !important;
        }
        ha-icon-button {
          padding-right: unset !important;
          margin-left: unset !important;
        }
        ha-menu-button {
          display: initial !important;
          color: black !important;
          padding-right: 0px !important;
          margin-right: -22px;
          margin-left: -16px;
        }
      }
      ha-menu-button {
        display: none;
        color: transparent;
        padding-right: 10px
      }
      .exit-edit-mode {
        margin-right: 95px;
        --mdc-button-outline-color: transparent !important;
        --mdc-theme-primary: black !important;
        background: var(--lcars-ui-tertiary);
        border-radius: var(--ha-card-border-radius);
      }
      .edit-mode div[main-title] {
        color: black;
      }
      .edit-icon {
        color: black !important;
      }
      ha-button-menu > ha-icon-button, 
      .toolbar > ha-icon-button, 
      .menu-link > ha-icon-button {
        padding-right: 78px;
        margin-left: 0px;
        color: black;
      }
      .header, .toolbar {
        box-shadow: 30px 0px 0px 0px black;
        --app-header-text-color: black;
      }
      #tabsContainer {
        border-left: solid black 6px;
      }
      paper-tab.iron-selected {
        margin-left: -2px;
        margin-right: -2px;
        background: var(--lcars-ui-tertiary);
      }
      paper-tab {
        margin-left: -2px;
        margin-right: -2px;
        background: var(--lcars-ui-secondary);
        border-right: 4px solid black;
      }
      ha-icon-button#add-view {
        margin-top: 4px;
      }
      ha-icon {
        color: black !important;
      }
      hui-view::-webkit-scrollbar {
        display: none;
      }
      hui-view {
        scrollbar-width: none !important;
      }
      hui-masonry-view {
        padding-right: 23px;
      }
      .toolbar::before {
        content: "";
        position: fixed;
        height: 40px;
        width: 100px;
        background-color: transparent;
        border-top-left-radius: 40px;
        box-shadow: -40px 0 0 0 var(--lcars-ui-primary);
        margin-top: 80px;
        margin-left: -12px;
        z-index: 9997;
      }
      hui-image {
        cursor: pointer;
        z-index: 9999;
      }
      {% if not is_state('input_boolean.lcars_texture', 'off') %}
      .header::before {
        content: linear-gradient(to left, transparent, #EEEEEE 30%, #222222 60%, transparent 90% );
        width: 100%;
        height: 40px;
        z-index: 9998;
        position: absolute;
        mix-blend-mode: overlay;
        opacity: .8;
        right: unset;
        bottom: unset;
        left: unset;
        pointer-events: none;
        box-shadow: none;
      }
      .header::after {
        content: "";
        background: url(data:image/png;base64,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);
        width: 100%;
        height: 40px;
        z-index: 9999;
        position: absolute;
        mix-blend-mode: overlay;
        opacity: .8;
        top: 0px;
        right: unset;
        bottom: unset;
        left: unset;
        pointer-events: none;
        box-shadow: none;
      }
      hui-masonry-view::before {
        content: radial-gradient(ellipse farthest-corner at center center, white 0%, transparent 60%);
        width: 100%;
        height: 100%;
        z-index: 9990;
        position: fixed;
        mix-blend-mode: overlay;
        opacity: .8;
        pointer-events: none;
      }
      hui-masonry-view::after {
        content: "";
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        z-index: 9991;
        mix-blend-mode: overlay;
        opacity: .8;
        pointer-events: none;
      }
      {% endif %}
    ha-tabs$: |
      paper-icon-button { display: none !important; }
  card-mod-sidebar: &card-mod-sidebar |
    :host {
      content: "";
      border-right: 0px !important;
      border-top-left-radius: 80px;
      box-shadow: black 0px -130px 0px 0px;
    }
    paper-listbox {
      margin-top: 68px;
      border-top: 4px solid black;
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      height: calc( 100% - var(--header-height) - 176px - env(safe-area-inset-bottom)) !important;
    }
    #sortable a {
      display: block !important;
    }
    paper-icon-item.hidden-panel, 
    paper-icon-item.hidden-panel span, 
    paper-icon-item.hidden-panel 
    ha-icon[slot="item-icon"] {
      color: black !important;
    }
    paper-icon-item.hidden-panel {
      display: block !important;
    }
    paper-icon-item {
      margin: 0px !important;
      padding-left: 16px !important;
      height: 48px;
      --paper-item-min-height: unset !important;
    }
    .hide-panel {
      right: 175px !important;
    }
    .show-panel {
      right: 172px !important;
      top: 4px !important;
    }
    .hidden-panel > ha-icon {
      padding-top: 10px;
      margin-bottom: -10px;
    }
    .hidden-panel > ha-svg-icon {
      padding-top: 12px;
      margin-bottom: -12px;
    }
    :host([expanded]) .menu mwc-button {
      margin-top: 152px !important;
      margin-left: 7px !important;
      height: 19px;
      border-radius: 20px;
      background: var(--lcars-ui-tertiary);
      align-items: center;
    }
    .menu ha-icon-button {
      margin-top: 150px;
      margin-right: 96px;
    }
    @media screen and (max-width: 768px) {
      .menu ha-icon-button {
        margin-top: 0px;
        margin-right: 0px;
      }
      .menu::before {
        content: "";
        position: fixed;
        height: 40px;
        width: 100px;
        background-color: transparent;
        border-top-left-radius: 40px;
        box-shadow: -40px 0 0 0 var(--lcars-ui-primary);
        margin-top: 80px;
        margin-left: 251px;
        z-index: 9997;
      }
      .menu::after {
        content: linear-gradient(90deg, var(--lcars-ui-primary) 0%, var(--lcars-ui-primary) 35%, rgba(0,0,0,0) 100%);
        position: fixed;
        height: 40px;
        width: 150px;
        background-color: transparent;
        margin-left: 251px;
        z-index: 9997;
      }
    }

    .title {
      text-transform: uppercase;
      font-size: 15px;
      padding-left: 5px;
      padding-top: 150px;
      font-family: var(--lcars-font) !important;
      margin-left: 10px !important;
    }
    :host([narrow]) .title {
      padding: 148px 6px 0px 0px !important;
      text-align: right !important;
    }
    a {
      border-bottom: 4px solid;
      background-color: var(--lcars-ui-secondary);
    }
    a.iron-selected {
      background-color: var(--lcars-ui-tertiary);
    }

    .spacer {
      border-bottom: 4px solid black;
    }
    .profile {
      border-top: 4px solid black;
    }
    .item-text {
      text-align: right;
      margin-left: auto;
      margin-right: -12px;
      margin-bottom: -23px;
      text-transform: uppercase;
    }
    .profile > paper-icon-item > .item-text {
      margin-left: auto !important;
      margin-bottom: -17px;
    }
    .profile > span {
      margin-bottom: 1px !important;
    }
    .notification-badge, .configuration-badge {
      left: calc(var(--app-drawer-width) - 48px) !important;
      top: 5px;
      max-height: 20px;
    }
    .profile paper-icon-item {
      padding-left: 8px !important;
    }
    .notifications-container {
      border-top: unset;
      margin-top: -16px
    }
    .menu {
      --mdc-theme-primary: black;
    }
    paper-icon-item::before {
      opacity: 0 !important;
    }
    {% if not is_state('input_boolean.lcars_texture', 'off') %}
    paper-listbox::before {
      content: "";
      background: linear-gradient(to bottom left, transparent 10%, #AAAAAADD 30%, #000000AA 60%, transparent 90%);
      width: var(--mdc-drawer-width,256px);
      height: 120%;
      bottom: 0;
      z-index: 9999;
      position: absolute;
      mix-blend-mode: overlay;
      opacity: .8;
      pointer-events: none;
    }
    paper-listbox::after {
      content: "";
      background: url(data:image/png;base64,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);
      width: var(--mdc-drawer-width,256px);
      height: 120%;
      bottom: 0;
      z-index: 9999;
      position: absolute;
      mix-blend-mode: overlay;
      opacity: .8;
      pointer-events: none;
    }
    {% endif %}
# ===THEMES================================================
# To create your own theme, copy this LCARS Default section
# to the bottom of the file and change the lcars-ui-* and
# lcars-card-* variables to your liking, using the color
# references at the top of this file, or define your own.
LCARS Default:
  card-mod-theme: LCARS Default
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # ========================YOUR MODIFICATIONS BEGIN HERE |
  # Primary colors                             V
  lcars-ui-primary: var(--lcars-almond-creme)
  lcars-ui-secondary: var(--lcars-african-violet)
  lcars-ui-tertiary: var(--lcars-red)
  # Header colors
  # Specifying darker app header colors improves look on HA Apps (iphone/ipad/mac).
  # One unfortunate side effect is that pages without hui-root can't have heading styled
  # So, logbook, history, calendar, dev tools etc look a bit weird.
  # overall the cleaner look on dashboards is worth it in my opinion
  #                                       - mtezzo
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-bluey)
  lcars-card-mid-left-color: var(--lcars-red)
  lcars-card-button: var(--lcars-red)
  lcars-card-bottom-color: var(--lcars-gray)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Classic:
  card-mod-theme: LCARS Classic
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # Primary colors
  lcars-ui-primary: var(--lcars-khaki)
  lcars-ui-secondary: var(--lcars-honey)
  lcars-ui-tertiary: var(--lcars-mars)
  # Header colors
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-violet)
  lcars-card-mid-left-color: var(--lcars-ice)
  lcars-card-button: var(--lcars-ice)
  lcars-card-bottom-color: var(--lcars-honey)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Nemesis Blue:
  card-mod-theme: LCARS Nemesis Blue
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # Primary colors
  lcars-ui-primary: var(--lcars-midnight)
  lcars-ui-secondary: var(--lcars-tangerine)
  lcars-ui-tertiary: var(--lcars-pumpkinshade)
  # Header colors
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-moonshine)
  lcars-card-mid-left-color: var(--lcars-evening)
  lcars-card-button: var(--lcars-honey)
  lcars-card-bottom-color: var(--lcars-cool)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Lower Decks I:
  card-mod-theme: LCARS Lower Decks I
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # Primary colors
  lcars-ui-primary: var(--lcars-gold)
  lcars-ui-secondary: var(--lcars-butter)
  lcars-ui-tertiary: var(--lcars-orange)
  # Header colors
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-october-sunset)
  lcars-card-mid-left-color: var(--lcars-harvestgold)
  lcars-card-button: var(--lcars-harvestgold)
  lcars-card-bottom-color: var(--lcars-honey)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Romulus:
  card-mod-theme: LCARS Romulus
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # Primary colors
  lcars-ui-primary: var(--lcars-green)
  lcars-ui-secondary: var(--lcars-african-violet)
  lcars-ui-tertiary: var(--lcars-orange)
  # Header colors
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-cardinal)
  lcars-card-mid-left-color: var(--lcars-african-violet)
  lcars-card-button: var(--lcars-sky)
  lcars-card-bottom-color: var(--lcars-c62)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Kronos:
  card-mod-theme: LCARS Kronos
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # Primary colors
  lcars-ui-primary: var(--lcars-mars)
  lcars-ui-secondary: var(--lcars-gold)
  lcars-ui-tertiary: var(--lcars-orange)
  # Header colors
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-mars)
  lcars-card-mid-left-color: var(--lcars-october-sunset)
  lcars-card-button: var(--lcars-october-sunset)
  lcars-card-bottom-color: var(--lcars-peach)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Cardassia:
  card-mod-theme: LCARS Cardassia
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # Primary colors
  lcars-ui-primary: var(--lcars-c44)
  lcars-ui-secondary: var(--lcars-c55)
  lcars-ui-tertiary: var(--lcars-cardassia-maroon)
  # Header colors
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-c48)
  lcars-card-mid-left-color: var(--lcars-cardassia-maroon)
  lcars-card-button: var(--lcars-cardassia-maroon)
  lcars-card-bottom-color: var(--lcars-c52)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Zeldaar:
  card-mod-theme: LCARS Zeldaar
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # Primary colors
  lcars-ui-primary: var(--lcars-violet-creme)
  lcars-ui-secondary: var(--lcars-honey)
  lcars-ui-tertiary: var(--lcars-roseblush)
  # Header colors
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-bluey)
  lcars-card-mid-left-color: var(--lcars-khaki)
  lcars-card-button: var(--lcars-african-violet)
  lcars-card-bottom-color: var(--lcars-roseblush)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Modern:
  card-mod-theme: LCARS Modern
  # Custom colors
  lcars-modern-light-gray: "#9996BA"
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # Primary colors
  lcars-ui-primary: var(--lcars-violet-creme)
  lcars-ui-secondary: var(--lcars-sky)
  lcars-ui-tertiary: var(--lcars-gold)
  # Header colors
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-gold)
  lcars-card-mid-left-color: var(--lcars-modern-light-gray)
  lcars-card-button: var(--lcars-gray)
  lcars-card-bottom-color: var(--lcars-sky)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-red)

LCARS Picard I:
  card-mod-theme: LCARS Picard I
  # Custom colors
  lcars-modern-light-gray: "#9996BA"
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  # Primary colors
  lcars-ui-primary: var(--lcars-hellgrau)
  lcars-ui-secondary: var(--lcars-mittelgrau)
  lcars-ui-tertiary: var(--lcars-feuerrot)
  # Header colors
  lcars-ui-app-header-background-color: "#272727"
  lcars-ui-app-header-text-color: var(--lcars-c72)
  # Card colors
  lcars-card-top-color: var(--lcars-mittelgrau)
  lcars-card-mid-left-color: var(--lcars-mango)
  lcars-card-button: var(--lcars-feuerrot)
  lcars-card-bottom-color: var(--lcars-dunkelgrau)
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Red Alert:
  card-mod-theme: LCARS Red Alert
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  lcars-ui-primary: var(--lcars-gold)
  lcars-ui-secondary: var(--lcars-butter)
  lcars-ui-tertiary: var(--lcars-orange)
  # Card colors
  lcars-card-top-color: "#bf1b1b"
  lcars-card-mid-left-color: "#9d361e"
  lcars-card-button: "#d66a60"
  lcars-card-bottom-color: "#91311c"
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)

LCARS Lower Decks II:
  card-mod-theme: LCARS Lower Decks II
  <<: *lcars-colors
  <<: *base
  <<: *card-mod-css
  lcars-ui-primary: var(--lcars-gold)
  lcars-ui-secondary: var(--lcars-butter)
  lcars-ui-tertiary: var(--lcars-orange)
  # Card colors
  lcars-card-top-color: var(--lcars-orange)
  lcars-card-mid-left-color: var(--lcars-c57)
  lcars-card-button: var(--lcars-honey)
  lcars-card-bottom-color: "#fff5c7"
  # Misc
  success-color: var(--lcars-green)
  warning-color: var(--lcars-sunflower)
  error-color: var(--lcars-dark-red)
# Paste your themes here |
#                        V
