.fc-daygrid-day-number{
  color: #000;
}
.fc-daygrid-day-number:hover{
  color: #1976d2;
  text-decoration: none;
  cursor: pointer;
}
.weekheader {
    background-color: #8dbff2;
    padding: 10px 20px;
    font-weight: bold;
    color: #fff;
    border: 1px solid #eee;
  }
  .weekdays {
    padding: 5px 5px 20px 5px;
    font-weight: bold;
    color: #343a40;
    border: 1px solid #eee;
    min-height: 80px;
    max-height: 80px;
    cursor: pointer;
  }
  
  .weekdays:hover,
  .weekend:hover {
    background-color: #e5f7ff;
  }
  
  .weekend {
    padding: 5px 5px 20px 5px;
    font-weight: bold;
    border: 1px solid #eee;
    min-height: 80px;
    max-height: 80px;
    cursor: pointer;
    background-color: #fff5f5;
  }
  
  .spn-complete {
    color: #008000;
    font-size: 10px;
  }
  
  .spnticket {
    color: #ff5500;
    font-size: 10px;
  }
  
  .wsched {
    background: #bbd9f7;
  }
  
  .spn-incomplete {
    color: red;
    font-size: 10px;
  }
  
  .date-disabled {
    color: #dc3545;
  }
  
  .off-date {
    /* background-color: #f8f9fa; */
    background: repeating-linear-gradient(
      -55deg,
      #f2f2f2,
      #f2f2f2 2.5px,
      #fff 2.5px,
      #fff 5px
    );
    cursor: not-allowed;
  }
  
  .off-date > label {
    color: #6c757d;
  }
  
  .calendar {
    border: 1px solid #8dbff2;
    padding: 0px;
    margin: 0px;
  }
  .spnticketday {
    margin-top: 2px;
    color: #1976d2;
  }
  .spndtrday {
    margin-top: 10px;
    font-size: 13px;
    min-height: 1000px;
  }

  .spndtrday-sm {
    margin-top: 10px;
    font-size: 11px;
    min-height: 1000px;
  }
  
  .orange {
    color: #f76300;
  }
  
  .green {
    color: #008000;
  }
  
  .red {
    color: red;
  }
  
  .lbldate {
      font-size: 11px;
      margin-bottom: 8px;
    }
    
    .lblin {
      color: #f9a619;
      font-size: 10px;
      position: absolute;
      bottom: 0;
    }
    
    .lblout {
      color: #f9a619;
      font-size: 10px;
      position: absolute;
      bottom: 0;
      right: 0;
      padding-right: 5px;
    }
  
  @media (min-width: 768px) {
    .seven-cols .col-md-1,
    .seven-cols .col-sm-1,
    .seven-cols .col-lg-1 {
      width: 100%;
      *width: 100%;
    }
  }
  
  @media (min-width: 992px) {
    .seven-cols .col-md-1,
    .seven-cols .col-sm-1,
    .seven-cols .col-lg-1 {
      width: 14.285714285714285714285714285714%;
      *width: 14.285714285714285714285714285714%;
    }
  }
  
  /**
  *  The following is not really needed in this case
  *  Only to demonstrate the usage of @media for large screens
  */
  @media (min-width: 1200px) {
    .seven-cols .col-md-1,
    .seven-cols .col-sm-1,
    .seven-cols .col-lg-1 {
      width: 14.285714285714285714285714285714%;
      *width: 14.285714285714285714285714285714%;
    }
  }