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

$md-primary: (
    50 : #fff8e6,
    100 : #ffeec0,
    200 : #ffe396,
    300 : #ffd86c,
    400 : #ffcf4d,
    500 : #ffc72d,
    600 : #ffc128,
    700 : #ffba22,
    800 : #ffb31c,
    900 : #ffa611,
    A100 : #ffffff,
    A200 : #fffcf8,
    A400 : #ffe8c5,
    A700 : #ffddac,
    contrast: (
        50 : #006BB6,
        100 : #006BB6,
        200 : #006BB6,
        300 : #006BB6,
        400 : #006BB6,
        500 : #000000,
        600 : #006BB6,
        700 : #006BB6,
        800 : #006BB6,
        900 : #006BB6,
        A100 : #006BB6,
        A200 : #006BB6,
        A400 : #006BB6,
        A700 : #006BB6,
    )
);

$md-accent: (
    50 : #e0edf6,
    100 : #b3d3e9,
    200 : #80b5db,
    300 : #4d97cc,
    400 : #2681c1,
    500 : #006BB6,
    600 : #0063af,
    700 : #0058a6,
    800 : #004e9e,
    900 : #003c8e,
    A100 : #bad2ff,
    A200 : #87b0ff,
    A400 : #548eff,
    A700 : #3b7eff,
    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-dark-theme($freenas-primary, $freenas-accent);

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

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


.app-loader {
    background: map-get($md-primary, 500) !important;

}

    .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, .mat-select-arrow
    div.hopscotch-bubble {
        background: map-get($md-primary, 900) !important;
        color: #000 !important;
    }
    .mat-color-primary, .tree, 
    .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, 700) !important;
    }
    .node-content-wrapper-active, 
    .node-content-wrapper.node-content-wrapper-active:hover,
    .node-content-wrapper-active.node-content-wrapper-focused {
        background: map-get($md-primary, 400) !important;
        color: #000000;
    }

    .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 {
        font-weight: 500;
    }
    .sidebar-panel.mat-sidenav .sidebar-list-item.open > .mat-list-item-content > .sub-menu {
        border-left: 2px solid map-get($md-primary, 500);
    }
    .messages-wrap .inbox-hold {
        background: transparent !important;
    }
    .sidebar-panel.mat-sidenav {
        background: url('/assets/images/sidebar-bg-dark.jpg') no-repeat;
    }
    .app-user .app-user-name,
    .sidebar-panel.mat-sidenav .sidebar-list-item md-icon:not(.menu-caret),
    .ql-snow .ql-picker,
    .mat-option,
    .mat-dialog-container, .mat-select-value {
        color: black !important;
    }
    .md-option, .mat-sidenav.mat-sidenav-opened:not(.mat-sidenav-side), .mat-sidenav {
        background: rgba(20, 107, 182, 1) !important;
    }
    .md-select-content, .mat-select-content, .mat-option, .mat-select-panel-done-animating, .mat-menu-item, .mat-menu-content {
        color: #ffd86c;
    }
    .text-muted {
        color: rgba(0, 107, 182, .54) !important;
    }

    .ql-snow .ql-stroke  {
        stroke: #006BB6;
    }
    .ql-snow .ql-fill {
        fill: #006BB6;
    }
    .ql-toolbar.ql-snow,
    .ql-toolbar.ql-snow + .ql-container.ql-snow {
        border-color: rgba(0, 107, 182, 0.12) !important;
    }
    .mat-card {
	    margin: 1rem !important;
    }

    .sidebar-panel.mat-sidenav .navigation-hold,
    .mat-tab-header,
    .message-item.open .message-head,
    .bg-white,
    .cal-month-view .cal-cell-row:hover,
    .chats-wrap .conversations-hold .single-conversation.sender .conversation-msg,
    .cal-day-view .cal-hour:nth-child(odd),
    &.collapsed-menu .sidebar-panel .sidebar-list-item.open .sub-menu,
    .breadcrumb-bar, .mat-card, .ngx-datatable .datatable-body {
        background: rgb(0, 107, 182) !important;
    }
    .ngx-datatable .datatable-footer {
        background: map-get($md-primary, 500) !important;
	color: #000000 !important;
    }
    .cal-month-view .cal-cell-row .cal-cell:hover, 
    .cal-month-view .cal-cell.cal-has-events.cal-open,
    .cal-week-view .cal-day-headers .cal-header:hover, 
    .cal-week-view .cal-day-headers .cal-drag-over,
    .cal-day-view .cal-hour-segment:hover, 
    .cal-day-view .cal-drag-over .cal-hour-segment, .mat-sidenav-container {
        background: #303030 !important;
    }
    .cal-month-view .cal-day-cell:not(:last-child),
    .cal-month-view .cal-days,
    .cal-week-view .cal-day-headers .cal-header:not(:last-child),
    .cal-week-view .cal-day-headers,
    .cal-month-view .cal-days .cal-cell-row,
    .cal-day-view .cal-hour:not(:last-child) .cal-hour-segment, 
    .cal-day-view .cal-hour:last-child :not(:last-child) .cal-hour-segment {
        border-color: #006BB6 !important;
    }
    .ngx-datatable.material .datatable-header {
        background-color: map-get($md-primary, 500) !important;
        color: #000000 !important;

    }
    /* Hopscotch Tour */ 
    div.hopscotch-bubble {
        border-color: $primary-dark;
    }
    /* up arrow  */
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
        border-bottom: 17px solid $primary-dark;
    }
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
        border-bottom: 17px solid map-get($md-primary, 500);
        top: -16px;
    }
    /* right arrow */
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
        border-left: 17px solid $primary-dark;
    }
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
        border-left: 17px solid map-get($md-primary, 500);
        left: -1px;
    }
    /* bottom arrow */
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
        border-top: 17px solid $primary-dark;
    }
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
        border-top: 17px solid map-get($md-primary, 500);
        top: -18px;
    }
    /* Left Arrow */
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
        border-right: 17px solid $primary-dark;
    }
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {
        left: 1px;
        border-right: 17px solid map-get($md-primary, 500);
    }
    .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) !important;
        color: black;
    }
    .mat-button {
        background-color: map-get($md-primary, 500) !important;
        color: black;
    }
    .mat-bg-warn {
        background-color: #f44336 !important;
        color: black;
    }
    .mat-color-accent {
        color: map-get($md-accent, 500) !important;
    }
    .mat-color-warn {
        color: #f44336 !important;
    }
   .mat-raised-button.mat-accent,  .mat-fab.mat-accent, .mat-mini-fab.mat-accent {
        background-color: map-get($md-primary, 500) !important;
    }
   .text-muted {
    color:  map-get($md-accent, 400) !important;
    }

    .dx-treelist-borders > .dx-treelist-headers,
    .dx-treelist-borders > .dx-treelist-rowsview,
    .dx-treelist-borders > .dx-treelist-total-footer {
    border-left: 1px solid #4d4d4d;
    border-right: 1px solid #4d4d4d;
    }
    .dx-treelist-borders > .dx-treelist-rowsview,
    .dx-treelist-borders > .dx-treelist-total-footer {
    border-bottom: 1px solid #4d4d4d;
    }
    .dx-treelist-borders > .dx-treelist-pager,
    .dx-treelist-borders > .dx-treelist-headers {
    border-top: 1px solid #4d4d4d;
    }
    .dx-treelist-container {
    color: #dedede;
    background-color: #2a2a2a;
    }
    .dx-treelist-container .dx-header-filter {
    position: relative;
    color: #7c7c7c;
    font: 14px/1 DXIcons;
    }
    .dx-treelist-container .dx-header-filter-empty {
    color: rgba(124, 124, 124, 0.5);
    }
    .dx-treelist-container .dx-treelist-content-fixed .dx-treelist-table .dx-col-fixed {
    background-color: #2a2a2a;
    }
    .dx-treelist-container .dx-treelist-rowsview .dx-data-row td.dx-pointer-events-none,
    .dx-treelist-container .dx-treelist-rowsview .dx-freespace-row td.dx-pointer-events-none,
    .dx-treelist-container .dx-treelist-headers .dx-row td.dx-pointer-events-none {
    border-left: 2px solid #4d4d4d;
    border-right: 2px solid #4d4d4d;
    }
    .dx-treelist-container .dx-treelist-rowsview .dx-treelist-edit-form {
    background-color: #2a2a2a;
    }
    .dx-treelist-container .dx-treelist-filter-row .dx-filter-range-content {
    color: #dedede;
    }
    .dx-treelist-container .dx-error-row td {
    color: #2a2a2a;
    padding: 0;
    }
    .dx-treelist-container .dx-error-row .dx-error-message {
    background-color: #934340;
    white-space: normal;
    word-wrap: break-word;
    }
    .dx-treelist-column-chooser {
    color: #dedede;
    font-weight: normal;
    font-size: 14px;
    font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
    line-height: 1.35715;
    }
    .dx-treelist-edit-popup .dx-error-message {
    background-color: #934340;
    white-space: normal;
    word-wrap: break-word;
    color: #2a2a2a;
    margin-bottom: 20px;
    }
    .dx-rtl .dx-treelist-container .dx-treelist-rowsview .dx-data-row td.dx-pointer-events-none,
    .dx-rtl .dx-treelist-container .dx-treelist-rowsview .dx-freespace-row td.dx-pointer-events-none,
    .dx-rtl .dx-treelist-container .dx-treelist-headers .dx-row td.dx-pointer-events-none {
    border-left: 2px solid #4d4d4d;
    }



.mat-dialog-title {
    .warning-icon {
      color: #ffc107;
      position: relative;
      top: 8px;
      font-size: 35px;
      margin-right: 10px;
    }
  }
  
  .mat-dialog-content {
    max-width: 600px;
  
  
    .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: black;
        color: white;
        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: black;
          color: white;
          border: 1px solid #ddd;
          min-height: 100px;
          padding: 1rem;
          width: calc( 100% - 2rem );
        }
    }
  }
  

    
}
