$contentBaseURL: 'https://console.account.product.dev.alertlogic.com/assets/static' !default;

// 
@import "@al/ng-generic-components/styles/utility";

html,
body {
  height: 100%;

  .ui-dropdown {
    background-image: linear-gradient(to bottom, al-color($al-smokeBlue, 500), al-color($al-smokeBlue, 500)),
      linear-gradient(to bottom, var(--ald-g-color-gray-300),var(--ald-g-color-gray-300));

    &.ui-inputtext {
      font: 1em 'Open Sans', Arial, sans-serif;
    }
  }
}

.darkMode {

  .dropdowns {
    label,
    button,
    span,
    i {
      color: al-color($al-gray, 50) ;
    }

    .ui-state-highlight span {
      color: white ;
    }

    .ui-slidemenu-backward span {
      color: al-color($al-gray, 700) ;
    }
  }
}

.blueMode {
  .dropdowns {
    label,
    button,
    span,
    i {
      color: al-color($al-gray, 50) ;
    }

    .ui-state-highlight span {
      color: al-color($al-gray, 50) ;
    }

    .ui-slidemenu-backward span {
      color: al-color($al-gray, 700) ;
    }
  }
}



// THE PAST
// Older theming variables updated to ui-css-kit variables

$padding-lrtb: 36px 40px; //  soooooper old and sooooooper all over o3-configuration

// Primary Color
$primaryColor:al-color($al-gray, 500);
$primaryDarkColor:al-color($al-gray, 700);
$primaryDarkerColor:al-color($al-gray, 800);
$primaryLightColor:al-color($al-gray, 200);
$primaryLighterColor:al-color($al-gray, 100);
$primaryLightestColor:al-color($al-gray, 50);
$primaryTextColor:white;

// Accent Color
$accentColor: var(--ald-g-color-smoke-blue-500);
$accentDarkColor: var(--ald-g-color-smoke-blue-700);
$accentDarkerColor: var(--ald-g-color-smoke-blue-800);
$accentLightColor: var(--ald-g-color-smoke-blue-300);
$accentLightestColor: var(--ald-g-color-smoke-blue-50);
$accentTextColor:white;

// Action Colors = primaryAction
$primaryActionColor: var(--ald-g-color-amber-500);
$primaryActionDarkColor: var(--ald-g-color-amber-700);
$primaryActionDarkerColor: var(--ald-g-color-amber-800);
$primaryActionLightColor: var(--ald-g-color-amber-300);
$primaryActionLightestColor: var(--ald-g-color-amber-50);
$primaryActionTextColor:white;

// Success
$successColor: var(--ald-g-color-green-500);
$successDarkColor: var(--ald-g-color-green-700);
$successDarkerColor: var(--ald-g-color-green-800);
$successLightColor: var(--ald-g-color-green-300);
$successLightestColor: var(--ald-g-color-green-50);
$successTextColor:white;

// Danger
$dangerColor: var(--ald-g-color-red-500);
$dangerDarkColor: var(--ald-g-color-red-700);
$dangerDarkerColor: var(--ald-g-color-red-800);
$dangerLightColor: var(--ald-g-color-red-300);
;
$dangerLightestColor: var(--ald-g-color-red-50);
$dangerTextColor:white;

// Deployments 
$aws: var(--ald-g-color-orange-500);
$azure: var(--ald-g-color-blue-500);
$dataCenter: var(--ald-g-color-purple-500);

/******************************/
/*           Common           */
/******************************/
$fontSize: var(--ald-g-text-sm);
$fontSizeTable: var(--ald-g-text-sm);
$fontFamily: var(--font-stack);
$textColor: var(--ald-g-color-gray-900);
$textSecondaryColor: var(--ald-g-color-gray-600);
$lineHeight:24px;
$borderRadius: var(--ald-g-radius-sm);
$dividerColor: var(--ald-g-color-gray-100);
$dividerLightColor: var(--ald-g-color-gray-100);
$transitionDuration:.3s;
$iconWidth: var(--ald-g-space-6);
$iconHeight: var(--ald-g-space-6);
$iconFontSize: var(--ald-g-text-xxxl);
$iconRoundFontSize: var(--ald-g-text-xl);
$hoverBgColor: var(--hover-bg);
$hoverTextColor: var(--hover-text);
$iconPrefix: 'ui-icon';


$headerPadding: var(--ald-g-space-2) var(--ald-g-space-3);
$headerTextColor: var(--ald-g-color-gray-900);
$headerFontWeight:normal;

$bodyPadding: var(--ald-g-space-6) var(--ald-g-space-10);
$contentPadding: var(--ald-g-space-6);
$contentBorderColor: var(--ald-g-color-gray-300);
$contentBgColor:white;

$inputBorderColor: var(--ald-g-color-gray-300);
$inputInvalidBorderColor: var(--ald-g-color-red-600);
$inputBgColor:white;
$inputErrorTextColor: var(--ald-g-color-red-600);
$inputHeaderPadding:.714em 1em;
$inputBorderErrorColor: var(--ald-g-color-red-600);
$inputFieldLabelTextColor: var(--ald-g-color-gray-400);
$inputFieldBoxBgColor:white;
$inputFieldFillBgColor:white;
$inputAutoFillBorderColor:white;
$textboxBgColor:white;

$headerTextColor:white;

// inputs with lists
$inputListPadding: .5em 0;

// groups
$inputGroupBorderColor:$primaryLighterColor;
$inputGroupBgColor:transparent;
$inputGroupTextColor:$textColor;
$inputGroupIconColor:$primaryColor;
$inputGroupAddonMinWidth:2*16px;
$checkboxWidth:18px;
$checkboxHeight:18px;
$inputGroupPadding:2px 2px 1px 2px;
$inputGroupIconFontSize: 1.5em;

// panels
$accordioHeaderText: var(--ald-g-text-lg);
$accordionHeaderPadding: var(--ald-g-space-2) var(--ald-g-space-3);
$accordionHeaderBgColor: white;
$accordionHeaderTextColor: $primaryColor;
$accordionHeaderHoverBgColor: var(--hover-bg);
$accordionHeaderHoverTextColor: var(--hover-text);

$panelHeaderPadding: var(--ald-g-space-2) var(--ald-g-space-3);
$panelContentLineHeight: 24px;
$panelHeaderText: var(--ald-g-text-lg);

$footerPadding: 0;
$buttonTextColor: $primaryActionTextColor;
$listItemPadding: var(--ald-g-space-3) var(--ald-g-space-4);
$errorMessageFontSize: var(--ald-g-text-xs);
$errorMessageIconFontSize:--ald-g-text-sm;

// data
$dataTableHeaderPadding: .857em;
$dataTableCellPadding: var(--ald-g-space-1) var(--ald-g-space-3);
$dataBorderColor: var(--ald-g-color-gray-300);
$dataTableRowBgColorEven:white;

// paginator
$paginatorPadding: .714em 1em;

// menus
$menuitemPadding: .571em .857em;
$menuListPadding: .5em 0;

// widgets
$widgetHeaderBackground: white;
$widgetHeaderText: $primaryColor;


// THE FUTURE
// Theming between current and upcoming color changes, mapping buttons etc...
:root {
  // GLOBAL
  --global-bg: #F5F5F5;
  --font-stack: 'Open Sans', sans-serif;
  --highlight: var(--ald-g-color-highlight);
  --highlight-dark: var(--ald-g-color-slate-600);
  --focus: var(--ald-g-color-highlight);
  --header-bg: var(--ald-g-color-slate-800);
  --hover-bg: var(--ald-g-color-gray-light-100);
  --hover-text: var(--text-color);
  --link: var(--ald-g-color-orange-700);
  --text-color: var(--ald-g-color-text-primary);
  --chips-bg: var(--ald-g-color-gray-700);

  // FORMS
  --label: var(--ald-g-color-text-secondary);
  --form-element-border-color: var(--ald-g-color-border-primary);
  --form-element-bg-color: var(--ald-g-color-white);
  --form-element-text-color: var(--ald-g-color-text-primary);

  // BUTTONS 
  --btn-primary-bg: var(--ald-g-color-orange-500);
  --btn-primary-text: white;
  --btn-primary-outline-text: var(--ald-g-color-orange-500);
  --btn-primary-outline-border: var(--ald-g-color-orange-500);
  --btn-primary-outline-border-active: var(--ald-g-color-orange-500);

  --btn-default-bg: white;
  --btn-default-text: var(--ald-g-color-gray-800);
  --btn-default-outline-text: var(--ald-g-color-text-secondary);
  --btn-default-outline-border: var(--ald-g-color-gray-300);
  --btn-default-outline-border-active: var(--ald-g-color-gray-600);

  --btn-light-bg: white;
  --btn-light-text: var(--btn-dark-text);
  --btn-light-outline-text: var(--btn-dark-text);
  --btn-light-outline-border: var(--ald-g-color-gray-300);
  --btn-light-outline-border-active: var(--ald-g-color-gray-600);

  --btn-success-text: var(--ald-g-color-success);
  --btn-success-bg: var(--ald-g-color-success);
  --box-shadoow-success: var(--ald-g-color-success);

  --btn-danger-text: var(--ald-g-color-danger);
  --btn-danger-bg: var(--ald-g-color-danger);
  --box-shadoow-danger: var(--ald-g-color-danger);

  --btn-dark-text: var(--ald-g-color-gray-800);
  --badge-bg: var(--ald-g-color-gray-700);
}
html body.darkMode,
.darkMode {
  --hover-bg: #535353;
  --global-bg: #474747;
  --header-bg: #212121;

  .dropdowns {
    label,
    button,
    span,
    i {
      color: al-color($al-gray, 50);
    }

    .p-highlight span {
      color: white;
    }

    .p-slidemenu-backward span {
      color: al-color($al-gray, 700);
    }
  }

  .al-view-container {
    background-color: al-color($al-gray, 600);

    .p-button.p-button-outlined,
    .p-datepicker-buttonpane>button.p-button-outlined {
      color: al-color($al-gray, 50);
      background: transparent;
    }

    .p-button.p-button-outlined:enabled:not(:focus):hover,
    .p-datepicker-buttonpane>button.p-button-outlined:enabled:not(:focus):hover {
      color: al-color($al-gray, 50);
      background: transparent;
    }

    .p-selectbutton .p-button:not(.p-active) {
      background-color: al-color($al-gray, 500);
    }

    .p-selectbutton .p-button:not(.p-disabled):not(.p-active):hover {
      background-color: al-color($al-gray, 400);
    }

    .p-dropdown-items {
      background-color: al-color($al-gray, 700);

      .p-dropdown-item:not(.p-highlight) {
        background-color: al-color($al-gray, 700);

        &:hover {
          background-color: al-color($al-gray, 500);
        }
      }
    }

    p-menu {
      .p-menu {
        background-color: al-color($al-gray, 700);

        .p-menuitem {
          background-color: al-color($al-gray, 700);

          .p-menuitem-link {
            color: white;

            &:hover {
              background-color: al-color($al-gray, 500);
            }

            .p-menuitem-icon {
              color: white;
            }
          }

          &:hover {
            background-color: al-color($al-gray, 500);
          }
        }
      }
    }

    .al-menu-trigger {
      background-color: #212121;
    }
  }
}
html body.blueMode,
.blueMode {
  --hover-bg: #324153;
  --global-bg: #394b61;
  --header-bg: #212121;

  .dropdowns {

    label,
    button,
    span,
    i {
      color: al-color($al-gray, 50);
    }

    .p-highlight span {
      color: al-color($al-gray, 50);
    }

    .p-slidemenu-backward span {
      color: al-color($al-gray, 700);
    }
  }

  .al-view-container {
    background-color: #394B61;

    .p-button.p-button-outlined,
    .p-datepicker-buttonpane>button.p-button-outlined {
      color: al-color($al-gray, 50);
      background: transparent;
    }

    .p-button.p-button-outlined:enabled:not(:focus):hover,
    .p-datepicker-buttonpane>button.p-button-outlined:enabled:not(:focus):hover {
      color: al-color($al-gray, 50);
      background: transparent;
    }

    .p-selectbutton .p-button:not(.p-disabled):not(.p-active):hover {
      background-color: al-color($db-slate, 600);
    }

    .p-dropdown-items {
      background-color: al-color($db-slate, 800);

      .p-dropdown-item:not(.p-highlight) {
        background-color: al-color($db-slate, 800);

        &:hover {
          background-color: al-color($db-slate, 600);
        }
      }
    }

    p-menu {
      .p-menu {
        background-color: al-color($db-slate, 800);

        .p-menuitem {
          background-color: al-color($db-slate, 800);

          .p-menuitem-link {
            color: white;

            &:hover {
              background-color: al-color($db-slate, 600);
            }

            .p-menuitem-icon {
              color: white;
            }
          }

          &:hover {
            background-color: al-color($db-slate, 600);
          }

          &.active {
            background-color: al-color($al-smokeBlue, 500);
          }
        }

        .p-submenu-header {
          background-color: al-color($db-slate, 800);
          color: white;
        }
      }
    }

    .al-menu-trigger {
      background-color: #1E2B38;
    }
  }
}

.currentConsole {

  // GLOBAL
  --global-bg: #F5F5F5;
  --highlight: var(--ald-g-color-smoke-blue-500);
  --highlight-dark: var(--ald-g-color-smoke-blue-700);
  --focus: var(--ald-g-color-smoke-blue-500);
  --header-bg: var(--ald-g-color-gray-600);
  --hover-bg: var(--ald-g-color-gray-light-100);
  --link: var(--ald-g-color-smoke-blue-500);
  --text-color: var(--ald-g-color-text-primary);
  --chips-bg: al-color($al-gray, 50);

// FORMS
  --label: var(--ald-g-color-text-secondary);
  --form-element-border-color: #535353;
  --form-element-bg-color: var(--ald-g-color-white);
  --form-element-text-color: var(--ald-g-color-text-primary);


  // BUTTONS 
  --btn-primary-bg: var(--ald-g-color-amber-500);
  --btn-primary-text: var(--ald-g-color-amber-500);
  --btn-primary-outline-text: var(--ald-g-color-amber-600);
  --btn-primary-outline-border: var(--ald-g-color-amber-500);
  --btn-primary-outline-border-active: var(--ald-g-color-amber-500);

  --btn-default-bg: white;
  --btn-default-text: var(--ald-g-color-gray-800);
  --btn-default-outline-text: var(--ald-g-color-text-secondary);
  --btn-default-outline-border: var(--ald-g-color-gray-300);
  --btn-default-outline-border-active: var(--ald-g-color-gray-600);

  --btn-light-bg: white;
  --btn-light-text: var(--btn-dark-text);
  --btn-light-outline-text: var(--btn-dark-text);
  --btn-light-outline-border: var(--ald-g-color-gray-300);
  --btn-light-outline-border-active: var(--ald-g-color-gray-600);

  --btn-success-text: var(--ald-g-color-success);
  --btn-success-bg: var(--ald-g-color-success);
  --box-shadoow-success: var(--ald-g-color-success);

  --btn-danger-text: var(--ald-g-color-danger);
  --btn-danger-bg: var(--ald-g-color-danger);
  --box-shadoow-danger: var(--ald-g-color-danger);

  --btn-dark-text: var(--ald-g-color-gray-800);
  --badge-bg: var(--ald-g-color-gray-700);
} // theme to match current production console


html,
body {
  font-family: var(--font-stack);
  font-weight: normal;
  font-size: var(--ald-g-text-base);
  margin: 0;
  color: var(--text-color);
  background-color: var(--global-bg);

  a {
    color: var(--link);
  }
}

.p-button,
.p-togglebutton {
  border: 0;
  border-radius: var(--ald-g-radius-sm);
  cursor: pointer;
  font-size: var(--ald-g-text-sm);
  font-weight: 500;
  line-height: var(--ald-g-leading-sm);
  padding: var(--ald-g-space-2) var(--ald-g-space-4);
  transition: box-shadow .12s linear, background-color .12s linear;
  // margin-right: .5rem;

  &:focus,
  &:active {
    outline: 0 none;
    outline-offset: 0;
  }

  /* Translate animation */

  &:active {
    transform: translateY(1px);
  }

  &.fab,
  &.round {
    border-radius: var(--ald-g-radius-full);
    padding: var(--ald-g-space-2);
  }

  &.p-highlight {
    background-color: var(--highlight);
    box-shadow: none;
    color: white;
  }

  .p-button-icon-left {
    margin-right: 0.5rem;
  }

  .p-button-icon-right {
    margin-left: 0.5rem;
  }

  .p-button-icon-bottom {
    margin-top: 0.5rem;
  }

  .p-button-icon-top {
    margin-bottom: 0.5rem;
  }

  .p-badge {
    margin-left: 0.5rem;
    min-width: 1rem;
    height: 1rem;
    line-height: 1rem;
    background-color: var(--badge-bg);
    color: #fff;
  }

  &.p-button-sm {
    font-size: var(--ald-g-text-xs);
    height: var(--ald-g-space-7);
    line-height: var(--ald-g-leading-xs);
    padding: 0 var(--ald-g-space-3);
  }

  &.p-button-lg {
    font-size: var(--ald-g-text-md);
    height: var(--ald-g-space-11);
    line-height: var(--ald-g-leading-md);
    padding: 0 var(--ald-g-space-5);
  }

  i {
    margin: 0 var(--ald-g-space-075);
  }

  // Old styles
  &.primaryAction,
  &.secondary,
  &.p-button-secondary {
    background-color: var(--btn-primary-bg);
    color: white;
  }

  &.light {
    background-color: var(--btn-light-bg);
    color: var(--btn-dark-text);
  }

  // &.lightGray {
  //     background-color: var(--ald-c-btn-default-bg);
  //     color: inherit;
  // }

  &.success,
  &.p-button-success {
    background-color: var(--btn-success-bg);
    color: white;
  }

  &.danger,
  &.p-button-danger {
    background-color: var(--btn-danger-bg);
    color: white;

  }

  &.cardBtn {
    width: 72px;
    height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .p-button-icon-left {
      margin-right: 0;
    }

    .p-button-icon-right {
      margin-left: 0;
    }

    &.p-button-text-icon-left,
    &.p-button-text-icon-right {
      padding-left: 0;
      padding-right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: var(--ald-g-text-xxl);

      .p-button-text {
        padding: 0;
        font-size: var(--ald-g-text-xs);
        line-height: 16px;
        text-transform: uppercase;
      }

      .p-button-icon-left,
      .p-button-icon-right {
        position: initial;
        top: auto;
        margin-top: 0;
        height: auto;
      }
    }

    .p-button-label {
      font-size: var(--ald-g-text-xxs);
    }
  }
}

.p-button-rounded {
  border-radius: var(--ald-g-radius-full);
}

.p-button-icon-only {
  padding: var(--ald-g-space-2);
}

// card button groups
.btnGroup {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &.left:not(th):not(td) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
    margin-left: 0;
  }

  &.right:not(th):not(td) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
    margin-right: 0;
  }
}

.btnGroupRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.btnGroupLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

// outline
.p-buttonset {
  padding: var(--ald-g-space-1);
  display: inline-flex;


  .p-button:first-of-type {
    border-bottom-right-radius: var(--ald-g-radius-sm);
    border-top-right-radius: var(--ald-g-radius-sm);
  }

  .p-button:not(:last-child) {
    border-right: var(--ald-g-radius-sm);
  }

  .p-button:not(:first-of-type):not(:last-of-type) {
    border-radius: var(--ald-g-radius-sm);
  }

  .p-button:last-of-type {
    border-bottom-left-radius: var(--ald-g-radius-sm);
    border-top-left-radius: var(--ald-g-radius-sm);
  }
}

.p-button-outlined,
.p-buttonset {
  box-shadow: inset 0 0 0 1px var(--btn-default-outline-border);
  color: var(--default-outline-text);
  background-color: transparent;
  cursor: pointer;
  font-size: var(--ald-g-text-sm);
  font-weight: 500;
  line-height: var(--ald-g-leading-sm);
  transition: box-shadow .12s linear, background-color .12s linear;

  &:enabled {
    &:hover {
      box-shadow: inset 0 0 0 1px inherit;

    }

    &:active {
      box-shadow: inset 0 0 0 2px var(--btn-default-outline-border-active);
    }
  }

  &.primaryAction,
  &.secondary,
  &.p-button-secondary {
    @include flat();
    color: var(--btn-primary-outline-text);
    box-shadow: inset 0 0 0 1px var(--btn-primary-outline-border);

    &:hover,
    &:focus {
      box-shadow: inset 0 0 0 1px var(--btn-primary-outline-border);
    }

    &:active {
      box-shadow: inset 0 0 0 2px var(--btn-primary-outline-border-active);
    }

  }

  &.light {
    background-color: transparent;
    color: var(--btn-light-text);
    box-shadow: inset 0 0 0 1px var(--btn-light-outline-border);
  }

  &.lightGray {
    background-color: var(--btn-light-outline-border);
    color: var(--btn-light-text);
  }

  &.success,
  &.p-button-success {
    background-color: transparent;
    color: var(--btn-success-text);
    box-shadow: inset 0 0 0 1px var(--btn-success-text);
  }

  &.danger,
  &.p-button-danger {
    background-color: transparent;
    color: var(--btn-danger-text);
    box-shadow: inset 0 0 0 1px var(--btn-danger-text);

  }
}

// flat and ghost
.p-button-outlined {
  box-shadow: inset 0 0 0 1px inherit;
}

.flat {
  box-shadow: none;
}

.flat,
.ghost {
  background-color: transparent;

  &.primaryAction,
  &.secondary,
  &.p-button-secondary {
    @include flat();
    color: var(--btn-primary-text);

  }

  &.light {
    @include flat();
    color: var(--btn-light-text);

  }
}

// plain and button-text
.p-button-plain,
.p-button-text,
.p-button-plain.p-button-text {
  background-color: transparent;
  color: var(--btn-default-text);

  &:enabled {
    &:hover {
      background-color: transparent;
    }

    &:active {
      transform: translateY(1px);
    }
  }

  &.primaryAction,
  &.secondary,
  &.p-button-secondary {
    background-color: transparent;
    color: var(--btn-primary-text);
  }

  &.light {
    background-color: transparent;
    color: var(--btn-light-text);
  }

  &.success,
  &.p-button-success {
    background-color: transparent;
    color: var(--btn-success-text);
  }

  &.danger,
  &.p-button-danger {
    background-color: transparent;
    color: var(--btn-danger-text);

  }
}

// card button groups
.btnGroup {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &.left:not(th):not(td) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
    margin-left: 0;
  }

  &.right:not(th):not(td) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
    margin-right: 0;
  }
}

.btnGroupRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.btnGroupLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.p-button-label {
  flex: inherit;
  padding: 0;
  text-transform: uppercase;
}

.p-splitbutton {

  .p-splitbutton-defaultbutton {
    margin-right: 1px;
  }
}

.btn-naked {
    background-color: transparent;
    border:0;
    padding:0;
    cursor: pointer;
}

// Use this ruleset to use material and alert logic icons in p buttons
.p-button-has-custom-icon {
  display: flex;
  align-items: center;
  i {
    margin: 0 4px;
  }
}

.pi {
    &.pi-arrow-circle-right {@include icon-override("play_circle_outline"); }
    &.pi-arrow-circle-left {@include icon-override("play_circle_outline"); @include rotate(180deg);}
    &.pi-arrow-down{ @include icon-override("arrow_downward"); }
    &.pi-arrow-up { @include icon-override("arrow_upward"); }
    &.pi-angle-up {@include icon-override("play_arrow"); @include rotate(-90deg);}
    &.pi-angle-double-up { @include icon-override("skip_next"); @include rotate(-90deg);}
    &.pi-angle-down {@include icon-override("play_arrow"); @include rotate(90deg);}
    &.pi-angle-double-down {@include icon-override("skip_previous"); @include rotate(-90deg);}
    &.pi-angle-right {@include icon-override("play_arrow");}
    &.pi-angle-double-right {@include icon-override("fast_forward");}
    &.pi-angle-left {@include icon-override("play_arrow"); @include rotate(180deg);}
    &.pi-angle-double-left {@include icon-override("fast_rewind");}
    &.pi-bars{@include icon-override("view_list");}
    &.pi-calendar { @include icon-override("date_range"); }
    &.pi-caret-up {@include icon-override("arrow_drop_up");}
    &.pi-caret-down {@include icon-override("arrow_drop_down");}
    &.pi-caret-right {@include icon-override("keyboard_arrow_right");}
    &.pi-caret-left {@include icon-override("keyboard_arrow_left");}
    &.pi-check {@include icon-override("check");}
    &.pi-chevron-circle-left {@include icon-override("keyboard_arrow_left");}
    &.pi-chevron-circle-right {@include icon-override("keyboard_arrow_right");}
    &.pi-chevron-circle-down {@include icon-override("keyboard_arrow_down");}
    &.pi-chevron-circle-up {@include icon-override("keyboard_arrow_up");}
    &.pi-chevron-right {@include icon-override("chevron_right");}
    &.pi-chevron-left {@include icon-override("chevron_left");}
    &.pi-chevron-down {@include icon-override("keyboard_arrow_down");}
    &.pi-chevron-up {@include icon-override("keyboard_arrow_up");}
    &.pi-circle-off{@include icon-override("radio_button_unchecked");}
    &.pi-circle-on{@include icon-override("radio_button_checked");}
    &.pi-minus {@include icon-override("remove");}
    &.pi-plus {@include icon-override("add");}
    &.pi-info-circle {@include icon-override("info");}
    &.pi-upload  {@include icon-override("file_upload");}
    &.pi-home {@include icon-override("home");}
    &.pi-times {@include icon-override("close");}
    &.pi-th-large {@include icon-override("view_module");}
    &.pi-search {@include icon-override("search");}
    &.pi-sort {@include icon-override("arrow_upward");}
    &.pi-sort-up {@include icon-override("arrow_upward");}
    &.pi-sort-down {@include icon-override("arrow_upward");}
    &.pi-sort-alt {@include icon-override("arrow_downward");}
    &.pi-sort-amount-up-alt {@include icon-override("arrow_upward");}
    &.pi-sort-amount-down {@include icon-override("arrow_downward");}
    &.pi-step-forward {@include icon-override("last_page");}
    &.pi-step-backward {@include icon-override("first_page");}
}

.#{$iconPrefix}-3d-rotation { @include icon-override("3d_rotation"); }
.#{$iconPrefix}-ac-unit { @include icon-override("ac_unit"); }
.#{$iconPrefix}-access-alarm { @include icon-override("access_alarm"); }
.#{$iconPrefix}-access-alarms { @include icon-override("access_alarms"); }
.#{$iconPrefix}-access-time { @include icon-override("access_time"); }
.#{$iconPrefix}-accessibility { @include icon-override("accessibility"); }
.#{$iconPrefix}-accessible { @include icon-override("accessible"); }
.#{$iconPrefix}-account-balance { @include icon-override("account_balance"); }
.#{$iconPrefix}-account-balance-wallet { @include icon-override("account_balance_wallet"); }
.#{$iconPrefix}-account-box { @include icon-override("account_box"); }
.#{$iconPrefix}-account-circle { @include icon-override("account_circle"); }
.#{$iconPrefix}-add { @include icon-override("add"); }
.#{$iconPrefix}-add-a-photo { @include icon-override("add_a_photo"); }
.#{$iconPrefix}-add-alarm { @include icon-override("add_alarm"); }
.#{$iconPrefix}-add-alert { @include icon-override("add_alert"); }
.#{$iconPrefix}-add-box { @include icon-override("add_box"); }
.#{$iconPrefix}-add-circle { @include icon-override("add_circle"); }
.#{$iconPrefix}-add-circle-outline { @include icon-override("add_circle_outline"); }
.#{$iconPrefix}-add-location { @include icon-override("add_location"); }
.#{$iconPrefix}-add-shopping-cart { @include icon-override("add_shopping_cart"); }
.#{$iconPrefix}-add-to-photos { @include icon-override("add_to_photos"); }
.#{$iconPrefix}-add-to-queue { @include icon-override("add_to_queue"); }
.#{$iconPrefix}-adjust { @include icon-override("adjust"); }
.#{$iconPrefix}-airline-seat-flat { @include icon-override("airline_seat_flat"); }
.#{$iconPrefix}-airline-seat-flat-angled { @include icon-override("airline_seat_flat_angled"); }
.#{$iconPrefix}-airline-seat-individual-suite { @include icon-override("airline_seat_individual_suite"); }
.#{$iconPrefix}-airline-seat-legroom-extra { @include icon-override("airline_seat_legroom_extra"); }
.#{$iconPrefix}-airline-seat-legroom-normal { @include icon-override("airline_seat_legroom_normal"); }
.#{$iconPrefix}-airline-seat-legroom-reduced { @include icon-override("airline_seat_legroom_reduced"); }
.#{$iconPrefix}-airline-seat-recline-extra { @include icon-override("airline_seat_recline_extra"); }
.#{$iconPrefix}-airline-seat-recline-normal { @include icon-override("airline_seat_recline_normal"); }
.#{$iconPrefix}-airplanemode-active { @include icon-override("airplanemode_active"); }
.#{$iconPrefix}-airplanemode-inactive { @include icon-override("airplanemode_inactive"); }
.#{$iconPrefix}-airplay { @include icon-override("airplay"); }
.#{$iconPrefix}-airport-shuttle { @include icon-override("airport_shuttle"); }
.#{$iconPrefix}-alarm { @include icon-override("alarm"); }
.#{$iconPrefix}-alarm-add { @include icon-override("alarm_add"); }
.#{$iconPrefix}-alarm-off { @include icon-override("alarm_off"); }
.#{$iconPrefix}-alarm-on { @include icon-override("alarm_on"); }
.#{$iconPrefix}-album { @include icon-override("album"); }
.#{$iconPrefix}-all-inclusive { @include icon-override("all_inclusive"); }
.#{$iconPrefix}-all-out { @include icon-override("all_out"); }
.#{$iconPrefix}-android { @include icon-override("android"); }
.#{$iconPrefix}-announcement { @include icon-override("announcement"); }
.#{$iconPrefix}-apps { @include icon-override("apps"); }
.#{$iconPrefix}-archive { @include icon-override("archive"); }
.#{$iconPrefix}-arrow-back { @include icon-override("arrow_back"); }
.#{$iconPrefix}-arrow-downward { @include icon-override("arrow_downward"); }
.#{$iconPrefix}-arrow-drop-down { @include icon-override("arrow_drop_down"); }
.#{$iconPrefix}-arrow-drop-down-circle { @include icon-override("arrow_drop_down_circle"); }
.#{$iconPrefix}-arrow-drop-up { @include icon-override("arrow_drop_up"); }
.#{$iconPrefix}-arrow-forward { @include icon-override("arrow_forward"); }
.#{$iconPrefix}-arrow-upward { @include icon-override("arrow_upward"); }
.#{$iconPrefix}-art-track { @include icon-override("art_track"); }
.#{$iconPrefix}-aspect-ratio { @include icon-override("aspect_ratio"); }
.#{$iconPrefix}-assessment { @include icon-override("assessment"); }
.#{$iconPrefix}-assignment { @include icon-override("assignment"); }
.#{$iconPrefix}-assignment-ind { @include icon-override("assignment_ind"); }
.#{$iconPrefix}-assignment-late { @include icon-override("assignment_late"); }
.#{$iconPrefix}-assignment-return { @include icon-override("assignment_return"); }
.#{$iconPrefix}-assignment-returned { @include icon-override("assignment_returned"); }
.#{$iconPrefix}-assignment-turned-in { @include icon-override("assignment_turned_in"); }
.#{$iconPrefix}-assistant { @include icon-override("assistant"); }
.#{$iconPrefix}-assistant-photo { @include icon-override("assistant_photo"); }
.#{$iconPrefix}-attach-file { @include icon-override("attach_file"); }
.#{$iconPrefix}-attach-money { @include icon-override("attach_money"); }
.#{$iconPrefix}-attachment { @include icon-override("attachment"); }
.#{$iconPrefix}-audiotrack { @include icon-override("audiotrack"); }
.#{$iconPrefix}-autorenew { @include icon-override("autorenew"); }
.#{$iconPrefix}-av-timer { @include icon-override("av_timer"); }
.#{$iconPrefix}-backspace { @include icon-override("backspace"); }
.#{$iconPrefix}-backup { @include icon-override("backup"); }
.#{$iconPrefix}-battery-alert { @include icon-override("battery_alert"); }
.#{$iconPrefix}-battery-charging-full { @include icon-override("battery_charging_full"); }
.#{$iconPrefix}-battery-full { @include icon-override("battery_full"); }
.#{$iconPrefix}-battery-std { @include icon-override("battery_std"); }
.#{$iconPrefix}-battery-unknown { @include icon-override("battery_unknown"); }
.#{$iconPrefix}-beach-access { @include icon-override("beach_access"); }
.#{$iconPrefix}-beenhere { @include icon-override("beenhere"); }
.#{$iconPrefix}-block { @include icon-override("block"); }
.#{$iconPrefix}-bluetooth { @include icon-override("bluetooth"); }
.#{$iconPrefix}-bluetooth-audio { @include icon-override("bluetooth_audio"); }
.#{$iconPrefix}-bluetooth-connected { @include icon-override("bluetooth_connected"); }
.#{$iconPrefix}-bluetooth-disabled { @include icon-override("bluetooth_disabled"); }
.#{$iconPrefix}-bluetooth-searching { @include icon-override("bluetooth_searching"); }
.#{$iconPrefix}-blur-circular { @include icon-override("blur_circular"); }
.#{$iconPrefix}-blur-linear { @include icon-override("blur_linear"); }
.#{$iconPrefix}-blur-off { @include icon-override("blur_off"); }
.#{$iconPrefix}-blur-on { @include icon-override("blur_on"); }
.#{$iconPrefix}-book { @include icon-override("book"); }
.#{$iconPrefix}-bookmark { @include icon-override("bookmark"); }
.#{$iconPrefix}-bookmark-border { @include icon-override("bookmark_border"); }
.#{$iconPrefix}-border-all { @include icon-override("border_all"); }
.#{$iconPrefix}-border-bottom { @include icon-override("border_bottom"); }
.#{$iconPrefix}-border-clear { @include icon-override("border_clear"); }
.#{$iconPrefix}-border-color { @include icon-override("border_color"); }
.#{$iconPrefix}-border-horizontal { @include icon-override("border_horizontal"); }
.#{$iconPrefix}-border-inner { @include icon-override("border_inner"); }
.#{$iconPrefix}-border-left { @include icon-override("border_left"); }
.#{$iconPrefix}-border-outer { @include icon-override("border_outer"); }
.#{$iconPrefix}-border-right { @include icon-override("border_right"); }
.#{$iconPrefix}-border-style { @include icon-override("border_style"); }
.#{$iconPrefix}-border-top { @include icon-override("border_top"); }
.#{$iconPrefix}-border-vertical { @include icon-override("border_vertical"); }
.#{$iconPrefix}-branding-watermark { @include icon-override("branding_watermark"); }
.#{$iconPrefix}-brightness-1 { @include icon-override("brightness_1"); }
.#{$iconPrefix}-brightness-2 { @include icon-override("brightness_2"); }
.#{$iconPrefix}-brightness-3 { @include icon-override("brightness_3"); }
.#{$iconPrefix}-brightness-4 { @include icon-override("brightness_4"); }
.#{$iconPrefix}-brightness-5 { @include icon-override("brightness_5"); }
.#{$iconPrefix}-brightness-6 { @include icon-override("brightness_6"); }
.#{$iconPrefix}-brightness-7 { @include icon-override("brightness_7"); }
.#{$iconPrefix}-brightness-auto { @include icon-override("brightness_auto"); }
.#{$iconPrefix}-brightness-high { @include icon-override("brightness_high"); }
.#{$iconPrefix}-brightness-low { @include icon-override("brightness_low"); }
.#{$iconPrefix}-brightness-medium { @include icon-override("brightness_medium"); }
.#{$iconPrefix}-broken-image { @include icon-override("broken_image"); }
.#{$iconPrefix}-brush { @include icon-override("brush"); }
.#{$iconPrefix}-bubble-chart { @include icon-override("bubble_chart"); }
.#{$iconPrefix}-bug-report { @include icon-override("bug_report"); }
.#{$iconPrefix}-build { @include icon-override("build"); }
.#{$iconPrefix}-burst-mode { @include icon-override("burst_mode"); }
.#{$iconPrefix}-business { @include icon-override("business"); }
.#{$iconPrefix}-business-center { @include icon-override("business_center"); }
.#{$iconPrefix}-cached { @include icon-override("cached"); }
.#{$iconPrefix}-cake { @include icon-override("cake"); }
.#{$iconPrefix}-call { @include icon-override("call"); }
.#{$iconPrefix}-call-end { @include icon-override("call_end"); }
.#{$iconPrefix}-call-made { @include icon-override("call_made"); }
.#{$iconPrefix}-call-merge { @include icon-override("call_merge"); }
.#{$iconPrefix}-call-missed { @include icon-override("call_missed"); }
.#{$iconPrefix}-call-missed-outgoing { @include icon-override("call_missed_outgoing"); }
.#{$iconPrefix}-call-received { @include icon-override("call_received"); }
.#{$iconPrefix}-call-split { @include icon-override("call_split"); }
.#{$iconPrefix}-call-to-action { @include icon-override("call_to_action"); }
.#{$iconPrefix}-camera { @include icon-override("camera"); }
.#{$iconPrefix}-camera-alt { @include icon-override("camera_alt"); }
.#{$iconPrefix}-camera-enhance { @include icon-override("camera_enhance"); }
.#{$iconPrefix}-camera-front { @include icon-override("camera_front"); }
.#{$iconPrefix}-camera-rear { @include icon-override("camera_rear"); }
.#{$iconPrefix}-camera-roll { @include icon-override("camera_roll"); }
.#{$iconPrefix}-cancel { @include icon-override("cancel"); }
.#{$iconPrefix}-card-giftcard { @include icon-override("card_giftcard"); }
.#{$iconPrefix}-card-membership { @include icon-override("card_membership"); }
.#{$iconPrefix}-card-travel { @include icon-override("card_travel"); }
.#{$iconPrefix}-casino { @include icon-override("casino"); }
.#{$iconPrefix}-cast { @include icon-override("cast"); }
.#{$iconPrefix}-cast-connected { @include icon-override("cast_connected"); }
.#{$iconPrefix}-center-focus-strong { @include icon-override("center_focus_strong"); }
.#{$iconPrefix}-center-focus-weak { @include icon-override("center_focus_weak"); }
.#{$iconPrefix}-change-history { @include icon-override("change_history"); }
.#{$iconPrefix}-chat { @include icon-override("chat"); }
.#{$iconPrefix}-chat-bubble { @include icon-override("chat_bubble"); }
.#{$iconPrefix}-chat-bubble-outline { @include icon-override("chat_bubble_outline"); }
.#{$iconPrefix}-check { @include icon-override("check"); }
.#{$iconPrefix}-check-box { @include icon-override("check_box"); }
.#{$iconPrefix}-check-box-outline-blank { @include icon-override("check_box_outline_blank"); }
.#{$iconPrefix}-check-circle { @include icon-override("check_circle"); }
.#{$iconPrefix}-chevron-left { @include icon-override("chevron_left"); }
.#{$iconPrefix}-chevron-right { @include icon-override("chevron_right"); }
.#{$iconPrefix}-child-care { @include icon-override("child_care"); }
.#{$iconPrefix}-child-friendly { @include icon-override("child_friendly"); }
.#{$iconPrefix}-chrome-reader-mode { @include icon-override("chrome_reader_mode"); }
.#{$iconPrefix}-class { @include icon-override("class"); }
.#{$iconPrefix}-clear { @include icon-override("clear"); }
.#{$iconPrefix}-clear-all { @include icon-override("clear_all"); }
.#{$iconPrefix}-close { @include icon-override("close"); }
.#{$iconPrefix}-closed-caption { @include icon-override("closed_caption"); }
.#{$iconPrefix}-cloud { @include icon-override("cloud"); }
.#{$iconPrefix}-cloud-circle { @include icon-override("cloud_circle"); }
.#{$iconPrefix}-cloud-done { @include icon-override("cloud_done"); }
.#{$iconPrefix}-cloud-download { @include icon-override("cloud_download"); }
.#{$iconPrefix}-cloud-off { @include icon-override("cloud_off"); }
.#{$iconPrefix}-cloud-queue { @include icon-override("cloud_queue"); }
.#{$iconPrefix}-cloud-upload { @include icon-override("cloud_upload"); }
.#{$iconPrefix}-code { @include icon-override("code"); }
.#{$iconPrefix}-collections { @include icon-override("collections"); }
.#{$iconPrefix}-collections-bookmark { @include icon-override("collections_bookmark"); }
.#{$iconPrefix}-color-lens { @include icon-override("color_lens"); }
.#{$iconPrefix}-colorize { @include icon-override("colorize"); }
.#{$iconPrefix}-comment { @include icon-override("comment"); }
.#{$iconPrefix}-compare { @include icon-override("compare"); }
.#{$iconPrefix}-compare-arrows { @include icon-override("compare_arrows"); }
.#{$iconPrefix}-computer { @include icon-override("computer"); }
.#{$iconPrefix}-confirmation-number { @include icon-override("confirmation_number"); }
.#{$iconPrefix}-contact-mail { @include icon-override("contact_mail"); }
.#{$iconPrefix}-contact-phone { @include icon-override("contact_phone"); }
.#{$iconPrefix}-contacts { @include icon-override("contacts"); }
.#{$iconPrefix}-content-copy { @include icon-override("content_copy"); }
.#{$iconPrefix}-content-cut { @include icon-override("content_cut"); }
.#{$iconPrefix}-content-paste { @include icon-override("content_paste"); }
.#{$iconPrefix}-control-point { @include icon-override("control_point"); }
.#{$iconPrefix}-control-point-duplicate { @include icon-override("control_point_duplicate"); }
.#{$iconPrefix}-copyright { @include icon-override("copyright"); }
.#{$iconPrefix}-create { @include icon-override("create"); }
.#{$iconPrefix}-create-new-folder { @include icon-override("create_new_folder"); }
.#{$iconPrefix}-credit-card { @include icon-override("credit_card"); }
.#{$iconPrefix}-crop { @include icon-override("crop"); }
.#{$iconPrefix}-crop-16-9 { @include icon-override("crop_16_9"); }
.#{$iconPrefix}-crop-3-2 { @include icon-override("crop_3_2"); }
.#{$iconPrefix}-crop-5-4 { @include icon-override("crop_5_4"); }
.#{$iconPrefix}-crop-7-5 { @include icon-override("crop_7_5"); }
.#{$iconPrefix}-crop-din { @include icon-override("crop_din"); }
.#{$iconPrefix}-crop-free { @include icon-override("crop_free"); }
.#{$iconPrefix}-crop-landscape { @include icon-override("crop_landscape"); }
.#{$iconPrefix}-crop-original { @include icon-override("crop_original"); }
.#{$iconPrefix}-crop-portrait { @include icon-override("crop_portrait"); }
.#{$iconPrefix}-crop-rotate { @include icon-override("crop_rotate"); }
.#{$iconPrefix}-crop-square { @include icon-override("crop_square"); }
.#{$iconPrefix}-dashboard { @include icon-override("dashboard"); }
.#{$iconPrefix}-data-usage { @include icon-override("data_usage"); }
.#{$iconPrefix}-date-range { @include icon-override("date_range"); }
.#{$iconPrefix}-dehaze { @include icon-override("dehaze"); }
.#{$iconPrefix}-delete { @include icon-override("delete"); }
.#{$iconPrefix}-delete-forever { @include icon-override("delete_forever"); }
.#{$iconPrefix}-delete-sweep { @include icon-override("delete_sweep"); }
.#{$iconPrefix}-description { @include icon-override("description"); }
.#{$iconPrefix}-desktop-mac { @include icon-override("desktop_mac"); }
.#{$iconPrefix}-desktop-windows { @include icon-override("desktop_windows"); }
.#{$iconPrefix}-details { @include icon-override("details"); }
.#{$iconPrefix}-developer-board { @include icon-override("developer_board"); }
.#{$iconPrefix}-developer-mode { @include icon-override("developer_mode"); }
.#{$iconPrefix}-device-hub { @include icon-override("device_hub"); }
.#{$iconPrefix}-devices { @include icon-override("devices"); }
.#{$iconPrefix}-devices-other { @include icon-override("devices_other"); }
.#{$iconPrefix}-dialer-sip { @include icon-override("dialer_sip"); }
.#{$iconPrefix}-dialpad { @include icon-override("dialpad"); }
.#{$iconPrefix}-directions { @include icon-override("directions"); }
.#{$iconPrefix}-directions-bike { @include icon-override("directions_bike"); }
.#{$iconPrefix}-directions-boat { @include icon-override("directions_boat"); }
.#{$iconPrefix}-directions-bus { @include icon-override("directions_bus"); }
.#{$iconPrefix}-directions-car { @include icon-override("directions_car"); }
.#{$iconPrefix}-directions-railway { @include icon-override("directions_railway"); }
.#{$iconPrefix}-directions-run { @include icon-override("directions_run"); }
.#{$iconPrefix}-directions-subway { @include icon-override("directions_subway"); }
.#{$iconPrefix}-directions-transit { @include icon-override("directions_transit"); }
.#{$iconPrefix}-directions-walk { @include icon-override("directions_walk"); }
.#{$iconPrefix}-disc-full { @include icon-override("disc_full"); }
.#{$iconPrefix}-dns { @include icon-override("dns"); }
.#{$iconPrefix}-do-not-disturb { @include icon-override("do_not_disturb"); }
.#{$iconPrefix}-do-not-disturb-alt { @include icon-override("do_not_disturb_alt"); }
.#{$iconPrefix}-do-not-disturb-off { @include icon-override("do_not_disturb_off"); }
.#{$iconPrefix}-do-not-disturb-on { @include icon-override("do_not_disturb_on"); }
.#{$iconPrefix}-dock { @include icon-override("dock"); }
.#{$iconPrefix}-domain { @include icon-override("domain"); }
.#{$iconPrefix}-done { @include icon-override("done"); }
.#{$iconPrefix}-done-all { @include icon-override("done_all"); }
.#{$iconPrefix}-donut-large { @include icon-override("donut_large"); }
.#{$iconPrefix}-donut-small { @include icon-override("donut_small"); }
.#{$iconPrefix}-drafts { @include icon-override("drafts"); }
.#{$iconPrefix}-drag-handle { @include icon-override("drag_handle"); }
.#{$iconPrefix}-drive-eta { @include icon-override("drive_eta"); }
.#{$iconPrefix}-dvr { @include icon-override("dvr"); }
.#{$iconPrefix}-edit { @include icon-override("edit"); }
.#{$iconPrefix}-edit-location { @include icon-override("edit_location"); }
.#{$iconPrefix}-eject { @include icon-override("eject"); }
.#{$iconPrefix}-email { @include icon-override("email"); }
.#{$iconPrefix}-enhanced-encryption { @include icon-override("enhanced_encryption"); }
.#{$iconPrefix}-equalizer { @include icon-override("equalizer"); }
.#{$iconPrefix}-error { @include icon-override("error"); }
.#{$iconPrefix}-error-outline { @include icon-override("error_outline"); }
.#{$iconPrefix}-euro-symbol { @include icon-override("euro_symbol"); }
.#{$iconPrefix}-ev-station { @include icon-override("ev_station"); }
.#{$iconPrefix}-event { @include icon-override("event"); }
.#{$iconPrefix}-event-available { @include icon-override("event_available"); }
.#{$iconPrefix}-event-busy { @include icon-override("event_busy"); }
.#{$iconPrefix}-event-note { @include icon-override("event_note"); }
.#{$iconPrefix}-event-seat { @include icon-override("event_seat"); }
.#{$iconPrefix}-exit-to-app { @include icon-override("exit_to_app"); }
.#{$iconPrefix}-expand-less { @include icon-override("expand_less"); }
.#{$iconPrefix}-expand-more { @include icon-override("expand_more"); }
.#{$iconPrefix}-explicit { @include icon-override("explicit"); }
.#{$iconPrefix}-explore { @include icon-override("explore"); }
.#{$iconPrefix}-exposure { @include icon-override("exposure"); }
.#{$iconPrefix}-exposure-neg-1 { @include icon-override("exposure_neg_1"); }
.#{$iconPrefix}-exposure-neg-2 { @include icon-override("exposure_neg_2"); }
.#{$iconPrefix}-exposure-plus-1 { @include icon-override("exposure_plus_1"); }
.#{$iconPrefix}-exposure-plus-2 { @include icon-override("exposure_plus_2"); }
.#{$iconPrefix}-exposure-zero { @include icon-override("exposure_zero"); }
.#{$iconPrefix}-extension { @include icon-override("extension"); }
.#{$iconPrefix}-face { @include icon-override("face"); }
.#{$iconPrefix}-fast-forward { @include icon-override("fast_forward"); }
.#{$iconPrefix}-fast-rewind { @include icon-override("fast_rewind"); }
.#{$iconPrefix}-favorite { @include icon-override("favorite"); }
.#{$iconPrefix}-favorite-border { @include icon-override("favorite_border"); }
.#{$iconPrefix}-featured-play-list { @include icon-override("featured_play_list"); }
.#{$iconPrefix}-featured-video { @include icon-override("featured_video"); }
.#{$iconPrefix}-feedback { @include icon-override("feedback"); }
.#{$iconPrefix}-fiber-dvr { @include icon-override("fiber_dvr"); }
.#{$iconPrefix}-fiber-manual-record { @include icon-override("fiber_manual_record"); }
.#{$iconPrefix}-fiber-new { @include icon-override("fiber_new"); }
.#{$iconPrefix}-fiber-pin { @include icon-override("fiber_pin"); }
.#{$iconPrefix}-fiber-smart-record { @include icon-override("fiber_smart_record"); }
.#{$iconPrefix}-file-download { @include icon-override("file_download"); }
.#{$iconPrefix}-file-upload { @include icon-override("file_upload"); }
.#{$iconPrefix}-filter { @include icon-override("filter"); }
.#{$iconPrefix}-filter-1 { @include icon-override("filter_1"); }
.#{$iconPrefix}-filter-2 { @include icon-override("filter_2"); }
.#{$iconPrefix}-filter-3 { @include icon-override("filter_3"); }
.#{$iconPrefix}-filter-4 { @include icon-override("filter_4"); }
.#{$iconPrefix}-filter-5 { @include icon-override("filter_5"); }
.#{$iconPrefix}-filter-6 { @include icon-override("filter_6"); }
.#{$iconPrefix}-filter-7 { @include icon-override("filter_7"); }
.#{$iconPrefix}-filter-8 { @include icon-override("filter_8"); }
.#{$iconPrefix}-filter-9 { @include icon-override("filter_9"); }
.#{$iconPrefix}-filter-9-plus { @include icon-override("filter_9_plus"); }
.#{$iconPrefix}-filter-b-and-w { @include icon-override("filter_b_and_w"); }
.#{$iconPrefix}-filter-center-focus { @include icon-override("filter_center_focus"); }
.#{$iconPrefix}-filter-drama { @include icon-override("filter_drama"); }
.#{$iconPrefix}-filter-frames { @include icon-override("filter_frames"); }
.#{$iconPrefix}-filter-hdr { @include icon-override("filter_hdr"); }
.#{$iconPrefix}-filter-list { @include icon-override("filter_list"); }
.#{$iconPrefix}-filter-none { @include icon-override("filter_none"); }
.#{$iconPrefix}-filter-tilt-shift { @include icon-override("filter_tilt_shift"); }
.#{$iconPrefix}-filter-vintage { @include icon-override("filter_vintage"); }
.#{$iconPrefix}-find-in-page { @include icon-override("find_in_page"); }
.#{$iconPrefix}-find-replace { @include icon-override("find_replace"); }
.#{$iconPrefix}-fingerprint { @include icon-override("fingerprint"); }
.#{$iconPrefix}-first-page { @include icon-override("first_page"); }
.#{$iconPrefix}-fitness-center { @include icon-override("fitness_center"); }
.#{$iconPrefix}-flag { @include icon-override("flag"); }
.#{$iconPrefix}-flare { @include icon-override("flare"); }
.#{$iconPrefix}-flash-auto { @include icon-override("flash_auto"); }
.#{$iconPrefix}-flash-off { @include icon-override("flash_off"); }
.#{$iconPrefix}-flash-on { @include icon-override("flash_on"); }
.#{$iconPrefix}-flight { @include icon-override("flight"); }
.#{$iconPrefix}-flight-land { @include icon-override("flight_land"); }
.#{$iconPrefix}-flight-takeoff { @include icon-override("flight_takeoff"); }
.#{$iconPrefix}-flip { @include icon-override("flip"); }
.#{$iconPrefix}-flip-to-back { @include icon-override("flip_to_back"); }
.#{$iconPrefix}-flip-to-front { @include icon-override("flip_to_front"); }
.#{$iconPrefix}-folder { @include icon-override("folder"); }
.#{$iconPrefix}-folder-open { @include icon-override("folder_open"); }
.#{$iconPrefix}-folder-shared { @include icon-override("folder_shared"); }
.#{$iconPrefix}-folder-special { @include icon-override("folder_special"); }
.#{$iconPrefix}-font-download { @include icon-override("font_download"); }
.#{$iconPrefix}-format-align-center { @include icon-override("format_align_center"); }
.#{$iconPrefix}-format-align-justify { @include icon-override("format_align_justify"); }
.#{$iconPrefix}-format-align-left { @include icon-override("format_align_left"); }
.#{$iconPrefix}-format-align-right { @include icon-override("format_align_right"); }
.#{$iconPrefix}-format-bold { @include icon-override("format_bold"); }
.#{$iconPrefix}-format-clear { @include icon-override("format_clear"); }
.#{$iconPrefix}-format-color-fill { @include icon-override("format_color_fill"); }
.#{$iconPrefix}-format-color-reset { @include icon-override("format_color_reset"); }
.#{$iconPrefix}-format-color-text { @include icon-override("format_color_text"); }
.#{$iconPrefix}-format-indent-decrease { @include icon-override("format_indent_decrease"); }
.#{$iconPrefix}-format-indent-increase { @include icon-override("format_indent_increase"); }
.#{$iconPrefix}-format-italic { @include icon-override("format_italic"); }
.#{$iconPrefix}-format-line-spacing { @include icon-override("format_line_spacing"); }
.#{$iconPrefix}-format-list-bulleted { @include icon-override("format_list_bulleted"); }
.#{$iconPrefix}-format-list-numbered { @include icon-override("format_list_numbered"); }
.#{$iconPrefix}-format-paint { @include icon-override("format_paint"); }
.#{$iconPrefix}-format-quote { @include icon-override("format_quote"); }
.#{$iconPrefix}-format-shapes { @include icon-override("format_shapes"); }
.#{$iconPrefix}-format-size { @include icon-override("format_size"); }
.#{$iconPrefix}-format-strikethrough { @include icon-override("format_strikethrough"); }
.#{$iconPrefix}-format-textdirection-l-to-r { @include icon-override("format_textdirection_l_to_r"); }
.#{$iconPrefix}-format-textdirection-r-to-l { @include icon-override("format_textdirection_r_to_l"); }
.#{$iconPrefix}-format-underlined { @include icon-override("format_underlined"); }
.#{$iconPrefix}-forum { @include icon-override("forum"); }
.#{$iconPrefix}-forward { @include icon-override("forward"); }
.#{$iconPrefix}-forward-10 { @include icon-override("forward_10"); }
.#{$iconPrefix}-forward-30 { @include icon-override("forward_30"); }
.#{$iconPrefix}-forward-5 { @include icon-override("forward_5"); }
.#{$iconPrefix}-free-breakfast { @include icon-override("free_breakfast"); }
.#{$iconPrefix}-fullscreen { @include icon-override("fullscreen"); }
.#{$iconPrefix}-fullscreen-exit { @include icon-override("fullscreen_exit"); }
.#{$iconPrefix}-functions { @include icon-override("functions"); }
.#{$iconPrefix}-g-translate { @include icon-override("g_translate"); }
.#{$iconPrefix}-gamepad { @include icon-override("gamepad"); }
.#{$iconPrefix}-games { @include icon-override("games"); }
.#{$iconPrefix}-gavel { @include icon-override("gavel"); }
.#{$iconPrefix}-gesture { @include icon-override("gesture"); }
.#{$iconPrefix}-get-app { @include icon-override("get_app"); }
.#{$iconPrefix}-gif { @include icon-override("gif"); }
.#{$iconPrefix}-golf-course { @include icon-override("golf_course"); }
.#{$iconPrefix}-gps-fixed { @include icon-override("gps_fixed"); }
.#{$iconPrefix}-gps-not-fixed { @include icon-override("gps_not_fixed"); }
.#{$iconPrefix}-gps-off { @include icon-override("gps_off"); }
.#{$iconPrefix}-grade { @include icon-override("grade"); }
.#{$iconPrefix}-gradient { @include icon-override("gradient"); }
.#{$iconPrefix}-grain { @include icon-override("grain"); }
.#{$iconPrefix}-graphic-eq { @include icon-override("graphic_eq"); }
.#{$iconPrefix}-grid-off { @include icon-override("grid_off"); }
.#{$iconPrefix}-grid-on { @include icon-override("grid_on"); }
.#{$iconPrefix}-group { @include icon-override("group"); }
.#{$iconPrefix}-group-add { @include icon-override("group_add"); }
.#{$iconPrefix}-group-work { @include icon-override("group_work"); }
.#{$iconPrefix}-hd { @include icon-override("hd"); }
.#{$iconPrefix}-hdr-off { @include icon-override("hdr_off"); }
.#{$iconPrefix}-hdr-on { @include icon-override("hdr_on"); }
.#{$iconPrefix}-hdr-strong { @include icon-override("hdr_strong"); }
.#{$iconPrefix}-hdr-weak { @include icon-override("hdr_weak"); }
.#{$iconPrefix}-headset { @include icon-override("headset"); }
.#{$iconPrefix}-headset-mic { @include icon-override("headset_mic"); }
.#{$iconPrefix}-healing { @include icon-override("healing"); }
.#{$iconPrefix}-hearing { @include icon-override("hearing"); }
.#{$iconPrefix}-help { @include icon-override("help"); }
.#{$iconPrefix}-help-outline { @include icon-override("help_outline"); }
.#{$iconPrefix}-high-quality { @include icon-override("high_quality"); }
.#{$iconPrefix}-highlight { @include icon-override("highlight"); }
.#{$iconPrefix}-highlight-off { @include icon-override("highlight_off"); }
.#{$iconPrefix}-history { @include icon-override("history"); }
.#{$iconPrefix}-home { @include icon-override("home"); }
.#{$iconPrefix}-hot-tub { @include icon-override("hot_tub"); }
.#{$iconPrefix}-hotel { @include icon-override("hotel"); }
.#{$iconPrefix}-hourglass-empty { @include icon-override("hourglass_empty"); }
.#{$iconPrefix}-hourglass-full { @include icon-override("hourglass_full"); }
.#{$iconPrefix}-http { @include icon-override("http"); }
.#{$iconPrefix}-https { @include icon-override("https"); }
.#{$iconPrefix}-image { @include icon-override("image"); }
.#{$iconPrefix}-image-aspect-ratio { @include icon-override("image_aspect_ratio"); }
.#{$iconPrefix}-import-contacts { @include icon-override("import_contacts"); }
.#{$iconPrefix}-import-export { @include icon-override("import_export"); }
.#{$iconPrefix}-important-devices { @include icon-override("important_devices"); }
.#{$iconPrefix}-inbox { @include icon-override("inbox"); }
.#{$iconPrefix}-indeterminate-check-box { @include icon-override("indeterminate_check_box"); }
.#{$iconPrefix}-info { @include icon-override("info"); }
.#{$iconPrefix}-info-outline { @include icon-override("info_outline"); }
.#{$iconPrefix}-input { @include icon-override("input"); }
.#{$iconPrefix}-insert-chart { @include icon-override("insert_chart"); }
.#{$iconPrefix}-insert-comment { @include icon-override("insert_comment"); }
.#{$iconPrefix}-insert-drive-file { @include icon-override("insert_drive_file"); }
.#{$iconPrefix}-insert-emoticon { @include icon-override("insert_emoticon"); }
.#{$iconPrefix}-insert-invitation { @include icon-override("insert_invitation"); }
.#{$iconPrefix}-insert-link { @include icon-override("insert_link"); }
.#{$iconPrefix}-insert-photo { @include icon-override("insert_photo"); }
.#{$iconPrefix}-invert-colors { @include icon-override("invert_colors"); }
.#{$iconPrefix}-invert-colors-off { @include icon-override("invert_colors_off"); }
.#{$iconPrefix}-iso { @include icon-override("iso"); }
.#{$iconPrefix}-keyboard { @include icon-override("keyboard"); }
.#{$iconPrefix}-keyboard-arrow-down { @include icon-override("keyboard_arrow_down"); }
.#{$iconPrefix}-keyboard-arrow-left { @include icon-override("keyboard_arrow_left"); }
.#{$iconPrefix}-keyboard-arrow-right { @include icon-override("keyboard_arrow_right"); }
.#{$iconPrefix}-keyboard-arrow-up { @include icon-override("keyboard_arrow_up"); }
.#{$iconPrefix}-keyboard-backspace { @include icon-override("keyboard_backspace"); }
.#{$iconPrefix}-keyboard-capslock { @include icon-override("keyboard_capslock"); }
.#{$iconPrefix}-keyboard-hide { @include icon-override("keyboard_hide"); }
.#{$iconPrefix}-keyboard-return { @include icon-override("keyboard_return"); }
.#{$iconPrefix}-keyboard-tab { @include icon-override("keyboard_tab"); }
.#{$iconPrefix}-keyboard-voice { @include icon-override("keyboard_voice"); }
.#{$iconPrefix}-kitchen { @include icon-override("kitchen"); }
.#{$iconPrefix}-label { @include icon-override("label"); }
.#{$iconPrefix}-label-outline { @include icon-override("label_outline"); }
.#{$iconPrefix}-landscape { @include icon-override("landscape"); }
.#{$iconPrefix}-language { @include icon-override("language"); }
.#{$iconPrefix}-laptop { @include icon-override("laptop"); }
.#{$iconPrefix}-laptop-chromebook { @include icon-override("laptop_chromebook"); }
.#{$iconPrefix}-laptop-mac { @include icon-override("laptop_mac"); }
.#{$iconPrefix}-laptop-windows { @include icon-override("laptop_windows"); }
.#{$iconPrefix}-last-page { @include icon-override("last_page"); }
.#{$iconPrefix}-launch { @include icon-override("launch"); }
.#{$iconPrefix}-layers { @include icon-override("layers"); }
.#{$iconPrefix}-layers-clear { @include icon-override("layers_clear"); }
.#{$iconPrefix}-leak-add { @include icon-override("leak_add"); }
.#{$iconPrefix}-leak-remove { @include icon-override("leak_remove"); }
.#{$iconPrefix}-lens { @include icon-override("lens"); }
.#{$iconPrefix}-library-add { @include icon-override("library_add"); }
.#{$iconPrefix}-library-books { @include icon-override("library_books"); }
.#{$iconPrefix}-library-music { @include icon-override("library_music"); }
.#{$iconPrefix}-lightbulb-outline { @include icon-override("lightbulb_outline"); }
.#{$iconPrefix}-line-style { @include icon-override("line_style"); }
.#{$iconPrefix}-line-weight { @include icon-override("line_weight"); }
.#{$iconPrefix}-linear-scale { @include icon-override("linear_scale"); }
.#{$iconPrefix}-link { @include icon-override("link"); }
.#{$iconPrefix}-linked-camera { @include icon-override("linked_camera"); }
.#{$iconPrefix}-list { @include icon-override("list"); }
.#{$iconPrefix}-live-help { @include icon-override("live_help"); }
.#{$iconPrefix}-live-tv { @include icon-override("live_tv"); }
.#{$iconPrefix}-local-activity { @include icon-override("local_activity"); }
.#{$iconPrefix}-local-airport { @include icon-override("local_airport"); }
.#{$iconPrefix}-local-atm { @include icon-override("local_atm"); }
.#{$iconPrefix}-local-bar { @include icon-override("local_bar"); }
.#{$iconPrefix}-local-cafe { @include icon-override("local_cafe"); }
.#{$iconPrefix}-local-car-wash { @include icon-override("local_car_wash"); }
.#{$iconPrefix}-local-convenience-store { @include icon-override("local_convenience_store"); }
.#{$iconPrefix}-local-dining { @include icon-override("local_dining"); }
.#{$iconPrefix}-local-drink { @include icon-override("local_drink"); }
.#{$iconPrefix}-local-florist { @include icon-override("local_florist"); }
.#{$iconPrefix}-local-gas-station { @include icon-override("local_gas_station"); }
.#{$iconPrefix}-local-grocery-store { @include icon-override("local_grocery_store"); }
.#{$iconPrefix}-local-hospital { @include icon-override("local_hospital"); }
.#{$iconPrefix}-local-hotel { @include icon-override("local_hotel"); }
.#{$iconPrefix}-local-laundry-service { @include icon-override("local_laundry_service"); }
.#{$iconPrefix}-local-library { @include icon-override("local_library"); }
.#{$iconPrefix}-local-mall { @include icon-override("local_mall"); }
.#{$iconPrefix}-local-movies { @include icon-override("local_movies"); }
.#{$iconPrefix}-local-offer { @include icon-override("local_offer"); }
.#{$iconPrefix}-local-parking { @include icon-override("local_parking"); }
.#{$iconPrefix}-local-pharmacy { @include icon-override("local_pharmacy"); }
.#{$iconPrefix}-local-phone { @include icon-override("local_phone"); }
.#{$iconPrefix}-local-pizza { @include icon-override("local_pizza"); }
.#{$iconPrefix}-local-play { @include icon-override("local_play"); }
.#{$iconPrefix}-local-post-office { @include icon-override("local_post_office"); }
.#{$iconPrefix}-local-printshop { @include icon-override("local_printshop"); }
.#{$iconPrefix}-local-see { @include icon-override("local_see"); }
.#{$iconPrefix}-local-shipping { @include icon-override("local_shipping"); }
.#{$iconPrefix}-local-taxi { @include icon-override("local_taxi"); }
.#{$iconPrefix}-location-city { @include icon-override("location_city"); }
.#{$iconPrefix}-location-disabled { @include icon-override("location_disabled"); }
.#{$iconPrefix}-location-off { @include icon-override("location_off"); }
.#{$iconPrefix}-location-on { @include icon-override("location_on"); }
.#{$iconPrefix}-location-searching { @include icon-override("location_searching"); }
.#{$iconPrefix}-lock { @include icon-override("lock"); }
.#{$iconPrefix}-lock-open { @include icon-override("lock_open"); }
.#{$iconPrefix}-lock-outline { @include icon-override("lock_outline"); }
.#{$iconPrefix}-looks { @include icon-override("looks"); }
.#{$iconPrefix}-looks-3 { @include icon-override("looks_3"); }
.#{$iconPrefix}-looks-4 { @include icon-override("looks_4"); }
.#{$iconPrefix}-looks-5 { @include icon-override("looks_5"); }
.#{$iconPrefix}-looks-6 { @include icon-override("looks_6"); }
.#{$iconPrefix}-looks-one { @include icon-override("looks_one"); }
.#{$iconPrefix}-looks-two { @include icon-override("looks_two"); }
.#{$iconPrefix}-loop { @include icon-override("loop"); }
.#{$iconPrefix}-loupe { @include icon-override("loupe"); }
.#{$iconPrefix}-low-priority { @include icon-override("low_priority"); }
.#{$iconPrefix}-loyalty { @include icon-override("loyalty"); }
.#{$iconPrefix}-mail { @include icon-override("mail"); }
.#{$iconPrefix}-mail-outline { @include icon-override("mail_outline"); }
.#{$iconPrefix}-map { @include icon-override("map"); }
.#{$iconPrefix}-markunread { @include icon-override("markunread"); }
.#{$iconPrefix}-markunread-mailbox { @include icon-override("markunread_mailbox"); }
.#{$iconPrefix}-memory { @include icon-override("memory"); }
.#{$iconPrefix}-menu { @include icon-override("menu"); }
.#{$iconPrefix}-merge-type { @include icon-override("merge_type"); }
.#{$iconPrefix}-message { @include icon-override("message"); }
.#{$iconPrefix}-mic { @include icon-override("mic"); }
.#{$iconPrefix}-mic-none { @include icon-override("mic_none"); }
.#{$iconPrefix}-mic-off { @include icon-override("mic_off"); }
.#{$iconPrefix}-mms { @include icon-override("mms"); }
.#{$iconPrefix}-mode-comment { @include icon-override("mode_comment"); }
.#{$iconPrefix}-mode-edit { @include icon-override("mode_edit"); }
.#{$iconPrefix}-monetization-on { @include icon-override("monetization_on"); }
.#{$iconPrefix}-money-off { @include icon-override("money_off"); }
.#{$iconPrefix}-monochrome-photos { @include icon-override("monochrome_photos"); }
.#{$iconPrefix}-mood { @include icon-override("mood"); }
.#{$iconPrefix}-mood-bad { @include icon-override("mood_bad"); }
.#{$iconPrefix}-more { @include icon-override("more"); }
.#{$iconPrefix}-more-horiz { @include icon-override("more_horiz"); }
.#{$iconPrefix}-more-vert { @include icon-override("more_vert"); }
.#{$iconPrefix}-motorcycle { @include icon-override("motorcycle"); }
.#{$iconPrefix}-mouse { @include icon-override("mouse"); }
.#{$iconPrefix}-move-to-inbox { @include icon-override("move_to_inbox"); }
.#{$iconPrefix}-movie { @include icon-override("movie"); }
.#{$iconPrefix}-movie-creation { @include icon-override("movie_creation"); }
.#{$iconPrefix}-movie-filter { @include icon-override("movie_filter"); }
.#{$iconPrefix}-multiline-chart { @include icon-override("multiline_chart"); }
.#{$iconPrefix}-music-note { @include icon-override("music_note"); }
.#{$iconPrefix}-music-video { @include icon-override("music_video"); }
.#{$iconPrefix}-my-location { @include icon-override("my_location"); }
.#{$iconPrefix}-nature { @include icon-override("nature"); }
.#{$iconPrefix}-nature-people { @include icon-override("nature_people"); }
.#{$iconPrefix}-navigate-before { @include icon-override("navigate_before"); }
.#{$iconPrefix}-navigate-next { @include icon-override("navigate_next"); }
.#{$iconPrefix}-navigation { @include icon-override("navigation"); }
.#{$iconPrefix}-near-me { @include icon-override("near_me"); }
.#{$iconPrefix}-network-cell { @include icon-override("network_cell"); }
.#{$iconPrefix}-network-check { @include icon-override("network_check"); }
.#{$iconPrefix}-network-locked { @include icon-override("network_locked"); }
.#{$iconPrefix}-network-wifi { @include icon-override("network_wifi"); }
.#{$iconPrefix}-new-releases { @include icon-override("new_releases"); }
.#{$iconPrefix}-next-week { @include icon-override("next_week"); }
.#{$iconPrefix}-nfc { @include icon-override("nfc"); }
.#{$iconPrefix}-no-encryption { @include icon-override("no_encryption"); }
.#{$iconPrefix}-no-sim { @include icon-override("no_sim"); }
.#{$iconPrefix}-not-interested { @include icon-override("not_interested"); }
.#{$iconPrefix}-note { @include icon-override("note"); }
.#{$iconPrefix}-note-add { @include icon-override("note_add"); }
.#{$iconPrefix}-notifications { @include icon-override("notifications"); }
.#{$iconPrefix}-notifications-active { @include icon-override("notifications_active"); }
.#{$iconPrefix}-notifications-none { @include icon-override("notifications_none"); }
.#{$iconPrefix}-notifications-off { @include icon-override("notifications_off"); }
.#{$iconPrefix}-notifications-paused { @include icon-override("notifications_paused"); }
.#{$iconPrefix}-offline-pin { @include icon-override("offline_pin"); }
.#{$iconPrefix}-ondemand-video { @include icon-override("ondemand_video"); }
.#{$iconPrefix}-opacity { @include icon-override("opacity"); }
.#{$iconPrefix}-open-in-browser { @include icon-override("open_in_browser"); }
.#{$iconPrefix}-open-in-new { @include icon-override("open_in_new"); }
.#{$iconPrefix}-open-with { @include icon-override("open_with"); }
.#{$iconPrefix}-pages { @include icon-override("pages"); }
.#{$iconPrefix}-pageview { @include icon-override("pageview"); }
.#{$iconPrefix}-palette { @include icon-override("palette"); }
.#{$iconPrefix}-pan-tool { @include icon-override("pan_tool"); }
.#{$iconPrefix}-panorama { @include icon-override("panorama"); }
.#{$iconPrefix}-panorama-fish-eye { @include icon-override("panorama_fish_eye"); }
.#{$iconPrefix}-panorama-horizontal { @include icon-override("panorama_horizontal"); }
.#{$iconPrefix}-panorama-vertical { @include icon-override("panorama_vertical"); }
.#{$iconPrefix}-panorama-wide-angle { @include icon-override("panorama_wide_angle"); }
.#{$iconPrefix}-party-mode { @include icon-override("party_mode"); }
.#{$iconPrefix}-pause { @include icon-override("pause"); }
.#{$iconPrefix}-pause-circle-filled { @include icon-override("pause_circle_filled"); }
.#{$iconPrefix}-pause-circle-outline { @include icon-override("pause_circle_outline"); }
.#{$iconPrefix}-payment { @include icon-override("payment"); }
.#{$iconPrefix}-people { @include icon-override("people"); }
.#{$iconPrefix}-people-outline { @include icon-override("people_outline"); }
.#{$iconPrefix}-perm-camera-mic { @include icon-override("perm_camera_mic"); }
.#{$iconPrefix}-perm-contact-calendar { @include icon-override("perm_contact_calendar"); }
.#{$iconPrefix}-perm-data-setting { @include icon-override("perm_data_setting"); }
.#{$iconPrefix}-perm-device-information { @include icon-override("perm_device_information"); }
.#{$iconPrefix}-perm-identity { @include icon-override("perm_identity"); }
.#{$iconPrefix}-perm-media { @include icon-override("perm_media"); }
.#{$iconPrefix}-perm-phone-msg { @include icon-override("perm_phone_msg"); }
.#{$iconPrefix}-perm-scan-wifi { @include icon-override("perm_scan_wifi"); }
.#{$iconPrefix}-person { @include icon-override("person"); }
.#{$iconPrefix}-person-add { @include icon-override("person_add"); }
.#{$iconPrefix}-person-outline { @include icon-override("person_outline"); }
.#{$iconPrefix}-person-pin { @include icon-override("person_pin"); }
.#{$iconPrefix}-person-pin-circle { @include icon-override("person_pin_circle"); }
.#{$iconPrefix}-personal-video { @include icon-override("personal_video"); }
.#{$iconPrefix}-pets { @include icon-override("pets"); }
.#{$iconPrefix}-phone { @include icon-override("phone"); }
.#{$iconPrefix}-phone-android { @include icon-override("phone_android"); }
.#{$iconPrefix}-phone-bluetooth-speaker { @include icon-override("phone_bluetooth_speaker"); }
.#{$iconPrefix}-phone-forwarded { @include icon-override("phone_forwarded"); }
.#{$iconPrefix}-phone-in-talk { @include icon-override("phone_in_talk"); }
.#{$iconPrefix}-phone-iphone { @include icon-override("phone_iphone"); }
.#{$iconPrefix}-phone-locked { @include icon-override("phone_locked"); }
.#{$iconPrefix}-phone-missed { @include icon-override("phone_missed"); }
.#{$iconPrefix}-phone-paused { @include icon-override("phone_paused"); }
.#{$iconPrefix}-phonelink { @include icon-override("phonelink"); }
.#{$iconPrefix}-phonelink-erase { @include icon-override("phonelink_erase"); }
.#{$iconPrefix}-phonelink-lock { @include icon-override("phonelink_lock"); }
.#{$iconPrefix}-phonelink-off { @include icon-override("phonelink_off"); }
.#{$iconPrefix}-phonelink-ring { @include icon-override("phonelink_ring"); }
.#{$iconPrefix}-phonelink-setup { @include icon-override("phonelink_setup"); }
.#{$iconPrefix}-photo { @include icon-override("photo"); }
.#{$iconPrefix}-photo-album { @include icon-override("photo_album"); }
.#{$iconPrefix}-photo-camera { @include icon-override("photo_camera"); }
.#{$iconPrefix}-photo-filter { @include icon-override("photo_filter"); }
.#{$iconPrefix}-photo-library { @include icon-override("photo_library"); }
.#{$iconPrefix}-photo-size-select-actual { @include icon-override("photo_size_select_actual"); }
.#{$iconPrefix}-photo-size-select-large { @include icon-override("photo_size_select_large"); }
.#{$iconPrefix}-photo-size-select-small { @include icon-override("photo_size_select_small"); }
.#{$iconPrefix}-picture-as-pdf { @include icon-override("picture_as_pdf"); }
.#{$iconPrefix}-picture-in-picture { @include icon-override("picture_in_picture"); }
.#{$iconPrefix}-picture-in-picture-alt { @include icon-override("picture_in_picture_alt"); }
.#{$iconPrefix}-pie-chart { @include icon-override("pie_chart"); }
.#{$iconPrefix}-pie-chart-outlined { @include icon-override("pie_chart_outlined"); }
.#{$iconPrefix}-pin-drop { @include icon-override("pin_drop"); }
.#{$iconPrefix}-place { @include icon-override("place"); }
.#{$iconPrefix}-play-arrow { @include icon-override("play_arrow"); }
.#{$iconPrefix}-play-circle-filled { @include icon-override("play_circle_filled"); }
.#{$iconPrefix}-play-circle-outline { @include icon-override("play_circle_outline"); }
.#{$iconPrefix}-play-for-work { @include icon-override("play_for_work"); }
.#{$iconPrefix}-playlist-add { @include icon-override("playlist_add"); }
.#{$iconPrefix}-playlist-add-check { @include icon-override("playlist_add_check"); }
.#{$iconPrefix}-playlist-play { @include icon-override("playlist_play"); }
.#{$iconPrefix}-plus-one { @include icon-override("plus_one"); }
.#{$iconPrefix}-poll { @include icon-override("poll"); }
.#{$iconPrefix}-polymer { @include icon-override("polymer"); }
.#{$iconPrefix}-pool { @include icon-override("pool"); }
.#{$iconPrefix}-portable-wifi-off { @include icon-override("portable_wifi_off"); }
.#{$iconPrefix}-portrait { @include icon-override("portrait"); }
.#{$iconPrefix}-power { @include icon-override("power"); }
.#{$iconPrefix}-power-input { @include icon-override("power_input"); }
.#{$iconPrefix}-power-settings-new { @include icon-override("power_settings_new"); }
.#{$iconPrefix}-pregnant-woman { @include icon-override("pregnant_woman"); }
.#{$iconPrefix}-present-to-all { @include icon-override("present_to_all"); }
.#{$iconPrefix}-print { @include icon-override("print"); }
.#{$iconPrefix}-priority-high { @include icon-override("priority_high"); }
.#{$iconPrefix}-public { @include icon-override("public"); }
.#{$iconPrefix}-publish { @include icon-override("publish"); }
.#{$iconPrefix}-query-builder { @include icon-override("query_builder"); }
.#{$iconPrefix}-question-answer { @include icon-override("question_answer"); }
.#{$iconPrefix}-queue { @include icon-override("queue"); }
.#{$iconPrefix}-queue-music { @include icon-override("queue_music"); }
.#{$iconPrefix}-queue-play-next { @include icon-override("queue_play_next"); }
.#{$iconPrefix}-radio { @include icon-override("radio"); }
.#{$iconPrefix}-radio-button-checked { @include icon-override("radio_button_checked"); }
.#{$iconPrefix}-radio-button-unchecked { @include icon-override("radio_button_unchecked"); }
.#{$iconPrefix}-rate-review { @include icon-override("rate_review"); }
.#{$iconPrefix}-receipt { @include icon-override("receipt"); }
.#{$iconPrefix}-recent-actors { @include icon-override("recent_actors"); }
.#{$iconPrefix}-record-voice-over { @include icon-override("record_voice_over"); }
.#{$iconPrefix}-redeem { @include icon-override("redeem"); }
.#{$iconPrefix}-redo { @include icon-override("redo"); }
.#{$iconPrefix}-refresh { @include icon-override("refresh"); }
.#{$iconPrefix}-remove { @include icon-override("remove"); }
.#{$iconPrefix}-remove-circle { @include icon-override("remove_circle"); }
.#{$iconPrefix}-remove-circle-outline { @include icon-override("remove_circle_outline"); }
.#{$iconPrefix}-remove-from-queue { @include icon-override("remove_from_queue"); }
.#{$iconPrefix}-remove-red-eye { @include icon-override("remove_red_eye"); }
.#{$iconPrefix}-remove-shopping-cart { @include icon-override("remove_shopping_cart"); }
.#{$iconPrefix}-reorder { @include icon-override("reorder"); }
.#{$iconPrefix}-repeat { @include icon-override("repeat"); }
.#{$iconPrefix}-repeat-one { @include icon-override("repeat_one"); }
.#{$iconPrefix}-replay { @include icon-override("replay"); }
.#{$iconPrefix}-replay-10 { @include icon-override("replay_10"); }
.#{$iconPrefix}-replay-30 { @include icon-override("replay_30"); }
.#{$iconPrefix}-replay-5 { @include icon-override("replay_5"); }
.#{$iconPrefix}-reply { @include icon-override("reply"); }
.#{$iconPrefix}-reply-all { @include icon-override("reply_all"); }
.#{$iconPrefix}-report { @include icon-override("report"); }
.#{$iconPrefix}-report-problem { @include icon-override("report_problem"); }
.#{$iconPrefix}-restaurant { @include icon-override("restaurant"); }
.#{$iconPrefix}-restaurant-menu { @include icon-override("restaurant_menu"); }
.#{$iconPrefix}-restore { @include icon-override("restore"); }
.#{$iconPrefix}-restore-page { @include icon-override("restore_page"); }
.#{$iconPrefix}-ring-volume { @include icon-override("ring_volume"); }
.#{$iconPrefix}-room { @include icon-override("room"); }
.#{$iconPrefix}-room-service { @include icon-override("room_service"); }
.#{$iconPrefix}-rotate-90-degrees-ccw { @include icon-override("rotate_90_degrees_ccw"); }
.#{$iconPrefix}-rotate-left { @include icon-override("rotate_left"); }
.#{$iconPrefix}-rotate-right { @include icon-override("rotate_right"); }
.#{$iconPrefix}-rounded-corner { @include icon-override("rounded_corner"); }
.#{$iconPrefix}-router { @include icon-override("router"); }
.#{$iconPrefix}-rowing { @include icon-override("rowing"); }
.#{$iconPrefix}-rss-feed { @include icon-override("rss_feed"); }
.#{$iconPrefix}-rv-hookup { @include icon-override("rv_hookup"); }
.#{$iconPrefix}-satellite { @include icon-override("satellite"); }
.#{$iconPrefix}-save { @include icon-override("save"); }
.#{$iconPrefix}-scanner { @include icon-override("scanner"); }
.#{$iconPrefix}-schedule { @include icon-override("schedule"); }
.#{$iconPrefix}-school { @include icon-override("school"); }
.#{$iconPrefix}-screen-lock-landscape { @include icon-override("screen_lock_landscape"); }
.#{$iconPrefix}-screen-lock-portrait { @include icon-override("screen_lock_portrait"); }
.#{$iconPrefix}-screen-lock-rotation { @include icon-override("screen_lock_rotation"); }
.#{$iconPrefix}-screen-rotation { @include icon-override("screen_rotation"); }
.#{$iconPrefix}-screen-share { @include icon-override("screen_share"); }
.#{$iconPrefix}-sd-card { @include icon-override("sd_card"); }
.#{$iconPrefix}-sd-storage { @include icon-override("sd_storage"); }
.#{$iconPrefix}-search { @include icon-override("search"); }
.#{$iconPrefix}-security { @include icon-override("security"); }
.#{$iconPrefix}-select-all { @include icon-override("select_all"); }
.#{$iconPrefix}-send { @include icon-override("send"); }
.#{$iconPrefix}-sentiment-dissatisfied { @include icon-override("sentiment_dissatisfied"); }
.#{$iconPrefix}-sentiment-neutral { @include icon-override("sentiment_neutral"); }
.#{$iconPrefix}-sentiment-satisfied { @include icon-override("sentiment_satisfied"); }
.#{$iconPrefix}-sentiment-very-dissatisfied { @include icon-override("sentiment_very_dissatisfied"); }
.#{$iconPrefix}-sentiment-very-satisfied { @include icon-override("sentiment_very_satisfied"); }
.#{$iconPrefix}-settings { @include icon-override("settings"); }
.#{$iconPrefix}-settings-applications { @include icon-override("settings_applications"); }
.#{$iconPrefix}-settings-backup-restore { @include icon-override("settings_backup_restore"); }
.#{$iconPrefix}-settings-bluetooth { @include icon-override("settings_bluetooth"); }
.#{$iconPrefix}-settings-brightness { @include icon-override("settings_brightness"); }
.#{$iconPrefix}-settings-cell { @include icon-override("settings_cell"); }
.#{$iconPrefix}-settings-ethernet { @include icon-override("settings_ethernet"); }
.#{$iconPrefix}-settings-input-antenna { @include icon-override("settings_input_antenna"); }
.#{$iconPrefix}-settings-input-component { @include icon-override("settings_input_component"); }
.#{$iconPrefix}-settings-input-composite { @include icon-override("settings_input_composite"); }
.#{$iconPrefix}-settings-input-hdmi { @include icon-override("settings_input_hdmi"); }
.#{$iconPrefix}-settings-input-svideo { @include icon-override("settings_input_svideo"); }
.#{$iconPrefix}-settings-overscan { @include icon-override("settings_overscan"); }
.#{$iconPrefix}-settings-phone { @include icon-override("settings_phone"); }
.#{$iconPrefix}-settings-power { @include icon-override("settings_power"); }
.#{$iconPrefix}-settings-remote { @include icon-override("settings_remote"); }
.#{$iconPrefix}-settings-system-daydream { @include icon-override("settings_system_daydream"); }
.#{$iconPrefix}-settings-voice { @include icon-override("settings_voice"); }
.#{$iconPrefix}-share { @include icon-override("share"); }
.#{$iconPrefix}-shop { @include icon-override("shop"); }
.#{$iconPrefix}-shop-two { @include icon-override("shop_two"); }
.#{$iconPrefix}-shopping-basket { @include icon-override("shopping_basket"); }
.#{$iconPrefix}-shopping-cart { @include icon-override("shopping_cart"); }
.#{$iconPrefix}-short-text { @include icon-override("short_text"); }
.#{$iconPrefix}-show-chart { @include icon-override("show_chart"); }
.#{$iconPrefix}-shuffle { @include icon-override("shuffle"); }
.#{$iconPrefix}-signal-cellular-4-bar { @include icon-override("signal_cellular_4_bar"); }
.#{$iconPrefix}-signal-cellular-connected-no-internet-4-bar { @include icon-override("signal_cellular_connected_no_internet_4_bar"); }
.#{$iconPrefix}-signal-cellular-no-sim { @include icon-override("signal_cellular_no_sim"); }
.#{$iconPrefix}-signal-cellular-null { @include icon-override("signal_cellular_null"); }
.#{$iconPrefix}-signal-cellular-off { @include icon-override("signal_cellular_off"); }
.#{$iconPrefix}-signal-wifi-4-bar { @include icon-override("signal_wifi_4_bar"); }
.#{$iconPrefix}-signal-wifi-4-bar-lock { @include icon-override("signal_wifi_4_bar_lock"); }
.#{$iconPrefix}-signal-wifi-off { @include icon-override("signal_wifi_off"); }
.#{$iconPrefix}-sim-card { @include icon-override("sim_card"); }
.#{$iconPrefix}-sim-card-alert { @include icon-override("sim_card_alert"); }
.#{$iconPrefix}-skip-next { @include icon-override("skip_next"); }
.#{$iconPrefix}-skip-previous { @include icon-override("skip_previous"); }
.#{$iconPrefix}-slideshow { @include icon-override("slideshow"); }
.#{$iconPrefix}-slow-motion-video { @include icon-override("slow_motion_video"); }
.#{$iconPrefix}-smartphone { @include icon-override("smartphone"); }
.#{$iconPrefix}-smoke-free { @include icon-override("smoke_free"); }
.#{$iconPrefix}-smoking-rooms { @include icon-override("smoking_rooms"); }
.#{$iconPrefix}-sms { @include icon-override("sms"); }
.#{$iconPrefix}-sms-failed { @include icon-override("sms_failed"); }
.#{$iconPrefix}-snooze { @include icon-override("snooze"); }
.#{$iconPrefix}-sort { @include icon-override("sort"); }
.#{$iconPrefix}-sort-by-alpha { @include icon-override("sort_by_alpha"); }
.#{$iconPrefix}-spa { @include icon-override("spa"); }
.#{$iconPrefix}-space-bar { @include icon-override("space_bar"); }
.#{$iconPrefix}-speaker { @include icon-override("speaker"); }
.#{$iconPrefix}-speaker-group { @include icon-override("speaker_group"); }
.#{$iconPrefix}-speaker-notes { @include icon-override("speaker_notes"); }
.#{$iconPrefix}-speaker-notes-off { @include icon-override("speaker_notes_off"); }
.#{$iconPrefix}-speaker-phone { @include icon-override("speaker_phone"); }
.#{$iconPrefix}-spellcheck { @include icon-override("spellcheck"); }
.#{$iconPrefix}-star { @include icon-override("star"); }
.#{$iconPrefix}-star-border { @include icon-override("star_border"); }
.#{$iconPrefix}-star-half { @include icon-override("star_half"); }
.#{$iconPrefix}-stars { @include icon-override("stars"); }
.#{$iconPrefix}-stay-current-landscape { @include icon-override("stay_current_landscape"); }
.#{$iconPrefix}-stay-current-portrait { @include icon-override("stay_current_portrait"); }
.#{$iconPrefix}-stay-primary-landscape { @include icon-override("stay_primary_landscape"); }
.#{$iconPrefix}-stay-primary-portrait { @include icon-override("stay_primary_portrait"); }
.#{$iconPrefix}-stop { @include icon-override("stop"); }
.#{$iconPrefix}-stop-screen-share { @include icon-override("stop_screen_share"); }
.#{$iconPrefix}-storage { @include icon-override("storage"); }
.#{$iconPrefix}-store { @include icon-override("store"); }
.#{$iconPrefix}-store-mall-directory { @include icon-override("store_mall_directory"); }
.#{$iconPrefix}-straighten { @include icon-override("straighten"); }
.#{$iconPrefix}-streetview { @include icon-override("streetview"); }
.#{$iconPrefix}-strikethrough-s { @include icon-override("strikethrough_s"); }
.#{$iconPrefix}-style { @include icon-override("style"); }
.#{$iconPrefix}-subdirectory-arrow-left { @include icon-override("subdirectory_arrow_left"); }
.#{$iconPrefix}-subdirectory-arrow-right { @include icon-override("subdirectory_arrow_right"); }
.#{$iconPrefix}-subject { @include icon-override("subject"); }
.#{$iconPrefix}-subscriptions { @include icon-override("subscriptions"); }
.#{$iconPrefix}-subtitles { @include icon-override("subtitles"); }
.#{$iconPrefix}-subway { @include icon-override("subway"); }
.#{$iconPrefix}-supervisor-account { @include icon-override("supervisor_account"); }
.#{$iconPrefix}-surround-sound { @include icon-override("surround_sound"); }
.#{$iconPrefix}-swap-calls { @include icon-override("swap_calls"); }
.#{$iconPrefix}-swap-horiz { @include icon-override("swap_horiz"); }
.#{$iconPrefix}-swap-vert { @include icon-override("swap_vert"); }
.#{$iconPrefix}-swap-vertical-circle { @include icon-override("swap_vertical_circle"); }
.#{$iconPrefix}-switch-camera { @include icon-override("switch_camera"); }
.#{$iconPrefix}-switch-video { @include icon-override("switch_video"); }
.#{$iconPrefix}-sync { @include icon-override("sync"); }
.#{$iconPrefix}-sync-disabled { @include icon-override("sync_disabled"); }
.#{$iconPrefix}-sync-problem { @include icon-override("sync_problem"); }
.#{$iconPrefix}-system-update { @include icon-override("system_update"); }
.#{$iconPrefix}-system-update-alt { @include icon-override("system_update_alt"); }
.#{$iconPrefix}-tab { @include icon-override("tab"); }
.#{$iconPrefix}-tab-unselected { @include icon-override("tab_unselected"); }
.#{$iconPrefix}-tablet { @include icon-override("tablet"); }
.#{$iconPrefix}-tablet-android { @include icon-override("tablet_android"); }
.#{$iconPrefix}-tablet-mac { @include icon-override("tablet_mac"); }
.#{$iconPrefix}-tag-faces { @include icon-override("tag_faces"); }
.#{$iconPrefix}-tap-and-play { @include icon-override("tap_and_play"); }
.#{$iconPrefix}-terrain { @include icon-override("terrain"); }
.#{$iconPrefix}-text-fields { @include icon-override("text_fields"); }
.#{$iconPrefix}-text-format { @include icon-override("text_format"); }
.#{$iconPrefix}-textsms { @include icon-override("textsms"); }
.#{$iconPrefix}-texture { @include icon-override("texture"); }
.#{$iconPrefix}-theaters { @include icon-override("theaters"); }
.#{$iconPrefix}-thumb-down { @include icon-override("thumb_down"); }
.#{$iconPrefix}-thumb-up { @include icon-override("thumb_up"); }
.#{$iconPrefix}-thumbs-up-down { @include icon-override("thumbs_up_down"); }
.#{$iconPrefix}-time-to-leave { @include icon-override("time_to_leave"); }
.#{$iconPrefix}-timelapse { @include icon-override("timelapse"); }
.#{$iconPrefix}-timeline { @include icon-override("timeline"); }
.#{$iconPrefix}-timer { @include icon-override("timer"); }
.#{$iconPrefix}-timer-10 { @include icon-override("timer_10"); }
.#{$iconPrefix}-timer-3 { @include icon-override("timer_3"); }
.#{$iconPrefix}-timer-off { @include icon-override("timer_off"); }
.#{$iconPrefix}-title { @include icon-override("title"); }
.#{$iconPrefix}-toc { @include icon-override("toc"); }
.#{$iconPrefix}-today { @include icon-override("today"); }
.#{$iconPrefix}-toll { @include icon-override("toll"); }
.#{$iconPrefix}-tonality { @include icon-override("tonality"); }
.#{$iconPrefix}-touch-app { @include icon-override("touch_app"); }
.#{$iconPrefix}-toys { @include icon-override("toys"); }
.#{$iconPrefix}-track-changes { @include icon-override("track_changes"); }
.#{$iconPrefix}-traffic { @include icon-override("traffic"); }
.#{$iconPrefix}-train { @include icon-override("train"); }
.#{$iconPrefix}-tram { @include icon-override("tram"); }
.#{$iconPrefix}-transfer-within-a-station { @include icon-override("transfer_within_a_station"); }
.#{$iconPrefix}-transform { @include icon-override("transform"); }
.#{$iconPrefix}-translate { @include icon-override("translate"); }
.#{$iconPrefix}-trending-down { @include icon-override("trending_down"); }
.#{$iconPrefix}-trending-flat { @include icon-override("trending_flat"); }
.#{$iconPrefix}-trending-up { @include icon-override("trending_up"); }
.#{$iconPrefix}-tune { @include icon-override("tune"); }
.#{$iconPrefix}-turned-in { @include icon-override("turned_in"); }
.#{$iconPrefix}-turned-in-not { @include icon-override("turned_in_not"); }
.#{$iconPrefix}-tv { @include icon-override("tv"); }
.#{$iconPrefix}-unarchive { @include icon-override("unarchive"); }
.#{$iconPrefix}-undo { @include icon-override("undo"); }
.#{$iconPrefix}-unfold-less { @include icon-override("unfold_less"); }
.#{$iconPrefix}-unfold-more { @include icon-override("unfold_more"); }
.#{$iconPrefix}-update { @include icon-override("update"); }
.#{$iconPrefix}-usb { @include icon-override("usb"); }
.#{$iconPrefix}-verified-user { @include icon-override("verified_user"); }
.#{$iconPrefix}-vertical-align-bottom { @include icon-override("vertical_align_bottom"); }
.#{$iconPrefix}-vertical-align-center { @include icon-override("vertical_align_center"); }
.#{$iconPrefix}-vertical-align-top { @include icon-override("vertical_align_top"); }
.#{$iconPrefix}-vibration { @include icon-override("vibration"); }
.#{$iconPrefix}-video-call { @include icon-override("video_call"); }
.#{$iconPrefix}-video-label { @include icon-override("video_label"); }
.#{$iconPrefix}-video-library { @include icon-override("video_library"); }
.#{$iconPrefix}-videocam { @include icon-override("videocam"); }
.#{$iconPrefix}-videocam-off { @include icon-override("videocam_off"); }
.#{$iconPrefix}-videogame-asset { @include icon-override("videogame_asset"); }
.#{$iconPrefix}-view-agenda { @include icon-override("view_agenda"); }
.#{$iconPrefix}-view-array { @include icon-override("view_array"); }
.#{$iconPrefix}-view-carousel { @include icon-override("view_carousel"); }
.#{$iconPrefix}-view-column { @include icon-override("view_column"); }
.#{$iconPrefix}-view-comfy { @include icon-override("view_comfy"); }
.#{$iconPrefix}-view-compact { @include icon-override("view_compact"); }
.#{$iconPrefix}-view-day { @include icon-override("view_day"); }
.#{$iconPrefix}-view-headline { @include icon-override("view_headline"); }
.#{$iconPrefix}-view-list { @include icon-override("view_list"); }
.#{$iconPrefix}-view-module { @include icon-override("view_module"); }
.#{$iconPrefix}-view-quilt { @include icon-override("view_quilt"); }
.#{$iconPrefix}-view-stream { @include icon-override("view_stream"); }
.#{$iconPrefix}-view-week { @include icon-override("view_week"); }
.#{$iconPrefix}-vignette { @include icon-override("vignette"); }
.#{$iconPrefix}-visibility { @include icon-override("visibility"); }
.#{$iconPrefix}-visibility-off { @include icon-override("visibility_off"); }
.#{$iconPrefix}-voice-chat { @include icon-override("voice_chat"); }
.#{$iconPrefix}-voicemail { @include icon-override("voicemail"); }
.#{$iconPrefix}-volume-down { @include icon-override("volume_down"); }
.#{$iconPrefix}-volume-mute { @include icon-override("volume_mute"); }
.#{$iconPrefix}-volume-off { @include icon-override("volume_off"); }
.#{$iconPrefix}-volume-up { @include icon-override("volume_up"); }
.#{$iconPrefix}-vpn-key { @include icon-override("vpn_key"); }
.#{$iconPrefix}-vpn-lock { @include icon-override("vpn_lock"); }
.#{$iconPrefix}-wallpaper { @include icon-override("wallpaper"); }
.#{$iconPrefix}-warning { @include icon-override("warning"); }
.#{$iconPrefix}-watch { @include icon-override("watch"); }
.#{$iconPrefix}-watch-later { @include icon-override("watch_later"); }
.#{$iconPrefix}-wb-auto { @include icon-override("wb_auto"); }
.#{$iconPrefix}-wb-cloudy { @include icon-override("wb_cloudy"); }
.#{$iconPrefix}-wb-incandescent { @include icon-override("wb_incandescent"); }
.#{$iconPrefix}-wb-iridescent { @include icon-override("wb_iridescent"); }
.#{$iconPrefix}-wb-sunny { @include icon-override("wb_sunny"); }
.#{$iconPrefix}-wc { @include icon-override("wc"); }
.#{$iconPrefix}-web { @include icon-override("web"); }
.#{$iconPrefix}-web-asset { @include icon-override("web_asset"); }
.#{$iconPrefix}-weekend { @include icon-override("weekend"); }
.#{$iconPrefix}-whatshot { @include icon-override("whatshot"); }
.#{$iconPrefix}-widgets { @include icon-override("widgets"); }
.#{$iconPrefix}-wifi { @include icon-override("wifi"); }
.#{$iconPrefix}-wifi-lock { @include icon-override("wifi_lock"); }
.#{$iconPrefix}-wifi-tethering { @include icon-override("wifi_tethering"); }
.#{$iconPrefix}-work { @include icon-override("work"); }
.#{$iconPrefix}-wrap-text { @include icon-override("wrap_text"); }
.#{$iconPrefix}-youtube-searched-for { @include icon-override("youtube_searched_for"); }
.#{$iconPrefix}-zoom-in { @include icon-override("zoom_in"); }
.#{$iconPrefix}-zoom-out { @include icon-override("zoom_out"); }
.#{$iconPrefix}-zoom-out-map { @include icon-override("zoom_out_map"); }

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 1.5em;  /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}



:focus {
    outline: 0 none;
}

hr {
    border: 1px solid al-color($al-gray, 50);
}

.text-xs {
    font-size: 12px;
    line-height: 18px;
  }
  
  .text-sm {
    font-size: 14px;
    line-height: 18px;
  }
  
  .text-base {
    font-size: 16px;
    line-height: 24px;
  }
  
  .text-lg {
    font-size: 18px;
    line-height: 24px;
  }
  
  .text-xl {
    font-size: 20px;
    line-height: 24px;
  }
  
  .text-2xl {
    font-size: 24px;
    line-height: 30px;
  }
  
  .text-3xl {
    font-size: 28px;
    line-height: 36px;
  }

h1 {
    font-size: 28px;
    font-weight: 400;
    padding-bottom: 6px;
    margin: 24px 0 0 0;
}

h2 {
    font-size: 24px;
    font-weight: 400;
    padding-bottom: 6px;
    margin: 24px 0 0 0;
}

h3 {
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 6px;
    margin: 24px 0 0 0;
}

h4 {
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 6px;
    margin: 24px 0 0 0;
}

h5 {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 6px;
    margin: 24px 0 0 0;
}

pre,
code {
    @include border-radius(6px);
    margin: 6px 0;
    background: al-color($al-gray, 50);
    color: al-color($al-gray, 500);
    line-height: 2.5em;
}

pre[class*="language-"] {
    margin: 6px 0;
    background: al-color($al-gray, 50);
    color: al-color($al-gray, 500);
    line-height: 2.5em;
}

:not(pre)>code[class*="language-"] {
    margin: 6px 0 6px 0;
    background: al-color($al-gray, 50);
    color: al-color($al-gray, 500);
    line-height: 2.5em;
}

.language-css .token.string {
    color: al-color($al-purple, 700);
    background: hsla(0, 0%, 100%, .5);
}

.tertiary-content {
    padding: $bodyPadding;
}

// COLORS
.essentials {
    background-color: al-color($al-essentials, 500);
    color: $headerTextColor;
}

.professional {
    background-color: al-color($al-professional, 500);
    color: $headerTextColor;
}

.enterprise {
    background-color: al-color($al-enterprise, 500);
    color: $headerTextColor;
}

.primaryAction {
    background-color: $primaryActionColor;
    color: $primaryActionTextColor;
}

.primary {
    background-color: $primaryColor;
    color: $primaryTextColor;
}

.accent {
    background-color: $accentColor;
    color: $accentTextColor;
}

.red {
    background-color: al-color($al-red, 500);
    color: $primaryActionTextColor;
}

.orange {
    background-color: al-color($al-orange, 500);
    color: $primaryActionTextColor;

    i {
        color: $headerTextColor;
    }
}

.yellow {
    background-color: al-color($al-yellow, 500);
    color: $primaryActionTextColor;
}

.green {
    background-color: al-color($al-green, 500);
    color: $primaryActionTextColor;
}

.blue {
    background-color: al-color($al-blue, 500);
    color: $primaryActionTextColor;

    i {
        color: $headerTextColor;
    }
}

.purple {
    background-color: al-color($al-purple, 500);
    color: $primaryActionTextColor;

    i {
        color: $headerTextColor;
    }
}

.risk {
    &.critical {
        color: al-color($al-red, 600);
    }

    &.high {
        color: al-color($al-orange, 500);
    }

    &.medium {
        color: al-color($al-yellow, 500);
    }

    &.low {
        color: al-color($al-gray, 300);
    }

    &.info {
        color: al-color($al-gray, 300);
    }
}

.threat {
    &.high {
        color: al-color($al-red, 600);
    }

    &.medium {
        color: al-color($al-orange, 500);
    }

    &.low {
        color: al-color($al-yellow, 500);
    }

    &.info {
        color: al-color($al-gray, 300);
    }
}

.btnGroup {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &.left:not(th):not(td) {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 6px;
        margin-left: 0;
    }

    &.right:not(th):not(td) {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 6px;
        margin-right: 0;
    }
}

.btnGroupRight {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.btnGroupLeft {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ui-widget,
.ui-widget .ui-widget {
    font-family: $fontFamily;
    text-decoration: none;
}

.ui-widget-content {
    background-color: $widgetHeaderBackground;
    border: none;

    .pi {
        color: #757575;
    }
}

.ui-widget-header {
    background-color: $widgetHeaderBackground;
    color: $widgetHeaderText;
    border: 1px solid $contentBorderColor;
    padding: 6px 24px;

    .pi {
        color: $widgetHeaderText;
    }
}

.ui-state-active,
.ui-state-highlight {
    background-color: transparent;

    .pi {
        color: $accentColor;
    }
}

.ui-widget:disabled,
.ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none;
    cursor: auto;
}

a {
    color: var(--link);
}

/* Utils */
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}

*[hidden] {
    display: none;
}


.card {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #ffffff;
    padding: 0;
    margin-bottom: 16px;
    box-sizing: border-box;

    .card-content {
        padding: 24px;

        h2 {
            font-size: 1.429em;
            margin: 36px 0 12px 0;
            border-bottom: 1px solid al-color($al-gray, 50);
            padding-bottom: 6px;
    
            &.first {
                font-size: 1.429em;
                margin: 0 0 12px 0;
                border-bottom: 1px solid al-color($al-gray, 50);
                padding-bottom: 6px;
            }
    
            &.form-h2 {
                margin: 36px 0 24px 0;
        
                &.first {
                    margin: 0 0 24px 0;
                }
            }
        }
    
        .form-h2 {
            margin: 36px 0 24px 0;
    
            &.first {
                font-size: 1.429em;
                margin: 0 0 12px 0;
                border-bottom: 1px solid al-color($al-gray, 50);
                padding-bottom: 6px;
            }
        }
    
        .label {
            font-size: 12px;
            color: var(--label);
            margin-bottom: 0;
            padding-left: 0;
            font-weight: normal;
        }
    
        .desc {
            margin-bottom: 12px;
            word-wrap: break-word;
            word-break: break-word;
    
            &.first {
                margin-bottom: 0px;
            }
    
            ul {
                padding: 0;
                list-style: none;
                margin: 0;
    
                li {
                    line-height: 1.5em;
                }
            }
        }
    }

    .card-footer {
        padding: 0;
        border-top: 1px solid al-color($al-gray, 50);
    }

    h1 {
        padding: 12px 24px;
        font-size: 24px;
        font-weight: 400;
        margin: 12px 0 0 0;
        border-bottom: 1px solid al-color($al-gray, 50);

        &:first-child {
            margin-top: 0;
        }

        card-w-title {
            padding-bottom: 24px;
        }

        h2 {
            font-size: 22px;
            font-weight: 400;
        }

        h3 {
            font-size: 20px;
            font-weight: 400;
        }

        h4 {
            font-size: 18px;
            font-weight: 400;
        }
    }

    .nopad {
        padding: 0;
    }

    .nopad .ui-panel-content {
        padding: 0;
    }

    @-webkit-keyframes fadeInDown {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translate3d(0, -20px, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @-webkit-keyframes fadeOutUp {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
        }
    }

    @keyframes fadeOutUp {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
        }
    }

    .fadeInDown {
        -webkit-animation: fadeInDown 5s;
        /* Safari 4.0 - 8.0 */
        animation: fadeInDown 5s;
    }

    .fadeOutUp {
        -webkit-animation: fadeOutUp 0.3s;
        /* Safari 4.0 - 8.0 */
        animation: fadeOutUp 0.3s;
    }

    .ui-shadow-1 {
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }

    .ui-shadow-2 {
        -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    }

    .ui-shadow-3 {
        -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }

    .ui-shadow-4 {
        -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        -moz-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    }

    .ui-shadow-5 {
        -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
        -moz-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
        box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    }

    .ui-g {
        -ms-flex-wrap: wrap;
    }

    .ui-g.form-group>div {
        padding: 1em;
    }

    .ui-g.form-group-m>div {
        padding: 1em;
    }
}

// Ripple Effect Style like Google Material Buttons Effect

.ripplelink {
    // display:block;
    // color:#fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 0;
}

.ripplelink:hover {
    // z-index:1000;
}

.ink {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.ripple-animate {
    -webkit-animation: ripple 0.65s linear;
    -moz-animation: ripple 0.65s linear;
    -ms-animation: ripple 0.65s linear;
    -o-animation: ripple 0.65s linear;
    animation: ripple 0.65s linear;
}

@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
    }
}

@-moz-keyframes ripple {
    100% {
        opacity: 0;
        -moz-transform: scale(2.5);
    }
}

@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(2.5);
    }
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

.no-shadow {
    @include no-shadow();
}

.p-col-1,
.p-col-2,
.p-col-3,
.p-col-4,
.p-col-5,
.p-col-6,
.p-col-7,
.p-col-8,
.p-col-9,
.p-col-10,
.p-col-11,
.p-col-12 {
    flex: 0 0 auto;
    padding: 12px;
}

// CONFIGURATION STYLES - o3 compatible

.under-line {
    border-bottom: 1px solid al-color($al-gray, 50);
    margin-bottom: 24px;
    line-height: normal;
    display: flex;
}

.al-action-snackbar {
    .ui-inputswitch-checked {
        .ui-inputswitch-slider {
            background-color: al-color($al-smokeBlue, 500);

            &:hover {
                background-color: al-color($al-smokeBlue, 500);
            }

            &:before {
                background-color: al-color($al-smokeBlue, 900);
            }
        }
    }

    .ui-inputswitch:not(.ui-state-disabled) {

        .ui-inputswitch-slider {
            background-color: al-color($al-smokeBlue, 400);
            @include transition(background-color $transitionDuration);

            &:hover {
                background-color: al-color($al-smokeBlue, 400);
            }
        }
    }
}

.body-content,
.ui-panel-content {
    padding: 24px 40px;

    [class*="p-col-"] {
        padding: 0 36px 0 0;

        &.p-pad {
            padding: 0;
        }
    }

    .p-col-12 {
        padding: 0;
    }

    h2 {
        font-size: 1.429em;
        margin: 36px 0 12px 0;
        border-bottom: 1px solid al-color($al-gray, 50);
        padding-bottom: 6px;

        &.first {
            font-size: 1.429em;
            margin: 0 0 12px 0;
            border-bottom: 1px solid al-color($al-gray, 50);
            padding-bottom: 6px;
        }

        &.form-h2 {
            margin: 36px 0 24px 0;
    
            &.first {
                margin: 0 0 12px 0;
            }
        }
    }

    .form-h2 {
        margin: 36px 0 24px 0;

        &.first {
            font-size: 1.429em;
            margin: 0 0 24px 0;
            border-bottom: 1px solid al-color($al-gray, 50);
            padding-bottom: 6px;
        }
    }

    .label {
        font-size: 12px;
        color: var(--label);
        margin-bottom: 0;
        padding-left: 0;
        font-weight: normal;
    }

    .desc {
        margin-bottom: 12px;
        word-wrap: break-word;
        word-break: break-word;

        &.first {
            margin-bottom: 0px;
        }

        ul {
            padding: 0;
            list-style: none;
            margin: 0;

            li {
                line-height: 1.5em;
            }
        }
    }
}


/** CHORE(*): uses of `lighten` and `darken` to modify custom property variables have been disabled until we can figure out why.  Yeah, that's right.  Just why. */
// FORM INPUT FIELDS

label {
    font-size: var(--ald-g-text-sm);
    color: var(--label);
    margin-bottom: var(--ald-g-space-1);
    padding-left: 0;
    font-weight: 400;
    display: inline-flex;
}

.ui-radiobutton-label,
.ui-chkbox-label {
    color: var(--label);
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;

    &.ui-label-disabled {
        color: var(--ald-c-form-element-text-color-disabled);
      }
}

.ui-inputtext {
    background: transparent no-repeat;
    background-image: linear-gradient(to bottom, $accentColor, $accentColor), linear-gradient(to bottom, $inputBorderColor, $inputBorderColor);
    background-size: 0 2px, 100% 1px;
    background-position: 50% 100%, 50% 100%;
    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    border-width: 0;
    padding: var(--ald-g-space-2) 0;
    font-size: $fontSize;
    @include border-radius(0px);

    &:focus,
    &.ui-state-focus {
        border-width: 0;
        background-size: 100% 2px, 100% 1px;
        outline: none;
        padding-bottom: 2px;
    }

    &:disabled,
    &.ui-state-disabled {
        border-bottom: 1px dotted;
    }

    &.ui-widget-content {
        border-width: 1px;
        background: transparent;
        background-image: none;
    }

    &.ui-state-error {
        border-color: $inputInvalidBorderColor;
        background-image: linear-gradient(to bottom, $inputInvalidBorderColor, $inputInvalidBorderColor), linear-gradient(to bottom, $inputInvalidBorderColor, $inputInvalidBorderColor);
    }
}

.ui-widget-header {
    .ui-inputtext {
        background: transparent no-repeat;
        background-image: linear-gradient(to bottom, $accentColor, $accentColor), linear-gradient(to bottom, $inputBorderColor, $inputBorderColor);
        background-size: 0 2px, 100% 1px;
        background-position: 50% 100%, 50% 100%;
        transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
        padding-bottom: 4px;
    }
}

.md-inputfield {
    display: block;
    position: relative;

    >label {
        color: var(--label);
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 5px;
        top: 1px;
        transition: $transitionDuration ease all;
        -moz-transition: $transitionDuration ease all;
        -webkit-transition: $transitionDuration ease all;
    }

    &.md-inputfield-fill {
        input {
            background-color: $textboxBgColor;
            padding-left: 4px;
            padding-right: 4px;
            padding-top: 4px;
        }

        label {
            top: 2px;
        }

        input:focus~label,
        .ui-inputwrapper-focus~label {
            top: -20px;
            font-size: 12px;
            color: $accentColor;
        }

        input.ui-state-filled~label,
        .ui-inputwrapper-filled~label {
            top: -20px;
            font-size: 12px;
            color: var(--label);
        }
    }

    .input:-webkit-autofill~label {
        top: -20px;
        font-size: 12px;
        color: $accentColor;
    }

    input:focus~label,
    .ui-inputwrapper-focus~label {
        top: -20px;
        font-size: 12px;
        color: $accentColor;
    }

    input.ui-state-filled~label,
    .ui-inputwrapper-filled~label {
        top: -20px;
        font-size: 12px;
        color: var(--label);
    }

    input.ng-dirty.ng-invalid~label {
        color: $inputErrorTextColor;
    }

    .ui-message {
        padding-left: 5px;

        &.ui-messages-default {
            background-color: transparent;
            border: 0 none;
            margin: 0px;
            color: al-color($al-gray, 300);
            font-size: $errorMessageFontSize;
        }

        &.ui-messages-error {
            background-color: transparent;
            border: 0 none;
            margin: 0px;
            color: $inputErrorTextColor;
            font-size: $errorMessageFontSize;
        }
    }

    &.md-inputfield-box {
        input {
            background-color: $textboxBgColor;
            padding-left: 4px;
            padding-right: 4px;
            padding-top: 24px;
        }

        label {
            top: 23px;
        }

        input:focus~label,
        input.ui-state-filled~label,
        .ui-inputwrapper-focus~label,
        .ui-inputwrapper-filled~label {
            top: 1px;
        }

        .input:-webkit-autofill~label {
            top: 1px;
        }
    }

    input[placeholder],
    textarea[placeholder] {
        &::-webkit-input-placeholder {
            /* WebKit browsers */
            opacity: 0;
        }

        &:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            opacity: 0;
        }

        &::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            opacity: 0;
        }

        &:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            opacity: 0;
        }

        &:focus {
            &::-webkit-input-placeholder {
                /* WebKit browsers */
                opacity: 1;
            }

            &:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                opacity: 1;
            }

            &::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                opacity: 1;
            }

            &:-ms-input-placeholder {
                /* Internet Explorer 10+ */
                opacity: 1;
            }
        }
    }

    textarea:focus~label,
    input:focus~label,
    .ui-inputwrapper-focus~label {
        top: -20px;
        font-size: 12px;
        color: $accentColor;
    }

    textarea.ui-state-filled~label{
        top: -6px;
        font-size: 12px;
        color: $primaryLightColor;
    }

    textarea:focus~label {
        top: -6px;
        font-size: 12px;
        color: $accentColor;
    }

    p-dropdown~label,
    p-multiSelect~label,
    p-chips~label,

    input.ui-state-filled~label,
    .ui-inputwrapper-filled~label {
        top: -20px;
        font-size: 12px;
        color: var(--label);
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: black;
    -webkit-box-shadow: 0 0 0px 1000px al-color($db-blue, 50) inset;
    box-shadow: 0 0 0px 1000px al-color($db-blue, 50) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.ui-material-message {
    &.ui-message {
        &.ui-messages-error {
            background-color: transparent;
            border: 0 none;
            margin: 0px;
            color: al-color($al-red, 500);
            font-size: .75em;
        }
    }
}

// LIST BOX
.ui-listbox {
    width: 100%;
    background-color: $inputBgColor;
    border: 0 none;
    @include border-radius($borderRadius);

    &.ui-inputtext {
        padding: 0;
    }

    .ui-listbox-list {
        padding: 0;
    }

    .ui-listbox-item {
        overflow: hidden;
        padding: $listItemPadding;
        margin: 0;
        @include rippleitem();
        @include border-radius(0);

        &.ui-state-highlight {
            background-color: $accentColor;
            color: $accentTextColor;
        }
    }

    &:not(.ui-state-disabled) {
        .ui-listbox-item {
            &:not(.ui-state-highlight):hover {
                @include hover-element();
            }
        }
    }
}

.ui-listbox-header {
    margin-bottom: 0;
    padding: $inputHeaderPadding;
    background-color: transparent;
    @include border-radius-top($borderRadius);

    .ui-chkbox {
        .ui-chkbox-box {
//            border-color: darken($headerTextColor, 15%);
            border-color: $headerTextColor;
        }
    }

    .ui-listbox-filter-container {
        .ui-inputtext {
//            border-color: darken($headerTextColor, 15%);
            border-color: al-color($al-gray, 50);
            width: 100%;
            padding: 2px;
            padding-left: 1.5em;
            @include border-box-sizing();
        }

        .ui-listbox-filter-icon {
            display: flex;
            align-items: center;
            font-size: 18px;
            height: 100%;
            top: 0px;
            left: 0px;
            pointer-events: none;
        }
    }

}

// BUTTONS
.ui-button,
.ui-datepicker-buttonpane>button {
    overflow: hidden;
    vertical-align: middle;
    background-color: $primaryColor;
    color: $buttonTextColor;
    height: 36px;
    font-size: $fontSize;
    font-family: $fontFamily;
    padding: 0;
    border: 0 none;
    @include no-shadow;
    @include transition(background-color $transitionDuration);

    &:enabled:not(:focus):hover {
        background-color: $primaryDarkColor;
    }

    &:enabled:focus {
        outline: 0 none;
    }

    &:focus {
        outline: 0 none;
    }

    &.btnSmall {
        height: 32px;
    }

    &.flat {
        @include flat();
        color: $primaryColor;

        &:enabled:not(:focus):hover {
            background-color: $primaryLightestColor;
            color: $primaryColor;
        }

        &:focus {
            background-color: $primaryLightestColor;
        }

        &:enabled:focus {
            background-color: $primaryLightestColor;

        }

        .pi {
            color: $primaryColor;
        }
        &.p-button-sm {
            font-size: var(--ald-g-text-xs);
            height: var(--ald-g-space-7);
            line-height: var(--ald-g-leading-xs);
            i {
              font-size: 18px;
            }
          }
    }
    &.outline {
        @include no-shadow();
        color: $primaryColor;
        box-shadow: inset 0px 0 0px 1px al-color($al-gray, 100);
        background-color: white;

        &:enabled:not(:focus):hover {
            color: $primaryColor;
            background-color: white;
        }

        &:focus {
            background-color: white;
        }
    }

    .ui-button-text {
        line-height: normal;
        text-transform: uppercase;
    }

    .pi {
        color: $buttonTextColor;
    }

    &.ui-button-icon-only {
        @include border-radius(2px);
        @include no-shadow;
        width: 36px;
        height: 36px;
        font-size: 18px;

        &.round {
            @include border-radius(50%);

            &.chicklet-btn {
                width: 24px;
                height: 24px;
                font-size: 14px;
                margin: 0 6px;

                .ui-button-icon-left {
                    font-size: 18px;
                }
            }
        }

        &.fab {
            width: 56px;
            height: 56px;
            @include border-radius(50%);
            @include content-shadow();

            .ui-icon-add {
                font-size: 32px;
            }
        }

    }

    &.ui-button-text-icon-left {
        padding-left: 2.571em;
        margin-right: 1px;

        .ui-button-text {
            padding: 0 16px 0 12px;
        }
    }

    &.ui-button-text-icon-right {
        padding-right: 2.571em;

        .ui-button-text {
            padding: 0 12px 0 16px;
        }
    }

    &.secondary-btn,
    &.accent {
        background-color: $accentColor;
        color: $accentTextColor;

        &:enabled:not(:focus):hover {
            background-color: $accentDarkColor;
        }

        &:focus {
            outline: 0 none;
        }

        &.flat {
            @include flat();
            color: $accentColor;

            &:enabled:not(:focus):hover {
                background-color: $accentLightestColor;
                color: $accentColor;
            }

            &:focus {
                background-color: $accentLightestColor;
            }

            &:enabled:focus {
                background-color: $accentLightestColor;

            }
        }

        &.outline {
            @include no-shadow();
            color: $accentColor;
            box-shadow: inset 0px 0 0px 1px $accentLightColor;
            background-color: white;

            &:enabled:not(:focus):hover {
                color: $accentColor;
                background-color: white;
            }

            &:focus {
                background-color: white;
            }
        }
    }

    &.primaryAction {
        background-color: $primaryActionColor;
        color: $primaryActionTextColor;

        &:enabled:not(:focus):hover {
            background-color: $primaryActionDarkColor;
        }

        &.flat {
            @include flat();
            color: $primaryActionColor;

            &:enabled:not(:focus):hover {
                background-color: $primaryActionLightestColor;
                color: $primaryActionColor;
            }

            &:focus {
                background-color: $primaryActionLightestColor;
            }

            &:enabled:focus {
                background-color: $primaryActionLightestColor;

            }
        }

        &.outline {
            @include no-shadow();
            color: $primaryActionColor;
            box-shadow: inset 0px 0 0px 1px al-color($al-amber, 300);
            background-color: white;

            &:enabled:not(:focus):hover {
                color: $primaryActionColor;
                background-color: white;
            }

            &:focus {
                background-color: white;
            }
        }
    }

    &.lightGray {
        background-color: $primaryLightestColor;
        color: $textColor;

        &:enabled:not(:focus):hover {
            background-color: $primaryLighterColor;
        }
    }

    &.success {
        background-color: $successColor;
        color: $successTextColor;

        &:enabled:not(:focus):hover {
            background-color: $successDarkColor;
        }

        &.flat {
            @include flat();
            color: $successColor;

            &:enabled:not(:focus):hover {
                background-color: $successLightestColor;
                color: $successColor;
            }

            &:focus {
                background-color: $successLightestColor;
            }

            &:enabled:focus {
                background-color: $successLightestColor;

            }
        }

        &.outline {
            @include no-shadow();
            color: $successColor;
            box-shadow: inset 0px 0 0px 1px $successLightColor;
            background-color: white;

            &:enabled:not(:focus):hover {
                color: $successColor;
                background-color: white;
            }

            &:focus {
                background-color: white;
            }
        }
    }

    &.danger {
        background-color: $dangerColor;
        color: $dangerTextColor;

        &:enabled:not(:focus):hover {
            background-color: $dangerDarkColor;
        }

        &.flat {
            @include flat();
            color: $dangerColor;

            &:enabled:not(:focus):hover {
                background-color: $dangerLightestColor;
                color: $dangerColor;
            }

            &:focus {
                background-color: $dangerLightestColor;
            }

            &:enabled:focus {
                background-color: $dangerLightestColor;

            }
        }

        &.outline {
            @include no-shadow();
            color: $dangerColor;
            box-shadow: inset 0px 0 0px 1px $dangerLightColor;
            background-color: white;

            &:enabled:not(:focus):hover {
                color: $dangerColor;
                background-color: white;
            }

            &:focus {
                background-color: white;
            }
        }
    }

    &.cardBtn {
        width: 72px;
        height: 72px;

        &.ui-button-text-icon-left,
        &.ui-button-text-icon-right {
            padding-left: 0;
            padding-right: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 24px;

            .ui-button-text {
                padding: 0;
                font-size: 10px;
                text-transform: uppercase;
            }

            .ui-button-icon-left,
            .ui-button-icon-right {
                position: initial;
                top: auto;
                margin-top: 0;
                height: auto;
            }
        }
    }
}

.ui-buttonset {
    margin-right: 1px;

    .ui-button {

        align-items: center;
        justify-content: center;
        display: inline-flex;

        &:not(.ui-state-disabled):not(.ui-state-active):hover {
            background-color: $primaryDarkColor;
        }

        &.ui-state-active {
            background-color: $accentColor;
            color: $accentTextColor;
        }
    }
}

.ui-splitbutton {
    @include border-radius($borderRadius + 1);
    -moz-box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);

    >.ui-button {
        @include no-shadow();
        vertical-align: top;

        &:active {
            // background-color: lighten($primaryColor, 10%);
            background-color: $primaryColor;
        }
    }

    .ui-splitbutton-menubutton {
        height: 36px;
        margin: 0 0 0 1px;
        @include border-radius-left(0);
        @include border-radius-right(3px);
        text-transform: uppercase;
    }

    .ui-menu {
        width: 100%;
        min-width: 12.5em;
    }
}

.ui-selectbutton {
    .ui-button {
        &:not(.ui-state-disabled):not(.ui-state-active):hover {
            background-color: $primaryDarkColor;
        }

        &:not(.ui-state-disabled):not(.ui-state-active):focus {
            outline: 0 none;
            // background-color: lighten($primaryColor, 10%);
            background-color: $primaryColor;
        }
    }
}

.ui-fluid {
    .ui-splitbutton {
        .ui-button:first-child {
            width: calc(100% - 2em);
        }
    }
}

.ui-togglebutton {
    margin: 0 1px 0 0;

    &:not(.ui-state-active):not(.ui-state-disabled):hover {
        background-color: $primaryDarkColor;
    }

    &.ui-state-active {
        background-color: $accentColor;
        color: $accentTextColor;
    }
}

// CHECKBOXES
p-checkbox {
    // margin-right: 12px;
}

.ui-chkbox {
    display: inline-flex;
    align-items: center;

    .ui-chkbox-box {
        border: 0;
        @include transition(background-color .3s);
        display: flex;
        width: 36px;
        justify-content: center;
        align-items: center;
        margin-right: 0;
        line-height: normal;


        .ui-chkbox-icon {
            display: flex;
            justify-content: center;
            font-size: 24px;
            line-height: normal;

            /* In order to rendering the p-checkbox in IE11 */
            @media all and (-ms-high-contrast: none),
            (-ms-high-contrast: active) {
                border: 2px solid $primaryColor;
                height: 20px;
                width: 20px;
            }

            &:before {
                font-family: 'Material Icons';
                content: "check_box_outline_blank";
                color: $primaryColor;
            }
        }

        &.ui-state-active {
            border-color: $accentColor;
            background-color: transparent;

            &:before {
                -webkit-animation: rippleOn 400ms forwards ease-out;
                animation: rippleOn 400ms forwards ease-out;
            }

            .ui-chkbox-icon {

                &:before {
                    font-family: 'Material Icons';
                    content: "check_box";
                    color: $accentColor;
                }
            }
        }

        &.ui-state-focus {
            border-color: none;
        }

        &.ng-invalid {
            .ui-chkbox-box {
                border-color: $inputInvalidBorderColor;

                &.ui-state-active {
                    border-color: $inputInvalidBorderColor;
                    background-color: $inputBgColor;

                    .ui-chkbox-icon {
                        color: $inputInvalidBorderColor;
                    }

                    &:before {
                        -webkit-animation: rippleOn 400ms forwards ease-out;
                        animation: rippleOn 400ms forwards ease-out;
                    }
                }

                &.ui-state-focus {
                    border-color: $inputInvalidBorderColor;
                    @include content-shadow();
                    @include transition(box-shadow .3s, background-color .3s);
                }
            }
        }
    }
}

// RADIO BUTTONS
p-radiobutton {
    display: flex;

    label.ui-label-disabled {
        color: al-color($al-gray, 200);
        cursor: not-allowed;
    }
}

.ui-radiobutton {
    display: inline-flex;
    align-items: center;

    .ui-radiobutton-box {
        border: 0;
        @include transition(background-color .3s);
        display: flex;
        width: 36px;
        justify-content: center;
        align-items: center;

        .ui-radiobutton-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;

            &:before {
                font-family: 'Material Icons';
                content: "radio_button_unchecked";
                color: $primaryColor;
            }
        }


        &.ui-state-active {
            border-color: $accentColor;
            background-color: transparent;

            .ui-radiobutton-icon {

                &.pi-circle-on {
                    &.pi:before {
                        font-family: 'Material Icons';
                        content: "radio_button_checked";
                        color: $accentColor;
                    }
                }

                &:before {
                    -webkit-animation: rippleOn 400ms forwards ease-out;
                    animation: rippleOn 400ms forwards ease-out;
                }
            }
        }

        &.ui-state-focus {
            border-color: none;
        }
    }
}


.ui-autocomplete-panel {
    padding: 0;
    border: 0 none;
    @include border-radius(0);

    &.ui-shadow {
        @include overlay-input-shadow();
    }

    .ui-autocomplete-list {
        padding: $inputListPadding;

        .ui-autocomplete-list-item {
            padding: $listItemPadding;
            margin: 0;
            @include border-radius(0);

            .ui-autocomplete-query {
                font-weight: 700;
            }

            &.ui-state-highlight {
                color: $accentTextColor;
            }
        }

        .ui-autocomplete-group {
            padding: $listItemPadding;
        }
    }
}

.ui-autocomplete {
    .ui-autocomplete-dropdown {
        &.ui-button.ui-button-icon-only {
            background-color: transparent;
            @include no-shadow();
            height: 1.429em;
            width: 1.429em;
            padding: 0;
            right: 0;
            bottom: 0;
            margin-right: 0;
            position: absolute;

            .ui-button-text {
                display: none;
            }

            .pi {
                font-size: $iconFontSize;
                color: $textColor;
            }

            &.large {
                height: 4em;
                width: 4em;
            }
        }
    }

    &.ui-autocomplete-multiple {
        .ui-autocomplete-multiple-container {
            &.ui-inputtext {
                @include border-box-sizing();
                padding: 2px 2px 1px 2px;
            }

            &.ui-state-disabled {
                border-bottom: 1px dotted;
            }
        }

        .ui-autocomplete-input-token {
            float: none;
            display: inline-block;
            margin: 0 1px;
            vertical-align: middle;

            >input {
                padding: 0;
                font-size: $fontSize;
                margin: 0;
            }
        }

        .ui-autocomplete-token {
            background-color: $primaryLightestColor;
            display: inline-flex;
            align-items: center;
            padding: 0 12px;
            height: 32px;
            border-radius: 50px;
            margin-bottom: 12px;

            .ui-autocomplete-token-label {
                display: inline-flex;
                align-items: center;
                color: var(--label);
                font-size: 14px;
            }

            .ui-autocomplete-token-icon {
                right: 8px;
                font-size: 20px;
                color: $primaryColor;

                &.pi.pi-times {
                    &:before {
                        content: "cancel";
                    }
                }
            }
        }

        .ui-autocomplete-dropdown.ui-button.ui-button-icon-only {
            bottom: 3px;
        }
    }
}

.ui-fluid {
    .ui-autocomplete {
        &.ui-autocomplete-dd {
            >.ui-inputtext {
                width: 100%;
            }
        }
    }
}

.ui-dropdown {
    border-width: 0;
    background: transparent no-repeat;
    background-image: linear-gradient(to bottom, $primaryLightestColor, $primaryLightestColor), linear-gradient(to bottom, $inputBorderColor, $inputBorderColor);
    background-size: 0 2px, 100% 1px;
    background-position: 50% 100%, 50% 100%;
    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    // padding-bottom: 4px;
    box-sizing: border-box;
    @include border-radius(0);
    width: 100%;

    .ui-dropdown-trigger {
        height: $iconHeight;
        width: $iconWidth;
        font-size: $iconFontSize;
        margin-top: 0;
        padding: 0;
        top: 2px;
        margin-right: 0;

        .pi {
            font-size: $iconFontSize;
            color: $textSecondaryColor;

            &.pi-chevron-down {
                @include material-icon("arrow_drop_down");
            }

            &.pi-chevron-up {
                @include material-icon("arrow_drop_up");
            }
        }
    }

    .ui-dropdown-label-container {
        width: 100%;

        .ui-dropdown-clear-icon.pi.pi-times {
            font-size: 12px;
            color: $textSecondaryColor;
            right: 2.7em;
        }
    }

    .ui-dropdown-label {
        background: none;

        &.ui-inputtext {
            font-family: $fontFamily;
            color: var(--ald-g-color-text-primary);
            white-space: pre;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    &:not(.ui-state-disabled).ui-state-focus {
        border-width: 0;
        background-size: 100% 2px, 100% 1px;
        padding-bottom: 4px;
        outline: none;

        .ui-dropdown-label {
            padding-bottom: 4px;
        }
    }
}

.ui-dropdown-panel {
    padding: 0;
    @include border-radius(0);

    .ui-dropdown-list {
        padding: $inputListPadding;
    }

    .ui-dropdown-item {
        margin: 0;
        // word-break: break-all;
        padding: $listItemPadding;
        color: $textColor;
        @include border-radius(0);
        background-color: $widgetHeaderBackground;

        &:not(.ui-state-highlight):not(.ui-state-disabled):hover {
            @include hover-element();
            color: $textColor;
        }

        &.ui-state-highlight {
            background-color: $accentColor;
            color: $accentTextColor;
        }
    }

    &.ui-shadow {
        @include overlay-input-shadow();
    }

    .ui-dropdown-filter-container {
        display: flex;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid $inputBorderColor;
        background-color: $accentColor;
        padding: $inputHeaderPadding;

        input {
            color: #ffffff;
            padding-left: 30px;

            &:focus {
                border-bottom-color: #ffffff;
            }
        }

        .pi {
            position: absolute;
            left: .50em;
            font-size: 18px;
            color: #ffffff;
            pointer-events: none;

            &.pi-chevron-down {
                @include material-icon("arrow_drop_down");
            }

            .pi-chevron-up {
                @include material-icon("arrow_drop_up");
            }
        }
    }
}

.ui-multiselect {
    border-bottom: 1px solid $inputBorderColor;
    box-sizing: border-box;
    @include border-radius(0);
    @include transition(border-color .3s);

    .ui-multiselect-label-container {
        padding-right: 1.5em;

        .ui-multiselect-label {
            padding: 2px;
            white-space: pre;
        }
    }

    .ui-multiselect-trigger {
        height: $iconHeight;
        width: $iconWidth;
        font-size: $iconFontSize;
        margin-top: 0;
        padding: 0;
        top: -2px;

        .pi {
            font-size: $iconFontSize;
            color: $textSecondaryColor;

            &.pi-chevron-down {
                @include material-icon("arrow_drop_down");
            }

            &.pi-chevron-up {
                @include material-icon("arrow_drop_up");
            }
        }
    }

    &:not(.ui-state-disabled).ui-state-focus {
        border-bottom: 2px solid $primaryColor;
    }
}


.ui-multiselect-panel {

    .ui-multiselect-item {

        .option-container-details {
            display: inline-flex;
        }

        .option-container {
            display: inline-flex;
            vertical-align: middle;
            margin-left: 3px;
        }

        .option-inner-container {
            display: table;
        }

        .option-label {
            display: table-row;
        }

        .option-details {
            display: table-row;
        }
    }
}

.ui-multiselect-panel.ui-widget {
    padding: 0;
    border: 0 none;
    @include border-radius(0);
    @include overlay-input-shadow();

    .ui-multiselect-header {
        @include border-radius(0);
        margin: 0;
        border: 0 none;
        padding: $inputHeaderPadding;
        position: relative;
        background-color: white;
        display: flex;
        align-items: center;

        .pi {
            color: $textColor;
        }

        .ui-widget-header {
            color: $primaryColor;
            display: flex;
            align-items: center;
        }

        .ui-chkbox {
            position: static;

            .ui-chkbox-box {
                border-color: $headerTextColor;

                .ui-chkbox-icon {
                    border-color: $headerTextColor;

                    &:before {
                        color: $primaryColor;
                    }
                }

                &.ui-state-active {
                    .ui-chkbox-icon {
                        border-color: $headerTextColor;


                        &:before {
                            -webkit-animation: none;
                            animation: none;
                            color: $accentColor;
                        }
                    }
                }

                &.ui-state-focus {
                    background-color: $primaryLightColor;
                    @include transition(background-color .3s);
                }
            }
        }

        .ui-multiselect-filter-container {
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .pi {
                color: $primaryColor;
                position: absolute;
                left: 0;
                top: 0;
                font-size: 18px;
                pointer-events: none;
            }

            .ui-inputtext {
                color: $textColor;
                padding: 2px;
                padding-left: 24px;
                width: 100%;
                @include border-box-sizing();

                &:focus {
                    border-bottom-color: #ffffff;
                }

                .ui-multiselect-filter-icon {
                    position: relative;
                }
            }
        }

        .ui-multiselect-close {
            position: relative;
            align-items: center;
            height: 1.5em;
            width: 1.5em;
            right: 0;
            top: auto;

            span {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 1em;
                height: 1em;
                margin-top: -.5em;
                margin-left: -.5em;
                color: $textColor;
            }

            &:hover {
                background-color: $primaryLightestColor;
                @include border-radius(50%);
                @include transition(background-color .3s);
            }
        }
    }

    .ui-multiselect-list {
        padding: $inputListPadding;
        background-color: $contentBgColor;
    }

    .ui-multiselect-item {
        padding: 12px;
        margin: 0;
        @include border-radius(0);
        @include rippleitem();
        border-bottom: 1px solid transparent;
        display: inline-flex;

        .ui-chkbox {
            display: inline-flex;
            align-items: center;

            .ui-chkbox-box {
                &.ui-state-active {
                    .ui-chkbox-icon {
                        border-color: $headerTextColor;

                        &:before {
                            color: $accentColor;
                        }
                    }

                    &:before {
                        -webkit-animation: none;
                        animation: none;
                    }
                }
            }
        }

        &:not(.ui-state-highlight):not(.ui-state-disabled):hover {
            @include hover-element();
            color: $textColor;
        }
    }
}

.ui-spinner {
    .ui-spinner-button {
        width: 1.286em;
        height: 0.714em;
        padding: 0;
        margin-right: .25em;
        background-color: transparent;
        color: $textColor;
        z-index: auto;
        @include no-shadow();

        .pi-triangle-1-n {
            color: $textColor;
        }

        .pi-triangle-1-s {
            color: $textColor;
        }

        .pi {
            top: 0px;
            font-size: $iconFontSize;
            height: .5em;
            color: $textSecondaryColor;
        }

        &:enabled:hover,
        &:active {
            background-color: transparent;
        }
    }

    .ui-spinner-up {
        .pi {
            top: .25em;
        }
    }

    .ui-spinner-down {
        .pi {
            top: .167em;
        }
    }

    .ui-spinner-input {
        padding-right: 30px;
    }
}

.ui-fluid {
    .ui-spinner {
        .ui-spinner-button {
            width: 1.786em;
            height: 0.714em;

            .pi {
                left: auto;
            }
        }
    }
}

.labeled-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 14px;
    margin-top: 3px;

    .label {
        font-size: 10px;
        margin-top: 4px;
        font-weight: 400;
    }
}

.ui-inputswitch {
    height: 14px;
    width: 34px;

    .ui-inputswitch-slider {
        background-color: rgb(158, 158, 158);
        @include border-radius(8px);

        &:before {
            background-color: $primaryLightestColor;
            height: 1.429em;
            width: 1.429em;
            left: 0;
            bottom: -0.214em;
            border-radius: 50%;
            -webkit-transition: $transitionDuration;
            transition: $transitionDuration;
            -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
            -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
        }
    }

    &.ui-inputswitch-checked {
        .ui-inputswitch-slider:before {
            -webkit-transform: translateX(1.250em);
            -ms-transform: translateX(1.250em);
            transform: translateX(1.250em);
        }
    }

    &.ui-inputswitch-focus {
        .ui-inputswitch-slider {
            background-color: rgb(158, 158, 158);
        }
    }

    &:not(.ui-state-disabled):hover {
        .ui-inputswitch-slider {
            background-color: rgb(158, 158, 158);
        }
    }

    &.ui-inputswitch-checked {
        .ui-inputswitch-slider {
            background-color: $accentLightColor;

            &:before {
                background-color: $accentColor;
            }
        }

        &:not(.ui-state-disabled):hover {
            .ui-inputswitch-slider {
                background-color: $accentLightColor;
            }
        }

        &.ui-inputswitch-focus {
            .ui-inputswitch-slider {
                background: $accentLightColor;
            }
        }
    }
}

.ui-slider {
    padding: 0;

    .ui-slider-handle {
        background-color: $accentColor;
        color: $accentTextColor;
        @include border-radius(50%);
        width: 1.429em;
        height: 1.429em;
        transform: scale(.7);
        @include transition(all .4s cubic-bezier(.25, .8, .25, 1));

        &.ui-state-hover,
        &.ui-state-focus {
            transform: scale(1);
        }

        &:focus {
            outline: 0 none;
        }
    }

    &.ui-slider-horizontal {
        height: 2px;
        border: 0 none;
        background-color: $inputBorderColor;

        .ui-slider-handle {
            top: -.65em;
        }
    }

    &.ui-slider-vertical {
        width: 2px;
        border: 0 none;
        background-color: $inputBorderColor;

        .ui-slider-handle {
            left: -0.643em;
        }
    }

    .ui-slider-range {
        padding: 0;
        background-color: $accentColor;
        color: $accentTextColor;
    }

    &:not(.ui-state-disabled) {
        .ui-slider-handle {
            &:hover {
                transform: scale(1);
            }
        }
    }
}

// INPUT SLIDER WITH LABELS
.slider {

    .ui-inputtext {
        display: flex;
        justify-content: center;
        align-content: center;
        margin: 0px auto 24px auto;
        width: 25%;
        text-align: center;
    }

    .labels {
        display: flex;

        .item {
            font-size: 12px;
            width: 100%;
            align-items: center;
            margin-top: 12px;
            justify-content: space-between;
            display: flex;

            &.left {
                justify-content: flex-start;
            }

            &.mid {
                justify-content: center;
            }

            &.right {
                justify-content: flex-end;
            }
        }
    }
}



.ui-calendar {

    input.ui-inputtext {
        width: 230px;
    }

    .ui-datepicker {
        min-width: auto;
    }

    .ui-datepicker-trigger {
        position: absolute;
        bottom: 2px;
        right: 0;
        background-color: transparent;
        color: $textColor;
        height: $iconHeight;
        width: $iconWidth;
        @include no-shadow();
        @include border-radius(0);

        .pi {
            color: $textSecondaryColor;
        }

        &:enabled:focus {
            background-color: transparent;
        }

        &:enabled:hover {
            background-color: transparent;
        }
    }

    .btnGroupRight {
        padding: 12px;

        .ui-button {
            margin-left: 12px;
        }
    }
}

al-date-range-selector {
    p-calendar {
        .ui-calendar .ui-inputtext {
            width: 0px;
        }
    }
}

.ui-datepicker-dropdown {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    left: -1px;
}
.ui-datepicker-dropdown p-dropdown{
    position: relative;
    top: 0px;
}
.ui-datepicker-dropdown .ui-widget{
    background: none;
}
.ui-datepicker-dropdown .ui-dropdown {
    background: $primaryColor;
    border-color: $primaryColor;
    text-transform: uppercase;
    height: 36px;
}
.ui-datepicker-dropdown .ui-dropdown .ui-dropdown-label.ui-inputtext{
    color:$accentTextColor;
    position:relative;
    left: 6px;
    top:6px;
    padding-right: 24px;
}
.ui-datepicker-dropdown .ui-dropdown-label-container{
    background: $primaryColor;
    border-color: $primaryColor;
    text-transform: uppercase;
    padding-left: 8px;
    padding-right: 8px;
}
.ui-datepicker-dropdown .ui-dropdown .ui-dropdown-trigger span{
    color:$accentTextColor;
    position: relative;
    top: 4px;
}


#ui-datepicker-div {
    @include overlay-input-shadow();
}

.date-range-selector-container select, .date-range-selector-container option{
    width: 80px;
    text-align: center;
    overflow: hidden;
    vertical-align: middle;

    color: white;
    height: 36px;
    font-size: $fontSize;
    font-family: $fontFamily;
    padding: 0;
    border: 0 none;

    background-color: $primaryColor;

    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 5px;
    border: none;
    border-radius: 0px;
    padding: 0.1em 1em 0.1em 0.35em;
    cursor: pointer;
    position: relative;
    left: -1px;
}

.date-range-selector-container {
    .menu{
        display: inline-block;
        position: relative;
        vertical-align: bottom;
    }
    .menu-header{
        width: 80px;
        text-align: center;
        overflow: hidden;
        vertical-align: middle;
        background-color: $primaryColor;
        color: white;
        height: 36px;
        font-size: $fontSize;
        font-family: $fontFamily;
        padding: 0;
        border: 0 none;
        @include no-shadow;
        @include transition(background-color $transitionDuration);
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        background-repeat: no-repeat;
        background-position-x: 100%;
        background-position-y: 5px;
        border: none;
        border-radius: 0px;
        padding: 0.1em 1em 0.1em 0.35em;
        cursor: pointer;
        position: relative;
        left: -1px;

        span{
            position: relative;
            top: 9px;
        }
    }

    .menu.selected .menu-header{
        background-color: $accentColor;
        color: $accentTextColor;
    }

    .menu .menu-items{
        display: block;
        height: 100%;
    }
    .menu .menu-items ul{
        position: absolute;
        list-style-type: none;
        margin: 0;
        padding: 0;
        height: 0px;
        overflow: hidden;
        font-size: 0px;
    }
    .menu.active .menu-items ul{
        height: fit-content;
        font-size: $fontSize;
    }
    .menu-items ul li{

        width: 80px;
        font-size: $fontSize;

        text-align: center;
        overflow: hidden;
        vertical-align: middle;
        background-color: $primaryColor;
        text-transform: uppercase;

        color: white;
        height: 36px;
        padding: 0;
        border: 0 none;
        @include no-shadow;
        @include transition(background-color $transitionDuration);

        border: none;
        border-radius: 0px;
        padding: 0.1em 1em 0.1em 0.35em;
        cursor: pointer;
        position: relative;
        left: -1px;

        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;

        &:hover{
            cursor: pointer;
//            background-color: darken($primaryColor, 10%);
            background-color: $primaryColor;
        }
        &.selected{
            background-color: $accentColor;
            color: $accentTextColor;
        }

    }
}

.ui-fluid {
    .ui-calendar.ui-calendar-w-btn {
        .ui-inputtext {
            width: 100%;
        }
    }
}

.ui-datepicker {
    padding: 0;

    &.ui-shadow {
        border: 0 none;
        @include overlay-input-shadow();
    }

    .ui-datepicker-group {
        padding: 0;
    }

    &:not(.ui-state-disabled) {
        .ui-datepicker-header {
            background-color: $accentColor;
            color: $accentTextColor;

            .ui-datepicker-prev,
            .ui-datepicker-next {
                &:hover {
                    background-color: $accentLightColor;
                }
            }
        }

        table {
            td {
                a:not(.ui-state-active):not(.ui-state-highlight):hover {
                    @include hover-element();
                    cursor: pointer;
                }
            }
        }

        .ui-monthpicker {
            a.ui-monthpicker-month:not(.ui-state-active):hover {
                @include hover-element();
            }
        }
    }

    .ui-datepicker-header {
        padding: $headerPadding;
        background: $accentColor;
        border-color: $accentDarkColor;
        @include border-radius-top(2px);
        @include border-radius-bottom(0);
        display: flex;
        align-items: center;
        justify-content: center;

        .ui-datepicker-prev {
            cursor: pointer;
            top: 7px;
            left: .5em;
            font-size: $iconFontSize;
            @include border-radius(50%);
            @include material-icon("\e5cb");
            color: $accentTextColor;

            .pi {
                display: none;
            }
        }

        .ui-datepicker-next {
            cursor: pointer;
            top: 7px;
            font-size: $iconFontSize;
            right: .5em;
            @include material-icon("\e5cc");
            @include border-radius(50%);
            color: $accentTextColor;

            .pi {
                display: none;
            }
        }

        select.ui-datepicker-month,
        select.ui-datepicker-year {
            font-size: $fontSize - 2;
            font-family: $fontFamily;
            color: $accentTextColor;
            background-color: $accentColor;
            border: none;
            position: relative;
            top: -1px;
            cursor: pointer;
        }

    }

    .ui-datepicker-buttonbar {
        &.ui-widget-header {
            background-color: white;
            border-color: $primaryLightestColor;
        }
    }

    thead {
        tr {
            color: $accentTextColor;
            background: $accentDarkColor;
        }
    }

    tbody {
        td {
            box-sizing: border-box;
            padding: .25em .125em;
            text-align: center;

            &.ui-datepicker-today {
                a {
                    color: $textColor;
                    background-color: $primaryLightestColor;

                    &.ui-state-active {
                        background-color: $accentColor;
                        color: $accentTextColor;
                    }
                }
            }

            a {
                color: $textColor;
                @include border-radius(50%);
                padding: .25em;
                margin: 0;
                text-align: center;
                color: #3c3c3c;
                display: inline-block;
                height: 2.25em;
                width: 2.25em;
                border-radius: 50%;
                line-height: 1.8em;

                &.ui-state-active {
                    background-color: $accentColor;
                    color: $accentTextColor;
                }

                span {
                    display: inline;
                    padding: 0;
                    text-align: center;
                }
            }
        }
    }

    .ui-timepicker {
        @include border-radius(0);

        >div {
            a {
                height: 1.5em;

                >span {
                    display: inline-block;
                    margin-bottom: .25em;
                }

                .pi {
                    &.pi-chevron-down {
                        @include material-icon("arrow_drop_down");
                    }

                    &.pi-chevron-up {
                        @include material-icon("arrow_drop_up");
                    }
                }
            }
        }
    }


    .ui-monthpicker {
        .ui-monthpicker-month {
            color: $textColor;

            &.ui-state-active {
                color: $accentTextColor;
                background-color: $accentColor;
            }
        }
    }

    &.ui-datepicker-multiple-month {
        width: auto;

        .ui-datepicker-group {
            border-right: 1px solid $dividerColor;
            padding-top: 0;
            padding-bottom: 0;

            .ui-datepicker-calendar-container {
                tbody {
                    padding-right: .25em;
                    padding-left: .25em;
                }
            }

            &:first-child {
                padding-left: 0;
            }

            &:last-child {
                padding-right: 0;
                border-right: 0 none;
            }
        }
    }
}

#ui-datepicker-div {
    @include overlay-input-shadow();
}

.ui-rating {
    font-size: inherit;
    min-height: 1.5em;

    .pi-ban {
        @include material-icon("\e5c9");
        color: $textSecondaryColor;
        font-size: $iconFontSize;
    }

    .pi-star {
        @include material-icon("\e838");
        color: $accentColor;
        font-size: $iconFontSize;
    }

    .pi-star-o {
        @include material-icon("\e83a");
        color: $textSecondaryColor;
        font-size: $iconFontSize;
    }
}

.ui-chips {

    input {
        font-size: 14px;
        font-weight: normal;
    }

    .ui-inputtext {
        font-size: 14px;

        .ui-chips-input-token {
            display: inline-flex;
            height: 38px;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
        }

        .ui-chips-token {
            background-color: al-color($al-gray, 50);
            display: inline-flex;
            align-items: center;
            padding: 0 12px;
            height: 32px;
            border-radius: 50px;
            margin-bottom: 6px;
            font-size: 14px;

            &.ui-state-active,
            &.ui-state-highlight {
                color: al-color($al-gray, 500);

                .pi {
                    color: al-color($al-gray, 500);
                }
            }

            .ui-chips-token-label {
                display: inline-flex;
                align-items: center;
                font-size: 14px;
                color: var(--label);
                margin-right: 12px;
            }

            .ui-chips-token-icon {
                position: relative;
                right: auto;
                top: auto;
                margin-top: 0;
                order: 3;
                font-size: 20px;
                color: al-color($al-gray, 500);
            }

            i {
                order: 0;
                font-size: 18px;
                margin-right: 12px;
                color: al-color($al-gray, 500);
            }

            .title {
                order: 1;
                margin-right: 6px;
            }

            .subtitle {
                order: 2;
                margin-right: 12px;
                color: al-color($al-gray, 200);
            }
        }

        .pi.pi-times {
            &:before {
                content: "cancel";
            }
        }
    }
}

.ui-password-panel {
    &.ui-shadow {
        @include overlay-input-shadow();
    }
}

/* InputGroup */
.ui-inputgroup {
    .ui-inputgroup-addon {
        padding: $inputGroupPadding;
        border-color: $inputGroupBorderColor;
        background-color: $inputGroupBgColor;
        color: $inputGroupTextColor;
        min-width: $inputGroupAddonMinWidth;
        border-left: 0;
        border-right: 0;
        border-top: 0;

        &:first-child {
            @include border-radius-left(0);
        }

        &:last-child {
            @include border-radius-right($borderRadius);
        }

        >i {
            @include flex();
            align-self: flex-end;
        }
    }

    .ui-inputtext {
        align-self: flex-end;
    }

    .md-inputfield {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 1%;
        display: inherit;

        label {
            top: 5px;
        }
    }

    .ui-chkbox,
    .ui-radiobutton {
        margin-bottom: .125em;
    }
}

.ui-fluid {
    .ui-inputgroup {
        .ui-button-icon-only {
            width: 2.143em;
            height: 2.143em;
            padding: 0;

            .ui-button-icon-left {
                margin-left: -.45em;
            }
        }
    }
}

.ui-fileupload {
    .ui-fileupload-buttonbar {
        padding: $headerPadding;

        .pi-arrowreturnthick-1-n {
            @include icon_override('file_upload');
        }

        .ui-button {
            background-color: $accentColor;
            color: $accentTextColor;
            margin-right: 6px;

            .pi {
                color: $accentTextColor;
            }

            &:enabled:hover {
                background-color: $accentDarkColor;
            }
        }
    }

    .ui-fileupload-content {
        .ui-messages-error {
            .pi {
                color: #ffffff;
            }
        }
    }
}

.ui-fileupload-choose:not(.ui-state-disabled):hover,
.ui-fileupload-choose.ui-state-focus {
    &.ui-button {
        // background-color: darken($accentColor, 5%);
        background-color: $accentColor;
    }
}

.ui-fileupload-choose:not(.ui-state-disabled):active {
    &.ui-button {
//        background-color: darken($accentColor, 10%);
        background-color: $accentColor;
    }
}

.ui-editor-container {
    .ui-editor-toolbar {
        background-color: #e8e8e8;
    }

    .ql-picker.ql-expanded {
        .ql-picker-label {
            color: #444444;
        }
    }
}

/* Validation */
.ui-inputtext.ng-dirty.ng-invalid,
p-dropdown.ng-dirty.ng-invalid>.ui-dropdown,
p-autocomplete.ng-dirty.ng-invalid>.ui-autocomplete>.ui-inputtext,
p-calendar.ng-dirty.ng-invalid>.ui-calendar>.ui-inputtext,
p-chips.ng-dirty.ng-invalid>.ui-inputtext,
p-inputmask.ng-dirty.ng-invalid>.ui-inputtext,
p-checkbox.ng-dirty.ng-invalid .ui-chkbox-box,
p-radiobutton.ng-dirty.ng-invalid .ui-radiobutton-box,
p-inputswitch.ng-dirty.ng-invalid .ui-inputswitch,
p-listbox.ng-dirty.ng-invalid .ui-inputtext,
p-multiselect.ng-dirty.ng-invalid>.ui-multiselect,
p-spinner.ng-dirty.ng-invalid>.ui-inputtext,
p-selectbutton.ng-dirty.ng-invalid .ui-button,
p-togglebutton.ng-dirty.ng-invalid .ui-button {
    background-image: linear-gradient(to bottom, $inputInvalidBorderColor, $inputInvalidBorderColor), linear-gradient(to bottom, $inputInvalidBorderColor, $inputInvalidBorderColor);
}

.ui-fluid .ui-colorpicker-preview {
    width: 2em;
}


@media (max-width: 640px) {
    body {
        .ui-buttonset {
            margin-right: 1px;

            >.ui-button {
                display: block;
                @include border-radius(0);

                &:first-child {
                    @include border-radius-top($borderRadius);
                }

                &:last-child {
                    @include border-radius-bottom($borderRadius);
                }
            }
        }

        .ui-splitbutton {
            >.ui-button {
                display: inline-block;

                &:first-child {
                    @include border-radius-top(0);
                }

                &:last-child {
                    @include border-radius-bottom(0);
                }
            }
        }
    }
}

// STATIC CHIPS




.static-chips {
    font-size: 14px;
    background-color: al-color($al-gray, 50);
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    height: 32px;
    border-radius: 50px;
    margin-bottom: 6px;

    &.active {
        color: al-color($al-smokeBlue, 500);

        .pi {
            color: al-color($al-gray, 500);
        }
    }

    i {
        order: 0;
        font-size: 18px;
        margin-right: 12px;
        color: al-color($al-gray, 500);
    }

    .title {
        order: 1;
        margin-right: 6px;
    }

    .subtitle {
        order: 2;
        margin-right: 12px;
        color: al-color($al-gray, 200);
    }

    .close {
        order: 3;
        font-size: 20px;
        color: al-color($al-gray, 500);
        display: inline-flex;
        align-items: center;
    }
}

.badge {
    padding: 3px 6px;
    border-radius: 2px;
    background: al-color($al-gray, 500);
    color: white;
    display: inline-flex;
    align-items: center;
    margin: 0 12px 0 0;
    font-size: 12px;

    &.risk-critical {
        background: al-color($al-red, 50);
        color: al-color($al-red, 600);
    }

    &.risk-high {
        background: al-color($al-orange, 50);
        color: al-color($al-orange, 700);
    }

    &.risk-medium {
        background: al-color($al-yellow, 100);
        color: #c39914;
    }

    &.risk-low {
        background: al-color($al-gray, 50);
        color: al-color($al-gray, 700);
    }

    &.risk-info {
        background: al-color($al-gray, 50);
        color: al-color($al-gray, 700);
    }

    &.success {
        background: al-color($al-green, 500);
        color: white;
    }

    &.error {
        background: al-color($al-red, 600);
        color: white;
    }

}

.form-row {
    margin-bottom: var(--ald-g-space-2);

    .md-inputfield {
        margin-bottom: var(--ald-g-space-2);
    }
}

.input-row {
    margin-bottom: 36px;

    &.top {
        margin-top: var(--ald-g-space-2);
    }

    &.bottom {
        margin-top: 24px;
    }

    .md-inputfield {
        margin-bottom: var(--ald-g-space-2);
    }
}

.label-row {
    padding-bottom: var(--ald-g-space-2);
    display: flex;
    align-items: center;

}

.form-row-top {
    margin-top: var(--ald-g-space-2);

    .md-inputfield {
        margin-bottom: var(--ald-g-space-2);
    }
}

p-header {
    font-size: $panelHeaderText;
}

// PANEL
.ui-panel {
    padding: 0;
    box-shadow: none;

    .ui-panel-titlebar {
        border: 0 none;
        padding: 0;
        @include border-radius-top(2px);
        @include border-radius-bottom(0);
        background-color: white;
        color: $textColor;
        border-bottom: 1px solid $dividerColor;

        .ui-panel-title {
            margin: 0;
            line-height: $panelContentLineHeight;
            font-size: 18px;
        }

        &:hover {
            background-color: $primaryLightestColor;
        }

        .ui-panel-titlebar-icon {
            position: relative;
            width: $iconWidth;
            height: $iconHeight;
            line-height: $iconHeight;
            text-align: center;
            color: $textColor;
            margin: 0;
            @include transition(background-color $transitionDuration);
            @include border-radius(50%);

            &.ui-panel-titlebar-toggler {

                .pi {
                    color: $primaryColor;

                    &.pi-plus {
                        &:before {
                            font-family: 'Material Icons';
                            content: "keyboard_arrow_down";
                        }
                    }

                    &.pi.pi-minus {
                        &:before {
                            font-family: 'Material Icons';
                            content: "keyboard_arrow_up";
                        }
                    }
                }
            }
        }

        &.active {
            background-color: $accentColor;
            color: $accentTextColor;

            .ui-panel-titlebar-icon {
                &.ui-panel-titlebar-toggler {

                    .pi {
                        color: $primaryTextColor;
                    }
                }
            }
        }
    }

    .ui-panel-content {
        height: 100%;
        box-sizing: border-box;
        padding: $contentPadding;
        line-height: normal;
    }

    .ui-panel-footer {
        padding: $footerPadding;
        border: 0 none;
        border-top: 1px solid $dividerColor;
        margin: 0;
    }
}


// FIELDSET
.ui-fieldset {
    padding: $contentPadding;

    .ui-fieldset-legend {
        padding: $headerPadding;
        padding-left: 2px;
        padding-right: 8px;
        color: $primaryColor;

        .ui-fieldset-toggler {
            width: 36px;
            height: 36px;
            padding: 8px;
            background-color: $primaryActionColor;
            color: $primaryTextColor;
            font-size: 1.5em;
            @include border-radius(50%);
            @include transition(background-color $transitionDuration);
            margin-top: -10px;
            margin-right: 8px;
            @include content-shadow();
            @include rippleitem();

            &:hover {
                background-color: $primaryActionDarkColor;
            }
        }

        a {
            &:focus {
                background-color: transparent;
                outline: 0;
            }
        }

        .ui-fieldset-legend-text {
            color: $primaryColor;
        }
    }
}


// ACCORDION
.ui-accordion {
    padding: 0;
    // @include content-shadow();

    .ui-accordion-header {
        border: 0 none;
        border-bottom: 1px solid $dividerColor;
        padding: $accordionHeaderPadding;
        @include border-radius-top(2px);
        @include border-radius-bottom(0);
        background-color: white;
        color: $textColor;
        margin-top: 0;

        a {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: $panelContentLineHeight;
            font-size: 18px;
            color: $textColor;

            i {
                width: 48px;
                display: flex;
                justify-content: center;
            }

            .ui-accordion-header-text {
                order: 1;
            }

            .ui-accordion-toggle-icon {
                position: relative;
                width: $iconWidth;
                height: $iconHeight;
                line-height: $iconHeight;
                text-align: center;
                color: $textColor;
                margin: 0;
                @include transition(background-color $transitionDuration);
                @include border-radius(50%);
                order: 2;

                &::before {
                    font-family: 'Material Icons';
                    content: "keyboard_arrow_down"
                }
            }
        }



        &:hover {
            background-color: $primaryLightestColor;
            color: $textColor;
        }

        &.ui-state-active {
            background-color: white;
            color: $textColor;

            .ui-accordion-toggle-icon {
                position: relative;
                width: $iconWidth;
                height: $iconHeight;
                line-height: $iconHeight;
                text-align: center;
                color: $textColor;
                margin: 0;
                @include transition(background-color $transitionDuration);
                @include border-radius(50%);
                order: 2;

                &::before {
                    font-family: 'Material Icons';
                    content: "keyboard_arrow_up"
                }
            }

            a {
                color: $textColor;
            }
        }
    }

    .ui-accordion-content {
        height: 100%;
        box-sizing: border-box;
        padding: 12px;
        line-height: $panelContentLineHeight;
        border: 0;
        border-bottom: 1px solid $dividerColor;
    }

    .ui-accordion-footer {
        display: flex;
        padding: $footerPadding;
        border: 0 none;
        margin: 0;
    }

    .show-more {

        .ui-accordion-header {
            font-style: italic;

            .ui-accordion-toggle-icon::before {
                content: "";
            }
        }
    }
}

// TOOLBAR
.ui-toolbar {
    background-color: $primaryDarkColor;
    @include content-shadow();
    padding: 10px;

    .ui-toolbar-separator {
        margin-right: 0.25em;
    }

}

// TABS
.ui-tabview {
    padding: 0;
    border: 0 none;

    .ui-tabview-panel {
        padding: 24px 0;
    }

    &.ui-tabview-top {
        >.ui-tabview-nav {
            padding: 0;
            margin: 0;
            @include border-radius-top(4px);
            border-bottom: 2px solid var(--ald-g-color-gray-200);

            >li {
                border-style: solid;
                border-width: 0;
                margin-bottom: -1px;
            }
        }
    }

    &.ui-tabview-bottom {
        >.ui-tabview-nav {
            padding: 0;
            margin: 0;
            @include border-radius-bottom(4px);
            border-top: 1px solid $dividerColor;

            >li {
                border-width: 2px 0 0 0;
            }
        }
    }

    &.ui-tabview-left {
        >.ui-tabview-nav {
            padding: 0;
            margin: 0;
            @include border-radius-left(4px);
            border-right: 1px solid $dividerColor;

            >li {
                box-sizing: border-box;
                border-width: 0 2px 0 0;

                >a {
                    width: 100%;
                    box-sizing: border-box;
                }
            }
        }
    }

    &.ui-tabview-right {
        >.ui-tabview-nav {
            padding: 0;
            @include border-radius-right(4px);
            border-left: 1px solid $dividerColor;

            >li {
                box-sizing: border-box;
                border-width: 0 0 0 2px;

                >a {
                    width: 100%;
                    box-sizing: border-box;
                }

                &.ui-state-active {
                    >a {
                        padding-left: 0.875em;
                        color: $textColor;
                    }
                }
            }
        }
    }

    .ui-tabview-nav {
        background-color: transparent;
        border: 0 none;
        @include border-radius(0);

        >li {
            padding: 0;
            overflow: hidden;
            margin: 0;

            >a {
                cursor: pointer;
                padding: var(--ald-g-space-2) var(--ald-g-space-6);

                &:focus {
                    outline: 0 none;
                }
            }

            >.pi-times {
                margin: .5em 0 0 0;
                color: $textSecondaryColor;
            }

            &.ui-state-default {
                a {
                    color: var(--ald-g-color-text-secondary);
                }
            }

            &:not(.ui-state-active):not(.ui-state-disabled):hover {
                background-color: transparent;
                transition: none;
            }

            &.ui-state-active {
                background-color: transparent;
                border-color: var(--ald-g-color-amber-500);
                border-style: solid;
                border-bottom: 2px solid var(--ald-g-color-amber-500);

                a {
                    cursor: pointer;
                    color: var(--ald-g-color-text-primary);
                }

                .ui-tabview-left-icon,
                .ui-tabview-right-icon {
                    color: $primaryColor;
                }

                >.pi-times {
                    color: var(--ald-g-color-text-primary);
                }
            }

            &.ui-tabview-outline {
                outline: 0 none;
                border-color: $primaryLightColor;
            }

            .ui-tabview-left-icon,
            .ui-tabview-right-icon {
                color: $textSecondaryColor;
                display: inline-block;
                vertical-align: middle;
                font-size: $iconFontSize;
            }

            .ui-tabview-title {
                display: block;
                font-size: var(--ald-g-text-sm);
                line-height: var(--ald-g-leading-sm);
                font-weight: 500;
            }
        }
    }
}


@media (max-width: 640px) {
    body {
        .ui-toolbar {
            .ui-toolbar-group-right {
                margin-top: 1em;
            }
        }
    }
}

p-footer {

    .footer {
        border-top: none;
    }
}

/** CHORE(*): darken and lighten have been disabled */
.ui-picklist {
    .ui-picklist-caption {
        padding: $headerPadding;
    }

    .ui-picklist-list {
        padding: 0;
    }

    li.ui-picklist-item {
        padding: $listItemPadding;
        margin: 0;
        @include border-radius(0);
        color: $textColor;

        &:not(.ui-state-highlight):hover {
            @include hover-element();
        }

        &.ui-state-highlight {
            background-color: $accentColor;
            color: $accentTextColor;
        }
    }

    .ui-picklist-buttons {
        width: 3.429em;

        .ui-button {
            &.ui-button-icon-only {
                width: 2.286em;
                margin-right: 0;
                display: inline-block;
                margin-bottom: 0.286em;
            }
        }
    }

    .ui-picklist-buttons-cell {
        text-align: center;
    }

    &.ui-picklist-responsive {
        .ui-picklist-buttons {
            width: 3.429em;

            .ui-button {
                &.ui-button-icon-only {
                    margin: 0 auto;
                    display: block;
                    margin-bottom: 0.571em;
                }
            }
        }

        .ui-picklist-list {
            .ui-picklist-item {
                .ui-chkbox {
                    margin-right: 0.571em;
                    vertical-align: top;
                }

                .ui-chkbox,
                .ui-chkbox * {
                    box-sizing: content-box;
                }
            }
        }
    }
}

.ui-orderlist {
    .ui-orderlist-caption {
        padding: $headerPadding;
        @include border-box-sizing();
    }

    .ui-orderlist-list {
        padding: 0;
        box-sizing: border-box;

        li.ui-orderlist-item {
            padding: $listItemPadding;
            margin: 0;
            @include border-radius(0);
            color: $textColor;

            &:not(.ui-state-highlight):hover {
                @include hover-element();
            }

            &.ui-state-highlight {
                background-color: $accentColor;
                color: $accentTextColor;
            }
        }
    }

    &.ui-orderlist-responsive {
        .ui-orderlist-controls {
            width: 4.286em;
        }
    }

    .ui-orderlist-controls {
        width: auto;
        text-align: center;

        .ui-button {
            &.ui-button-icon-only {
                width: 2.286em;
                margin: 0 auto 0.571em auto;
            }
        }
    }
}

/*
.ui-organizationchart {
    .ui-organizationchart-node-content {
        &.ui-organizationchart-selectable-node:not(.ui-state-highlight):hover {
            @include hover-element();
        }

        &.ui-state-highlight {
            .ui-node-toggler {
                i {
                    color: darken($accentColor, 25%);
                }
            }
        }
    }

    .ui-organizationchart-line-down {
        background-color: darken($dataBorderColor, 10%);
    }

    .ui-organizationchart-line-left {
        border-right: 1px solid darken($dataBorderColor, 10%);
    }

    .ui-organizationchart-line-right {}

    .ui-organizationchart-line-top {
        border-top: 1px solid darken($dataBorderColor, 10%);
    }

    .ui-organizationchart-node-content {
        border-color: darken($dataBorderColor, 10%);
    }

    .ui-organizationchart-node-content .ui-node-toggler {
        bottom: -1.143em;
        margin-left: -.825em;
        color: darken($contentBorderColor, 10%);

        .pi-chevron-down {
            @include material-icon("keyboard_arrow_down");
        }

        .pi-chevron-up {
            @include material-icon("keyboard_arrow_up");
        }
    }
}
*/

.ui-paginator {
    background-color: transparent;
    border: 0;
    padding: 12px 24px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    >a {
        color: $accentColor;

        .pi {}

        &:not(.ui-state-disabled):not(.ui-state-active):hover {
            background-color: $hoverBgColor;
            border-radius: 2px;
        }
    }

    .ui-paginator-next {
        @include paginator();
    }

    .ui-paginator-last {
        @include paginator();
    }

    .ui-paginator-prev {
        @include paginator();
    }

    .ui-paginator-first {
        @include paginator();
    }

    .ui-paginator-page {
        @include paginator();
    }

    .ui-paginator-pages {
        text-align: center;
        margin-right: 1px;
        display: inline-flex;
        align-items: center;

        a {
            padding: 0;
            color: $primaryColor;
            width: 25px;
            height: 25px;
            padding: 3px 2px;
            border-radius: 2px;
            @include transition(background-color .3s);

            &:not(.ui-state-active):hover {
                background-color: $hoverBgColor;
                color: $textColor;
            }

            &.ui-state-active {
                color: $accentTextColor;
                background-color: $accentColor;
            }
        }
    }
}

.ui-paginator-bottom.ui-paginator {
    padding: 12px;
    background: white;
}

.ui-datagrid {
    .ui-datagrid-header {
        padding: $headerPadding;
    }

    .ui-panel {
        .ui-panel-titlebar {
            background-color: #ffffff;
            color: $textColor;
        }
    }
}

.ui-datalist {
    .ui-datalist-header {
        padding: $headerPadding;
    }
}

.ui-dataview {
    .ui-dataview-header {
        background-color: #ffffff;
        color: $textColor;
        padding: $headerPadding;
        border: 0 none;
        border-bottom: 1px solid $dividerColor;

        .ui-button {
            &.ui-state-active {
                &:hover {
                    background-color: $accentColor;
                    color: $accentTextColor;
                }
            }
        }
    }

    .ui-dataview-content {
        background-color: $contentBgColor;
        color: $textColor;
        border: 0 none;
        border-bottom: 1px solid $dataBorderColor;
    }

    .ui-dataview-footer {
        background-color: #ffffff;
        color: $textColor;
        padding: $headerPadding;
        border: 0 none;
        border-bottom: 1px solid $dividerColor;
    }
}

.ui-table {

    .ui-table-caption,
    .ui-table-summary {
        padding: 24px 0;
        font-weight: normal;
    }

    .ui-table-caption {
        border-bottom: 0 none;
    }

    .ui-table-summary {
        border-top: 0 none;
    }

    .ui-table-thead>tr>th {
        position: sticky;
        top: 0px;
    }

    .ui-table-tfoot>tr>td {
        font-weight: $headerFontWeight;
        background-color: $primaryLightestColor;
        border: 0 none;
        white-space: nowrap;

        :hover {
            cursor: pointer;
            background-color: transparent;
        }
    }


    p-sortIcon {
        display: inline-block;

        i {
            font-size: 14px;
        }
    }

    .ui-table-tbody>tr>td {
        .p-grid {

            &.expanded-row {

                .label {
                    font-size: 12px;
                    color: var(--label);
                    margin-bottom: 0;
                    padding-left: 0;
                    font-weight: normal;
                }

                .desc {
                    margin-bottom: 12px;
                    word-wrap: break-word;
                    word-break: break-word;

                    &.first {
                        margin-bottom: 0px;
                    }

                    ul {
                        padding: 0;
                        list-style: none;
                        margin: 0;

                        li {
                            line-height: 1.5em;
                        }
                    }
                }
            }
        }
    }

    .ui-table-thead>tr>th {
        padding: $dataTableHeaderPadding;
        border: 0 none;
        text-align: left;
        font-weight: $headerFontWeight;
        background-color: $primaryLightestColor;
        box-shadow: -1px -1px 0px 0 rgba(0, 0, 0, 0.1);

        &:first-child {
            border-left: none;
        }

        &:last-child {
            border-right: none;
        }


        .ui-sortable-column-icon {
            vertical-align: middle;
            margin: -4px 0 0 0;
            color: $primaryLightColor;
            font-size: 14px;

            &.#{$iconPrefix}-carat-2-n-s {
                margin-left: 4px;
            }
        }

        .ui-column-resizer {
            @include material-icon("");
            cursor: ew-resize;
            height: 100%;
        }

        &.ui-state-active,
        &.ui-state-highlight {
            background-color: transparent;
            color: $textColor;
            border-top-color: transparent;

            .#{$iconPrefix} {
                color: $accentTextColor;
            }

            .ui-inputtext {
                color: $accentTextColor;

                &.ui-state-focus {
                    border-color: $accentTextColor;
                }
            }
        }

        .ui-chkbox {
            .ui-chkbox-box {
                &.ui-state-active {
                    .ui-chkbox-icon {
                        &:before {
                            color: $accentColor;
                        }
                    }
                }
            }
        }

        .p-grid {

            &.expanded-row {

                .label {
                    font-size: 12px;
                    color: var(--label);
                    margin-bottom: 0;
                    padding-left: 0;
                    font-weight: normal;
                }

                .desc {
                    margin-bottom: 12px;
                    word-wrap: break-word;
                    word-break: break-word;

                    &.first {
                        margin-bottom: 0px;
                    }

                    ul {
                        padding: 0;
                        list-style: none;
                        margin: 0;

                        li {
                            line-height: 1.5em;
                        }
                    }
                }
            }
        }
    }

    .ui-table-tfoot>tr>td {
        padding: $dataTableHeaderPadding;
        border: 0 none;
        background-color: $contentBgColor;
        text-align: left;
        font-weight: $headerFontWeight;

        &:first-child {
            border-left: none;
        }

        &:last-child {
            border-right: none;
        }
    }

    .ui-sortable-column {
        color: $textColor;

        .ui-sortable-column-icon {
            color: $primaryLightColor;
        }

        &.ui-state-active,
        &.ui-state-highlight {
            background-color: transparent;
            color: $textColor;
            border-top-color: transparent;

            .ui-sortable-column-icon {
                color: $textColor;
            }
        }

        .ui-sortable-column-icon {
            vertical-align: middle;
        }
    }

    .ui-table-tbody {
        >tr {
            background: $contentBgColor;
            border: 0 none;

            >td {
                background: inherit;
                padding: $dataTableCellPadding;
                border: 0 none;
                border-bottom: 1px solid $dividerColor;
            }

            &.ui-state-highlight {
                background-color: $accentColor;
                color: $accentTextColor;
            }

            &.ui-contextmenu-selected {
                background-color: $accentColor;
                color: $accentTextColor;
            }

            .ui-editing-cell {
                input {
                    color: $accentTextColor;
                }
            }
        }

        >tr:nth-child(even) {
            background-color: $dataTableRowBgColorEven;

            &.ui-state-highlight {
                background-color: $accentColor;
                color: $accentTextColor;
            }

            &.ui-contextmenu-selected {
                background-color: $accentColor;
                color: $accentTextColor;
            }
        }
    }


    .ui-table-scrollable-wrapper {
        .ui-table-scrollable-header,
        .ui-table-scrollable-footer {
            border: 0 none;
            background-color: transparent;
            padding: 0px;
        }

        thead {
            tr {
                th {
                    color: $textColor;
                    background-color: $primaryLightestColor;
                    border-bottom: 1px solid #CBCBCB;
                    box-shadow: -1px -1px 0px 0 rgba(0, 0, 0, 0.1);
                }
            }
        }

        tfoot {
            tr {
                td {
                    color: $textColor;
                }
            }
        }
    }

    &.ui-table-hoverable-rows {
        .ui-table-tbody>tr.ui-selectable-row:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
            cursor: pointer;
            background-color: #f6f6f6;
        }


    }

    .ui-chkbox .ui-chkbox-box.ui-state-active .ui-chkbox-icon:before {
        color: white;
    }

    .ui-widget-header {
        border: none;
    }
}

.ui-carousel {
    .ui-carousel-content {

        .ui-carousel-prev,
        .ui-carousel-next {
            background-color: #ffffff;
            border: none;
            @include border-radius(50%);
            margin: .2em;
            height: 2.5em;
            width: 2.5em;
            padding: 0;
            color: $textColor;
            @include transition(color $transitionDuration);

            span {
                color: $textColor;
                font-size: 26px;
                vertical-align: middle;
            }

            &:not(.ui-state-disabled) {
                &:hover {
                    background-color: $hoverBgColor;
                    color: $hoverTextColor;
                    border-color: none;
                }
            }
        }
    }

    .ui-carousel-dots-container {
        .ui-carousel-dot-item {
            >.ui-button {
                border-color: transparent;
                background-color: transparent;
                @include shadow(none);
                padding: 0;
            }

            .ui-carousel-dot-icon {
                width: 20px;
                height: 6px;
                background-color: #b2c1cd;
                margin: 0 .2em;

                &::before {
                    content: ' ';
                }
            }

            &.ui-state-highlight {
                background-color: #ffffff;

                .ui-carousel-dot-icon {
                    background-color: $primaryColor;
                }
            }
        }
    }
}

.ui-tree {
    padding: $contentPadding;

    .ui-treenode-children {
        padding-left: 2em;
    }

    .ui-tree-filter-container {
        .ui-tree-filter-icon {
            top: .2em;
            right: .5em;
        }
    }

    .ui-treenode-content {
        padding: $listItemPadding;
        padding-left: 0;
        padding-right: 0;
        display: inline-block;

        .ui-chkbox {
            margin: 0 0.286em 0 0.286em;

            .pi {
                color: #757575;
            }
        }

        .ui-tree-toggler {
            vertical-align: middle;
            position: absolute;
            margin-left: -20px;
        }

        .ui-treenode-icon {
            vertical-align: middle;
            margin: 0 0.286em 0 0.286em;
        }

        .ui-treenode-label {
            padding: 0 0.286em 0 0.286em;
            margin: 0;
            vertical-align: middle;
        }

        &.ui-treenode-selectable:not(.ui-state-highlight) {
            .ui-treenode-label:not(.ui-state-highlight):hover {
                @include hover-element();
            }
        }

        &.ui-treenode-dragover {
            background: $primaryLightColor;

            >span {
                color: $primaryTextColor;
            }
        }
    }

    &.ui-tree-horizontal {
        padding-left: 0;
        padding-right: 0;

        .ui-treenode-content {
            background-color: $contentBgColor;
            border: 0 none;
            border-bottom: 1px solid $dataBorderColor;
            padding: .4em 1em .4em .2em;

            .ui-tree-toggler {
                vertical-align: top;
            }

            .ui-treenode-icon {
                margin-right: 0.286em;
            }

            &.ui-treenode-selectable:not(.ui-state-highlight) {
                .ui-treenode-label:not(.ui-state-highlight):hover {
                    @include hover-element();
                }
            }

            &.ui-state-highlight {
                background-color: $accentColor;
                color: $accentTextColor;

                .ui-treenode-icon {
                    color: $accentTextColor;
                }
            }
        }
    }
}

.ui-tree-draghelper {
    border: 1px solid $primaryColor;
}

.fc {
    .fc-button {
        background-color: $primaryColor;
        color: $buttonTextColor;
        font-size: $fontSize;
        font-family: $fontFamily;
        height: 2.25em;
        padding: 0 1em;
        border: 0 none;

        &:enabled:not(:focus):not(.fc-button-active):hover {
            background-color: $primaryDarkColor;
        }

        &:enabled:not(.fc-button-active):focus {
            outline: 0 none;
            // background-color: lighten($primaryColor, 10%);
            background-color: $primaryColor;
            box-shadow: none;
        }

        &.fc-button-active {
            background-color: $accentColor;
            color: $accentTextColor;

            &:focus {
                box-shadow: none;
            }
        }
    }

    .fc-head {
        th {
            border-color: $primaryColor;
        }

        .fc-row {
            background-color: $primaryColor;
            color: $headerTextColor;
            border: 0 none;
            border-bottom: 1px solid $primaryColor;
            padding: $headerPadding;
            font-weight: $headerFontWeight;
        }
    }

    td.fc-today {
        background-color: $accentColor;
        color: $accentTextColor;
    }

    .fc-toolbar {
        .fc-icon-chevron-right {
            font-family: 'Material Icons';
            @include material-icon("play_circle_outline");
            text-indent: 0;
            position: relative;
        }

        .fc-icon-chevron-left {
            font-family: 'Material Icons';
            @include material-icon("play_circle_outline");
            @include rotate(180deg);
            text-indent: 0;
            position: relative;
        }

        .ui-state-active {
            background-color: $accentColor;
            color: $accentTextColor;
        }
    }

    .fc-event {
        background-color: $primaryLightColor;
        color: $primaryTextColor;
    }

    table {
        box-sizing: border-box;
    }

    div.ui-widget-content {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.ui-treetable {

    .ui-treetable-caption,
    .ui-treetable-summary {
        padding: $headerPadding;
    }

    .ui-treetable-caption {
        border-bottom: 0 none;
    }

    .ui-treetable-summary {
        border-top: 0 none;
    }

    .ui-treetable-thead>tr>th,
    .ui-treetable-tbody>tr>td,
    .ui-treetable-tfoot>tr>td {
        padding: $dataTableHeaderPadding;
    }

    .ui-treetable-thead>tr>th,
    .ui-treetable-tfoot>tr>td {
        font-weight: $headerFontWeight;
        background-color: $primaryLightestColor;
        border: 0 none;
    }

    .ui-treetable-thead tr .ui-inputtext {
        width: 100%;
    }

    .ui-treetable-thead>tr>th {
        padding: $dataTableHeaderPadding;
        border: 0 none;
        text-align: left;
        font-weight: $headerFontWeight;
        border-top: 1px solid $dataBorderColor;
        background-color: $primaryLightestColor;

        &:first-child {
            border-left: none;
        }

        &:last-child {
            border-right: none;
        }

        &.ui-state-hover {
            background-color: transparent;
        }

        .ui-sortable-column-icon {
            vertical-align: middle;
            margin: -4px 0 0 0;
            color: $primaryLightColor;

            &.#{$iconPrefix}-carat-2-n-s {
                margin-left: 4px;
            }
        }

        .ui-column-resizer {
            @include material-icon("");
            font-size: $fontSize + 2;
            color: $textSecondaryColor;
        }

        &.ui-state-active,
        &.ui-state-highlight {
            background-color: $accentColor;
            color: $accentTextColor;
            border-top-color: $accentColor;

            .#{$iconPrefix} {
                color: $accentTextColor;
            }

            .ui-inputtext {
                color: $accentTextColor;

                &.ui-state-focus {
                    border-color: $accentTextColor;
                }
            }
        }
    }

    .ui-treetable-tfoot>tr>td {
        padding: $dataTableHeaderPadding;
        border: 0 none;
        background-color: $contentBgColor;
        text-align: left;
        font-weight: $headerFontWeight;

        &:first-child {
            border-left: none
        }

        &:last-child {
            border-right: none;
        }
    }

    .ui-treetable-scrollable-header {
        border: none;
    }

    .ui-treetable-loading-content {
        .pi-spin {
            -webkit-animation: 2s linear infinite fa-spin;
            animation: 2s linear infinite fa-spin;
            color: #ffffff;
        }
    }

    .ui-sortable-column {
        color: $textColor;

        .ui-sortable-column-icon {
            color: $primaryLightColor;
        }

        &:not(.ui-state-highlight):hover {
            background-color: transparent;

            .ui-sortable-column-icon {
                background-color: transparent;
            }
        }

        &.ui-state-highlight {
            background-color: $accentColor;
            color: $accentTextColor;
            border-top-color: $accentColor;

            .ui-sortable-column-icon {
                color: $primaryLightColor;
            }
        }

        .ui-sortable-column-icon {
            vertical-align: middle;
        }
    }

    .ui-treetable-tbody {
        >tr {
            background: $contentBgColor;
            border: 0 none;
            border-bottom: 1px solid $dataBorderColor;

            >td {
                padding: $dataTableCellPadding;
                border: 0 none;

                .ui-treetable-toggler {
                    color: $textSecondaryColor;

                    .pi.pi-chevron-right {
                        vertical-align: middle;
                    }

                    .pi.pi-chevron-down {
                        vertical-align: middle;
                    }
                }

                .ui-treetable-chkbox {
                    margin-right: .75em;
                    margin-top: 2px;

                    .ui-chkbox-box.ui-state-active {
                        &:before {
                            -webkit-animation: none;
                            animation: none;
                        }
                    }
                }
            }

            &.ui-state-highlight {
                background-color: $accentColor;
                color: $accentTextColor;

                >td {
                    background: inherit;
                    border: $dividerColor;

                    .ui-treetable-toggler {
                        color: $accentTextColor;
                    }
                }

                .ui-chkbox {
                    .ui-chkbox-box {
                        border-color: $accentTextColor;
                        background: transparent;

                        .ui-chkbox-icon {
                        }
                    }
                }
            }

            &.ui-contextmenu-selected {
                background-color: $accentColor;
                color: $accentTextColor;

                >td {
                    background: inherit;
                    border: $dividerColor;

                    .ui-treetable-toggler {
                        color: $accentTextColor;
                    }
                }
            }
        }
    }

    &.ui-treetable-hoverable-rows {
        .ui-treetable-tbody>tr:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
            cursor: pointer;
            background-color: $primaryLightestColor;
        }
    }

    .ui-treetable-scrollable-wrapper {

        .ui-treetable-scrollable-header,
        .ui-treetable-scrollable-footer {
            border: 0 none;
            background-color: transparent;
            padding: 0px;
        }

        thead {
            tr {
                th {
                    background-color: $primaryLightestColor;
                    color: $textColor;
                    border-bottom: 1px solid $dividerColor;
                    border-top: 1px solid $dividerColor;

                    &.ui-state-active {
                        background-color: $accentColor;
                        color: $accentTextColor;
                    }
                }
            }
        }
    }

    &.ui-treetable-hoverable-rows {
        .ui-treetable-tbody>tr.ui-selectable-row:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
            cursor: pointer;
            background-color: $primaryLightestColor;
        }
    }
}

.ui-virtualscroller {
    .ui-virtualscroller-content {
        padding: 0;
    }

    .ui-virtualscroller-list {
        li {
            border-bottom: 1px solid $dividerColor;
        }
    }
}


@media (max-width: 40em) {
    body {
        .ui-orderlist {
            &.ui-orderlist-responsive {
                .ui-orderlist-controls {
                    width: 100%;
                }
            }
        }
    }
}

@media (max-width: 640px) {
    body {
        .ui-picklist {
            &.ui-picklist-responsive {
                .ui-picklist-list-wrapper {
                    margin-bottom: .5em;
                }

                .ui-picklist-buttons {
                    padding: .5em 0;

                    .ui-button {
                        &.ui-button-icon-only {
                            display: inline-block;
                            margin-right: .25em;
                            margin-bottom: 0;
                        }
                    }

                    .pi-angle-right {
                        @include icon-override("play_arrow");
                        @include rotate(90deg);
                    }

                    .pi-angle-double-right {
                        @include icon-override("skip_previous");
                        @include rotate(-90deg);

                    }

                    .pi-angle-left {
                        @include icon-override("play_arrow");
                        @include rotate(-90deg);
                    }

                    .pi-angle-double-left {
                        @include icon-override("skip_next");
                        @include rotate(-90deg);
                    }
                }
            }
        }

        .ui-orderlist {
            &.ui-grid-responsive {
                .ui-orderlist-controls {
                    text-align: center;
                    width: auto;

                    .ui-button {
                        margin-right: .25em;
                    }
                }
            }
        }
    }
}

/* Tablets, iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
.ui-table {
    font-size:12px;
  }
}

/* Tablets, iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
.ui-table {
    font-size:12px;
  }
}

/* Tablets, iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
.ui-table {
    font-size:12px;
  }
}

/* Desktops and laptops ----------- */
@media only screen
and (max-width : 1823px) {
/* Styles */
.ui-table {
    font-size:12px;
  }
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
.ui-table {
    font-size:14px;
  }
}

body {
    .ui-breadcrumb {
        a {
            color: #ffffff;
        }

        li:first-child {
            a {
                position: relative;
                margin-top: 0;

                span {
                    font-size: $iconFontSize;
                }
            }
        }

        .ui-breadcrumb-chevron {
            margin: 0;
            font-size: $iconFontSize;
        }

        li {
            margin: 0;
        }
    }

    .ui-steps {
        position: relative;

        .ui-steps-item {
            background-color: transparent;

            &.ui-state-disabled {
                @include opacity(1);
            }

            .ui-menuitem-link {
                display: inline-block;
                text-align: left;
                background-color: #ffffff;
                overflow: hidden;

                .ui-steps-number {
                    display: inline-block;
                    background-color: #757575;
                    @include border-radius(50%);
                    font-size: 16px;
                    color: #ffffff;
                    vertical-align: middle;
                    text-align: center;
                    width: 27px;
                    height: 27px;
                    padding: 0;
                    line-height: 27px;
                }

                .ui-steps-title {
                    display: inline;
                    margin-left: .714em;
                    color: $textSecondaryColor;
                }
            }

            &.ui-state-highlight {
                .ui-steps-number {
                    background-color: $primaryColor;
                }

                .ui-steps-title {
                    font-weight: 700;
                    color: $textColor;
                }
            }

            &:last-child {
                .ui-menuitem-link {
                    display: block;
                }
            }
        }

        &:before {
            content:' ';
            border: 1px solid $dividerColor;
            width: 90%;
            top: 45%;
            left: 0;
            display: block;
            position: absolute;
        }
    }

    .ui-menu .ui-menuitem-link,
    .ui-menubar .ui-menuitem-link,
    .ui-tieredmenu .ui-menuitem-link,
    .ui-contextmenu .ui-menuitem-link,
    .ui-megamenu .ui-menuitem-link,
    .ui-slidemenu .ui-menuitem-link {
        padding: $menuitemPadding;
        color: $textColor;
        min-height: 2.286em;
        @include border-radius(0);

        &:hover {
            @include hover-element();
        }

        &:focus {
            @include hover-element();
        }

        .ui-menuitem-text {
            vertical-align: middle;
        }

        .ui-menuitem-icon {
            font-size: 18px;
            color: $textSecondaryColor;
        }

        .ui-submenu-icon {
            right: .857em;
            margin-right: -.5em;
        }
    }

    .ui-menubar, .ui-contextmenu,
    .ui-slidemenu, .ui-tieredmenu {
        .ui-submenu-list {
            padding: .5em 0;

            .ui-menuitem {
                margin: 0;
            }
        }
    }

    .ui-menu {
        min-width: 12.5em;
        padding: $menuListPadding;

        .ui-menuitem {
            margin: 0;
            @include border-radius(0);

            .ui-menuitem-link {
                .ui-menuitem-icon {
                    vertical-align: middle;
                }
            }
        }

        &.ui-shadow, .ui-shadow {
            @include overlay-input-shadow();
        }

        .ui-submenu-header {
            border: 0 none;
            border-radius: 0;
            margin: 0;
            font-size: $fontSize;
            padding: $menuitemPadding;
            font-weight: 600;
            background-color: al-color($al-gray, 50);
        }
    }

    .ui-menubar {
        padding: 0;

        .ui-menubar-root-list {
            &>.ui-menuitem>.ui-menuitem-link {
                padding: $menuitemPadding;

                >.ui-submenu-icon {
                    margin-left: 0; 
                }
            }
        }

        .ui-submenu-list {
            .ui-menuitem-link {
                .ui-submenu-icon {
                    right: .857em;
                    margin-right: -.5em;
                }
            }
        }

        .ui-menuitem {
            .ui-menuitem-link {
                .ui-menuitem-icon {
                    vertical-align: middle;
                }

                .ui-submenu-icon {
                    vertical-align: middle;
                }
            }
            &.ui-menuitem-active {
                > .ui-menuitem-link {
                    @include hover-element;

                    .ui-menuitem-icon {
                        vertical-align: middle;
                    }
                }
            }
        }
    }

    .ui-contextmenu {
        padding: .5em 0;

        .ui-menuitem {

            .ui-menuitem-link {
                .ui-menuitem-icon {
                    vertical-align: middle;
                }
            }
            &.ui-menuitem-active {
                > .ui-menuitem-link {
                    @include hover-element;
                }
            }
        }
    }

    .ui-slidemenu {
        padding: .5em 0;

        .ui-menuitem {
            margin: 0;

            .ui-menuitem-link {
                .ui-menuitem-icon {
                    vertical-align: middle;
                }
            }

            &.ui-menuitem-active {
                > .ui-menuitem-link {
                    @include hover-element;
                }
            }
        }

        .ui-slidemenu-backward {
            margin-bottom: .4em;
            padding: $headerPadding;
            width: 100%;
            background-color: $primaryColor;
            box-sizing: border-box;
            @include border-radius(0);
            border: 0 none;

            &:hover {
                background-color: darken($primaryColor, 10%);
            }
        }
    }

    .ui-tieredmenu {
        padding: .5em 0;

        .ui-menuitem {

            .ui-menuitem-link {
                .ui-menuitem-icon {
                    vertical-align: middle;
                }
            }
            &.ui-menuitem-active {
                > .ui-menuitem-link {
                    @include hover-element;
                }
            }
        }
    }

    .ui-megamenu {
        padding: 0;

        .ui-megamenu-panel {
            padding: .5em 0;
        }

        .ui-megamenu-submenu-header {
            border-radius: 0;
            padding: .25em;
        }

        .ui-submenu-list {
            padding: 0;
            border: 0 none;

            .ui-menuitem {
                margin: 0;
            }
        }

        .ui-menuitem {
            margin: 0;

            .ui-menuitem-link {
                .ui-menuitem-icon {
                    vertical-align: middle;
                }

                .ui-submenu-icon {
                    vertical-align: middle;
                }
            }

            &.ui-menuitem-active {
                > .ui-menuitem-link {
                    @include hover-element;
                }
            }
        }
    }
    .ui-megamenu-vertical {
        .ui-megamenu-root-list {
            .ui-menuitem {
                .ui-menuitem-link {
                    .ui-submenu-icon {
                        right: .857em;
                        margin-right: -.5em;
                    }
                }

            }
        }
    }

    .ui-tabmenu {
        padding: 0;

        .ui-tabmenu-nav {
            padding: 0;
            background-color: #ffffff;
            border: 0 none;
            @include border-radius(0);

            > .ui-tabmenuitem {
                top: auto;
                margin: 0 4px 0 0;
                padding: 0;
                border-style: solid;
                border-width: 0 0 2px 0;
                @include transition(border-color $transitionDuration);

                > a {
                    padding: $headerPadding;

                    &:focus {
                        outline: 0 none;
                    }

                    .ui-menuitem-icon, .ui-menuitem-text {
                        float: none;
                        display: inline-block;
                        vertical-align: middle;
                    }

                    .ui-menuitem-icon {
                        margin-right: .25em;
                    }
                }

                &.ui-state-default {
                    a {
                        color: $textSecondaryColor;

                        .pi {
                            color: $textSecondaryColor;
                        }
                    }
                }

                &:not(.ui-state-active):hover {
                    background-color: #ffffff;
                }

                &.ui-state-active {
                    background-color: #ffffff;
                    border-color: $accentColor;
                    border-style: solid;

                    a {
                        color: $primaryColor;

                        .pi {
                            color: $primaryColor;
                        }
                    }
                }
            }
        }
    }

    .ui-panelmenu {

        span {
            vertical-align: middle;
        }
        .ui-panelmenu-header {
            background-color: $accordionHeaderBgColor;
            margin-top: .25em;

            a {
                color: $accordionHeaderTextColor;
                font-size: $fontSize;
                font-weight: $headerFontWeight;
            }

            .ui-panelmenu-icon,
            .ui-menuitem-icon {
                font-size: $iconFontSize - 2;
            }

            &.ui-state-active {
                background-color: $primaryColor;
                color: $primaryTextColor;
                @include border-radius-bottom(0);

                a, .pi {
                    color: $primaryTextColor;
                }
            }
        }

        .ui-panelmenu-panel {
            margin-bottom: 1px;
        }

        .ui-panelmenu-content {
            padding: 0;

            .ui-menuitem {
                margin: 0;

                .ui-menuitem-link {
                    border: 0 none;
                    padding: $menuitemPadding;
                    width: 100%;
                    min-height: 30px;
                    box-sizing: border-box;
                    color: $textColor;
                    @include border-radius(0);
                    position: relative;

                    &:hover {
                        @include hover-element();
                    }

                    .ui-panelmenu-icon,
                    .ui-menuitem-icon {
                        font-size: $iconFontSize - 2;
                    }

                    .ui-menuitem-text {
                        display: inline-block;
                        vertical-align: middle;
                        float: none;
                    }

                    .pi {
                        position: static;
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
            }
        }

        .ui-menu-parent .ui-menu-list {
            margin-left: 28px;
        }
    }
}

@media (max-width: 640px) {
    body {
        .ui-steps {
            .ui-steps-item {
                .ui-menuitem-link {
                    .ui-steps-title {
                        display: none;
                    }
                }
            }
        }
    }
}



body {

    /* Messages */
    .ui-messages {
        padding: 6px 12px;
        border-radius: 2px;
        

        ul {
            display: inline-block;
            margin-left: 0;
        }

        &.ui-messages-info {
            background-color: al-color($al-gray, 500);
            border-color: al-color($al-gray, 500);
            color: #ffffff;

            .ui-messages-close:hover {
                background-color: al-color($al-gray, 400);;
            }
        }

        &.ui-messages-warn {
            background-color: al-color($al-yellow, 600);
            border-color: al-color($al-yellow, 600);
            color: #ffffff;

            .ui-messages-close {
                color: #ffffff;

                &:hover {
                    background-color: al-color($al-yellow, 500);
                }
            }
        }

        &.ui-messages-error {
            background-color: $dangerColor;
            border-color: $dangerColor;
            color: #ffffff;

            .ui-messages-close:hover {
                background-color: al-color($al-red, 400);
            }
        }

        &.ui-messages-fatal {
            background-color: #212121;
            border-color: #212121;
            color: #ffffff;

            .ui-messages-close:hover {
                background-color: lighten(#212121, 15%);
            }
        }

        &.ui-messages-success {
            background-color: $successColor;
            border-color: $successColor;
            color: #ffffff;

            .ui-messages-close:hover {
                background-color: al-color($al-green, 400);
            }
        }

        .ui-messages-close {
            text-decoration: none;
            color: #fff;
            right: .25em;
            top: 6px;
        }
    }

    .ui-messages .ui-messages-icon {
        background: none;
        color: #fff;

        &.pi-info-circle {
            @include material-icon("info");
            font-size: 1.75em;
        }

        &.pi-exclamation-triangle {
            @include material-icon("warning");
            font-size: 1.75em;
            color: #212121;
        }

        &.pi-times {
            @include material-icon("error_outline");
            font-size: 1.75em;
        }

        &.pi-check {
            @include material-icon("check_circle");
            font-size: 1.75em;
        }
    }

    .ui-message {

        .ui-message-text {
            margin-left: 5px;
        }

        &.ui-message-info {
            background-color: al-color($al-gray, 500);
            border-color: al-color($al-gray, 500);
            color: #ffffff;
        }

        &.ui-message-warn {
            background-color: al-color($al-yellow, 600);
            border-color: al-color($al-yellow, 600);
            color: #212121;
        }

        &.ui-message-error {
            background-color: $dangerColor;
            border-color: $dangerColor;
            color: #ffffff;
        }

        &.ui-message-fatal {
            background-color: #212121;
            border-color: #212121;
            color: #ffffff;
        }

        &.ui-message-success {
            background-color: $successColor;
            border-color: $successColor;
            color: #ffffff;
        }

        .ui-message-close {
            text-decoration: none;
            color: #fff;
            right: .25em;
        }
    }

    .ui-message .ui-message-icon {
        background: none;
        color: #fff;
        margin-top: -2px;

        &.pi-info-circle {
            @include material-icon("info");
            font-size: 1.286em;
        }

        &.pi-exclamation-triangle {
            @include material-icon("warning");
            font-size: 1.286em;
            color: #212121;
        }

        &.pi-times {
            @include material-icon("error_outline");
            font-size: 1.286em;
        }

        &.pi-check {
            @include material-icon("check_circle");
            font-size: 1.286em;
        }
    }

    .ui-growl {
        top: 90px;

        >.ui-growl-item-container {
            opacity: 1;

            &.ui-growl-message-info {
                background-color: #2196F3;
            }

            &.ui-growl-message-warn {
                background-color: #ffc107;
            }

            &.ui-growl-message-error {
                background-color: #e62a10;
            }

            &.ui-growl-message-fatal {
                background-color: #212121;
            }

            &.ui-growl-message-success {
                background-color: #8BC34A;
            }

            &.ui-shadow {
                @include overlay-content-shadow();
            }
        }

        .ui-growl-item {
            .ui-growl-image {
                background: none;
                color: #ffffff;
                font-size: 36px;

                &.pi-info-circle {
                    @include material-icon("info");
                    font-size: 1.75em;
                }

                &.pi-exclamation-triangle {
                    @include material-icon("warning");
                    font-size: 1.75em;
                    color: #212121;
                }

                &.pi-times {
                    @include material-icon("error_outline");
                    font-size: 1.75em;
                }

                &.pi-check {
                    @include material-icon("check_circle");
                    font-size: 1.75em;
                }
            }

            .ui-growl-message {
                color: #ffffff;
            }

            .ui-growl-icon-close {
                @include material-icon("close");
                font-size: 24px;
                color: #ffffff;
            }
        }
    }

    .ui-toast {

        a.ui-toast-close-icon {
            color: al-color($al-gray, 100);
            height: 25px;
            width: 25px;
            font-size: 20px;
            top: 9px;
            right: 6px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
                border-radius: 50%;
                background: al-color($al-gray, 400);
            }
        }

        .ui-toast-message {
            @include overlay-content-shadow();

            &.ui-toast-message-info {
                background-color: #2196F3;
                border: 0 none;
                color: #ffffff;

                .ui-toast-message-content {
                    .ui-toast-close-icon {
                        color: #ffffff;

                        &:hover {
                            background-color: lighten(#2196F3, 15%);
                        }
                    }
                }
            }

            &.ui-toast-message-success {
                background-color: #8BC34A;
                border: 0 none;
                color: #ffffff;

                .ui-toast-message-content {
                    .ui-toast-close-icon {
                        color: #ffffff;

                        &:hover {
                            background-color: lighten(#8BC34A, 15%);
                        }
                    }
                }
            }

            &.ui-toast-message-warn {
                background-color: #ffc107;
                border: 0 none;
                color: #212121;

                .ui-toast-message-content {
                    .ui-toast-close-icon {
                        color: #212121;

                        &:hover {
                            background-color: lighten(#ffc107, 15%);
                        }
                    }
                }
            }

            &.ui-toast-message-error {
                background-color: #e62a10;
                border: 0 none;
                color: #ffffff;

                .ui-toast-message-content {
                    .ui-toast-close-icon {
                        color: #ffffff;

                        &:hover {
                            background-color: lighten(#e62a10, 15%);
                        }
                    }
                }
            }
        }
    }

    .ui-toast .ui-toast-icon {
        &.pi-info-circle {
            @include material-icon("info");
            font-size: 1.75em;
        }

        &.pi-exclamation-triangle {
            @include material-icon("warning");
            font-size: 1.75em;
            color: #212121;
        }

        &.pi-times {
            @include material-icon("error_outline");
            font-size: 1.75em;
        }

        &.pi-check {
            @include material-icon("check_circle");
            font-size: 1.75em;
        }
    }
}
body {
    .ui-widget-overlay {
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1000;
        // necessary for remove the mask in the main menu in archipeligo19-sidenav
        // custom for al-bottom-sheet
        &.al-bottom-sheet-mask{
            background-color: rgba(0, 0, 0, 0.4);
        }
    }

    .ui-dialog {
        &.ui-shadow {
            @include overlay-content-shadow();
        }

        .ui-dialog-titlebar {
            background-color: #ffffff;
            color: $textColor;
            padding: 12px 24px;

            .ui-dialog-title {
                font-weight: 500;
                font-size: 20px;
                line-height: 32px;
                margin: 0;
            }

            .ui-dialog-titlebar-icon {
                display: flex;
                padding: 0;
                margin-top: .4em;
                @include border-radius(50%);
                @include transition(background-color $transitionDuration);

                &:hover, &:focus {
                    background-color: $primaryLightestColor;
                }

                .pi {
                    color: $textColor;
                    display: inline-block;
                }

                .pi-window-maximize {
                    @include icon_override('fullscreen');
                }

                .pi-window-minimize {
                    @include icon_override('fullscreen_exit');
                }
            }
        }

        .ui-dialog-content {
            padding: 12px 24px;

            p:first-child {
                padding-top: 0;
                margin: 0;
            }
        }

        .ui-dialog-footer {
            text-align: right;
            padding: 24px 24px;
            border: 0 none;

            .ui-button {
                width: auto;
                margin-right: .5em;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .ui-confirm-dialog-severity {
            margin: 0px .75em;
        }

        p {
            line-height: $panelContentLineHeight;
        }
    }

    .ui-sidebar {
        .ui-sidebar-close {
            &:hover {
                padding: 1px;
            }
        }

        .ui-button {
            width: auto;
        }
    }

    .ui-lightbox {
        &.ui-shadow {
            @include overlay-content-shadow();
        }

        .ui-lightbox-caption {
            padding: $headerPadding;

            .ui-lightbox-caption-text {
                margin: 0;
            }

            .ui-lightbox-close {
                @include border-radius(50%);
                @include transition(background-color $transitionDuration);
                padding: 0;
                margin: 0;
                width: $iconWidth;
                height: $iconHeight;

                &:hover {
                    @include hover-element-primary();
                    padding: 0;
                }
            }
        }

        .ui-lightbox-content-wrapper {
            .ui-lightbox-nav-right, .ui-lightbox-nav-left {
                top: 40%;

                .pi {
                    @include transition(color $transitionDuration);
                    font-size: 48px;
                    color: $primaryLightColor;
                }

                &:hover {
                    .pi {
                        color: #ffffff;
                    }
                }
            }
        }
    }

    .ui-overlaypanel {
        &.ui-shadow {
            @include overlay-content-shadow();
        }

        &:after {
            border-color: rgba($contentBgColor, 0);
            border-bottom-color: $contentBgColor;
        }

        &:before {
            border-color: rgba($contentBgColor, 0);
            border-bottom-color: $dividerColor;
        }

        &.ui-overlaypanel-flipped {
            &:after {
                border-top-color: $contentBgColor;
            }

            &:before {
                border-top-color: $dividerColor;
            }
        }

        .ui-overlaypanel-close {
            background-color: $accentColor;
            @include border-radius(50%);
            @include transition(background-color $transitionDuration);
            right: -16px;
            top: -16px;
            width: 2em;
            height: 2em;
            line-height: 2em;
            text-align: center;
            @include content-shadow();

            span {
                color: $accentTextColor;
                line-height: inherit;
            }

            &:hover {
                background-color: $accentDarkColor;
            }
        }
    }

    .ui-tooltip {
        @include opacity(.9);
        font-size: $fontSize - 2px;

        .ui-tooltip-text {
            background-color: $primaryColor;
            @include overlay-content-shadow();
            padding: 4px 8px;
            border-radius: $borderRadius;
            width: fit-content;
        }

        &.ui-tooltip-top {
            .ui-tooltip-arrow {
                bottom: 1px;
                border-top-color: transparent;
            }
        }

        &.ui-tooltip-bottom {
            .ui-tooltip-arrow {
                top: 1px;
                border-bottom-color: transparent;
            }
        }

        &.ui-tooltip-left {
            .ui-tooltip-arrow {
                border-left-color: transparent;
            }
        }

        &.ui-tooltip-right {
            .ui-tooltip-arrow {
                left: 1px;
                border-right-color: transparent;
            }
        }
    }

    .ui-state-error,
    .ui-widget.ui-state-error,
    .ui-widget-content .ui-state-error,
    .ui-widget-header .ui-state-error {
        border-color: #e62a10;
    }
}

body {
    .ui-draggable-dragging.ui-state-default {
        padding: $headerPadding ;
        background-color: $primaryColor;
    }

    .ui-progressbar {
        height: 1.5em;
        padding: 0;
        overflow: hidden;
        border-color: transparent;
        background-color: $primaryLightestColor;

        .ui-progressbar-value {
            height: 1.5em;
            border: none;
            background-color: $accentColor;
        }

        .ui-progressbar-label {
            color: $primaryColor;
            display: none ;
        }
    }

    .ui-progressbar-indeterminate {
        .ui-progressbar-value {
            background-color: $primaryLightestColor;
            &::before {
                background-color: $accentColor;
            }
        }
    }

    .ui-galleria {
        padding: 0;

        .ui-galleria-nav-prev {
            left: 0;
            margin-bottom: -.4em;
        }

        .ui-galleria-nav-next {
            right: 0;
            margin-bottom: -.4em;
        }
    }

    .ui-inplace {
        .ui-inplace-display {
            @include transition(background-color .3s);
            @include border-radius(3px);

            &:hover {
                background-color: $hoverBgColor;
            }
        }
    }

    .ui-terminal {
        .ui-terminal-input {
            font-size: $fontSize;
        }
    }
}

