:root.light {
  --color-bg-menuitem-selected: hsl(234 19% 87% / 1);
  --color-bg-menu-container: hsl(234 19% 92% / 1);
}
:root.dark {
  --color-bg-menuitem-selected: #343434;
  --color-bg-menu-container: var(--color-bg-table-drilled-level2);
}

#ui.v3 yon-insights {  
  .insights-table__table .mat-mdc-footer-row .mat-mdc-footer-cell {
    border-top: none;
    background-color: var(--color-bg-table-drilled-level1);
  }
  yon-scope-select,
  yon-account-segment-select {
    white-space: nowrap;
    button {
      .mat-mdc-icon-button:hover,
      .mat-mdc-button-persistent-ripple::before {
        scale: 1.4;
        margin-left: -2px;
        margin-right: 2px;
      }
    }
  }
  app-invoiced-usage .widget__data-container {
    overflow-y: hidden;
  }
  .full-page-scroll {
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    height: calc(100vh - 60px) !important;
    margin-top: 60px;
    
    gridster {
      background-color: var(--layout-bg-color);
      padding: var(--layout-grid-gap) !important;
      padding-bottom: 0 !important;
      height: auto !important;
      width: auto !important;
      padding-top: 0 !important;
      .k-chart-surface svg g text {
        fill: var(--color-mono-contrast-medium);
      }
      .k-chart-surface > svg > g > path {
        fill: transparent;
      }
      .k-chart-surface svg g[opacity='1'] {
        path[fill="#FFFFFF"] {
           fill: var(--color-inverted-contrast-high);
          fill-opacity: 0.8;
        }
        text[fill="#000"] {
          fill: var(--color-mono-contrast-max);
        }
      }
    }
    yon-button.insights__new-dashboard-btn {
      display: none !important;
    }
    .dashboard__header-container {
      margin: 0 var(--layout-grid-gap);
      padding: 15px var(--layout-card-padding);
      background-color: var(--layout-bg-color-card);
      background-image: var(--layout-bg-top-gradient);
      .card {
        margin-bottom: 0;
      }
      .card-block {
        padding-bottom: 0;
      }
      div.justify-start {
        flex-grow: 1;
        align-items: center;
        h4 {
          font-size: var(--font-top-header-size);
          font-weight: 700;
          color: var(--color-mono-contrast-max);
        }
      }
      div.justify-end {
        display: none;
      }
    }
    gridster-item.card-box-shadow {
      position: relative;
      box-shadow: none;
      transform: none !important;
      width: auto !important;
      height: 790px !important;
      margin-top: var(--layout-grid-gap);
      margin-bottom: 0 !important;
      margin-right: 0 !important;
      .widget-container {
        background-color: var(--layout-bg-color-card);
        border-radius: var(--layout-card-radius);
        padding: var(--layout-grid-gap);
        .widget-container__inner {
          h4 {
            font-weight: 500;
            font-size: 19px;
            padding-left: 10px;
            padding-right: 65px;
            color: var(--color-mono-contrast-max);
          }
        }
        .insights-table__bottom-menu {
          left: 25px;
          right: 15px;
          width: auto;
          yon-button {
            margin-right: 15px;
          }
        }
        .mat-mdc-table-sticky {
          background-color: var(--layout-bg-color-card);
        }
        tr:hover .mat-mdc-table-sticky,
        .insights-table__table .mat-mdc-footer-row .mat-mdc-footer-cell,
        .insights-table__table .mat-mdc-footer-row {
          background-color: var(--color-bg-table-row-selected);
        }
      }
    }

    gridster-item.card-box-shadow.widget-type__waterfall,
    gridster-item.card-box-shadow.customersnewandlostgraphcomponent,
    gridster-item.card-box-shadow.averagecustomermetricscomponent,
    gridster-item.card-box-shadow.churnbymonthcomponent,
    gridster-item.card-box-shadow.widget-type__movement:not(.widget-type__table) {
        height: 500px !important;
    }
    span.box-dashboard-categories,
    .dashboard__header-container,
    .widget-container {
      background-color: var(--layout-bg-color-card);
      border-radius: var(--layout-card-radius);
    }
  }
  yon-card.sidenav {
    display: block;
    left: 0;
    padding: 9px;
    position: fixed;
    top: 0;
    z-index: 3;
    background-color: var(--layout-bg-color);
    opacity: 0.9;
    height: 60px;
    right: 0;
    .mb-1 {
      margin-bottom: 0;
    }
    hr {
      display: none;
    }
    > div > .card-block {
      text-align: center;
      padding-bottom: 0;

      .card__header-row {
        display: none;
      }
      .mat-mdc-nav-list.mdc-list {
        display: inline-block;
        margin: 0 auto;
        border-radius: 24px;
        padding: 0 0;
        span.dashboard-category-box {
          border-radius: var(--layout-card-radius);
          border-radius: 0;
          padding: 0px;
          flex-grow: 0;
          opacity: 1;
          display: inline-block;
          vertical-align: top;
          background-color: var(--color-bg-menu-container);
          cursor: pointer;
            .dashboard-category-content {
              position: absolute;
              background-color: var(--color-bg-table-drilled-level3);
            }

          .mdc-list-item {
            padding: 0 8px;
          }
          .mdc-list-item:hover::before {
            border-radius: 0;
          }
          span.dashboard-category-header {
            padding: 7px;
            display: inline-block;
               h4 {
                 color: var(--color-mono-contrast-high);
                 padding: 0 10px;
                 border-radius: 40px;
                 margin: 0 0;
                 width: 122px;
                 font-size: 14px;
               }
              span.dashboard-category-header:hover h4 {
                 background-color: var(--color-inverted-contrast-high);          
               }
          }

          span.box-dashboards {
            display: none;
            mat-list-item {
              border-radius: 0;
            }

            .dashboard__menu-link-wrapper span div {
              padding: 5px 25px;
              border-radius: 17px;
              text-align: center;
              white-space: pre-wrap;
              text-align: left;
            }
            .dashboard__menu-link-wrapper.selected {
              background-color: var(--color-bg-menuitem-selected);
              span div {
                color: var(--color-mono-contrast-max);
              }
            }
          }
        }
        span.dashboard-category-box.category-selected span.dashboard-category-header h4 {
          background-color: var(--color-bg-menuitem-selected);
        }
        span.dashboard-category-box:first-child {
          border-top-left-radius: 28px;
          border-bottom-left-radius: 28px;
        }
        span.dashboard-category-box:last-child {
          border-top-right-radius: 28px;
          border-bottom-right-radius: 28px;
        }
        span.dashboard-category-box:hover span.box-dashboards {
            display: block;
        }
    }
  }
}
}