/*header{*/
/*       background: #4E5260;*/
/*    filter: drop-shadow(5px 10px 40px rgba(0, 0, 0, 0.25)); */
/*}*/



    /*.booking-calendar-container {*/
    /*    max-width: 800px;*/
    /*    margin: 0 auto;*/
    /*    font-family: Arial, sans-serif;*/
    /*}*/

    .event {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
 
.event:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
 
.tooltip-text {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    width: 100px;
    top: 0;
    white-space: normal;
    word-wrap: break-word;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
 
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
    .appointments-container{
        max-width: 1100px;
        margin: 0 auto;
        padding: 30px;
        background: #fff;
        border-radius: 10px;
    }
    
    .view-toggle-buttons {
        display: flex;
        margin-bottom: 15px;
    }
    
    .view-toggle-buttons button {
        padding: 8px 15px;
        margin-right: 5px;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        cursor: pointer;
        border-radius: 4px;
    }
    
    .view-toggle-buttons button.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    
    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      border: 1.239px solid #E8E8E8;
      background: #FFF;
       padding: 20px;
    }
    
    .calendar-navigation button {
        padding: 5px 10px;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        cursor: pointer;
        border-radius: 4px;
    }
    
    .calendar-grid {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        background-color: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }
    
    .day-header {
        padding: 10px;
        border: 1.239px solid #E8E8E8;
        background:#FFF;
        color: #3B3F4C);
        font-family: "Public Sans";
        font-size: 18px;
        font-weight: 400;
        line-height: 36px; 
        letter-spacing: 0.72px;
    }
    
    .calendar-dates {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: minmax(80px, auto);
    }
    
    .calendar-date {
        padding: 20px;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
        min-height: 80px;
        position: relative;
    }
    
    .calendar-date:nth-child(7n) {
        border-right: none;
    }
    
    .date-number {
       color: #737D8B;
        font-family: "Public Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 36px; 
        letter-spacing: 0.72px;
        margin-bottom: 5px;
    }
    
    .calendar-date.other-month {
        background-color: #f9f9f9;
        color: #aaa;
    }
    
    .calendar-date.has-events {
        border: 1.239px solid #D4D5F4;
       background: #F1FBFF;
    }
    
    .event {
        background-color: #007bff;
        color: white;
        padding: 2px 5px;
        margin-bottom: 2px;
        border-radius: 3px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .week-label {
        font-size: 10px;
        color: #777;
        font-style: italic;
        margin-bottom: 5px;
    }
    
    .list-view, .list-view-all, .calendar-view, .appointments-container {
        display: none;
    }
    
    .list-view.active, .list-view-all.active, .calendar-view.active, .appointments-container.active {
        display: block;
    }
    
    .appointment-divider{
        border-top: 1px solid #A4ACBC !important; 
    }
    
    .appointments-list {
        margin-top: 20px;
    }
    
    .appointment-item {
          width: 100%;
          padding: 20px;
          margin-bottom: 20px;
          border-radius: 10px;
          border: 1px solid #EAECEF;
          background: #EAECEF;
    }
    
    .appointment-icon {
     display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    /*border: 2px solid #07B1EF;*/
    /*background: rgba(7, 177, 239, 0.20);*/
    margin-right: 15px;
    color: #07B1EF;
    }
    
    .appointment-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    
    .appointment-icon svg {
        width: 20px;
        height: 20px;
        fill: #007bff;
    }
    
    .booking-calendar-container .appointment-details {
     display: flex;
    justify-content: space-between;
    align-items: center;
    }
    
    .appointment-icon-name{
         display: flex;
    justify-content: space-between;
    align-items: center;
    }
    .appointment-service {
      color: #23252B;
       font-family: "Raleway", sans-serif;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 0px;
        flex:1;
    }
    
    .appointment-date-time {
        color: #666;
        margin-bottom: 5px;
    }
    
    .appointment-customer {
        color: #333;
    }
    
    .appointment-actions {
        display: flex;
        gap: 10px;
    }
    
   
    
    .reschedule-btn {
    background: #65abc4;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: capitalize;
    min-height: 48px;
    font-size: 16px;
    padding: 0 40px;
    border-radius: 4px;
    letter-spacing: 0.72px;
    border: 1px solid #07b1ef;
    }
    
    .cancel-btn {
    background: #dc3545;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: capitalize;
    min-height: 48px;
    font-size: 16px;
    padding: 0 40px;
    border-radius: 4px;
    letter-spacing: 0.72px;
    border: 1px solid  #dc3545;
    }
    
    
    .cancel-btn:hover{
    background-color: #dc3545;
    color: #fff;
    border: 1px solid #dc3545;
   }
    
    
    .reschedule-btn:hover{
    background-color: #65abc4;
    color: #fff;
    border: 1px solid #65abc4;
   }
   
   .reschedule-btn:focus,
.reschedule-btn:active {
  background-color: #65abc4 !important;
  color: #ffffff !important;
  border: 1px solid #07b1ef !important;
  outline: none !important;
  position: static !important;
}

.cancel-btn:focus,
.cancel-btn:active {
  background-color: #dc3545 !important;
  color: #ffffff !important;
  border: 1px solid #dc3545 !important;
  outline: none !important;
  position: static !important;
}
    .booking-calendar-container .view-toggle-buttons .calendar-view-btn,
.booking-calendar-container .view-toggle-buttons .list-view-btn,
.booking-calendar-container .view-toggle-buttons .list-view-all-btn{
border-radius: 4px;
border: 1px solid #D1D5DB;
background: rgba(0, 0, 0, 0.00);
color: #000;
font-size: 16px;
font-family: "Inter", sans-serif;
}
.booking-calendar-container .view-toggle-buttons .calendar-view-btn i,
.booking-calendar-container .view-toggle-buttons .list-view-btn i,
.booking-calendar-container .view-toggle-buttons .list-view-all-btn i{
    font-size:20px;
}
.booking-calendar-container .view-toggle-buttons .calendar-view-btn.active,
.booking-calendar-container .view-toggle-buttons .list-view-btn.active,
.booking-calendar-container .view-toggle-buttons .list-view-all-btn.active{
    background:#65abc4;
    color:#fff;
    border: 1px solid #00B2F4;
}
.booking-calendar-container .view-toggle-buttons .calendar-view-btn.active i,
.booking-calendar-container .view-toggle-buttons .list-view-btn.active i,
.booking-calendar-container .view-toggle-buttons .list-view-all-btn.active i{
    color: #fff;
}

.calendar-date.has-events .date-number{
    background: #07b1ef;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding: 10px;
   margin-bottom: 10px;
}

    @media screen and (max-width: 600px) {
        .calendar-days, .calendar-dates {
            grid-template-columns: repeat(7, 1fr);
        }
        
        .day-header, .calendar-date {
            padding: 5px;
            font-size: 12px;
        }
        
        .calendar-date {
            min-height: 60px;
        }
        
        .event {
            font-size: 10px;
            padding: 1px 3px;
        }
       
        .cancel-btn{
           min-height: 40px;
           padding: 0 20px;
        }
        .reschedule-btn{
            min-height: 40px;
           padding: 0 20px;
        }
        .appointment-icon{
        width: 50px;
        height: 50px;
        }
        .appointment-service{
            font-size: 16px;
        }
       
        
        .booking-calendar-container .view-toggle-buttons .calendar-view-btn, .booking-calendar-container .view-toggle-buttons .list-view-btn, .booking-calendar-container .view-toggle-buttons .list-view-all-btn{
            font-size:13px !important;
        }
        .booking-calendar-container .view-toggle-buttons .calendar-view-btn i, .booking-calendar-container .view-toggle-buttons .list-view-btn i, .booking-calendar-container .view-toggle-buttons .list-view-all-btn i{
            font-size:13px !important;
        }
        
        .date-number{
            font-size: 12px;
            line-height: 1.5;
        }
        .calendar-view.active .calendar-dates .calendar-date.has-events div.event{
               font-size: 4px !important;
        }
    }
    
    
     @media screen and (max-width: 400px) {
         
         .appointment-actions{
             flex-direction:column;
         }
         
     }
    
    
     .booking-calendar-container .appointment-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        }
    
    
      .appointments-container .appointment-details{
            display: flex;
            justify-content: space-between;
            align-items: center;
      }