* {
  padding: 0;
  margin: 0;
}

.container-fluid {
  background-color: #cbc7be;
  min-height: 100vh;
  padding-left:0px !important;
}

.my_anz{
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    font-weight: 600;
					font-size: 20px;
}
.my_plus{
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 24px;
                      height: 24px;
                      background-color: #cbc7be33;
					  cursor:pointer;
}

.select-booking-section {
  .content-wrapper {
    padding: 100px 0;
    /*max-width: 80%; */
    margin: auto;
    .title {
      font-size: 80px;
      color: white;
      text-align: center;
      margin-bottom: 40px;
    }
    .content {
      display: flex;
      margin-bottom: 40px;
      h4 {
        font-size: 18px;
        font-weight: 400;
        color: #1d1d1d;
        margin-bottom: 20px;
        &:last-child {
          margin: 0;
        }
      }
      .button-group {
        display: flex;
        flex-direction: column;
        gap: 20px;
        button {
          padding: 12px 40px;
          font-size: 14px;
          color: white;
          background-color: #1d1d1d;
          white-space: nowrap;
          text-transform: uppercase;
          border-radius: 15px 50px 15px 50px;
        }
      }
    }
    .wrapper {
      display: flex;
      gap: 40px;
	  max-width: fit-content;
	  margin-inline: auto;
      .calendar-wrapper {
        position: relative;
          /*width: 100%; 
		  height: 50%; */
		  max-width: 425px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0px 8px 10px 0px #0000001a;
        .calender-header {
          display: flex;
          align-items: center;
          padding: 25px 30px 2px;
          justify-content: space-between;
          .current-date {
            font-size: 24px;
            font-weight: 500;
            font-weight: 700;
            color: #333333;
          }
          .icons {
            display: flex;
            gap: 10px;
            span {
              padding: 10px;
              /*width: 20px;
              height: 20px; */
              font-size: 20px;
              cursor: pointer;
              background-color: #f8f8f8;
              border-radius: 16px;
              text-align: center;
              user-select: none;
              :hover {
                background-color: #f2f2f2;
              }
            }
          }
        }
        .calendar {
          padding: 20px;
          table {
            width: 100%;
            tr {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              list-style: none;
              text-align: center;
              th {
                font-weight: 500;
                cursor: default;
                width: calc(100% / 7);
              }
            }
          }
          .days {
            margin-bottom: 20px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            row-gap: 4px;
            td {
              width: 13%;
              aspect-ratio: 12/9;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              border-radius: 10px;
              div.daily-date-day {
				width: 100%;
				height: 80%;
				padding-top: 1px;
              justify-content: center;
              align-items: center;
              border-radius: 10px;				
                margin-top: 5px;
                /*color: #737373;*/
	            background-color: #f5f6f8;
	            &:not(.active):hover {
	            	background-color: #f5f6f8;
	            }				
              }			  
              span.daily-date {
                font-size: 8px;
				/*margin-bottom: 5px;
                margin-top: 5px;*/
                /*color: #737373;*/
	            background-color: white;				
              }
            }
            td.inactive {
              div.daily-date-day {
				width: 100%;
				height: 80%;
				padding-top: 1px;
				color: #aaa;
				background-color: white;			
                margin-top: 5px;
                /*color: #737373;*/				
              }			  
              span.daily-date {
                font-size: 8px;
				/*margin-bottom: 5px;
                margin-top: 5px;*/
                /*color: #737373;*/
	            background-color: white;				
              }			  
            }
            td.active {
              /*color: #fff;*/
              div.daily-date-day {
				width: 100%;
				height: 80%;
				padding-top: 1px;
                justify-content: center;
                align-items: center;
                border-radius: 10px;				
                margin-top: 5px;
                /*color: #737373;*/
	            background-color: #c1ffc9; /*#00c52f; */			
              }			  
              span.daily-date {
                font-size: 8px;
				/*margin-bottom: 5px;
                margin-top: 5px;*/
                /*color: #737373;*/
	            background-color: white;				
              }
            }
          }
        }
        .calendar-tab {   
        	padding: 14px 14px 0px 14px;
          /*padding: 14px; */
          /*margin-bottom: 20px;*/
          	.scroll-wrapper {
	  position: relative;
	  height: 395px;   
	  overflow: hidden;
	} 
          .tabs-wrapper,
          .summary-wrapper {
		  	max-width: 425px;
            .tab {
              display: flex;
              justify-content: space-between;
              overflow: auto;
              gap: 20px;
              margin-bottom: 20px;
              button {
                background-color: inherit;
                float: left;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 14px 16px;
                width: 100%;
                transition: 0.3s;
                font-size: 17px;
                background-color: #f7f7f7;
                border: 2px solid #c5c5c5;
                border-radius: 15px;
                img.icon {
                  width: 24px;
                }
              }
              .active {
                color: #00c52f;
                border: 2px solid #00c52f;
                background-color: white;
              }
            }
            .tab-time {
              /*display: flex;*/
			  text-align: center;
              justify-content: space-between;
              padding: 12px 32px;
              font-size: 18px;
              font-weight: 500;
              border: 1px solid #c5c5c5;
              border-radius: 5px;
            }
            .tab-time-summary {
              /*display: flex;*/
			  text-align: center;
              justify-content: space-between;
              padding: 12px 32px;
              font-size: 18px;
              font-weight: 500;
              border: 1px solid #c5c5c5;
              border-radius: 5px;
            }			
            .tabcontent {
              display: none;
            }
            .tab-content-list {
              h4 {
                font-size: 16px;
                margin-top: 15px;
                margin-bottom: 20px;
                text-decoration: underline;
              }
              ul {
                display: flex;
                flex-direction: column;
                gap: 10px;
                li {
                  position: relative;
                  display: flex;
                  justify-content: space-between;
                  padding-left: 15px;
                  ::before {
                    position: absolute;
                    content: "";
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 4px;
                    background-color: #737373;
                    border-radius: 100%;
                  }
                  p {
                    font-size: 14px;
                    color: #737373;
                  }
                  .price {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    font-weight: 600;
                    .plus {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      width: 24px;
                      height: 24px;
                      background-color: #cbc7be33;
					  cursor:pointer;
                    }
                  }
                }
              }
            }
            .summary-title {
              font-size: 24px;
              font-weight: 500;
              text-align: center;
              margin-bottom: 15px;
            }
            .total {
              display: flex;
              justify-content: space-between;
              padding-top: 5px; /*15px*/
              border-top: 1px solid #bebebe;
              margin-top: 15px;
              .price-wrapper {
                display: flex;
                .price {
                  font-size: 20px;
                  font-weight: 600;
                }
                p {
                  margin-left: 20px;
                  cursor: pointer;
                  &::after {
                    content: "\2192";
                    margin-left: 10px;
                  }
                }
              }
            }
            .total-amount {
              text-align: center;
              font-size: 28px;
              font-weight: 500;
              margin-top: 32px;
            }
            .sub-amount {
              text-align: center;
              font-size: 18px;
              color: #737373;
              margin-top: 15px;
            }
            .icon-left {
              cursor: pointer;
              text-align: center;
              margin-top: 40px;
              &::before {
                content: "\2190";
                margin-right: 10px;
              }
            }
          }
          .summary-wrapper {
            .tab-time {
              justify-content: center;
            }
			.tab-time-summary{
				justify-content: center;
			}
          }
        }
        .hidden {
          display: none;
        }
      }

    }
  } 
}
.tab-time_left {
  /*display: flex;*/
    text-align: center;
    justify-content: space-between;
    padding: 12px 32px;
    font-size: 18px;
    font-weight: 500;
    border: 1px solid #c5c5c5;
    border-radius: 5px;
    justify-content: center;
}
.tab-time{
	display: none
}
.next-btn {
  display: flex; 
  justify-content: center; 
  gap: 10px;
  padding-bottom:5px;
  /*margin-top: -10px;*/	  
  button {
    /*position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%); 
margin: auto;
*/
    width: 40%;
    padding: 15px;
    background-color: #1d1d1d;
    color: white;
    border-radius: 10px 50px;
  }
}
.next-btn_reset-margin {
  margin-top: -10px !important; /* or whatever you want to toggle */
}
.next-btn_override-margin {
  margin-top: 15px !important; /* or whatever you want to toggle */
}
.tab button.active img.icon {
  filter: invert(34%) sepia(71%) saturate(1076%) hue-rotate(81deg)
    brightness(100%) contrast(89%);
}

@media (max-width: 1200px) {
.tab-time_left{
	display: none
}
.tab-time{
	display: block
}
  .select-booking-section {
    .content-wrapper {
      padding: 80px 0;
      .title {
        font-size: 60px;
        margin-bottom: 26px;
      }
      .content {
        margin-bottom: 40px;
        gap: 20px;
        h4 {
          font-size: 16px;
        }
        .button-group {
          button {
            font-size: 12px;
          }
        }
      }
      .wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
	    max-width: fit-content;
	    margin-inline: auto;
        .calendar-wrapper {
          /*width: 100%;  */
		  height: 50%;
		  max-width: 425px;	  
          .calendar-tab {
        	padding: 10px 10px 0px 10px;
		   .scroll-wrapper {
		  position: relative;
		  height: 340px;
		  overflow: hidden;
			}       	
          /*padding: 10px; */
            .tabs-wrapper,
            .summary-wrapper {
              .tab {
                button {
                  padding: 10px 15px;
                  font-size: 15px;
                  img.icon {
                    width: 20px;
                  }
                }
              }
              .tab-time {
                padding: 12px 24px;
                font-size: 16px;
              }
              .tab-time-summary {
                padding: 12px 24px;
                font-size: 16px;
              }			  
              .summary-title {
                font-size: 20px;
              }
              .total-amount {
                font-size: 24px;
              }
              .sub-amount {
                font-size: 16px;
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
.tab-time_left{
	display: none
}
.tab-time{
	display: block
}
  .select-booking-section {
    .content-wrapper {
      /*max-width: 90%;*/
      max-width: 100%;
      padding: 50px 0;
      .title {
        font-size: 32px;
        margin-bottom: 26px;
      }
      .content {
        flex-direction: column;
        margin-bottom: 40px;
        gap: 20px;
        h4 {
          font-size: 16px;
        }
        .button-group {
          button {
            font-size: 12px;
          }
        }
      }
      .wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
		max-width: fit-content; 
	    margin-inline: auto;	
        .calendar-wrapper {
          /*width: 100%;*/
		  height: 50%;
		  max-width: 425px;
          min-width: 320px;       
          .calendar {
            .days {
              font-size: 14px;
              td {
                padding: 4px;
                span.daily-date {
                  font-size: 8px;
                }
              }
            }
          }
          .calendar-tab {
        	padding: 10px 10px 0px 10px;
          /*padding: 10px; */
 		   .scroll-wrapper {
		  position: relative;
		  height: 340px;
		  overflow: hidden;
			}          
            .tabs-wrapper,
            .summary-wrapper {
              .tab {
                gap: 10px;
                button {
                  padding: 10px 10px;
                  font-size: 15px;
                  img.icon {
                    width: 20px;
                  }
                }
              }
              .tab-time {
                padding: 12px 18px;
                font-size: 14px;
              }
              .tab-time-summary {
                padding: 12px 18px;
                font-size: 14px;
              }			  
              .summary-title {
                font-size: 20px;
              }
              .total-amount {
                font-size: 24px;
              }
              .sub-amount {
                font-size: 16px;
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
  }
  .scroll-wrapper {
  position: relative;
  height: 400px;
  overflow: hidden;
	}
}

#my_content_tab{
    height: 645px !important; /* Fixed height */
    /*overflow: auto !important;  Enables scrolling when content overflows */
    display: flex;
    flex-direction: column; 
    min-width: 320px;
	/*width: 425px; */ 
}

.scrollable_content {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 10px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer/Edge */
}
.scrollable_content::-webkit-scrollbar {
  display: none;
}

.fake-scrollbar {
  position: absolute;
  right: 2px;
  width: 5px;
  background-color: rgba(150, 150, 150, 0.4);
  border-radius: 3px;
  pointer-events: none;
  z-index: 10;
  top: 0;
  display: none;
}
.day-box-active {
  display: inline-block;
  background-color: #666;
  color: white;
  padding: 8px 14px;
  margin: 4px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}
.day-box-inactive {
  display: inline-block;
  background-color: none;
  border: 1px solid black;
  color: black;
  padding: 8px 14px;
  margin: 4px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}

.invisible { visibility: hidden !important; }