@import '~@angular/material/theming';
@include mat-core();

// Use CSS custom properties for palette colors
// via this mixin.
@mixin variable($property, $variable, $fallback, $important:null) {
  #{$property}: $fallback $important;
  #{$property}: var($variable) $important;
}

// Solarized Color Palette - don't forget to add accents to theme.service!
$bg1:    #dddddd; // Canvas like behind the cards
$bg2:    #ffffff; // Main elements like cards
$fg1:    #222222; // brighter fonts
$fg2:    #333333; // normal fonts
$alt-bg1:     #f8f8f2; // Tables
$alt-bg2:     #fafaf5; // Menus
$alt-fg1:     #181a26; // Tables
$alt-fg2:     #282a36; // Menus
$yellow:'#f0cb00';
$orange:'#eec302';
$red:'#ff0013';
$magenta:'#d238ff';
$violet:'#c17ecc';
$blue:'#00a2ff';
$cyan:'#00d0d6';
$green:'#59d600';

// Generated txt colors
$yellow-txt:'#333';
$orange-txt:'#eee';
$red-txt:'#fff';
$magenta-txt:'#fff';
$violet-txt:'#fff';
$blue-txt:'#fff';
$cyan-txt:'#333';
$green-txt:'#fff';
$primary-txt:'#fff';
$accent-txt:'#333';

$primary: $blue;
$accent: $yellow;
$warn: $red;
$tooltip:'inline';//display property
$toggle_pw_display_prop: inline;

// Logo images
$logo: url('assets/images/light-logo.svg');
$logo-text: url('assets/images/light-logo-text.svg');

$md-primary: (
    50 : #e0f2fa,
    100 : #b3dff2,
    200 : #80caea,
    300 : #4db5e2,
    400 : #26a5db,
    500 : #0095d5,
    600 : #008dd0,
    700 : #0082ca,
    800 : #0078c4,
    900 : #0067ba,
    A100 : #e3f1ff,
    A200 : #b0d7ff,
    A400 : #7dbdff,
    A700 : #63b0ff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$md-accent: (
    50 : #fff8e1,
    100 : #ffecb5,
    200 : #ffe083,
    300 : #ffd451,
    400 : #ffca2c,
    500 : #ffc107,
    600 : #ffbb06,
    700 : #ffb305,
    800 : #ffab04,
    900 : #ff9e02,
    A100 : #ffffff,
    A200 : #fffaf2,
    A400 : #ffe4bf,
    A700 : #ffd9a6,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #000000,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

// 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% );

// 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);
    }
    .sidebar-panel.mat-sidenav {
        background: url('/assets/images/sidebar-bg.jpg') no-repeat;
    }
    .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 {
          background-color: map-get($md-accent, 200);

    }
    .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-submenu-trigger::after{
  @include variable(color, --fg1, $fg1, !important);
}
.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);

}

.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-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); 
}
.ngx-datatable .datatable-body .datatable-row-wrapper{
  @include variable(background, --alt-bg1, $alt-bg1);
  @include variable(color, --alt-fg1, $alt-fg1);
}

.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 {
  opacity: 0.38;
}

.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);
}

.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-form-field.mat-focused.mat-primary
.mat-focused .mat-form-field-label{
  @include variable(color, --primary, $primary, !important);
}

.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:disabled{
  opacity:0.38;
  @include variable(color, --fg2, $fg2);
}

.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 {
  @include variable(border-color, --primary-txt, $primary-txt);
}



.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%);
}

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

.spacer{
  flex: 1 1 auto;
}

.dynamic-field tooltip{
  @include variable(display, --tooltip, $tooltip);
}

// 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;
}

.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-inner-container{
  width:16px;
  height:16px;
  margin:4px;
  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: 2px;
}

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

#cust_button_download_key {
  @include variable(background-color, --red, $red);
  color: white;
  margin-right: 7px;
}
// ------------------------

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

#disk_radio tooltip {
  float: right;
  margin-top: 23px;
}
// ---------------

// Vertically align header-footer items on entity tables  
.datatable-header-cell {
  position: relative;
  bottom: -6px;
  left: 14px;
}



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

// 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
.ix-blue .mat-step-header .mat-step-label.mat-step-label-active, {
  @include variable(color, --fg2, $fg2);
  opacity: 1;
}

.ix-blue .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{
    @include variable(background, --bg1, $bg1);
}

// 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;
}

// 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
.ix-blue .mat-radio-button.mat-accent .mat-radio-inner-circle {
  @include variable(background-color, --accent, $accent !important);
}

.ix-blue .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
  @include variable(border-color, --accent, $accent !important);
}

// Fix icon color in notification area
.notific-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: 135px;
  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 {
  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 {
  opacity: 0;
}

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

// Adjustment of highlight over page number on pager in footer
.ix-blue .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);
}

// Fill in space above horz scrollbar on entity tables
.datatable-body {
  @include variable(background-color, --alt-bg1, $alt-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 (min-width: 600px) and (max-width:740px) {
  .prefs-form button {
    display: block;
    margin-bottom: 10px !important;
  }
}

// Adds space above Manage Themes section in 1 col view on UI Pref
@media (max-width: 599px) {
  custom-theme-manager-form {
    margin-top: 30px !important;
  }
}

// Helper styles for red,blue,green,cyan,orange,magenta,violet,yellow
// The --color-txt css vars are generated by theme service
.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-dialog-container .mat-button, .mat-button {
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

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

// Gets checkboxes in SMART tests to pick up theme color
.ix-blue .mat-primary .mat-pseudo-checkbox-checked, .ix-blue .mat-primary .mat-pseudo-checkbox-indeterminate {
  @include variable(background, --accent, $accent !important);
}

// 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;
}

// // 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;*/
// }

#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-input-container {
	width: 70% !important;
}

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

  mat-input-container {
    width: 86.3% !important;
  }
}

#secret_key2 {
  margin-bottom: 5px;
}

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