@import "../../variables.scss";

.DashboardPage {
  padding: $pad + 0;
  min-height: 100vh;
  background: url(/assets/banner-bg.png) no-repeat center top;
  display: flex;
  flex-direction: row;
  // @media (max-width: $xxl) {
  //   padding: $pad + 5;
  // }
  // @media (max-width: $md) {
  //   padding: 0;
  // }
  .DashboardCardOuter {
    width: 100%;
    // @media (max-width: $xxl) {
    //   padding: $pad + 5;
    // }
    .DashboardCard {
      border: solid 2px $blue;
      border-radius: $bdr-rds + 5;
      height: 100%;    
      background: $white;  
      .DashboardLeft {
        width: 250px;
        flex: 0 0 250px;
        border-right: solid 1px #e5e5e5;
        padding: $pad + 30 $pad + 10;
        @media (max-width: $xl) {
          width: 220px;
          flex: 0 0 220px;
        }
        @media (max-width: $lg) {
          width: 180px;
          flex: 0 0 180px;
          padding: $pad + 10 $pad + 5;
        }
        @media (max-width: $md) {
          width: 100%;
          padding: $pad + 5;
        }
      }
      
      .DashboardRight {
        padding: $pad + 20;
        width: calc(100% - 250px);
        
      
        @media (max-width: $xl) {
          width: calc(100% - 220px);
        }
        @media (max-width: $lg) {
          width: calc(100% - 180px);
          padding: $pad + 10;
        }
        @media (max-width: $md) {
          width: 100%;
          padding: $pad + 5;
        }
        h1 {
          font-size: $font + 22;
          margin-bottom: 0;
          padding-bottom: $pad + 10;
          @media (max-width: $lg) {
            font-size: $font + 18;
            padding-bottom: $pad + 5;
          }
        }
       
      
      }
    }
  }  
}