/* Squirrel Overrides - executes on if the squirrel-dynamic-theming attribute exists */

body[squirrel-dynamic-theming] {
  /********************
   * Layout + Top Nav
   ********************/
  #page-container {
    background: var(--sq-bg-primary);
    overflow: hidden;
  }

  .navbar-inverse {
    border-color: #191a1d;
    background-color: var(--sq-bg-primary);
  }

  header.navbar .navbar-header > a.navbar-brand {
    display: block;
    padding: 0 !important;
    background: url("../assets/images/Logo-KensieGold.png") no-repeat center
      center !important;
    background-size: contain !important;
    width: 125px !important;
    height: 64px !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /********************
   * Sidebar 
   ********************/

  #page-leftbar,
  #sidebar,
  #sidebar ul,
  #sidebar > li > a,
  #sidebar ul li a {
    background: var(--sq-bg-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  /* Icos */
  #sidebar i {
    color: #fff !important;
  }

  /* 5) Left nav menu highlight - #f0592a */
  #sidebar a:hover,
  #sidebar ul li a:hover {
    background: var(--sq-bg-secondary) !important;
    color: #fff !important;
  }

  /* Active */
  #sidebar > li.active > a,
  #sidebar > li.active > a:hover {
    background: var(--sq-bg-builder) !important;
    color: #fff !important;
  }

  /* Divider */
  #sidebar .divider,
  #sidebar .divider:hover {
    background-color: var(--sq-bg-builder) !important;
  }

  /* Badges */
  #sidebar .badge {
    background-color: var(--sq-bg-builder) !important;
    color: #fff !important;
  }

  /************************
   * Sidebar Squirrel Logo  
   ********** ************/
  #page-leftbar {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  /* Scroll the menu */
  #page-leftbar #sidebar {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0;
    padding: 0;
  }

  /* Logo */
  #page-leftbar #sidebar .nav-squirrel-powered {
    margin-top: auto;
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  #page-leftbar #sidebar .nav-squirrel-powered img {
    width: 100%;
    height: auto;
    display: block;
  }

  /************************
   * Secondary color Stuff
   ************************/

  /* 3) Top right mail icon: #f0592a */
  #contactsMarketNow,
  /* 4) Page Number: #f0592a */
  .pagination > .active > a,
  .pagination > li.active > a,
  /* 5) Tags: #f0592a */
  [tagstyle] .btn,
  [velma-contact-type-for-list] .btn,
  /* 1) Add Campaign button - #f0592a */
  label[uib-btn-radio="'Left'"].active,
  /* 3) Market Now button - #f0592a */
  #marketNowDropDown,
  button[uib-dropdown-toggle]:has(#marketNowDropDown),
  /* 4) Save button - #f0592a */
  .panel-primary .panel-footer button,
  /* 1) OK Button - #f0592a */
  .modal-content button[data-bb-handler="confirm"],
  /* 1. Re-Order Button  */
  vfs-item-display-item #btnReOrder,
  /* 4) Right button to #f0592a */
  button[aria-label="export"],
  /* Restore Defaults Button */
  #contactDetailsRestoreDefaults,
  /* Contact edit custom tags */
  tags-input .tags .tag-list .tag-item,
  /* Loan action cards */
  md-card button,
  /* Loan Statuses Draggable */
  .ui-draggable .btn-draggable,
  /* Button Bar background */
  #buttonBar [uib-btn-radio="'contact'"],
  #buttonBar [uib-btn-radio="'loan'"],
  #buttonBar [uib-btn-radio="'reminder'"] {
    background-color: var(--sq-bg-secondary) !important;
  }

  /*********************
   * Border color 
   *********************/
  label[uib-btn-radio="'Left'"].active,
  .pagination > li.active > a,
  tags-input .tags .tag-list .tag-item {
    border-color: var(--sq-bg-secondary) !important;
  }

  /* 3) Change Contact, Add Loan and Add Reminder to #f0592a  -- force icons to white */
  #buttonBar [uib-btn-radio="'contact'"] i,
  #buttonBar [uib-btn-radio="'loan'"] i,
  #buttonBar [uib-btn-radio="'reminder'"] i {
    color: #fff !important;
  }

  /**********************
   * Builder color Stuff
   **********************/

  /* 1) Contact, Reminders, Loans, Notes - #builder color */
  li.active > a,
  /* 1) Print & Mail, Email, and Self-Print Libraries - #builder color */
  .catPanelHeader.collapsed > .panel-heading,
  .catPanelHeader:not(.collapsed) > .panel-heading,
  /* 2. Folder Icon - #builder color */
  button.btn.btn-info,
  /* Wizard */
  .wizard-navigation,
  .wizard-circle .wizard-centered .completed,
  .wizard-help-throb,
  /* Loading Spinner */
  .velma-action-spinner-container,
  /* Velma Quick Add  */
  /* 1) Change banner to #builder color */
  .panel-heading,
  /* Reminders */
  /* 1. Left Buttons - Builder Color  */
  .remindersNew .btn-group > label,
  /* 2) Banner to #builder   color */
  md-list-item.vmat-list-item.bg-color-primary,
  /* 3) Orange button to builder color */
  .md-fab.md-mini.md-warn.md-button {
    background-color: var(--sq-bg-builder) !important;
  }

  /* use background here  */
  md-list-item.vmat-list-item.bg-color-primary {
    background: var(--sq-bg-builder) !important;
  }

  /* Spinner borders */
  .velma-action-spinner.small {
    border-top: 8px solid var(--sq-bg-builder) !important;
  }
  .velma-action-spinner.medium {
    border-top: 12px solid var(--sq-bg-builder) !important;
  }
  .velma-action-spinner.large {
    border-top: 16px solid var(--sq-bg-builder) !important;
  }

  /* 7) Graph: #builder color */
  .highcharts-tracker-line {
    color: var(--sq-bg-builder) !important;
  }

  /* Email Opt Out Report */

  /* 1) Fetching data Spinners to #builder color */
  md-progress-circular.color-stroke-primary .md-progress-circular-path,
  md-progress-circular.color-stroke-primary svg .md-progress-circular-path,
  md-progress-circular.color-stroke-primary svg path,
  md-progress-circular.color-stroke-primary svg circle {
    stroke: var(--sq-bg-builder) !important;
  }

  /* Company Settings highlight color */
  input[type="text"].ng-invalid-required,
  #firstName.ng-invalid,
  #lastName.ng-invalid,
  #personal td input.ng-invalid {
    border-color: var(--sq-bg-builder) !important;
    box-shadow: none !important;
  }

  /*************************
   * Dashboard Tiles
   *************************/

  /* 4) Marketing Opportunities - # f0592a top color and #builder color on bottom */
  .info-tiles,
  .tiles-green,
  .tiles-orange,
  .tiles-magenta,
  .tiles-alizarin,
  .tiles-toyo {
    background-color: var(--sq-bg-secondary) !important;
  }

  .info-tiles.tiles-green .tiles-heading,
  .info-tiles.tiles-orange .tiles-heading,
  .info-tiles.tiles-magenta .tiles-heading,
  .info-tiles.tiles-alizarin .tiles-heading,
  .info-tiles.tiles-toyo .tiles-heading,
  .info-tiles.tiles-green:hover .tiles-heading,
  .info-tiles.tiles-orange:hover .tiles-heading,
  .info-tiles.tiles-magenta:hover .tiles-heading,
  .info-tiles.tiles-alizarin:hover .tiles-heading,
  .info-tiles.tiles-toyo:hover .tiles-heading {
    background: var(--sq-bg-secondary) !important;
  }

  .info-tiles.tiles-green .tiles-footer,
  .info-tiles.tiles-orange .tiles-footer,
  .info-tiles.tiles-magenta .tiles-footer,
  .info-tiles.tiles-alizarin .tiles-footer,
  .info-tiles.tiles-toyo .tiles-footer,
  .tiles-body-alt {
    background: var(--sq-bg-builder) !important;
  }

  /***********************
   * Opportunities chips
   ************************/

  md-chips.opportunitiesChip md-chip.selectedChip,
  md-chips.opportunitiesChip md-chip.selectedChip .md-chip-content,
  md-chips.opportunitiesChip md-chip.selectedChip .md-chip-content::before,
  md-chips.opportunitiesChip md-chip.selectedChip .md-chip-content::after {
    background-color: var(--sq-bg-secondary) !important;
    color: var(--sq-text-on-secondary, #fff) !important;
    border-color: transparent !important;
  }

  md-chips.opportunitiesChip md-chip:not(.selectedChip),
  md-chips.opportunitiesChip md-chip:not(.selectedChip) .md-chip-content,
  md-chips.opportunitiesChip
    md-chip:not(.selectedChip)
    .md-chip-content::before,
  md-chips.opportunitiesChip
    md-chip:not(.selectedChip)
    .md-chip-content::after {
    background-color: transparent !important;
    color: inherit !important;
    border-color: transparent !important;
  }
  md-chips.opportunitiesChip md-chips-wrap {
    box-shadow: inset 0 -2px 0 0 var(--sq-bg-builder) !important;
    border-bottom: none !important;
  }
  md-chips.opportunitiesChip md-chips-wrap::before,
  md-chips.opportunitiesChip md-chips-wrap::after {
    background-color: transparent !important;
  }

  /******************************************
   * Reminders, Password stuff and other tabs
   ******************************************/

  /* 2. Settings Button - #f0592a Color  */
  #listViewReminderSettings {
    background-color: var(--sq-bg-secondary) !important;
  }

  /* Change Password */
  /* 1. Change line color : #f0592a Color */
  input[type="password"] {
    border-bottom: 1px solid var(--sq-bg-secondary) !important;
  }

  .tab-container.tab-left a {
    background-color: transparent !important;
  }

  .tab-container.tab-left .nav-tabs > li.active > a {
    border-left: 1px solid var(--sq-bg-builder) !important;
  }

  /* Loan Edit Tabs and button */
  md-tabs-canvas span {
    color: var(--sq-bg-builder) !important;
  }

  /* Teams Calendar */

  velma-reminder-calendar .agendaWrapper-title,
  velma-reminder-calendar .agendaWrapper-date,
  velma-reminder-calendar .agendaWrapper-button-container > button {
    background-color: var(--sq-bg-builder) !important;
  }

  .calendarWrapper-button-viewReminders button,
  .calendarWrapper-button-setReminder button,
  .btn.btn-primary.note-list-component-add-button {
    background-color: var(--sq-bg-builder) !important;
  }

  /* Editor Wizard */

  .wizard-wrapper {
    /* background-color: #F1F1F1; */
    background-color: #f1f1f1;
  }

  .wizard-navigation {
    /* background: #7ac142; */
    background: var(--sq-bg-builder) !important;
    color: #ffffff;
  }

  .wizard-navigation:hover {
    box-shadow:
      0 0 6px rgba(0, 0, 0, 0.16),
      0 6px 12px rgba(0, 0, 0, 0.32);
  }

  .wizard-navigation:active {
    box-shadow:
      0 0 8px rgba(0, 0, 0, 0.18),
      0 8px 16px rgba(0, 0, 0, 0.36);
  }

  .wizard-progress > .wizard-step > .wizard-circle {
    background: #ffffff;
    box-shadow: 0 0 0 5px #ffffff;
  }

  .wizard-progress > .wizard-step > .wizard-circle.active {
    box-shadow:
      0 0 6px rgba(0, 0, 0, 0.16),
      0 6px 12px rgba(0, 0, 0, 0.32),
      var(--sq-bg-builder) !important;
  }

  .wizard-progress > .wizard-step > .wizard-circle.completed {
    /* background: #7ac142; */
    background: var(--sq-bg-builder) !important;
    box-shadow: 0 0 0 5px var(--sq-bg-builder) !important;
  }

  .wizard-progress div:last-of-type .step-name::after {
    display: none;
  }

  .wizard-progress-bar {
    background: #ffffff;
    /* color: #7ac142; */
    color: var(--sq-bg-builder) !important;
  }

  .wizard-check {
    color: #ffffff;
  }

  .wizard-help-throb {
    /* border: 7px solid #7ac142; */
    border: 7px solid var(--sq-bg-builder) !important;
    background: transparent;
  }

  .progress-bar-success {
    background-color: var(--sq-bg-builder) !important;
  }

  circle-icon .circle-container .circle {
    color: var(--sq-bg-builder) !important;
  }

  .wizard-outer-flex-item.wizard-right [velma-feedback] > div.btn.btn-success {
    background-color: var(--sq-bg-builder) !important;
    border-color: var(--sq-bg-builder) !important;
  }

  /* Contacgt search in the wizard */
  .velma-contact-list-search-tools button,
  .velma-contact-list-ct-buttonRow button {
    background-color: var(--sq-bg-builder) !important;
    color: #fff;
  }

  md-checkbox.md-checked .md-icon {
    background-color: var(--sq-bg-secondary) !important;
    border-color: var(--sq-bg-secondary) !important;
  }

  /* Every Success button should be builder */
  .btn.btn-success {
    background-color: var(--sq-bg-builder) !important;
  }

  .velma-email-summary-button {
    background-color: var(--sq-bg-builder) !important;
    color: #fff;
  }

  #quickAddContact .fa.fa-plus-circle {
    color: var(--sq-bg-secondary) !important;
    color: #fff !important;
  }

  .dropdown.getHelpButton > .dropdown-toggle {
    background-color: var(--sq-bg-primary) !important;
  }

  .dropdown .dropdown-toggle .username {
    background-color: var(--sq-bg-primary) !important;
    color: var(--sq-bg-primary) !important;
  }

  .nav .navbar-nav .pull-right .toolbar {
    background-color: var(--sq-bg-primary) !important;
  }

  .highcharts-graph {
    stroke: var(--sq-bg-builder) !important;
  }

  .highcharts-point {
    fill: var(--sq-bg-builder) !important;
    stroke: var(--sq-bg-builder) !important;
  }

  .highcharts-pie-series .highcharts-color-0 {
    fill: var(--sq-email-open) !important;
  }

  .highcharts-pie-series .highcharts-color-0 {
    fill: var(--sq-email-unopened) !important;
  }

  .highcharts-pie-series .highcharts-color-0 {
    fill: var(--sq-email-bounced) !important;
  }

  header.navbar .toolbar > li.dropdown > a.username {
    background-color: var(--sq-bg-primary) !important;
  }

  header.navbar .toolbar > li.dropdown > a.username:hover,
  header.navbar .toolbar > li.dropdown.open > a.username,
  header.navbar .toolbar > li.dropdown > a.username:focus {
    background-color: var(--sq-bg-primary) !important;
  }

  .vfs-thumb .tag,
  .vfs-thumb .tag:hover,
  .vfs-thumb:hover .tag,
  .vfs-thumb .tag:focus,
  .vfs-thumb .tag:active {
    background-color: var(--sq-bg-builder) !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }

  .vfs-thumb .ImageWrapper.thumbnail {
    border-radius: 12px !important;
    overflow: hidden !important;
    background-clip: padding-box;
  }

  .vfs-thumb .ImageOverlayH {
    border-radius: 12px !important;
  }

  .panel-heading {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
  }

  /*******************************************
   * Notes to keep
   *******************************************/
  /* Subscribers (NSN ADMIN) */
  /* 1. Page Number --> *** HANDLED ***  */

  /* Co Brand Partners */

  /* 1. Change highlight color or show required  */

  /* 2. Email Button - #f0592a --> *** HANDLED *** 
  /* 1. Team members banner  --> *** HANDLED ***  */

  /* Marketing History */
  /* 1. Re-Order Button  --> *** HANDLED ***  */

  /* Reminders */
  /* 3. Page No to  #f0592a Color --> *** HANDLED *** */
  /* 4. Email Button  #f0592a Color --> *** HANDLED *** */

  /* Reminder Settings */
  /* 1) Banner to #builder color --> *** HANDLED ***  */
  /* 2) Button to #f0592a --> *** HANDLED *** */

  /* Submit Order (EDITOR) */
  /* 1) Button to #f0592a  --> *** HANDLED *** */

  /* Extra Features */
  /* 1) All red to #builder color  --> *** HANDLED *** */

  /* Corp Settings */
}