@import '../../styles/app';

.dashboard-page {

  .visits-icon {
    font-size: 30px;
  }

  .sidesWrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .analyticsSide {
    width: 80%;

    &:last-child {
      width: 20%;
      padding-left: $grid-gutter-width;
    }

    @media (max-width: 1620px) {
      width: 100% !important;

      &:last-child {
        padding-left: 0;
      }
    }

    @media (min-width: 1200px) and (max-width: 1440px) {
      .lastSideElement {
        max-width: 50%;
      }
    }

    @media (min-width: 1440px) and (max-width: 1620px) {
      .lastSideElement {
        max-width: calc(100% / 3);
      }
    }
  }

  .visitElement {
    max-width: 50%;
    width: 33%;
    min-width: 65px;
  }

  .sparklineWrapper {
    display: flex;
    justify-content: center;
    min-width: calc(100% - 150px);
  }

  .notifications {
    .la {
      font-size: $font-size-lg;
      margin-top: 0.15rem;
    }

    p {
      margin-bottom: 1.4rem;
    }
  }

  .vc-container {
    background: transparent;
  }
  
  .abc-checkbox {
    label::before {
      background-color: transparent;
      border: 1px solid #c1ccd3;
    }
  }

  .see-all-btn {
    text-decoration: none;
    background-color: transparent;

    &:hover {
      background-color: rgba($white, 0.1);
      text-decoration: none;
    }
  }

  .table.requests-table {
    --bs-table-bg: transparent;
    --bs-table-color: #{$text-color};
    --bs-table-border-color: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-color: #{$text-color};
    border-color: transparent;

    > thead > tr > th {
      background-color: transparent;
      border-bottom: none;
      font-weight: 400;
      color: $text-muted;
    }

    > tbody > tr {
      > td {
        background-color: transparent;
        border: none;
        color: $text-color;
        font-weight: 600;
      }

      &:hover > td {
        background-color: rgba($white, 0.03);
      }
    }
  }
}
