marketing_cal/web/main.css

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap');
body {
    font-family: 'Work Sans', sans-serif;
}
/* body background */
.color__grey {
    background-color: #f5f5f5;
}


.row {
    height: 100vh;
}
.page-footer {
    padding-bottom: 20px;
}

.navbar {
    background-color: #e57373;
}

.nav-link {
    color: rgb(99, 97, 97);
    padding: 1rem .75rem;
}
.nav-link:hover {
    color: rgb(27, 27, 27);
}
.table tbody th, .table tbody td {
    padding: 1rem;
}

td[colspan = '2'] {
    background-color: rgb(160, 245, 245);
}
.span {
    display: block;
    margin-bottom: .4rem;
}



.chart-wrapper {
    max-width: 1150px;
    padding: 0 10px;
    margin: 0 auto;
  }
  
  
  /* CHART-VALUES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .chart-wrapper .chart-values {
    position: relative;
    display: flex;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 1.2rem;
  }
  
  .chart-wrapper .chart-values li {
    flex: 1;
    min-width: 80px;
    text-align: center;
  }
  
  .chart-wrapper .chart-values li:not(:last-child) {
    position: relative;
  }
  
  .chart-wrapper .chart-values li:not(:last-child)::before {
    content: '';
    position: absolute;
    right: 0;
    height: 510px;
    border-right: 1px solid var(--divider);
  }
  
  
  /* CHART-BARS
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .chart-wrapper .chart-bars li {
    position: relative;
    color: var(--white);
    margin-bottom: 15px;
    font-size: 16px;
    border-radius: 20px;
    padding: 10px 20px;
    width: 0;
    opacity: 0;
    transition: all 0.65s linear 0.2s;
  }
  
  @media screen and (max-width: 600px) {
    .chart-wrapper .chart-bars li {
      padding: 10px;
    }
  }
  
  
  /* FOOTER
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .page-footer {
    font-size: 0.85rem;
    padding: 10px;
    text-align: right;
    color: var(--black);
  }
  
  .page-footer span {
    color: #e31b23;
  }

  .dark-2 {
    background-color: #da3e3e;
  }
  .dark-1 {
    background-color: #dd6565;
  }
  .lighten-1 {
    background-color: #e29595;
  }
  .lighten-2 {
    background-color: #ddacac;
  }

  .badge {
      margin: .1rem;
  }
  .highTrend {
      color: white;
  }

  .btn__kw {
      padding: .75rem;
      background-color: #ddacac;
      border: none;
      outline: none;
      border-radius: 5px;
      transition: all .2s;
  }
  .btn__kw:hover {
    background-color: #e29595;
  }
  .btn__kw:focus {
      outline: none;
  }

  .badge {
      font-size: 1rem;
  }