/*** Fund screener ***/

.fund-screener-container {
    width: 100%;
    min-height: 600px;
    background: #ffffff;
    /*border: 1px solid #dee2e6;*/
    border-radius: 8px;
    /*padding: 20px;*/
    margin: 20px 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .fund-screener-container {
        /*padding: 10px;*/
        margin: 10px 0;
    }

}

/** OVERWRITES **/

.proarea ol:not(.fund-screener-container ol) , .proarea ul:not(.fund-screener-container ul), .proarea menu:not(.fund-screener-container menu){
  list-style-type: unset;
  margin-left: 20px;
}

.s-main{
    margin: 0;
    max-width: 1200px;
    padding-inline: calc(var(--spacing) * 3);
}


.s-footer{
  margin-top: 40px;
}


.fund-screener-container td{
  border-right: 0;
}

.fund-screener-container h2, .fund-screener-container h3{
  color: unset;
  font-weight: 600;
  font-size: 1rem;
}

.fund-screener-container h3{
  font-size: 1rem;
}

.fund-screener-container p{
  font-size: 1rem;
}

.mat-mdc-table .mat-mdc-header-cell{
  font-size: 1rem; 
}

.mat-mdc-table .mat-mdc-cell{
  font-size: 1rem;
}

.text-sm{
  font-size: 1rem;
}

.nav-overflow>*{
  font-size: 1rem;  
}

/*
@layer properties;
@layer theme,
base,
components,
utilities;
@layer theme {
    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-red-500: oklch(63.7% .237 25.331);
        --color-white: #fff;
        --spacing: .25rem;
        --text-xs: .625rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: 1.2rem;
        --text-sm--line-height: calc(1.25 / .875);
        --text-base: 1.2rem;
        --text-base--line-height: 1.5;
        --text-lg: 1rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --font-weight-normal: 400;
}
}        */



@layer base {

   *,
    :after,
    :before,
    ::backdrop,
    ::file-selector-button {
        box-sizing: initial;
        margin: initial;
        padding: initial;
        border: initial;
    }

  .fund-screener-container *, .cdk-overlay-container *,
  .fund-screener-container ::after, .cdk-overlay-container ::after,
  .fund-screener-container ::before, .cdk-overlay-container ::before,
  .fund-screener-container ::backdrop, .cdk-overlay-container ::backdrop,
  .fund-screener-container ::file-selector-button, .cdk-overlay-container ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }


  body {
        display: initial;
        min-height: initial;
        width: initial;
        min-width: initial;
        flex-direction: initial;
        gap: initial;
        padding-block: initial;
        font-size: initial;
        line-height: initial;
        color: initial;
        font-family: initial;
        font-size: 14px;
  }

  .fund-screener-container{
        display: flex !important;
        min-height: 100% !important;
        width: 100% !important;
        min-width: var(--app-min-width) !important;
        flex-direction: column !important;
        gap: calc(var(--spacing) * 6) !important;
        padding-block: calc(var(--spacing) * 6) !important;
        font-size: var(--text-base) !important;
        line-height: 1 !important;
        color: var(--color-primary) !important;
        font-family: Arial, sans-serif !important;
  }

  .cdk-overlay-container h2.filter-title{
    padding-bottom: 0px !important;
  }
   
  .btn-separator{
    align-items: center;
  }

  .mat-sort-header-arrow::after {
      mask: url(/fundcentres/allfunds/icons/sort-asc.svg) center/100% 100% no-repeat !important;
  }
  .mat-sort-header-arrow::before {
      mask: url(/fundcentres/allfunds/icons/sort.svg) center/100% 100% no-repeat !important;
  }
  .btn-back {
    --icon: url(/fundcentres/allfunds/icons/down.svg) !important;
  }
  .btn-close{
    --icon: url(/fundcentres/allfunds/icons/quit.svg) !important;
  }
  .icon-arrow-down {
    --icon: url(/fundcentres/allfunds/icons/back.svg) !important;
    transform: rotate(-90deg) !important;
  }
  .icon-arrow-left {
    --icon: url(/fundcentres/allfunds/icons/down.svg) !important;
    transform: rotate(90deg) !important;
  }
  .filter-sub-slide-button{
    --icon: url(/fundcentres/allfunds/icons/down.svg) !important;    
  }
  .icon-bookmark {
    --icon: url(/fundcentres/allfunds/icons/bookmark.svg) !important;
  }
  .icon-broom-wide {
    --icon: url(/fundcentres/allfunds/icons/broom-wide.svg) !important;
  }
  .icon-caret-down {
    --icon: url(/fundcentres/allfunds/icons/down.svg) !important;
  }
  .icon-case {
    --icon: url(/fundcentres/allfunds/icons/case.svg) !important;
  }
  .icon-close {
    --icon: url(/fundcentres/allfunds/icons/quit.svg) !important;
  }
  .icon-quit {
    --icon: url(/fundcentres/allfunds/icons/quit.svg) !important;
  }
  .icon-dots {
    --icon: url(/fundcentres/allfunds/icons/dots.svg) !important;
  }
  .icon-excel {
    --icon: url(/fundcentres/allfunds/icons/excel.svg) !important;
  }
  .icon-export {
    --icon: url(/fundcentres/allfunds/icons/export.svg) !important;
  }
  .icon-eye {
    --icon: url(/fundcentres/allfunds/icons/eye.svg) !important;
  }
  .icon-filter {
    --icon: url(/fundcentres/allfunds/icons/filter.svg) !important;
  }
  .icon-pdf {
    --icon: url(/fundcentres/allfunds/icons/pdf.svg) !important;
  }
  .icon-search {
    --icon: url(/fundcentres/allfunds/icons/search.svg) !important;
  }
  .icon-share {
    --icon: url(/fundcentres/allfunds/icons/share.svg) !important;
  }
  .icon-table {
    --icon: url(/fundcentres/allfunds/icons/table.svg) !important;
  }
  .icon-download {
    --icon: url(/fundcentres/allfunds/icons/download.svg) !important;
  }
  .icon-pencil {
    --icon: url(/fundcentres/allfunds/icons/edit.svg) !important;
  }
  .icon-trash{
    --icon: url(/fundcentres/allfunds/icons/trash.svg) !important;    
  }  
  .icon-percent{
    --icon: url(/fundcentres/allfunds/icons/percent.svg) !important;    
  }   
  .icon-alert{
    --icon: url(/fundcentres/allfunds/icons/alert.svg) !important;    
  }   
  .rating-7-bars {
    --image: url(/fundcentres/allfunds/images/ratio-7-bars.svg) !important;
  }
  .rating-crown {
    --rating-icon: url(/fundcentres/allfunds/icons/fi-crown.svg) !important;
  }

}