@import '~@angular/material/theming';
@include mat-core();
@import '../scss-imports/cssvars';


// mandatory stuff for theming
$freenas-primary: mat-palette($md-primary);
$freenas-accent:  mat-palette($md-accent);

// include the custom theme components into a theme object
$freenas-theme: mat-light-theme($freenas-primary, $freenas-accent);

$primary-dark: darken( map-get($md-primary, 500), 8% );

// Bring theme colors to various ripple effects
@mixin mat-ripple-theme($theme) {
  .mat-checkbox .mat-ripple-element, .mat-radio-button .mat-ripple-element {
    @include variable(background, --accent, $accent, !important);
//    opacity: 0.4;
  }
  .mat-button.mat-primary .mat-ripple-element,
  .mat-icon-button.mat-primary .mat-ripple-element,
  .mat-tab-label .mat-ripple-element {
    @include variable(background, --primary, $primary, !important);
//    opacity: 0.2;
  }
  .mat-button.mat-accent .mat-ripple-element,
  .mat-icon-button.mat-accent .mat-ripple-element,
  .mat-slide-toggle .mat-ripple-element {
    @include variable(background, --accent, $accent, !important);
//    opacity: 0.2;
  }
  .mat-button .mat-ripple-element, .mat-raised-button .mat-ripple-element {
    background: rgba(0, 0, 0, .12);
  }
}

// include the custom theme object into the angular material theme
.ix-blue {
  @include angular-material-theme($freenas-theme);

  .mat-bg-primary,
  .topbar,
  .sidebar-panel.mat-sidenav .sidebar-list-item.open md-icon:not(.menu-caret),
  .chats-wrap .conversations-hold .single-conversation.me .conversation-msg,
  .ngx-datatable .datatable-footer .datatable-pager .pager .pages.active a,
  .fileupload-drop-zone.dz-file-over,
  .toolbar-avatar.online > .status-dot,
  .cal-open-day-events,
  div.hopscotch-bubble {
      background: map-get($md-primary, 500) !important;
      color: #ffffff !important;
  }
  .mat-color-primary,
  .sidebar-panel.mat-sidenav .sidebar-list-item.open > .mat-list-item-content > a > span,
  .sidebar-panel.mat-sidenav .sidebar-list-item.open .sub-menu .mat-list-item.selected a {
      color: map-get($md-primary, 500) !important;
  }
  .sidebar-panel .mat-nav-list .mat-list-item {
      color: rgba(0, 0, 0, 0.94)
  }
  .sidebar-panel.mat-sidenav .sidebar-list-item.open > .mat-list-item-content > .sub-menu {
      //border-left: 2px solid map-get($md-primary, 500);
      @include variable(border-left, --primary, $primary, !important);
  }
  .breadcrumb-bar {
      //background: #ffffff !important;
      @include variable(background, --bg2, $bg2, !important);
      @include variable(color, --fg1, $fg1, !important);
  }
  /* Hopscotch Tour */
  div.hopscotch-bubble {
      border-color: $primary-dark;
      @include variable(border-color, --primary, $primary);
  }
  /* up arrow  */
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
      border-bottom: 17px solid $primary-dark;
      @include variable(border-bottom-color, --primary, $primary);
  }
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
      border-bottom: 17px solid map-get($md-primary, 500);
      @include variable(border-bottom-color, --primary, $primary);
      top: -16px;
  }
  /* right arrow */
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
      border-left: 17px solid $primary-dark;
      @include variable(border-left-color, --primary, $primary);
  }
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
      border-left: 17px solid map-get($md-primary, 500);
      @include variable(border-left-color, --primary, $primary);
      left: -1px;
  }
  /* bottom arrow */
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
      border-top: 17px solid $primary-dark;
      @include variable(border-top-color, --primary, $primary);
  }
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
      border-top: 17px solid map-get($md-primary, 500);
      @include variable(border-top-color, --primary, $primary);
      top: -18px;
  }
  /* Left Arrow */
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
      border-right: 17px solid $primary-dark;
      @include variable(border-right-color, --primary, $primary);
  }
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {
      left: 1px;
      border-right: 17px solid map-get($md-primary, 500);
      @include variable(border-right-color, --primary, $primary);
  }
  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: map-get($md-accent, 400);
    @include variable(background, --accent, $accent, !important);

  }
  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    @include variable(background, --accent, $accent, !important);

  }
  .mat-bg-accent,
  div.hopscotch-bubble .hopscotch-bubble-number,
  div.hopscotch-bubble .hopscotch-nav-button.next:hover,
  div.hopscotch-bubble .hopscotch-nav-button.next {
      background-color: map-get($md-accent, 500);
      color: black;
  }
  .mat-bg-warn {
      //background-color: #f44336;
      @include variable(background-color, --red, $red);
      color: white;
  }
  .mat-color-accent {
      //color: map-get($md-accent, 500);
      @include variable(color, --accent, $accent);
  }
  .mat-color-warn {
      //color: #f44336;
      @include variable(color, --warn, $warn);
  }
  .mat-sidenav-container{
    //background-color:#ddd;
    @include variable(background, --bg1, $bg1);
  }

  /////////////////// Typography (egret overrides)

  html,body{
    font-size:13px;
    /* Experimental thin fonts */
    font-weight:250;
  }

  h1,h2,h3,h4,h5,h6{
    font-weight:500;
  }

  h4{
    font-size:15px;
  }

  /////////////////// SpecSelectors: Selectors not originally in ix-blue theme
  .mat-tab-label, .mat-tab-link{
    @include variable(color, --fg1, $fg1);
  }
  .mat-menu-item .mat-icon:not([color]),
  .mat-menu-item .theme-picker-swatch .mat-icon:not([color]),
  .mat-menu-item-submenu-trigger::after{
    @include variable(color, --fg1, $fg1);
  }
  .mat-toolbar,
  .mat-raised-button{
    background-color:rgba(0,0,0,0.1);
    @include variable(color, --fg1, $fg1);
  }

  .mat-bg-primary,
  .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary,
  .topbar,
  .sidebar-panel.mat-sidenav .sidebar-list-item.open md-icon:not(.menu-caret),
  .chats-wrap .conversations-hold .single-conversation.me .conversation-msg,
  .ngx-datatable .datatable-footer .datatable-pager .pager .pages.active a,
  .fileupload-drop-zone.dz-file-over,
  .toolbar-avatar.online > .status-dot,
  .cal-open-day-events,
  //.datatable-header,.datatable-footer,
  .mat-step-header .mat-step-icon,
  div.hopscotch-bubble{
        @include variable(background, --primary, $primary, !important);
        //@include variable(color, #fff, #fff, !important);
        @include variable(color, --primary-txt, $primary-txt, !important);

  }

  .ngx-datatable.material{
    background:none;
  }
  .datatable-header,.datatable-footer{
    border-top-style:solid;
    border-top-width:1px;
    @include variable(border-top-color, --bg1, $bg1, !important);
  }
  .datatable-header,.datatable-footer{
//        @include variable(background, --bg2, $bg2, !important);
//        @include variable(color, --fg2, $fg2, !important);
//        @include variable(background, --primary, $primary, !important);
//        @include variable(color, --primary-txt, $primary-txt, !important);
    @include variable(background, --bg2, $bg2, !important);
    background-color:rgba(0,0,0,0.75)
  }


  .mat-bg-accent,
  .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent,
  div.hopscotch-bubble .hopscotch-bubble-number,
  div.hopscotch-bubble .hopscotch-nav-button.next:hover,
  div.hopscotch-bubble .hopscotch-nav-button.next,
  .ngx-datatable .datatable-footer .datatable-pager .pager .pages.active a,
  .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
  .mat-checkbox-checked.mat-accent .mat-checkbox-background{
      background-color: map-get($md-accent, 500);
      color: black;
      @include variable(background, --accent, $accent, !important);
      @include variable(color, #000, #000, !important);
  }

  .mat-drawer,
  .sidebar-panel.mat-sidenav .navigation-hold#scroll-area,
  .mat-card,.mat-paginator,
  .mat-button-toggle,
  .mat-select-content, .mat-select-panel,
  .mat-select-panel-done-animating,
  .mat-expansion-panel,
  .mat-dialog-container,
  .mat-stepper-horizontal, .mat-stepper-vertical,
  .dx-treelist-container{
    @include variable(background, --bg2, $bg2);
    @include variable(color, --fg2, $fg2);
  }
  .mat-button-toggle-checked{
    background-color:rgba(0,0,0,0.1);
    @include variable(color, --fg2, $fg2);
  }

  .mat-select-panel .mat-option:hover,
  .ngx-datatable .datatable-body .datatable-row-wrapper:nth-child(odd) datatable-body-row{
    @include variable(background, --alt-bg1, $alt-bg1);
    @include variable(color, --alt-fg1, $alt-fg1);
  }

  .ngx-datatable .datatable-body .datatable-row-wrapper:nth-child(even) datatable-body-row{
    //@include variable(background, --alt-bg1, $alt-bg1);
    background-color:rgba(123,123,123,0.2);
    @include variable(color, --alt-fg1, $alt-fg1);
  }

  .mat-card .mat-divider{
    @include variable(background, --alt-fg1, $alt-fg1);
    opacity:0.15;
  }


  .sidebar-panel .mat-nav-list .mat-list-item,
  .app-user .app-user-name, .text-muted,
  .mat-expansion-panel-header-title,
  .mat-expansion-panel-header-description,

  .mat-list .mat-list-item,
  .mat-menu-panel button,
  .mat-paginator-navigation-next, .mat-paginator-navigation-previous,

  .mat-nav-list .mat-list-item,
  .mat-form-field-label,
  .mat-selection-list .mat-list-item,.mat-option,
  .mat-select-arrow, .mat-select-value {
    @include variable(color, --fg2, $fg2, !important);
  }

  .mat-form-field .mat-select.mat-select-disabled .mat-select-arrow,
  .mat-select-disabled .mat-select-value  {
    @include variable(color, --fg2, $fg2);
    opacity: 0.38;
  }

  .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
    @include variable(color, --primary, $primary, !important);
  }

  .mat-checkbox-disabled .mat-checkbox-label {
    @include variable(color, --fg2, $fg2);
    opacity: 0.6;
  }

  .mat-checkbox-disabled .mat-checkbox-frame, .mat-checkbox-disabled .mat-checkbox-inner-container {
    opacity: 0.75;
  }

  .mat-menu-panel,
  .mat-option.mat-active,
  .mat-nav-list a{
    @include variable(background, --bg2, $bg2);
    @include variable(color, --fg2, $fg2, !important);
  }

  .mat-form-field-underline {
    @include variable(background-color, --fg2, $fg2, !important);
    opacity:0.35;
  }

  .mat-warn .mat-form-field-underline {
    opacity:0.85;
  }

  .mat-form-field.mat-focused .mat-form-field-ripple {
    @include variable(background-color, --primary, $primary, !important);
  }

  #test-alert {
    @include variable(color, --fg2, $fg2);
  }

  .mat-form-field-ripple{
    @include variable(background-color, --primary, $primary);
  }

  .mat-color-primary,
  .mat-button.mat-primary,
  .sidebar-panel.mat-sidenav .sidebar-list-item.open > .mat-list-item-content > a > span,
  .sidebar-panel.mat-sidenav .sidebar-list-item.open .sub-menu .mat-list-item.selected a
  // .mat-focused .mat-form-field-label
  {
    @include variable(color, --primary, $primary, !important);
  }

  .mat-form-field.mat-focused.mat-primary {
    @include variable(color, --fg2, $fg2, !important);
  }

  .mat-form-field-invalid .mat-form-field-label {
    color: #f44336 !important;
  }

  .mat-form-field-disabled .mat-form-field-label {
    opacity: .38;
  }

  .mat-button.mat-accent {
    @include variable(color, --accent, $accent, !important);
  }

  .mat-button:disabled {
    opacity: .38;
  }

  .mat-form-field-ripple{
    @include variable(background-color, --primary, $primary);
  }

  .mat-input-element {
    @include variable(caret-color, --fg2, $fg2, !important);
  }

  .mat-input-element:disabled{
    opacity:0.38;
    @include variable(color, --fg2, $fg2);
  }

  .mat-calendar-table-header,
  .mat-calendar-table,
  .mat-calendar-body-cell-content,
  .mat-calendar-body-label{
    @include variable(color, --fg2, $fg2);
  }

  .mat-calendar-table-header,
  .mat-calendar-body-cell,
  .mat-calendar-body-cell-content{
    cursor:default;
  }

  .mat-raised-button.mat-primary[disabled],
  .mat-raised-button.mat-accent[disabled],
  .mat-raised-button.mat-warn[disabled],
  .mat-raised-button[disabled][disabled],
  .mat-fab.mat-primary[disabled],
  .mat-fab.mat-accent[disabled],
  .mat-fab.mat-warn[disabled],
  .mat-fab[disabled][disabled],
  .mat-mini-fab.mat-primary[disabled],
  .mat-mini-fab.mat-accent[disabled],
  .mat-mini-fab.mat-warn[disabled],
  .mat-mini-fab[disabled][disabled]{
    @include variable(background-color, #999, #999);
    opacity:0.38;
  }

  .egret-swatch, .mat-checkbox-frame, .mat-radio-outer-circle {
    @include variable(border-color, --fg1, $fg1);
    // border-color: gray;
  }

  .headerCheckBox .mat-checkbox-frame,
  .ngx-datatable .datatable-body .mat-checkbox-frame {
    @include variable(border-color, --alt-fg1, $alt-fg1, !important);
  }

  .mat-expansion-indicator::after, button.card-close, .mat-pseudo-checkbox {
    @include variable(color, --fg1, $fg1);
  }

  .toggle-children {
    filter: invert(50%);
    top: 5px;
    left: 4px;
  }

  .mat-menu-item[disabled] {
    @include variable(color, --primary-txt, $primary-txt);
    opacity: 0.38;
  }

  .spacer{
    flex: 1 1 auto;
  }

  // System wide hover effects
  .mat-select-panel .mat-option:focus,
  .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){
    @include variable(background, --primary, $primary, !important);
    @include variable(color, --primary-txt, $primary-txt, !important);
  }

  .mat-menu-content button.mat-menu-item:hover,
  .mat-menu-content button.mat-menu-item:hover .mat-icon:not(.theme-picker-swatch-icon),
  .ngx-datatable .datatable-body .datatable-row-wrapper:hover,
  .ngx-datatable .datatable-body .datatable-row-wrapper:hover .plugin-buttons,
  .ngx-datatable .datatable-body .datatable-row-wrapper:hover .plugin-icons,
  .mat-menu-content button.mat-menu-item:focus,
  .mat-menu-content button.mat-menu-item:focus .mat-icon:not(.theme-picker-swatch-icon),
  .ngx-datatable .datatable-body .datatable-row-wrapper:focus {
    @include variable(background, --primary, $primary, !important);
    @include variable(color, --primary-txt, $primary-txt !important);
}

.ngx-datatable .datatable-body .datatable-row-wrapper:hover .mat-checkbox .mat-checkbox-frame {
  @include variable(border-color, --primary-txt, $primary-txt, !important);
}

.ngx-datatable .datatable-body .datatable-row-wrapper:hover .mat-slide-toggle:not(.mat-checked) .mat-slide-toggle-bar {
  @include variable(background, --bg1, $bg1, !important);
}

  // Treelists in storage/volumes
  .mat-expansion-panel-header{
    background-color:rgba(0,0,0,0.1);
  }
  .mat-expansion-panel-body{
    //background-color:rgba(0,0,0,0.15);
    position:relative;
    //padding:0;// ask pete
  }
  .dx-treelist-container{
    background:transparent;
  }
  .dx-treelist-headers{
    border-bottom:none;
  }

  .dx-treelist-rowsview{
    border:0;
  }

  .dx-treelist .dx-column-lines> td{
    border-left:solid 1px rgba(128,128,128,0.1);
    border-right:none;
  }

  .dx-treelist .dx-row-lines > td{
    border-color: rgba(128,128,128,0.1);
  }

  tr.dx-row:nth-child(odd){
    background-color:rgba(0,0,0,0.05)
  }

  // END Treelist styles

  //Entity Module Overrides

  entity-task .form-card.mat-card,
  device-edit .form-card.mat-card,
  entity-form .form-card.mat-card{
    max-width:960px;
    margin:0 auto;
  }

  .mat-card-actions .mat-button {
    margin-right: 3px !important;
    margin-left: 1px !important;
  }

  .form-card.mat-card{
    font-size:12px;
  }

  .fieldset-label{
    min-width:100%;
    margin-bottom:16px;
  }

  .combo-box-menu.mat-menu-panel {
      max-height: 256px;
  }

  .mat-checkbox {
    margin: 4px;
  }
  .form-line .mat-checkbox {
    margin-left: 0;
  }

  .ngx-datatable .mat-checkbox-inner-container {
    margin-left: 4px;
  }

  .mat-checkbox-inner-container{
    width:16px;
    height:16px;
    overflow: visible;
  }
  .mat-checkbox-ripple{
    left:-17px;
    top:-17px;
  }
  /////////////////// END SpecSelectors

  .mat-dialog-title {
    .warning-icon {
      color: #ffc107;
      position: relative;
      top: 8px;
      font-size: 35px;
      margin-right: 10px;
    }
  }

  .mat-dialog-content {
    max-width: 600px;
    padding-bottom: -3px;
    overflow: hidden;

    .info-panel {
      max-height: 100px;
      padding: 0px;
      border: 0px;
      overflow: hidden;
      -webkit-transition: max-height 0.3s linear;
      -moz-transition: max-height 0.3s linear;
      -o-transition: max-height 0.3s linear;
      -ms-transition: max-height 0.3s linear;
      transition: max-height 0.5s linear;

      &.open {
        max-height: calc( 100px + 2rem + 4px );
        padding: 2px;
      }

      textarea {
        overflow: auto;
        background: white;
        color: black;
        border: 1px solid #ddd;
        min-height: 100px;
        padding: 1rem;
        width: calc( 100% - 2rem );
      }
    }

    .backtrace-panel {
      max-height: 0;
      padding: 0px;
      border: 0px;
      overflow: hidden;
      -webkit-transition: max-height 0.3s linear;
      -moz-transition: max-height 0.3s linear;
      -o-transition: max-height 0.3s linear;
      -ms-transition: max-height 0.3s linear;
      transition: max-height 0.5s linear;

      &.open {
        max-height: calc( 100px + 2rem + 4px );
        padding: 2px;
      }

      textarea {
        overflow: auto;
        background: white;
        color: black;
        border: 1px solid #ddd;
        min-height: 100px;
        padding: 1rem;
        width: calc( 100% - 2rem );
      }
    }
  }

  // To move tooltips up when they appear too low on viewport
  #raised-tooltip {
    top: -90px;
  }

  // To fix alignment issues w/checkboxes on Create Pool page
  .headerCheckBox {
    position: relative;
    left: 16px;
    margin-top: 7px;
  }

  // For Detach Pools functions on volumes-list.component.ts
  #pool_detach_warning, #pool_processes {
    margin-bottom: 15px;
  }

  app-volumeimport-wizard #key tooltip {
    position: relative;
    top: -4px;
  }

  downloadkey-dialog .red-warning-button {
    margin-right: 7px;
  }
  // ------------------------

  // For some items on VM Wizard Hard Disks page
  #disk_radio {
    max-width: 220px;
  }
  // ---------------

  // Vertically align header-footer items on datatables
  .datatable-header-cell {
    position: relative;
    // top: -5px;
    // left: 14px;
  }

  // Put header labels directly over cells
  .datatable-header-cell-label {
    margin-left: 7px;
    text-align: center;
    position: relative;
    top: 7px;
  }

  // Resizes loader dialog which appears on update, wipe disk, etc.
  .entity-job-dialog {
    min-width: 200px;
    max-width: 500px;
    max-height: 300px;
  }

  // Fix bug where ngx-datatable rows get stuck at original window width
  .datatable-scroll {
    min-width: 100%;
  }

  // Style the ix logo with the primary theme color
  .ix-logo {
    @include variable(fill, --primary, $primary);
  }

  // Color the small lock icon with theme colors
  .app-user-name .icon-xs {
    @include variable(color, --fg2, $fg2, !important);
  }

  .mat-spinner circle {
      @include variable(stroke, --primary, $primary, !important);
  }

  // Add a visual effect when any sidenav menu item is clicked
  .highlight  {
    opacity: 0.5;
  }

  // Add rule for entity wizards to make text light on dark themes
  .mat-step-header .mat-step-label.mat-step-label-active {
    @include variable(color, --fg2, $fg2);
    opacity: 1;
  }

  .mat-step-header .mat-step-label {
    @include variable(color, --fg2, $fg2);
    opacity: .38;
  }

  // Style file trees to be highlighted with a theme color
  .node-content-wrapper:hover,
  .node-content-wrapper-focused{
      background-color: var(--bg2);
  }

  // Give vdev arrow buttons theme colors
  .vdev-action-btn {
    @include variable(background, --bg1, $bg1);
  }

  .vdev-action-btn .arrow {
    @include variable(color, --primary, $primary);
  }

  .vdev-action-btn:disabled {
    opacity: 0.38;
  }

  #vdev__close-button {
    color: var(--primary) !important;
  }

  // style nav chevrons on datatable pager w/regard to theme
  .mat-button-wrapper .mat-paginator-decrement,
  .mat-button-wrapper .mat-paginator-increment {
    @include variable(border-color, --fg1, $fg1);
  }

  .mat-icon-button:disabled .mat-button-wrapper .mat-paginator-decrement,
  .mat-icon-button:disabled .mat-button-wrapper .mat-paginator-increment {
    @include variable(border-color, --fg1, $fg1);
    opacity: .38;
  }

  // style to make sure all radio buttons catch the theme color
  .mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: var(--accent) !important;
  }

  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: var(--accent) !important;
  }

  // Fix icon color in notification area
  .info-icon {
    @include variable(color, --primary, $primary !important);
  }

  .mat-spinner circle {
    @include variable(stroke, --primary, $primary, !important);
  }

  // Align button and tooltip on Add Replication form
  #repl_remote_hostkey button {
    left: 17px;
  }

  #repl_remote_hostkey .tooltip {
    left: 145px;
    top: -55px
  }

  // Theme color for slider (Shell page and elsewhere)
  .mat-slider {
    @include variable(color, --accent, $accent, !important);
  }

  .mat-slider-track-fill, .mat-slider-thumb {
    @include variable(background-color, --accent, $accent, !important);
  }

  // Fix a layout problem on Sharing/ISCSI page with ink-bar under active link...
  iscsi .mat-tab-label-active, reportsdashboard .mat-tab-label-active  {
    border-bottom: 2px solid;
    @include variable(border-color, --primary, $primary);
  }

  //...by hiding ink bar, replacing it with a bottom border, above.
  iscsi .mat-ink-bar, reportsdashboard .mat-ink-bar {
    opacity: 0;
  }

  // Properly align buttons on Dir Services / Idmap
  #idmap-actions {
    margin-left: 0;
  }

  // Adjustment of highlight over page number on pager in footer
  .ngx-datatable .datatable-footer .datatable-pager .pager .pages.active a {
    padding-top: 1px;
  }

  // Background visually links the items in the form-explorer
  .form-ex-flex-container {
    @include variable(background, --bg1, $bg1);
  }

  // Align buttons on UI Prefs form
  .prefs-form .mat-card-actions {
    text-align: left !important;
    padding-left: 10px;
  }

  // Keeps buttons on UI prefs form from overflowing page
  @media (max-width:450px) {
    .prefs-form button {
      display: block;
      margin-bottom: 10px !important;
    }
  }

  // Helper styles for red,blue,green,cyan,orange,magenta,violet,yellow
  // The --color-txt css vars are generated by theme service
  .fn-theme-primary{
    @include variable(background-color, --primary, $primary);
    @include variable(color, --primary-txt, $primary-txt);
  }
  .fn-theme-red{
    @include variable(background-color, --red, $red);
    @include variable(color, --red-txt, $red-txt);
  }
  .fn-theme-blue{
    @include variable(background-color, --blue, $blue);
    @include variable(color, --blue-txt, $blue-txt);
  }
  .fn-theme-green{
    @include variable(background-color, --green, $green);
    @include variable(color, --green-txt, $green-txt);
  }
  .fn-theme-cyan{
    @include variable(background-color, --cyan, $cyan);
    @include variable(color, --cyan-txt, $cyan-txt);
  }
  .fn-theme-orange{
    @include variable(background-color, --orange, $orange);
    @include variable(color, --orange-txt, $orange-txt);
  }
  .fn-theme-magenta{
    @include variable(background-color, --magenta, $magenta);
    @include variable(color, --magenta-txt, $magenta-txt);
  }
  .fn-theme-violet{
    @include variable(background-color, --violet, $violet);
    @include variable(color, --violet-txt, $violet-txt);
  }
  .fn-theme-yellow{
    @include variable(background-color, --yellow, $yellow);
    @include variable(color, --yellow-txt, $yellow-txt);
  }

  // Fixes color on Reports page tabs
  #dashboardcontainerdiv .mat-ink-bar {
    @include variable(background-color, --primary, $primary);
  }

  .mat-button {
    text-transform: uppercase !important;
    font-weight: 500 !important;
  }

 .mat-button.mat-basic, .mat-button.mat-primary {
    @include variable(background-color, --primary, $primary);
    color: white !important;
  }

  .mat-button.mat-accent {
    @include variable(background-color, --accent, $accent);
    color: black !important;
  }

  // Gets checkboxes in SMART tests to pick up theme color
  .mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate {
    @include variable(background, --accent, $accent !important);
  }
  // for multi-selection only
  .mat-option-pseudo-checkbox.mat-pseudo-checkbox{
    display:none ;
  }

  // Bring tooltips to the front in dialogs
  .mat-dialog-container, .mat-dialog-content {
      overflow: visible !important;
  }

  // Fix for overscrolling problem with sidenav
  .sidebar-panel.mat-sidenav .navigation-hold {
    position: static !important;
  }

  .mat-drawer {
    overflow-y: hidden !important;
  }

  app-admin-layout .not-alerts .mat-drawer-inner-container {
    overflow: visible !important;
  }

  // Bring theme colors to rollover effect for standard primary buttons
  .mat-button.mat-primary:hover .mat-button-focus-overlay {
    @include variable(background-color, --primary, $primary);
    opacity: .12;
  }

  // Bring theme colors to rollover effect for standard accent buttons
  .mat-button.mat-accent:hover .mat-button-focus-overlay {
    @include variable(background-color, --accent, $accent);
    opacity: .12;
  }

  // Bring theme color to tab underline on Theme Preview
  #theme-preview .mat-ink-bar {
    @include variable(background-color, --primary, $primary !important);
  }

  // Bring theme color to small icon buttons
  .mat-icon-button.mat-primary {
    @include variable(color, --primary, $primary !important);
  }

  .mat-icon-button.mat-accent {
    @include variable(color, --accent, $accent !important);
  }

  // Make room for checkbox ripple effect in datatables
  .datatable-header-cell .mat-checkbox, .datatable-body-cell .mat-checkbox {
    margin-left: 5px;
  }

  // Adjustments to checkboxes and header labels on unique tables
  services .datatable-body-cell .mat-checkbox {
    bottom: 7px !important;
  }

  services .datatable-header-cell-label {
    margin-left: 15px;
  }


  .red-warning-button {
    @include variable(background-color, --red, $red !important);
    color: white;
  }

  // // Define logo via CSS properties
  // .logo{
  //  /*   @include variable(background-image, --logo, $logo !important); //url(assets/images/logo.svg);
  //     background-size: contain;
  //     width: 52px;
  //     height: 48px;
  //     background-repeat: no-repeat;
  //     background-position: 0 4px;
  //     left: -6px;
  //     position: relative;*/
  // }
  // .logo-text{
  //    /* @include variable(background-image, --logo-text, $logo-text !important); //url(assets/images/logo-text.svg);
  //     width: 112px;
  //     height: 40px;
  //     position: relative;
  //     top: 0;
  //     background-size: contain;
  //     background-repeat: no-repeat;
  //     background-position: 2px 0;*/
  // }

  .mat-progress-bar-fill::after {
    @include variable(background-color, --primary, $primary);
  }

   .mat-progress-bar-buffer {
     @include variable(background-color, --primary, $primary);
     opacity: 0.5;
   }

   .mat-progress-bar .mat-progress-bar-background{
     //opacity:0.1;
     display:none;
   }

  #password, #sed_passwd, #em_pass1, #bsdusr_passwd_currnt,
    #Passphrase, #passphrase, #disk_passwd, #ldap_bindpw, #iscsi_target_auth_secret,
      #iscsi_target_auth_peersecret, #dc_passwd, #secret_key, #ad_bindpw, #v3_password,
      #secret_access_key-S3, #v3_privpassphrase, #secret_access_key-S3, #pass-FTP,
      #pass-MEGA, #pass-SFTP, #pass-WEBDAV, #aws_secret_access_key {
    max-width: 640px;
    min-width: 225px;
  }
  #password_conf, #bsdusr_password_conf, #sed_passwd2, #em_pass2,
    #Passphrase2, #passphrase2, #disk_passwd2, #iscsi_target_auth_secret_confirm,
      #iscsi_target_auth_peersecret_confirm, #password2, #dc_passwd2, #secret_key2, #v3_password2,
      #v3_privpassphrase2 {
    width: 70%;
    max-width: 450px;
  }

  #bsdusr_password {
    width: 70%;
    max-width: 475px;
    min-width: 225px;
  }

  app-createpassphrase-form .has-tooltip {
    width: 100% !important;
    max-width: 450px !important;
  }

  .has-pwtoggle > mat-form-field {
    width: 70% !important;
  }

  app-support .has-pwtoggle > mat-form-field {
    width: calc( 100% - 66px ) !important;
  }

  app-entity-dialog .has-pwtoggle  {
    padding: 0 0 10px 0 !important;
    width: 385px !important;
    background: rgba(0, 0, 0, 0) !important;

    mat-form-field {
      width: 86.3% !important;
    }
  }

  #secret_key2 {
    margin-bottom: 5px;
  }

  #toggle_pw {
    @include variable(display, --toggle_pw_display_prop, $toggle_pw_display_prop);
  }

  datatable-selection > .empty-row {
    color: var(--alt-fg1);
  }

  #toggle_pw {
    @include variable(display, --toggle_pw_display_prop, $toggle_pw_display_prop);
  }

  #show_Warning {
    @include variable(display, --enableWarning, $enableWarning);
  }

  #update-info {
    color: var(--accent);
  }

  .services-table .service-toggle-running {
    @include variable(fill, --accent, $accent);
  }

  .mat-simple-snackbar-action {
    color: var(--accent);
  }

  input[type=number] {
    -moz-appearance: textfield !important;
  }

  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  .mat-autocomplete-panel {
    background: var(--bg2) !important;
  }

  .mat-autocomplete-panel .mat-option:hover {
    background-color: var(--primary) !important;
  }

  .mat-autocomplete-panel .mat-option-text {
    color: var(--fg2) !important;
  }

  .ui-treetable tr:nth-child(even){
    background-color:rgba(123,123,123,0.2);
  }

  .ui-treetable tr:hover {
    @include variable(background, --primary, $primary, !important);
    @include variable(color, --primary-txt, $primary-txt);
  }

  .ui-treetable-thead {
    text-align: left;
    vertical-align: top;
  }

  app-volumes-list .ui-treetable-resizable .ui-treetable-tfoot>tr>td, .ui-treetable-resizable .ui-treetable-tbody>tr>td {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
  }

  app-volumes-list td[id^="tbody__comments_"] {
    white-space: normal !important;
    text-overflow: unset;
    min-width: 200px;
  }

  .ngx-datatable .datatable-header .datatable-header-cell .resize-handle {
    border-right: 1px solid !important;
    @include variable(border-color, --primary-txt, $primary-txt);
    visibility: visible !important;
    opacity: .25;
  }

  .datatable-header-inner {
    height: 52px;
  }

  #idmap-err {
    position: absolute;
    top: 100px;
    left: 26px;
    @include variable(color, --red, $red);
  }

  #em_pwmessage {
    margin: 10px 0;
  }

  .rightside-content-hold {
    overflow-y: auto;
  }

  app-networksummary .mat-list .mat-subheader {
    @include variable(color, --fg2, $fg2);
  }

  .xterm-viewport {
    overflow-y: auto;
  }

  .xterm-rows > div {
    height: 15px !important;
  }

  .advanced-date-picker .cron-fields .mat-select-value,
  .advanced-date-picker .cron-fields .mat-select-arrow,
  .advanced-date-picker .cron-fields .mat-form-field.mat-focused.mat-primary .mat-select-arrow  {
    color: white !important;
  }

  .advanced-date-picker .cron-fields .mat-form-field.mat-focused .mat-input-element {
    color: white;
  }

  .advanced-date-picker .cron-fields .mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: white !important;
  }

  .advanced-date-picker .cron-fields .mat-form-field-underline {
    background-color: white !important;
    opacity: .99;
  }

  app-select-dialog .mat-select-placeholder,
  app-ipmi .mat-select-placeholder {
    @include variable(color, --fg2, $fg2);
  }

  app-acmedns-form {
    h4 {
      font-size: 20px;
    }
    .fieldset:first-of-type {
      padding-left: 5px;
    }
    .fieldset:nth-of-type(2) {
      padding-left: 30px;
      padding-top: 38px;
    }
    & p .material-icons {
      font-size: 36px;
      margin-right: 10px;
      margin-left: -4px;
      position: relative;
      top: 10px;
    }
    & #select_auth, #auth_attributes {
      font-size: 140%;
    }
  }

  #acme_directory_uri mat-form-field {
    width: 50%;
  }

  app-certificate-acme-add #authenticators {
    position: relative;
    top: -18px;
  }

  // Support Section ////////////////////////
  app-support {
    .mat-card {
      padding-bottom: 60px;
      min-width: 320px;
    }
    #top-row {
      margin: 0 15px;
    }

    .sys-image {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 350px;

      div {
        display: flex;
        justify-content: center;
      }
    }

    .lowerme {
      margin-top: 60px !important;
    }

    .support-title, #FN_col1, #FN_col2, #TN_col1, #TN_proactive_section_title {
      font-size: 180%;
      margin-bottom: 15px;

      & .material-icons {
        margin-right: 10px;
        margin-left: -5px;
        position: relative;
        top: 10px;
        font-size: 36px;
      }
    }

    #category_form-select-spinner,
    app-proactive #name_form-input-spinner,
    app-proactive #secondary_name_form-input-spinner {
      position: absolute;
      top: -20px;
      right: 45%;
    }

    @media screen and (max-width: 1025px) {
      #fn-spacer {
        height: 80px;
      }
    }

    @media screen and (max-width: 400px) {
      app-sys-image img {
        max-width: 80%;
      }
      .mat-card {
        margin-left: -10px;
      }
    }

    @media screen and (max-width: 350px) {
      .mat-card {
        margin-left: -20px;
      }
    }
  }

  app-fn-sys-info {
    #fn-support-title {
      margin-bottom: 25px;
    }
    .fn-sys-info-line {
      margin-top: 10px;
      height: 40px;

      h4 {
        margin-bottom: 3px;
      }
    }
    #fn-instructions {
      font-size: 110%;
    }
  }

  app-tn-sys-info {
    .tn-sys-info-line {
      margin-top: 10px;

      h4 {
        margin-bottom: 3px;
      }
    }
    #update-license-btn {
      background-color: var(--primary);
      color: white;
      top: 13px;
    }

    #tn-sys-col1 {
      min-width: 184px;
    }
  }

  app-sys-image {
    img {
      max-width: 90%;
      height: auto;
    }
  }

  @media screen and (min-width: 600px) and (max-width: 749px)  {
    .tn-sys-image {
      position: relative;
      left: 35px;
      // max-width: 75%;
    }
  }

  app-production-status {
    .mat-card {
        top: 25px;
        background-color: rgba(127,127,127,0.1);
        width: 400px;
        height: 100px;
        margin: 0 !important;
    }
    .mat-card-actions {
      top: 25px;
      position: absolute;
      left: 240px;
      width: unset;
    }

    @media screen and (max-width: 599px) {
      .mat-card {
        top: 25px;
        width: auto;
      }
    }

    @media screen and (max-width: 460px) {
      .mat-card {
        top: 25px;
        height: auto;
      }
      .mat-card-actions {
        position: relative;
        top: unset;
        left: unset;
      }
    }
  }

  app-proactive {
    .mat-card {
      top: 37px;
      background-color: rgba(127,127,127,0.1);
      margin: 0 15px !important;
    }
    .mat-card-actions {
      height: 0px;
      top: -45px;
      position: relative;
      left: 230px;
    }
    #enabled {
      position: relative;
      top: 5px;
    }
    #TN_proactive_instructions {
      font-size: 120%;
      margin-right: 10px;
      margin-bottom: 20px;

    }

    @media screen and (max-width: 599px) {
      .mat-card {
        top: -35px;
      }
    }

    @media screen and (max-width: 460px) {
      .mat-card-actions {
        top: 25px;
        height: auto;
        position: relative;
        left: unset;
        height: auto;
        top: unset;
      }
    }
  }

  app-fn-support {
    .mat-card {
      background-color: rgba(127,127,127,0.1);
      margin: 0 15px !important;
      top: 30px;
    }
    .mat-card-actions {
      top: -40px;
      position: relative;
      width: 300px;
    }
    form {
      margin-bottom: -40px;
    }

    @media screen and (max-width: 599px) {
      .mat-card-actions {
        top: 0;
      }
      .lowerme {
        margin-top: 0 !important;
      }
      form {
        margin-bottom: 4px;
      }
    }

  }

  app-tn-support {
    .mat-card {
      top: 50px;
      background-color: rgba(127,127,127,0.1);
      margin: 0 15px !important;
    }
    .mat-card-actions {
      height: 0px;
      top: -55px;
      position: relative;
      width: 400px;
    }

    @media screen and (max-width: 599px) {
      .mat-card-actions {
        top: 0;
        height: 25px !important;
      }
      .lowerme {
        margin-top: 0 !important;
      }
      .mat-card {
        top: -15px;
      }
    }
  }
// End support section //////////////

  entity-form form-combobox mat-form-field {
    width: 50%;
    min-width: 180px;
  }

  app-service-netdata form-paragraph {
    font-size: larger;
    font-weight: 700;
    margin-bottom: 7px;
  }

  app-replication-wizard #adjustme {
    //top: -70px;
  }

  jail-wizard .tooltiptext {
    top: -1px;
  }

  mat-radio-group .radio-option-tooltip {
    position: relative;
    left: 5px;
  }

  .navigation-hold#scroll-area .ps__scrollbar-y-rail {
    top: 50px !important;
  }

  .tooltiptext samp {
      background: rgba(255, 255, 255, 0.25);
  }

  .node-content-wrapper {
    margin-left: 2px;
    padding-left: 3px;
  }
  tree-node-content mat-icon {
     vertical-align: top;
  }
  tree-node-content span {
    vertical-align: top;
    line-height: 25px;
    padding-left: 3px;
  }

  .mat-card{
    border-radius: 6px;
    //overflow: hidden; // This clips tooltips
  }


  // Scrollbars need separate rules for firefox and webkit

  *{
    scrollbar-width:8px;
    scrollbar-height:8px;
  }

  *::-webkit-scrollbar{
    width:8px;
    height:8px;
  }

  *::-webkit-scrollbar-track{
    background-color:var(--bg2);
  }

  *::-webkit-scrollbar-thumb{
    background-color: rgba(127,127,127,0.5);
    border-radius:4px;
  }


  app-support a {
    text-decoration: underline;
  }

  app-entity-dialog #pool_processes p,
  confirm-dialog .warning-box {
    max-height: 170px;
    overflow-y: auto;
    width: 100%;
    padding: 3px;
    background-color: rgb(223, 223, 223);
    color: rgb(19, 19, 19);
  }

  confirm-dialog pre {
      overflow-x: auto;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      word-wrap: break-word;
      background: rgba(0, 0, 0, 0.096);
      padding: 5px;
  }

  app-interfaces-form {
    .disabled-select .mat-select-arrow {
      opacity: 0.38;
    }
    entity-form-list .form-list > div  {
      flex-direction: column !important;
      padding: 15px;
      background-color: rgba(127,127,127,0.1);
      margin-bottom: 10px;
    }
     #address, #failover_address, #failover_virtual_address {
      width: 85%;
    }
    .listBtn {
      bottom: 40px;
    }
    .list-action {
      height: 1px;
    }
  }

  app-createpassphrase-form #changekey-instructions,
  app-createpassphrase-form #createkey-instructions,
  app-addkey-form #addkey-instructions,
  app-volumeunlock-form #rekey-instructions,
  app-ssh-keypairs-form #key_instructions {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  app-createpassphrase-form, app-addkey-form {
    #cust_button_Cancel {
      background-color: var(--accent);
      color: black !important;
    }
  }

  #recovery_key span {
    margin-right: 5px;
  }
  iscsi .mat-tab-links {
    flex-wrap: wrap;
  }

  general-preferences-form #enableWarning tooltip {
    position: absolute;
    left: 370px;
  }

  general-preferences-form #userTheme {
    width: 400px;
  }
  app-interfaces-list #timeout-field {
    width: 50px;
    text-align: center;
  }

  // Reset Encryption form
  #encrypt-headline p {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: .7rem;

    i {
      margin-right: 5px;
      position: relative;
      top: 3px;
    }
  }

  #encryptionkey-passphrase-instructions p,
  #set_recoverykey-instructions p {
    margin-top: 1rem;
    font-size: .9rem;
  }

  #encryptionkey-passphrase {
    max-width: 640px;
  }

  // end of reset encryption form

  confirm-dialog div.message-content p {
    margin-bottom: 10px;
  }

  app-eula p {
    margin-bottom: 15px;
  }

  app-dataset-acl {
    #apply_user, #apply_group {
      margin-top: -13px;
      margin-bottom: 20px;
    }
    #aces0 {
      position: absolute;
      left: 15px;
      top: 340px;

      @media screen and ( max-width: 599px) {
        position: relative;
        top: -435px;
        left: 60px;
      }
    }
    .error-div {
      min-height: 24px;
      margin-top: -12px;
    }
  }

  .styled-list-for-dialogs {
    list-style: disc inside;
    padding-left: 15px;
  }

  app-general {
    #language_sort, #language_sort_radiogroup {
      display: inline-flex;
    }
    mat-radio-button {
      margin-left: 10px;
    }
  }

  app-active-directory #successfully_updated {
    position: relative;
    top: 12px;
  }

  mat-error a {
    text-decoration: underline;
  }

  tree-viewport {
    max-height: 300px;
    overflow: auto;
  }

 } // end of ix theme
