@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600&display=swap');

/* Global Styles */
body{background-color: transparent !important;font-family: 'Titillium Web', sans-serif !important; font-weight: 400; color: #333 !important}

#root{
  --sb-nav-item-background-color: rgba(29,83,136,.25);
  --sb-nav-item-text-color: #355676;
  --sb-nav-item-border-color: transparent;
  --sb-nav-item-border-radius: 0;
  --sb-nav-item-hover-background-color: rgba(29,83,136,.5);
  --sb-nav-item-hover-text-color: #355676;
  --sb-nav-item-hover-border-color: transparent;
  --sb-nav-item-active-background-color: #355676;
  --sb-nav-item-active-text-color: #FFF;
  --sb-nav-item-active-border-color: transparent;
  --sb-primary-button-background-color: #008491;
  --sb-primary-button-border-radius: 0;
  --sb-primary-button-hover-background-color: #00616b;
  --sb-secondary-button-background-color: #008491;
  --sb-secondary-button-border-radius: 0;
  --sb-secondary-button-hover-background-color: #00616b;
  --sb-text-link-color: #008491;
  --sb-text-link-hover-color: #00616b;
  --sb-card-background-color: #FFF;
  --sb-card-border-color: transparent;
  --sb-card-border-radius: 0;
  --sb-card-header-background-color: transparent;
  --sb-card-header-text-color: #000;
  --sb-card-header-button-background-color:#008491;
  --sb-card-header-button-border-radius: 0;
  --sb-card-header-button-hover-background-color:#00616b;
  --sb-accent-theme-background-color: rgba(34,93,82,.075);
  --sb-accent-theme-color: #008491;
  --sb-accent-theme-item-background-color: transparent;
  --sb-accent-theme-item-text-color: var(--contrast-high);
  --sb-accent-theme-item-border-color: transparent;
  --sb-accent-theme-item-border-radius: 0;
  --sb-accent-theme-item-hover-background-color: transparent;
  --sb-accent-theme-item-hover-text-color: var(--sb-accent-theme-color);
  --sb-accent-theme-item-hover-border-color: var(--sb-accent-theme-color);
  --sb-accent-theme-item-active-background-color: rgba(34,93,82,.035);
  --sb-accent-theme-item-active-text-color: var(--sb-accent-theme-color);
  --sb-accent-theme-item-active-border-color: var(--sb-accent-theme-color);
  --sb-input-border-radius: 0;
}
/* Custom overrides */
#root .designer-steps{border: 2px solid #FFF;border-right:none}
#root .nav-bar .designer-steps{gap:2px}
#root .card .card-header{font-size:2rem;padding: .5rem 1rem}
#root .dimension-outage-direction-button-clickable{border-radius: 0}
#root .control-cards-option.list-group-item img{mix-blend-mode: multiply}
#root .extra-options-screen .control-cards-option-container .list-group-item .control-option{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;height: 100%;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;gap: .5rem;font-weight: 600}
#root .extra-options-screen .control-cards-option-container .list-group-item .control-option .list-item-thumbnail{aspect-ratio: 1/1;overflow: hidden}

/* Mobile Navigation */
@media (max-width: 1199.98px) {
  #root .designer-steps{border-left:none;padding:0}
  #root .nav-bar .nav-bar-next,
  #root .nav-bar .nav-bar-previous{height:46px;border: 2px solid #FFF}
}