.schedule-container {
      padding: 3%;
      margin: 3%;
      background-color: #FFF;
      position: relative;
    }
    .date-list {
      list-style: none;
      padding: 0;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
    }
    .date-item {
      display: inline-block;
      margin-right: 10px; /* Adjust as needed */
    }
    .date-item ul {
      list-style: none;
      padding: 5px;
      margin: 5px;
      display: inline-grid;
    }
    .date-item ul li {
      display: inline-block;
      margin-right: 5px;
      font-size: 18px;
      color: #181f4a;
      cursor: pointer;
    }
    .date-item.large {
      font-size: 24px;
    }
    .date-item.small {
      font-size: 16px;
    }
    .date-item.active {
      color: white;
      padding: 5px 10px;
      border-bottom: 3px solid #67c0ea;
    }
    .date-item.active ul li {
      text-decoration: none; /* Apply underline when active */
    }
    .date-item ul li:first-child,
    .date-item ul li:last-child {
      font-size: 14px; /* Make first and last li smaller */
      color: #b9bbc9; /* Apply specific color */
    }
    .date-item ul li:nth-child(2) {
      font-size: 24px;
      color: #181f4a; /* Original color for middle li */
      font-weight: 700;
    }
    .second-section { 
      margin-left: 8%;
      margin-bottom: 5%;
    }

    .second-section h6 { 
      font-weight: 700;
    }
    
    .date-item.weekend.disabled ul li {
      color: #b9bbc9; /* Apply specific color */
    }

    /* Active color for buttons */
    .btn-outline-secondary.active {
      background-color: #F7E02D;
      border-color: #F7E02D;
      color: #000;
    }

    /* Styles for arrows */
    .arrow {
      cursor: pointer;
      font-size: 3rem;
      position: absolute;
      top: 10rem;
      transform: translateY(-50%);
    }

    .arrow.left {
      left: 4rem; 
      background: none !important;
    }

    .arrow.right {
      right: 4rem; 
      background: none !important;
    }
    .left-btn {
        
        color:#181f4b; /* Dark text color */
        border: none; /* No border */
    }

    /* On hover, change the background color slightly */
    .left-btn:hover {
        
        color: #181f4b; /* Dark text color */
    }

    /* On focus, add a box shadow */
    .left-btn:focus {
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Bootstrap blue shadow on focus */
    }
     /* Disabled styles */
    .left-btn.disabled {
        cursor: not-allowed; /* Change cursor for disabled state */
        opacity: 0.5; /* Reduce opacity for disabled state */
    }

    .right-btn {
        color: #181f4b; /* Dark text color */
        border: none; /* No border */
    }

    /* On hover, change the background color slightly */
    .right-btn:hover {
        background-color: #FFF; /* Slightly lighter background on hover */
        color: #181f4b; /* Dark text color */
    }

    /* On focus, add a box shadow */
    .right-btn:focus {
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Bootstrap blue shadow on focus */
    }
     /* Disabled styles */
    .right-btn.disabled {
        cursor: not-allowed; /* Change cursor for disabled state */
        opacity: 0.5; /* Reduce opacity for disabled state */
    }

    @media screen and (max-width:1024px) {
       .arrow.left {
            left: -1rem !important;
        }
        .arrow.right {
            right: -1rem !important;
        }
        .arrow.right img {
          width: 0.7rem !important;
        }

        .arrow.left img {
          width: 0.7rem !important;
        }
        .date-item.active {
              padding: 0px !important;
        }
        .date-item{
          margin-right: 0px !important;
        }
    }

     @media screen and (max-width:768px) {
      .arrow.left {
          left: -1rem !important;
      }
      .arrow.right {
          right: -1rem !important;
      }
      .arrow.right img {
        width: 0.7rem !important;
      }

      .arrow.left img {
        width: 0.7rem !important;
      }
      .date-item.active {
            padding: 0px !important;
      }
      .date-item{
        margin-right: 0px !important;
      }
    }

    @media screen and (max-width:599px) {
      .arrow.left {
        left: -1rem !important;
      }
      .arrow.right {
          right: -1rem !important;
      }
      .arrow.right img {
        width: 0.7rem !important;
      }

      .arrow.left img {
        width: 0.7rem !important;
      }
      .date-item ul {
            padding: 0px !important;
      }
      .arrow {
        top: 9.1rem !important;
      }
      .date-item.active {
              padding: 0px !important;
        }
        .date-item{
          margin-right: 0px !important;
        }
      
    }

    @media screen and (max-width:479px) {
      .arrow.left {
            left: -1rem !important;
            top: 8.5rem !important;
        }
        .arrow.right {
            right: -1rem !important;
            top: 8.5rem !important;
        }
        .arrow.right img {
          width: 0.7rem !important;
        }

        .arrow.left img {
          width: 0.7rem !important;
        }
        .date-item ul {
              padding: 0px !important;
        }
        .arrow {
          top: 9.1rem !important;
        }
        .date-item.active {
                padding: 0px !important;
          }
          .date-item{
            margin-right: 0px !important;
          }
    }
    @media screen and (max-width:375px) {
      .arrow.left {
            left: -1rem !important;
            top: 8.5rem !important;
        }
        .arrow.right {
            right: -1rem !important;
            top: 8.5rem !important;
        }
        .arrow.right img {
          width: 0.7rem !important;
        }

        .arrow.left img {
          width: 0.7rem !important;
        }
        .date-item ul {
              padding: 0px !important;
        }
        .arrow {
          top: 9.1rem !important;
        }
        .date-item.active {
                padding: 0px !important;
          }
        .date-item{
          margin-right: 0px !important;
        }
    }

    @media screen and (max-width:320px) {
      .arrow.left {
          left: -1rem !important;
          top: 8.5rem !important;
      }
      .arrow.right {
          right: -1rem !important;
          top: 8.5rem !important;
      }
      .arrow.right img {
        width: 0.7rem !important;
      }

      .arrow.left img {
        width: 0.7rem !important;
      }
      .date-item ul {
            padding: 0px !important;
      }
      .arrow {
        top: 9.1rem !important;
      }
      .date-item.active {
              padding: 0px !important;
        }
        .date-item{
          margin-right: 0px !important;
        }
    }

/*
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {

.arrow.left {
    left: -1rem !important;
}
.arrow.right {
    right: -1rem !important;
}
.arrow.right img {
  width: 0.7rem !important;
}

.arrow.left img {
  width: 0.7rem !important;
}
.date-item ul {
      padding: 0px !important;
}
.arrow {
  top: 9.1rem !important;
}
.date-item.active {
        padding: 0px !important;
  }
  .date-item{
    margin-right: 0px !important;
  }
}
    
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  .arrow.left {
      left: -1rem !important;
  }
  .arrow.right {
      right: -1rem !important;
  }
  .arrow.right img {
    width: 0.7rem !important;
  }

  .arrow.left img {
    width: 0.7rem !important;
  }
  .date-item.active {
        padding: 0px !important;
  }
  .date-item{
    margin-right: 0px !important;
  }
  
}*/
/*@media only screen and (max-device-width: 768px){
.date-item ul {
    padding: 0rem 2rem !important;
  }

}*/
/*@media (max-width:960px){
  .date-item ul {
    padding: 0rem 2rem !important;
  }
}*/