body{
  height:100%;
}
// Global scrollbar
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  z-index: 50000;
}
::-webkit-scrollbar:hover {
  width : 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
  width: 10px !important;
  height : 10px !important;
}

/* Media  */

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}


/* 0. Color Array */
$lightColorArr :(
    eagna-primary:#10069f,
    eagna-cobalt: #271bcb,
    eagna-secondary:#006dff,
    eagna-accent:#4f98ff,
    eagna-green:#819c00,
    eagna-light-green:#c4db3e,
    eagna-light-yellow:#ffffcc,
    eagna-turquoise:#007588,
    eagna-light-turquoise:#00bfbd,
    eagna-orange:#d83f11,
    eagna-light-orange:#ff7140,
    eagna-magenta:#e21d60,
    eagna-light-magenta:#fa4692,
    eagna-red:#ff0000,
    eagna-light-red:#ff6347,
    eagna-violet:#8c2ace,
    eagna-light-violet:#c15eff,
    eagna-light-grey:#f5f5f585,
    eagna-grey:#efeff4,
    eagna-grey2:#c8c7cc,
    eagna-grey3:#8a8a8f,
    eagna-grey4:#4d5156,
    eagna-yellow:#ffc914,
    eagna-white:#ffffff,
    eagna-black:#000000,
    warning: #ffc914,
    danger: #9f0000,
    danger-light: #fcadad,
    info:  #333333,
    success:  #006dff,
    good: #034f00f1,
    true: #819c00,
    false: #8a8a8f,
    unset: unset
);

$darkColorArr :(
    eagna-primary:#4f98ff,
    eagna-cobalt: #006dff,
    eagna-secondary:#4f98ff,
    eagna-accent:#4f98ff,
    eagna-green:#c4db3e,
    eagna-light-green:#c4db3e,
    eagna-turquoise:#c4db3e,
    eagna-light-turquoise:#c4db3e,
    eagna-light-yellow:#ffff00,
    eagna-orange:#d83f11,
    eagna-light-orange:#ff7140,
    eagna-magenta:#e21d60,
    eagna-light-magenta:#fa4692,
    eagna-red: #ff0000,
    //eagna-red: #ff6a00,
    eagna-light-red:#ff6347,
    eagna-violet:#8c2ace,
    eagna-light-violet:#c15eff,
    eagna-light-grey:#f5f5f585,
    eagna-grey:#0c0c0c,
    eagna-grey2:#5f5f5f,
    eagna-grey3:#ffffff,
    eagna-grey4:#ffffff,
    eagna-yellow:#ffc914,
    eagna-white: #424242,
    eagna-black: #ffffff,
    warning: #ffc914,
    danger: #ff0151,
    danger-light: #fcadad,
    info: #f5f5f5,
    success: #006dff,
    good: #61f95b,
    true:#c4db3e,
    false:#ffffff,
    unset: unset
);

.bg-transparent {
  background:transparent !important;
}

@each $ds, $ext in $lightColorArr {
  .font-#{$ds} {
    color: #{$ext} !important;
  }
  .bg-#{$ds} {
    background-color: #{$ext} !important;
    &.translucent{
      background-color: #{$ext}21 !important;
    }
  }
  .bg-#{$ds}.white{
    background-color: #{$ext} !important;
    color: white !important;
  }
  .bg-#{$ds}.black{
    background-color: #{$ext} !important;
    color: #888 !important;
  }
  .b-#{$ds} {
    border-color: #{$ext} !important;
  }
  .badge-#{$ds} {
    background-color: #{$ext} !important;
    color:white !important;
  }
}

@each $ds, $ext in $darkColorArr {
  .dark .font-#{$ds} {
    color: #{$ext} !important;
  }
  .dark .bg-#{$ds} {
    background-color: #{$ext} !important;
  }
  .dark .bg-#{$ds}.white{
    background-color: #{$ext} !important;
    color: white !important;
  }
  .dark .bg-#{$ds}.black{
    background-color: #{$ext} !important;
    color: #888 !important;
  }
  .dark .b-#{$ds} {
    border-color: #{$ext} !important;
  }
  .badge-#{$ds} {
    background-color: #{$ext} !important;
    color:white !important;
  }
}

.font-black{
  color:#000 !important;
}
/* 1. Typography, Alignment, Others*/

/* a. Font Weight & Styles */
@each $prop in (normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit, initial, unset) {
  .fw-#{$prop} {
    font-weight: #{$prop} !important;
  }
}

@each $prop in (9996, 9997, 9998, 9999 inherit, initial, unset) {
  .zi-#{$prop} {
    z-index: #{$prop} !important;
  }
}

@each $prop in (normal,italic,oblique,initial,inherit) {
  .font-style-#{$prop} {
    font-style: #{$prop} !important;
  }
}

@each $prop in (ultra-condensed,extra-condensed,condensed,semi-condensed,normal,semi-expanded,expanded,extra-expanded,ultra-expanded,initial,inherit) {
  .font-stretch-#{$prop} {
    font-stretch: #{$prop} !important;
  }
}

.bold {
  font-weight: bold !important;
}
/* b. Font-Sizes & Line-Heights */

@for $i from 1 through 64 {
    .fs-#{$i} {
      font-size: #{$i}px !important;
    }
    .lh-#{$i} {
      line-height: #{$i}px !important;
    }
}

/* c. Text-Align & Float */
@each $prop in (top, right, bottom, left, center, none, unset) {
    .text-#{$prop} {
      text-align: #{$prop} !important;
    }

    .pull-#{$prop}{
      float: #{$prop} !important;
    }
}

.text-justify-word{
  text-align: justify !important;
  text-justify: inter-word !important;
}
.text-justify-char{
  text-align: justify !important;
  text-justify: inter-character !important;
}

/* d. Text Indent, Decorators, trim */
@each $prop in (overline, line-through, underline, none, blink, dashed, dotted, double, inherit, initial, revert, solid, unset, wavy) {
  .text-decoration-#{$prop} {
    text-decoration: #{$prop} !important;
  }
}
@each $prop in (none,capitalize,uppercase,lowercase,initial,inherit) {
  .text-#{$prop} {
    text-transform: #{$prop} !important;
  }
}

@for $i from 0 through 100 {
  .text-indent-#{$i} {
    text-indent: #{$i}px !important;
  }
  .text-indent-#{$i}-em {
    text-indent: #{$i}em !important;
  }
}


.trim-string{
  width: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.trim-string-no-width{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* e. Cursor */
@each $prop in (pointer, crosshair, default, help, move, pointer, progress, text, wait, alias, not-allowed, all-scroll, grab, grabbing) {
  .cursor-#{$prop} {
    cursor: #{$prop} !important;
  }
}
.grabbable {
  cursor: move !important; /* fallback if grab cursor is unsupported */
  cursor: grab !important;
  cursor: -moz-grab !important;
  cursor: -webkit-grab !important;
}

/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
  cursor: grabbing !important;
  cursor: -moz-grabbing !important;
  cursor: -webkit-grabbing !important;
}
/* f. Letter Spacing */
@for $i from 1 through 64 {
  .ls-#{$i} {
    letter-spacing: #{$i}px !important;
  }
  .ls-#{$i}-em {
    letter-spacing: #{$i}em !important;
  }
}

/* 2. Setting Margins, Padding, Border, position, height
    e.g m-l-4 :
        m-4
        p-x-4
*/
.m-l-1{
  margin-left:1px;
}
.m-t-1{
  margin-top:1px;
}
.m-r-1{
  margin-right:1px;
}
.m-b-1{
  margin-bottom:1px;
}
@each $prop, $abbrev in (margin: m, padding: p) {

  @for $index from 0 through 64 {
    $size: $index * 4;
    $length: #{$size}px;

    .#{$abbrev}-#{$size} {
      #{$prop}: $length !important;
    }

    .#{$abbrev}-x-#{$size} {
      #{$prop}-right: $length !important;
      #{$prop}-left: $length !important;
    }

    .#{$abbrev}-y-#{$size} {
      #{$prop}-top: $length !important;
      #{$prop}-bottom: $length !important;
    }

    .#{$abbrev}-t-#{$size} {
      #{$prop}-top: $length !important;
    }

    .#{$abbrev}-r-#{$size} {
      #{$prop}-right: $length !important;
    }

    .#{$abbrev}-b-#{$size} {
      #{$prop}-bottom: $length !important;
    }

    .#{$abbrev}-l-#{$size} {
      #{$prop}-left: $length !important;
    }
  }
}


/* b. Border, Border-Radius */
@each $prop, $abbrev in (border: b) {

  @for $index from 0 through 64 {
    $size: $index * 1;
    $length: #{$size}px;

    .#{$abbrev}-#{$size} {
      #{$prop}-width: $length !important;
      #{$prop}-style: solid !important;
    }

    .#{$abbrev}-x-#{$size} {
      #{$prop}-right-width: $length !important;
      #{$prop}-right-style: solid !important;
      #{$prop}-left-width: $length !important;
      #{$prop}-left-style: solid !important;
    }

    .#{$abbrev}-y-#{$size} {
      #{$prop}-top-width: $length !important;
      #{$prop}-top-style: solid !important;
      #{$prop}-bottom-width: $length !important;
      #{$prop}-bottom-style: solid !important;
    }

    .#{$abbrev}-t-#{$size} {
      #{$prop}-top-width: $length !important;
      #{$prop}-top-style: solid !important;
    }

    .#{$abbrev}-r-#{$size} {
      #{$prop}-right-width: $length !important;
      #{$prop}-right-style: solid !important;
    }

    .#{$abbrev}-b-#{$size} {
      #{$prop}-bottom-width: $length !important;
      #{$prop}-bottom-style: solid !important;
    }

    .#{$abbrev}-l-#{$size} {
      #{$prop}-left-width: $length !important;
      #{$prop}-left-style: solid !important;
    }
  }
}

@for $index from 0 through 100 {
  $size: $index * 1;
  $length: #{$size}px;

  .border-radius-#{$size} {
    border-radius: $length !important;
  }
}
@for $index from 0 through 10 {
  $size: $index * 0.1;

  .opacity-#{$index} {
    opacity:  $size !important;
  }
}
@for $index from 0 through 20 {
  $size: $index * 5%;

  .flex-b-#{$index*5} {
    flex-basis:  $size !important;
  }
}
@for $i from 0 through 20 {
  $i-p: 5 * $i;
  $size-p: 5% * $i;
  .border-radius-#{$i-p}-p {
    border-radius: $size-p !important;
  }
}

@each $prop, $abbrev in (border: b) {

  @each $design in (dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden) {
    $size: 1;
    $length: #{$size}px;

    .#{$abbrev}-#{$design} {
      #{$prop}-style: $design !important;
    }

    .#{$abbrev}-x-#{$design} {
      #{$prop}-right-style: $design !important;
      #{$prop}-left-style: $design !important;
    }

    .#{$abbrev}-y-#{$design} {
      #{$prop}-top-style: $design !important;
      #{$prop}-bottom-style: $design !important;
    }

    .#{$abbrev}-t-#{$design} {
      #{$prop}-top-style: $design !important;
    }

    .#{$abbrev}-r-#{$design} {
      #{$prop}-right-style: $design !important;
    }

    .#{$abbrev}-b-#{$design} {
      #{$prop}-bottom-style: $design !important;
    }

    .#{$abbrev}-l-#{$design} {
      #{$prop}-left-style: $design !important;
    }
  }
}

/* c. Positon */
@each $prop in (relative, absolute, static) {

  .position-#{$prop} {
    position: #{$prop};
  }

}


/* d. Height & Width in percentages */

@each $prop, $abbrev in (height: h, width: w,) {
  @for $index from 0 through 180 {
    $size: $index * 4;
    $length: #{$size}px;

    .#{$abbrev}-#{$size} {
      #{$prop}: $length !important;
      min-#{$prop}: $length !important;
      max-#{$prop}: $length !important;
    }
  }

  // Percentage
  @for $i from 0 through 100 {
    $i-p: 1 * $i;
    $size-p: 1% * $i;

    .#{$abbrev}-#{$i-p}-p {
      #{$prop}: $size-p !important;
    }
  }
  // vw & vh
  @for $i from 0 through 100 {
    $i-p: 1 * $i;
    $length: #{$i-p}v#{$abbrev};
    .#{$abbrev}-#{$i-p}-v {
      #{$prop}: $length !important;
      max-#{$prop}: $length !important;
      min-#{$prop}: $length !important;
    }
  }
}


@for $index from 0 through 180 {
    $size: $index * 4;
    $length: #{$size}px;

    .wh-#{$size} {
      height: $length !important;
      width: $length !important;
      min-height: $length !important;
      max-height: $length !important;
      min-width: $length !important;
      max-width: $length !important;
    }
}

  // Percentage
  @for $i from 0 through 100 {
    $i-p: 1 * $i;
    $size-p: 1% * $i;

    .wh-#{$i-p}-p {
      height: $size-p !important;
      width: $size-p !important;
      min-height: $size-p !important;
      max-height: $size-p !important;
      min-width: $size-p !important;
      max-width: $size-p !important;
    }
  }
  //vw & vh
  @for $i from 0 through 100 {
    $i-p: 1 * $i;

    .wh-#{$i-p}-v {
      min-height: #{$i-p}vh !important;
      min-width: #{$i-p}vh !important;
      max-height: #{$i-p}vw !important;
      max-width: #{$i-p}vw !important;
      height: #{$i-p}vh !important;
      width: #{$i-p}vw !important;
    }
  }


/* e. Full Width & Height */
.scroll-y{
  overflow-y:scroll;
}
.no-scroll-y{
  overflow-y:hidden;
}
.scroll-x{
  overflow-x:scroll;
}
.no-scroll-x{
  overflow-x:hidden;
}
.full-width{
  width: 100% !important;
}
.full-height{
  height: 100% !important;
}
.fill-height{
  height: -webkit-fill-available;
}
.mat-tab-group.mat-tab-full-height .mat-tab-body-wrapper {
  flex: 1 1 100%;
}
.full-screen{
  width: 100% !important;
  height: 100% !important;
}

/* 3. Accessory Classes */

/* a. Loading Engine Fan*/

.loaderClass{
  -webkit-animation:spin 9s linear infinite;
  -moz-animation:spin 9s linear infinite;
  animation:spin 9s linear infinite;
  transform-origin: 50% 50% !important;
  display: inline-block !important;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

.no-text-decorator{
  text-decoration: none;
}

.linear-div{
  display: inline-block;
}
.inline{
  display: inline-block;
}
.block{
  display: block;
}
.flex{
  display:flex !important;
}
.hidden{
  display:none !important;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-full-width{
  flex-basis:100%;
  height: fit-content;
}
.flex.full-width{
  flex-basis:100%;
  width:auto;
}

.flex-wrap{
  flex-wrap:wrap;
}
.flex-items-start{
  align-items:flex-start;
}
.flex-content-start{
  align-content:flex-start;
}
.wireframe{
  border: 1px solid #e1e1e1 !important;
}

@for $i from 0 through 12 {
    .flex-#{$i} {
    flex: $i !important;
  }
}

.flex-row{
  flex-direction:row !important;
}
.flex-column{
  flex-direction:column !important;
}
.flex-pull-right{
  justify-content: flex-end;
}
.center {
  display: flex !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

.v-center {
  display: flex  !important;
  align-items: center !important;
  justify-content: center  !important;
}
.h-center {
  display: flex  !important;
  text-align: center !important;
  align-items: center !important;
}

.no-border {
  border: unset !important;
}
.no-padding {
  padding: unset !important;
}
.no-margin {
  margin: unset !important;
}
.l-h-1{
  line-height: 1em !important;
}
@each $prop in (top, baseline, bottom, inherit, initial, middle, revert, sub, super, text-bottom, text-top, unset) {
  .valign-#{$prop} {
    vertical-align: #{$prop} !important;
  }
}

/* b. Change Colors of Picture */
/* taken from https://www.w3schools.com/css/css3_images.asp   under the section Image Filters */
.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(0px 1px 2px 0px rgba(32,33,36,0.28));}

/* 4. AG-Grid Classes */

/* a.  AG-GRID Custom Component */
/* RowDrag(for Modals)*/
.ag-dnd-ghost.ag-unselectable.ag-theme-balham {
  z-index:10000;
}
.ag-cell {
  .ag-cell-wrapper {
    padding-right: 0px;
    padding-left: 0px;
    height: inherit;
    width: 100%;
    .ag-cell-value {
      height: 100%;
      width: inherit;
      user-select: none !important;
    }
  }
}
.ag-group-value{
  width:100%;
}
.unstroke-grid-cell{
  div{
    span{
      text-decoration: none !important;
    }
  }
}

/* b. Slim Buttons for Grid */
.btn.mat-menu-item{
  padding-left:16px !important;
}
.btn.btn-group{
  height:36px !important;
}
.btn-split{
  :first-child{
    border-radius: 4px 0px 0px 4px;
  }
  :last-child{
    width: 25px !important;
    min-width: 25px !important;
    padding: 0px !important;
    font-size: 12px !important;
    border-radius: 0px 4px 4px 0px;
    margin-left:0px !important;
  }
}
.btn.btn-primary{
  background-color: #10069f !important;
  border:none !important;
  color:white !important;
  min-width:100px;
  padding: 0 10px;

  .mat-icon{
    color:white !important;
    width:20px !important;
    height:20px !important;
    line-height:20px !important;
  }
}
.btn.btn-primary:hover{
  border:none !important;
  background-color: #10069fbb !important;
}
.dark .btn-primary{
  background-color:#5851bc;
}
.dark .btn-primary:hover{
    border:none !important;
    background-color: #5851bcbb !important;

}
.btn.btn-success{
  background-color: #006dff !important;
  border:none !important;
  color:white !important;
  min-width:100px;
  padding: 0 10px;

  .mat-icon{
    color:white !important;
    width:20px !important;
    height:20px !important;
    line-height:20px !important;
  }

}
.btn.btn-success:hover{
  border:none !important;
  background-color: #006dffbb !important;
}
.btn.btn-warning{
  background-color: #ffc914 !important;
  border:none !important;
  min-width:100px;
  padding: 0 10px;

  .mat-icon{
    width:20px !important;
    height:20px !important;
    line-height:20px !important;
  }

}
.btn.btn-warning:hover{
  background-color: #ffc914bb !important;
  border:none !important;
}
.btn.btn-danger{
  background-color: #9f0000 !important;
  border:none !important;
  color:white !important;
  min-width:100px;
  padding: 0 10px;
  .mat-icon{
    color:white !important;
    width:20px !important;
    height:20px !important;
    line-height:20px !important;
  }
}
.btn.btn-danger:hover{
  background-color: #9f0000bb !important;
  border:none !important;
}
.btn.btn-good{
  background-color: #034f00f1 !important;
  border:none !important;
  color:white !important;
  min-width:100px;
  padding: 0 10px;
  .mat-icon{
    color:white !important;
    width:20px !important;
    height:20px !important;
    line-height:20px !important;
  }
}
.btn.btn-good:hover{
  background-color: #034f0055 !important;
  border:none !important;
}
.dark .btn.btn-good{
  background-color:#61f95b !important;
}
.btn.btn-secondary{
  background-color:#f0f0f0 !important;
  border:none !important;
  min-width:100px;
  padding: 0 10px;

  .mat-icon{
    width:20px !important;
    height:20px !important;
    line-height:20px !important;
  }
}

.btn.btn-secondary:hover{
  background-color:#f0f0f0bb !important;
  border:none !important;
}
.dark .btn.btn-secondary{
  background-color:#525252 !important;
  border:none !important;
}
.dark .btn.btn-secondary:hover{
  background-color:#525252bb !important;
  border:none !important;
}
.btn.btn-info{
  background-color: #333 !important;
  border:none !important;
  color:white !important;
  min-width:100px;
  padding: 0 10px;
  .mat-icon{
    color:white !important;
    width:20px !important;
    height:20px !important;
    line-height:20px !important;
  }

}
.btn.btn-info:hover{
  background-color: #333333bb !important;
  border:none !important;
}
.prevent-click{
  cursor:not-allowed;
  pointer-events:none;
}
.prevent-click:not(.is-marked){
  color:rgba(0,0,0,0.27) !important;
}

.btn,.btn.mat-button,.btn.mat-raised-button,.btn.mat-flat-button{
  // border:none !important;
  border: unset;
  // border-right: 1px solid #c0c0c0;
  color: #626262;
  background-color: #fff;
  text-shadow: none;
  font-family:"Eagna" !important;
  box-shadow: none;
  font-size:13px !important;
  padding: 0 5px !important;
  line-height: 3em;
  &:not(:first-child){
    margin-left: 4px;
  }

  &:disabled{
    background-color: #f0f0f0 !important;
    color:rgba(0,0,0,0.27) !important;
    border:none !important;

    .mat-icon{
      color:rgba(0,0,0,0.27) !important;
    }

  }
  &:disabled:hover{
    background-color: #f0f0f0 !important;
    border:none !important;
  }
}

.dark .btn,.btn.mat-button,.dark .btn.mat-raised-button,.dark .btn.mat-flat-button{
  &:disabled{
    background-color: #757575 !important;
    color:rgb(255 ,255, 255, 40%) !important;
    border:none !important;

    .mat-icon{
      color:rgba(255 ,255 ,255, 40%) !important;
    }

  }
  &:disabled:hover{
    background-color: #757575 !important;
    border:none !important;
  }
}
.btn:hover{
  background-color: #fafafa !important;
}
.dark .btn:hover{
  background-color: #2d3436 !important;
}
.dark .btn-border:hover{
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0) !important;
  -webkit-box-shadow: 0px -0px 0px 1px rgba(0,0,0,0) !important;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0) !important;
  // border:1px solid rgba(0,0,0,0) !important;
}
.btn.btn-border{
  box-sizing: border-box;
  // border: 1px solid #c5c5c5 !important;
  box-shadow: 0px 0px 0px 1px #c5c5c5 !important;
  -webkit-box-shadow: 0px -0px 0px 1px #c5c5c5 !important;
  -moz-box-shadow: 0px 0px 0px 1px #c5c5c5 !important;
  &.mat-button-disabled{
    // border: 1px solid #c5c5c5 !important;
    box-shadow: 0px 0px 0px 1px #c5c5c5 !important;
    -webkit-box-shadow: 0px -0px 0px 1px #c5c5c5 !important;
    -moz-box-shadow: 0px 0px 0px 1px #c5c5c5 !important;
  }
}

.asGrid .btn.slim{
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 1px #c5c5c5 !important;
  -webkit-box-shadow: 0px -0px 0px 1px #c5c5c5 !important;
  -moz-box-shadow: 0px 0px 0px 1px #c5c5c5 !important;
  border-radius:0px !important;
}
.btn.slim{
  padding: 0 6px !important;
  min-width: unset !important;
  /* line-height: 20px !important; */
  font-size: 12px !important;
/*   height: 25px !important;
  max-height: 25px !important; */
  border-radius:2px !important;


  .mat-icon{
    margin-right: 2px !important;
    width:20px !important;
    height:20px !important;
    line-height:20px !important;
  }
}
.btn.btn-grid{
  height: 25px !important;
  max-height: 25px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  line-height: 12px !important;
  border-radius:2px !important;
  min-width:30px !important;
}
.btn.slim.slimmer{
  min-width:30px !important;
}
.btn-menu{
  border-radius:0px !important;
  margin-right:1px;
  height:36px !important;
  font-size: 13px !important;
}

/* Tree view(BOM Main) */
.color-bucket-progress.APPROVED{
  color:  #32a79c;
}

.color-bucket-progress.PROPOSED,
.color-bucket-progress.REVIEWED {
  color:rgba(255,255,255,0);
  font-size:1px;
}

.color-bucket-progress.PROPOSED::before,
.color-bucket-progress.REVIEWED::before {
  content:'WIP';
  color: #f8d053;
  font-weight:800;
  font-size:12px;
  margin-left: 3px;
}
.color-bucket-progress.FROZEN{
  color:rgba(255,255,255,0);
  font-size:1px;
}
.color-bucket-progress.FROZEN::before{
  content:'FROZEN';
  color:#48b0f7;
  font-weight:800;
  font-size:12px;
  margin-left: 3px;
}
// .color-bucket-progress.FROZEN_GC_RELEASED{
//   color:rgba(255,255,255,0);
//   font-size:5px;
// }
// .color-bucket-progress.FROZEN_GC_RELEASED::after{
//   content:'FROZEN (GC RELEASED)';
//   color:#48b0f7;
//   font-weight:800;
//   font-size:12px;
// }
.color-bucket-progress.ENG_GC_CLOSED{
  color:rgba(255,255,255,0);
  font-size:5px;
}
.color-bucket-progress.ENG_GC_CLOSED::after{
  content:'ENG GC CLOSED';
  color:#10069f;
  font-weight:800;
  font-size:12px;
}
// .color-bucket-progress.GCPROPOSED{
//   color:rgba(255,255,255,0);
//   font-size:5px;
// }
.color-bucket-progress.GCPROPOSED::after,
.color-bucket-progress.GCREVIEWED::after,
.color-bucket-progress.GCUNAPPLIED::after{
    content:' (GC RELEASED)';
    color:#48b0f7;
    font-weight:800;
    font-size:12px;
}
.color-bucket-progress.PRINTED::after{
    content:' (GC PRINTED)' !important;
    color: #0037ff !important;
    font-weight:800;
    font-size:12px;
}

.color-bucket-progress.GCAPPROVED::after{
    content:' (GC CLOSED)';
    color:#034f00f1;
    font-weight:800;
    font-size:12px;
}
.dark .color-bucket-progress.GCAPPROVED::after{
  content:' (GC CLOSED)';
  color:#32a79c;
  font-weight:800;
  font-size:12px;
}
// .color-bucket-progress.GC_CLOSED{
//   color:rgba(255,255,255,0);
//   font-size:5px;
// }
// .color-bucket-progress.GC_CLOSED::after{
//   content:'GATE CARD CLOSED';
//   color:#034f00f1;
//   font-weight:800;
//   font-size:12px;
// }
.dark .color-bucket-progress.REJECTED_REVIEW,
.dark .color-bucket-progress.REJECTED_APPROVAL {
  color:#ff0151 !important;
  font-weight:800;
  font-size:12px;
}
.color-bucket-progress.REJECTED_REVIEW,
.color-bucket-progress.REJECTED_APPROVAL {
  color:#9f0000 !important;
  font-weight:800;
  font-size:12px;
}
.color-bucket-progress.REJECTED_REVIEW::before,
.color-bucket-progress.REJECTED_APPROVAL::before {
  content: 'REJ';
  margin-left: 3px;
}
.color-bucket-progress.REJECTED_REVIEW.PROPOSED,
.color-bucket-progress.REJECTED_APPROVAL.PROPOSED,
.color-bucket-progress.REJECTED_REVIEW.REVIEWED,
.color-bucket-progress.REJECTED_APPROVAL.REVIEWED {
  color:rgba(255,255,255,0) !important;
  font-size:1px;
}
.color-bucket-progress.REJECTED_REVIEW.FROZEN,.color-bucket-progress.REJECTED_APPROVAL.FROZEN{ //Rejected & Frozen
  color:rgba(255,255,255,0) !important;
  font-size:1px;
}
.color-bucket-progress.v0:not(.WIP){
  display:none;
}
.color-eng-status{
  display:none;
}
.color-eng-status.FROZEN{
  display:inline;
  color:#48b0f7;
  font-weight:800;
  font-size:12px;
}
.color-eng-status.TESTED{
  display:inline;
  color:rgba(89, 139, 87,1);
  font-weight:800;
  font-size:12px;
}

/* c. Grid Row */

.grid-row-deleted .ag-cell-wrapper{
  text-decoration: line-through;
  color: #9f0000;
  span{
    text-decoration: line-through;
    color: #9f0000;
  }
}
.grid-row-deleted:not(.ag-row-selected) {
  background-color:  #9f00000c !important;
}
.grid-row-changed:not(.ag-row-selected){
  background-color:  #fdcb252c !important;
}
.grid-row-new:not(.ag-row-selected){
  background-color:  #e8f7dea1 !important;
}
.grid-row-frozen:not(.ag-row-selected){
  background-color:  #4f98ff33 !important;
}
.grid-row-wip:not(.ag-row-selected){
  background-color:  #ffc81424 !important;
}

.grid-row-help:not(.ag-row-selected) {
  background-color:  #9f00000c !important;
  color: #9f0000 !important;
}
.grid-row-success:not(.ag-row-selected) {
  background-color:  #034f001c !important;
}
.force-grid-row-success {
  background-color:  #034f001c !important;
}

.grid-row-invalid .ag-cell-wrapper{
  color : rgb(150, 150, 150);
  span{
    color : rgb(150, 150, 150);
  }
}
.grid-row-invalid:not(.ag-row-selected){
  background-color: #ebebeb !important;
}

.grid-row-diff-deleted {
  background-color:  #9f00000c !important;
}

.grid-row-diff-added {
  background-color:  #e8f7dea1 !important;
}

.grid-row-diff-match {
  background-color: white !important;
}

.dark .grid-row-new,.dark .grid-row-changed,
.dark .grid-row-deleted, .dark .grid-row-highlight,
.dark .grid-row-highlight-red{
  color:#777 !important;
  span{
    color:#777 !important;
  }
}
.grid-row-highlight{
  background-color: #aaff9f !important;
}

.grid-row-highlight-red{
  background-color: #ff9f9f !important;
}

.grid-fade-row-group .ag-row-group {
  opacity: 80%;
}
.grid-numeric-editor{
  border: 1px solid black !important;
  background-color:white;
  cursor:pointer  !important;
}
.dark .grid-numeric-editor{
  border: 1px solid white  !important;
  background-color:rgb(150,150,150);
  color:white  !important;
}

.border-thicker{
  border-width: 3px !important;
}

.ag-theme-balham .ag-icon-edit
{
    font-family: FontAwesome !important;
    /* FontAwesome uses font-weight bold */
    font-weight: bold !important;
}

.ag-theme-balham .ag-icon-edit::before
{
    //content: '\f040';
    content: '✎';
}


/* 5. Material Overider's */

/* a. Mat Icon */
.mat-icon {
  vertical-align: middle !important;
  /* width: 18px !important;
  height: 18px !important; */
}
.dark .mat-icon svg{
  filter: brightness(100)
          contrast(100)
          drop-shadow( 0px 0px 0px rgba(255, 255, 265, 1)) //This just adds contrast
          drop-shadow( 0px 0px 0px rgba(255, 255, 255, 1))
          drop-shadow( 0px 0px 0px rgba(255, 255, 255, 1))
}
/* b. Mat-Menu */
.mat-menu-item {
  line-height: 38px !important;
  height: 38px !important;
  font-size: 13px !important;
}

/* c. Mat-button */
.mat-button,
.mat-icon-button,
.mat-stroked-button,
.mat-flat-button {
  padding: 0 5px !important;
}
.mat-icon-button i, .mat-icon-button .mat-icon {
  line-height: 18px !important;
}

.mat-raised-button.compact-button {
  line-height: 20px !important;
  padding: 0 5px 0 5px !important;
  min-width: 0 !important;
  font-size: 12px;
  margin: 0 0 0 0px  !important;
}

/* d. Mat List Item */
.mat-list-base .mat-list-item,
.mat-list-base .mat-list-option {
    font-size: 14px !important;
}
.mat-list-base .mat-list-item .mat-list-item-content{
  padding: 0px !important;
}
.mat-list-base .mat-list-item{
  height: 24px !important;
}

/* e. Mat Option Item */
.mat-option {
  font-size: 13px !important;
  line-height: 36px !important;
  height: 36px !important;
}

/* f. Mat Hint & Error */
.mat-hint {
  line-height: 3.6em;
}

.eagna-input{
  .mat-hint {
    line-height: 1em !important;
  }
}
// .mat-error {
//   line-height: 3.6em;
// }
.mat-h2 b{
  padding-right: 5px !important;
}

/* g. Mat Dialog */
.mat-dialog-container>* {
  width:100% !important;
}
.mat-dialog-container {
  //ADD THESE STYLES ON YOUR OWN CLASSESS DONT TOUCH THE MAIN ONE PLEASE!!!!!!!
  /* overflow-y: hidden !important;
  padding: 18px !important;
  display:flex !important;
  height: inherit !important; */

  .mat-dialog-content {
    /* margin: 0px -18px;
    padding: 0 18px; */
  }
}


/* h. Mat Drawer */
.mat-drawer-content {
  z-index:2 !important;
  overflow-y: hidden;
  min-height: inherit;
}

.spacer{
  flex: 1 1 auto;
}

/* i. Mat Tab */
.mat-tab-label-active{
  opacity: 1 !important;
}

.mat-tab-slim .mat-tab-label, .mat-tab-slim .mat-tab-label-active{
  min-width: 0!important;
  padding: 3px!important;
  margin: 3px!important;
}
.mat-tab-slim.medium .mat-tab-label, .mat-tab-slim.medium .mat-tab-label-active{
  min-width: 0!important;
  padding: 3px!important;
  margin: 3px 15px !important;
}



/* i. Mat Form Field */
.mat-form-field {
  width : 100%;
}

/* j. Mat Form Highlighting */
.form-input-with-radius{
  padding: 3px !important;
  border-radius: 3px !important;
}
.form-input-with-radius.half {
  width: 50% !important
}

/* k. Mat-Tab-Group */
.mat-tab-group-flex {
  display: flex;
  z-index: 1001 !important; //Allow 'fullScreen' of inner grid to be on top of other grids outside mat-tab
  .mat-tab-body-wrapper {
    display: flex;
    flex: 1;
    .mat-tab-body {
      display: flex;
      flex: 1;
      .mat-tab-body-content {
        display: flex;
        flex: 1;
      }
    }
  }
}


.mat-dialog-content{
  max-height:unset !important;
}
.eagna-modal-overlay.cdk-overlay-pane{
  max-height:unset !important;
  top: 15px !important;
  position: absolute !important;
  width:100%;

}
.mat-dialog-container{
  .mat-drawer.mat-drawer-side{//Prevent UI Glitches on 'full-screen' of any inner grid
    z-index:1 !important;
  }
}
.eagna-flex-modal.cdk-overlay-pane{
  max-height:none !important;
  margin:auto;

  .mat-dialog-container>* {
    width:100% !important;
  }
  .mat-dialog-container {
    //These should only affect when 'panelClass':'eagna-flex-modal is passed to openDialog.
    //Required to allow eagna-modal classes to work.
    overflow-y: hidden !important;
    padding: 18px !important;
    display:flex !important;
    height: inherit !important;

    .mat-dialog-content {
       margin: 0px -18px;
      padding: 0 18px;
    }
  }
}
/* Allow dialog outer scrollbar to be clickable-draggable */

// THIS CODE IS COMMENTED BECAUSE IT MESSED UP THE OVER ALL DIALOG IT DID NOT ALLOW THE ON CLICK BACKROP TO CLOSE (fixed!)

.cdk-global-overlay-wrapper{
  overflow-y:scroll;
  pointer-events:visible !important;
  ::webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-thumb{
    pointer-events: visible !important;
  }

}


/* .mat-form-field-appearance-fill .mat-form-field-flex label.mat-form-field-label{
  transform: translateY(-0.50em) scale(0.9) !important;
}
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
  transform: translateY(-1.499999em) scale(0.9) !important;
}
.mat-form-field-appearance-legacy.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-appearance-legacy .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
  transform: translateY(-1.15em) scale(0.9) !important;
} */

.mat-form-field-subscript-wrapper{
  font-size:90% !important;
}
.mat-error{
  line-height: 1em !important;
}
.slim-form-fields {
  .mat-form-field-infix {
    padding: unset!important;
    min-height: 20px;
  }

  .mat-form-field-wrapper {
    padding-bottom: 5px!important;
  }
}

/* .mat-error{
  color: map-get($lightColorArr,'eagna-red') !important;
}
.mat-form-field.mat-form-field-invalid .mat-form-field-label {
  color: map-get($lightColorArr,'eagna-red') !important;
}
.mat-form-field.mat-form-field-invalid .mat-form-field-required-marker{
  color: map-get($lightColorArr,'eagna-red') !important;
}
.mat-form-field.mat-form-field-invalid .mat-form-field-ripple {
  background-color: map-get($lightColorArr,'eagna-red') !important;
}
.mat-form-field.mat-form-field-invalid .mat-select-arrow{
  color: map-get($lightColorArr,'eagna-red') !important;
}
.mat-form-field.mat-form-field-invalid .mat-form-field-outline-thick{
  color: map-get($lightColorArr,'eagna-red') !important;
}

.dark{
  .mat-error{
    color: map-get($darkColorArr,'eagna-red') !important;
  }
  .mat-form-field.mat-form-field-invalid .mat-form-field-label {
    color: map-get($darkColorArr,'eagna-red') !important;
  }
  .mat-form-field.mat-form-field-invalid .mat-form-field-required-marker{
    color: map-get($darkColorArr,'eagna-red') !important;
  }
  .mat-form-field.mat-form-field-invalid .mat-form-field-ripple {
    background-color: map-get($darkColorArr,'eagna-red') !important;
  }
  .mat-form-field.mat-form-field-invalid .mat-select-arrow{
    color: map-get($darkColorArr,'eagna-red') !important;
  }
  .mat-form-field.mat-form-field-invalid .mat-form-field-outline-thick{
    color: map-get($darkColorArr,'eagna-red') !important;
  }
} */

.fit-content{
  height: fit-content !important;
}
.text-wrap{
  white-space:  normal;
  word-break: break-word;
}
// -----------------------------------------------------------------------------------------------------
// @ NGX Pagination
// -----------------------------------------------------------------------------------------------------

.dark .ngx-pagination {
  background: #424242;
  color: white;
}
.dark .ngx-pagination a {
  color: white;
}
.dark .ngx-pagination .current {
  background: #006dff !important;
  color: #10069f !important;
}
.ngx-pagination .current {
  background: white !important;
  color: #006dff !important;
  font-weight: 500;
  box-sizing: border-box;
  border-bottom: 2px solid #006dff;
}
.block-last-page .ngx-pagination li:nth-last-child(2) {
  background: #424242 !important;
  pointer-events: none;
}
.ngx-pagination {
  font-family:"Eagna" !important;
}
.slim .ngx-pagination {
  font-size: 13px;
  line-height: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0;
  text-align: center;
}


/* Tasker Only */

.task-generic-class {
  .mat-dialog-container {
      padding: 0px 18px !important;
      min-height: 80vh !important;
      width: 800px !important;

      .mat-dialog-title{
          margin: 10px 8px !important;;
          line-height: 20px !important;
      }
      .mat-dialog-content{
          margin: 0px 8px !important;
          padding: 0px 8px !important;
      }
  }
}

.unumber-hover {
  //TODO: add parameter to be hovered text
  color: map-get($lightColorArr,'eagna-accent');
  font-weight: bold !important;
  font-style: italic !important;
  cursor: help !important;
}

.dark .unumber-hover {
  color: map-get($darkColorArr,'eagna-accent');
}

/* Modal Classes  */
.eagna-modal {
  font-family: "Eagna";
  display:flex;
  flex-direction:column;
  width:100% !important;
  height:100%;
}
.dark .eagna-modal-header .eagna-modal-header-title{
  color: map-get($darkColorArr,'eagna-primary');
  .second-row{
    color: map-get($darkColorArr,'eagna-primary');
  }
  .accent{
    color:white;
  }
}

.eagna-modal-header{
  display:flex;
  height: fit-content;
  .eagna-modal-header-title{
    font: 600 20px/32px 'Eagna Light Condensed';
    letter-spacing: normal;
    flex:1;
    line-height:1em;
    flex-direction: column;
    color:  map-get($lightColorArr,'eagna-primary');
    flex-basis: 100%;
    .second-row{
      margin-top:5px;
      line-height:1em;
      font: 600 16px/28px 'Eagna Light Condensed';
      letter-spacing: normal;
      margin: 0 0 16px;
      color:  map-get($lightColorArr,'eagna-grey3');
      margin-bottom:0px;
    }
    .accent{
      color:  map-get($lightColorArr,'eagna-accent');
    }

  }


}
.eagna-modal-content{
  flex:1;
  display:flex;
  flex-direction:row;
  height:100%;
  flex-wrap:wrap;
}
.eagna-modal-footer{
  padding-top:4px;
  display:flex;
  margin-top: auto;
}
.eagna-modal-close{
  display:flex;
  justify-content: flex-end;
  .mat-icon-button{
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    padding: 0px !important;
    .mat-icon{
      line-height:24px !important;
    }
  }
}
.badge{
  text-shadow: none;
  font-family: wf_segoe-ui_light,wf_segoe-ui_normal,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 600;
  background-color: #e6e6e6;
  font-size: 11px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 4px;
  border-radius: 3px;
  color: #626262;
}
.badge-round{
  border-radius:50%;
}
.badge-slim{
  vertical-align: baseline;
  position: relative;
  top: -4px;
  font-size: smaller;
  padding: 0px 3px 1px 3px;
  border-radius: 3px;
}

.white-space-prewrap{
  white-space:pre-wrap;
}
.previous-comments{
  min-width: 20vw;
  max-width: 30vw;
}

.comments-list{
  max-height: 370px !important;
  overflow-y: auto;
}

.card-comments-list{
  &:not(:first-child){
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top: 0px;
  }
  &:not(:last-child){
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top: 0px;
  }
}

/* Setting classes for PRE tag */
pre {
  white-space: pre-wrap !important;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -pre-wrap !important;      /* Opera 4-6 */
  white-space: -o-pre-wrap !important;    /* Opera 7 */
  word-wrap: break-word !important;       /* Internet Explorer 5.5+ */
}
.stripe-blue{
  background-image: linear-gradient(45deg,#fcfcfc 25%,#86badb 25%,#86badb 50%,#fcfcfc 50%,#fcfcfc 75%,#86badb 75%,#86badb 100%);
  background-size: 28.28px 28.28px;
}
.stripe-purple{
  background-image: linear-gradient(45deg,#fcfcfc 25%,#8f00d2 25%,#8f00d2 50%,#fcfcfc 50%,#fcfcfc 75%,#8f00d2 75%,#8f00d2 100%);
  background-size: 28.28px 28.28px;
}
.dark .stripe-purple{
  background-image: linear-gradient(45deg,#424242 25%,#8f00d2 25%,#8f00d2 50%,#424242 50%,#424242 75%,#8f00d2 75%,#8f00d2 100%);
  background-size: 28.28px 28.28px;
}
.dark .stripe-blue{
  background-image: linear-gradient(45deg,#424242 25%,#86badb 25%,#86badb 50%,#424242 50%,#424242 75%,#86badb 75%,#86badb 100%);
  background-size: 28.28px 28.28px;
}

.stripe-green{
  background-image: linear-gradient(45deg,#fcfcfc 25%,#26d200 25%,#26d200 50%,#fcfcfc 50%,#fcfcfc 75%,#26d200 75%,#26d200 100%);
  background-size: 28.28px 28.28px;
}
.dark .stripe-green{
  background-image: linear-gradient(45deg,#424242 25%,#26d200 25%,#26d200 50%,#424242 50%,#424242 75%,#26d200 75%,#26d200 100%);
  background-size: 28.28px 28.28px;
}
.stripe-warn{
  background-image: linear-gradient(45deg,#fcfcfc 25%,#ff993e 25%,#ff993e 50%,#fcfcfc 50%,#fcfcfc 75%,#ff993e 75%,#ff993e 100%);
  background-size: 28.28px 28.28px;
}
.dark .stripe-warn{
  background-image: linear-gradient(45deg,#424242 25%,#ff993e 25%,#ff993e 50%,#424242 50%,#424242 75%,#ff993e 75%,#ff993e 100%);
  background-size: 28.28px 28.28px;
}
/*old classses*/

.force-bg-danger {
  background-color: #983838 !important;
}

.force-bg-white {
  background-color: #ffffff !important;
}

.force-bg-warning {
  background-color: #f8d053 !important;
}

.force-bg-success {
  background-color: #006666 !important;
}
.force-bg-success-dark {
  background-color: #006666 !important;
  color: white;
  button{
    color:white;
  }
}
.force-bg-success-lighter {
  background-color: #cff5f2 !important;
}
.bg-success-lighter{
  background-color: #cff5f2;
}

.force-bg-warning-lighter {
  background-color: #fff0c0 !important;
}

.force-bg-danger-lighter {
  background-color: #fddddd !important;
}

.force-bg-complete {
  background-color: #daeffd !important;
}
.bg-complete {
  background-color: #daeffd;
}

.force-bg-warning {
  background-color: #f8d053 !important;
}

.force-bg-complete-light {
  background-color: #6dc0f9 !important;
}
.force-bg-border{
  box-shadow: inset 0 0 0 2px #cacaca;
}

.dark {
  .force-bg-border{
    box-shadow: inset 0 0 0 2px #cacaca;
    color:white;
    button{
      color:white;
    }
  }
  .force-bg-warning-lighter{
    background-color:#a58932 !important;
    color: white;
    button{
      color:white;
    }
  }

  .force-bg-success-lighter {
    background-color: #007d74 !important;
  }
  .bg-success-lighter{
    background-color: #007d74;
    color: white;
    button{
      color:white;
    }
  }
  .force-bg-success-dark {
    background-color:#61f95b !important;
  }
  .force-bg-success {
    background-color: #61f95b !important;
  }
  .force-bg-complete {
    background-color: #0069af !important;
    color: white;
    button{
      color:white;
    }
  }
  .bg-complete {
    background-color: #0069af;
    color: white;
    button{
      color:white;
    }

  }

}

.bg-active {
  background-color: #bcfdde !important;
}
.border-danger{
  border-color: #983838 !important;
}
.border-warning{
  border-color: #f8d053 !important;
}
.border-blue{
  border-color: #48b0f7 !important;
}
.border-success{
  border-color: #32a79c !important;
}



table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
}
.exclamation_after.true::after{
  content:'\2757';
  color:red;
}

.eagnaCustomHoverTooltip{
  visibility: hidden;
  z-index: 1000;
  position: absolute;
  top: 15px;
  left: 15px;
  background: lightgray;
  padding: 4px;
  border: 1px solid lightslategray;
  max-width: 400px;
  overflow-y:scroll;
  max-height:300px;
  &.open{
    visibility: visible;
  }
}
.notif-wrap{
  white-space: pre-line !important;
}
.tooltip-wrap{
  white-space: pre-line;
  font-family: monospace !important;
  font-size: 12px;
  max-width: 500px;
  width: auto !important;
  min-width: 400px;
}
.badge-large .mat-badge-content{
  text-overflow: unset;
  width: fit-content !important;
  min-width:10px;
  padding: 0px 3px;
  border-radius: 8px;

}

/* ng diff match match */
.d2h-wrapper {
    text-align: left
}

.d2h-file-header {
    height: 35px;
    padding: 5px 10px;
    border-bottom: 1px solid #d8d8d8;
    background-color: #f7f7f7
}

.d2h-file-stats {
    display: flex;
    margin-left: auto;
    font-size: 14px
}

.d2h-lines-added {
    text-align: right;
    border: 1px solid #b4e2b4;
    border-radius: 5px 0 0 5px;
    color: #399839;
    padding: 2px;
    vertical-align: middle
}

.d2h-lines-deleted {
    text-align: left;
    border: 1px solid #e9aeae;
    border-radius: 0 5px 5px 0;
    color: #c33;
    padding: 2px;
    vertical-align: middle;
    margin-left: 1px
}

.d2h-file-name-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 15px
}

.d2h-file-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden
}

.d2h-file-wrapper {
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 1em
}

.d2h-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Menlo,Consolas,monospace;
    font-size: 13px
}

.d2h-files-diff {
    display: block;
    width: 100%;
    height: 100%
}

.d2h-file-diff {
    overflow-y: hidden
}

.d2h-file-side-diff {
    display: inline-block;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 50%;
    margin-right: -4px;
    margin-bottom: -8px
}

.d2h-code-line {
    padding: 0 8em
}

.d2h-code-line,.d2h-code-side-line {
    display: inline-block;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
}

.d2h-code-side-line {
    padding: 0 4.5em
}

.d2h-code-line-ctn {
    display: inline-block;
    background: 0 0;
    padding: 0;
    word-wrap: normal;
    white-space: pre;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    width: 100%;
    vertical-align: middle
}

.d2h-code-line del,.d2h-code-side-line del {
    background-color: #ffb6ba
}

.d2h-code-line del,.d2h-code-line ins,.d2h-code-side-line del,.d2h-code-side-line ins {
    display: inline-block;
    margin-top: -1px;
    text-decoration: none;
    border-radius: .2em;
    vertical-align: middle
}

.d2h-code-line ins,.d2h-code-side-line ins {
    background-color: #97f295;
    text-align: left
}

.d2h-code-line-prefix {
    display: inline;
    background: 0 0;
    padding: 0;
    word-wrap: normal;
    white-space: pre
}

.line-num1 {
    float: left
}

.line-num1,.line-num2 {
    box-sizing: border-box;
    width: 3.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 .5em
}

.line-num2 {
    float: right
}

.d2h-code-linenumber {
    box-sizing: border-box;
    width: 7.5em;
    position: absolute;
    display: inline-block;
    background-color: #fff;
    color: rgba(0,0,0,.3);
    text-align: right;
    border: solid #eee;
    border-width: 0 1px;
    cursor: pointer
}

.d2h-code-linenumber:after {
    content: "\200b"
}

.d2h-code-side-linenumber {
    position: absolute;
    display: inline-block;
    box-sizing: border-box;
    width: 4em;
    background-color: #fff;
    color: rgba(0,0,0,.3);
    text-align: right;
    border: solid #eee;
    border-width: 0 1px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 .5em
}

.d2h-code-side-linenumber:after {
    content: "\200b"
}

.d2h-code-side-emptyplaceholder,.d2h-emptyplaceholder {
    background-color: #f1f1f1;
    border-color: #e1e1e1
}

.d2h-code-line-prefix,.d2h-code-linenumber,.d2h-code-side-linenumber,.d2h-emptyplaceholder {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.d2h-code-linenumber,.d2h-code-side-linenumber {
    direction: rtl
}

.d2h-del {
    background-color: #fee8e9;
    border-color: #e9aeae
}

.d2h-ins {
    background-color: #dfd;
    border-color: #b4e2b4
}

.d2h-info {
    background-color: #f8fafd;
    color: rgba(0,0,0,.3);
    border-color: #d5e4f2
}

.d2h-file-diff .d2h-del.d2h-change {
    background-color: #fdf2d0
}

.d2h-file-diff .d2h-ins.d2h-change {
    background-color: #ded
}

.d2h-file-list-wrapper {
    margin-bottom: 10px
}

.d2h-file-list-wrapper a {
    text-decoration: none;
    color: #3572b0
}

.d2h-file-list-wrapper a:visited {
    color: #3572b0
}

.d2h-file-list-header {
    text-align: left
}

.d2h-file-list-title {
    font-weight: 700
}

.d2h-file-list-line {
    display: flex;
    text-align: left
}

.d2h-file-list {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0
}

.d2h-file-list>li {
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
    margin: 0
}

.d2h-file-list>li:last-child {
    border-bottom: none
}

.d2h-file-switch {
    display: none;
    font-size: 10px;
    cursor: pointer
}

.d2h-icon {
    vertical-align: middle;
    margin-right: 10px;
    fill: currentColor
}

.d2h-deleted {
    color: #c33
}

.d2h-added {
    color: #399839
}

.d2h-changed {
    color: #d0b44c
}

.d2h-moved {
    color: #3572b0
}

.d2h-tag {
    display: flex;
    font-size: 10px;
    margin-left: 5px;
    padding: 0 2px;
    background-color: #fff
}

.d2h-deleted-tag {
    border: 1px solid #c33
}

.d2h-added-tag {
    border: 1px solid #399839
}

.d2h-changed-tag {
    border: 1px solid #d0b44c
}

.d2h-moved-tag {
    border: 1px solid #3572b0
}

@keyframes button-spinner {
  to {transform: rotate(360deg);}
}

.button-spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  /* border-top-color: #000000; */
  border-top-color: map-get($lightColorArr,'eagna-primary');
  animation: button-spinner .8s linear infinite;
}

.dark .button-spinner:before {
  border-top-color: map-get($darkColorArr,'eagna-primary');
}

.button-spinner.zero-top:before {
  top: unset !important;
}

.ag-cell-button-text{ //usually for circle with number
  display: inline-block;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: 500;
  background-color:  map-get($lightColorArr,'eagna-yellow'); /* override this by another class */
  color: map-get($lightColorArr,'eagna-white');
  /* margin-top : 6px; */
}

.dark .ag-cell-button-text{
  background-color:  map-get($darkColorArr,'eagna-yellow'); /* override this by another class */
  color: map-get($darkColorArr,'eagna-white');
}

.ag-cell-validation-error {
  background-color: /* map-get($lightColorArr,'eagna-light-red') */ #4f98ff38;
  .editable-icon{
    color: map-get($lightColorArr,'eagna-white') !important;
  }
}

.dark .ag-cell-validation-error {
  background-color: /* map-get($darkColorArr,'eagna-light-red') */ #4f98ff38;
  .editable-icon{
    color: map-get($darkColorArr,'eagna-white') !important;
  }
}

.numberCircle {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  padding: 3px;
  text-align: center;
  font-size: 10px;
  font-family: monospace;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.ng-resizable-handle{
  // background:red;
}
.ng-resizable-handle:hover{
  background:repeating-linear-gradient(0deg, #afafaf, #afafaf 10px, #ffffff 10px, #ffffff 20px );
}

// .ng-resizable-handle::after{
//   border: 3px solid black;
//   border-radius: 4px;
//   background: purple;
//   content: '➥';
//   font-size: 38px;
//   color: white;
//   z-index: 10009;
//   position: absolute;
//   vertical-align: middle;
//   right: 0px;
//   top: 300px;
//   overflow: visible;
//   visibility: hidden;
// }
// .ng-resizable-handle:hover:after{
//   visibility: visible;
// }
