@import url(https://fonts.googleapis.com/css2?family=Anton+SC&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Anton+SC&family=Luckiest+Guy&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap);
/* Dashboard Cards Layout */
.dashboard-cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* Base Card Styles */
.dashboard-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  position: relative; /* For absolute button positioning */
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Common structure for all cards */
.card-title {
  color: rgba(0, 0, 0, 0.54) !important;
  font-size: 0.875rem !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  height: 20px; /* Fixed height for all titles */
}

.card-value, .product-goal-count {
  font-size: 2.125rem !important;
  font-weight: 500 !important;
  margin: 8px 0 4px 0 !important;
  line-height: 1.2 !important;
  height: 44px; /* Fixed height for all main numbers */
  display: flex !important;
  align-items: center !important;
}

/* Product Goal Card */
.product-goal-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.product-goal-card.completed {
  background-color: #F0FFF4;
}

.product-goal-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-goal-info {
  padding: 16px 20px;
  padding-bottom: 56px; /* Space for the button */
  flex-grow: 1;
}

.product-goal-label {
  color: rgba(0, 0, 0, 0.54) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  height: 20px; /* Match .card-title height */
  margin-bottom: 8px !important;
}

.product-goal-progress {
  color: rgba(0, 0, 0, 0.54) !important;
  font-size: 0.875rem !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.smiley-face {
  position: absolute;
  right: -20px;
  top: -20px;
  opacity: 0.1;
  transform: rotate(-10deg);
  pointer-events: none;
  color: #4CAF50;
}

.create-button {
  width: 100% !important;
  color: white !important;
  padding: 10px 16px !important;
  min-height: 36px;
  border-radius: 0 0 8px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  transition: background-color 0.3s !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: 0 !important;
}

.create-button.success {
  background-color: #4CAF50 !important;
}

.create-button.primary {
  background-color: #6B4EFF !important;
}

.create-button:hover {
  filter: brightness(1.1);
}

.create-button .add-icon {
  margin-right: 8px;
  font-size: 18px;
}

/* Basic Card Style */
.basic-card {
  padding: 16px 20px;
  padding-bottom: 36px; /* Space at the bottom when no button */
}

.card-details {
  display: flex;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.75rem;
  margin-top: 8px;
}

/* Articles Card */
.articles-card {
  padding: 16px 20px;
  padding-bottom: 56px; /* Space for the button */
}

.articles-subtitle {
  color: rgba(0, 0, 0, 0.54) !important;
  font-size: 0.875rem !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

/* Equal padding for all buttons */
.dashboard-card .MuiButton-root.create-button {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  margin-top: auto;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .dashboard-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .dashboard-cards-container {
    grid-template-columns: 1fr;
  }
}

.ppSectionHeader{
    background: lightgrey;
    text-align: center;
}

/* Add these styles for the filter section */
.filter-section {
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 20px;
}

.filter-section h3 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-option {
    font-size: 0.9rem;
    padding: 5px 10px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.filter-option.active {
    background-color: #FF4757;
    color: white;
}

.filter-container {
    margin-bottom: 10px;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
}

.filter-description {
    margin-bottom: 10px;
    max-width: 600px;
    font-size: 0.9rem;
}

.filter-sections {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-section {
    flex: 1;
    min-width: 200px;
}

.filter-section-title {
    background-color: #e0e0e0;
    padding: 3px 5px;
    text-align: center;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.filter-option {
    font-size: 0.8rem;
    padding: 4px 8px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    flex: 1 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
    text-align: center;
    transition: all 0.3s ease;
}

.filter-option:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

.filter-option.active {
    background-color: #FF4757;
    color: white;
    border-color: #FF4757;
}

.filter-option.active:hover {
    background-color: #FF5E69;
}

@media (max-width: 600px) {
    .filter-option {
        flex: 1 0 100%;
        max-width: 100%;
    }
}



.jobCompHeaderWrapper{
    background : #D9D9D9;

}
.createdAt{
    border-bottom: 1px solid blue;
    border-bottom-style: dashed;
    cursor: pointer;
    background: none;
}
.moreInfoJobHeader{
    max-width: max-content;
    padding-left : clamp(0px, 2vw, 10px) 
}
.moreInfoTable{
    display: grid;
    column-gap : 10px;
    grid-template-columns: fit-content(1000ch) 1fr;
}
.moreInfoTable > :nth-of-type(2n + 2){
    font-weight: bolder;
    letter-spacing:1px;
}
.jobCompHeader{
    width : 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding :10px;

}
.jobDeetsInner{
    display: grid;
    grid-template-columns: 3fr 1fr;
    background: #F9FFFF;
    column-gap: 10px;
}
.jobProductWrapper{
    display: grid;
    grid-template-columns: 1fr 3fr;
}
.jobProductWrapper img{
    object-fit: cover;
  width: 80%;
  height: 100%;
}
.productTextArea{
    align-self: center;
}
.productName{
    font-size: 120%;
    /* color : darkolivegreen; */
    font-weight: bolder;
}

.transferMethodHeader{
    background: #D9D9D9;
    text-align: center;
}
.transferContent{
    padding : 10%;
}
.paymentTable{
    margin: 0 auto;
    width : max-content;
    display: grid;
    grid-template-columns: max-content max-content max-content;
    grid-auto-rows: max-content;
    column-gap: 10px;
    align-items: center;
}
/* .paymentTable{
    margin: 0 auto;
    width : max-content;
    display: grid;
    grid-template-columns: max-content max-content max-content;
    grid-auto-rows: max-content;
    column-gap: 10px;
    align-items: center;
} */
.formAnswer{
    margin-left: 10px;
    background : #F0F9E9;
    font-weight : bolder;
    display : block;
}
.smallHeight{
    height : 100px;
    overflow: hidden;
    
}
.largeHeight{
    height: auto;
}
.headerForm{
    background: #D9D9D9;
    text-align: center;
    margin-bottom: 0;
}
.eachQuestion{
    border: 1px solid black;
     margin-top :0;
    padding: 10;
    margin: 10;
}
.eachQuestion:first-of-type{
    margin-bottom: 10px;
}

.dailyHeader{
    display: flex;
    background: #F0FBEE;
    padding : 10px;
    justify-content: space-evenly;
    font-size: 110%;
    align-items: center;
}

.dailyTimeHeader{
    font-weight: bolder;
}
.featuredGrid{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap : 30px;
}
.featuredGrid img{
    width : 100%;
    max-height: 130px;
    object-fit: cover;
    /* aspect-ratio: 1/2; */
}
.rdrCalendarWrapper {
  box-sizing: border-box;
  background: #ffffff;
  display: inline-flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.rdrDateDisplay{
  display: flex;
  justify-content: space-between;
}

.rdrDateDisplayItem{
  flex: 1 1;
  width: 0;
  text-align: center;
  color: inherit;
}

.rdrDateDisplayItem + .rdrDateDisplayItem{
    margin-left: 0.833em;
  }

.rdrDateDisplayItem input{
    text-align: inherit
  }

.rdrDateDisplayItem input:disabled{
      cursor: default;
    }

.rdrDateDisplayItemActive{}

.rdrMonthAndYearWrapper {
  box-sizing: inherit;
  display: flex;
  justify-content: space-between;
}

.rdrMonthAndYearPickers{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rdrMonthPicker{}

.rdrYearPicker{}

.rdrNextPrevButton {
  box-sizing: inherit;
  cursor: pointer;
  outline: none;
}

.rdrPprevButton {}

.rdrNextButton {}

.rdrMonths{
  display: flex;
}

.rdrMonthsVertical{
  flex-direction: column;
}

.rdrMonthsHorizontal > div > div > div{
  display: flex;
  flex-direction: row;
}

.rdrMonth{
  width: 27.667em;
}

.rdrWeekDays{
  display: flex;
}

.rdrWeekDay {
  flex-basis: calc(100% / 7);
  box-sizing: inherit;
  text-align: center;
}

.rdrDays{
  display: flex;
  flex-wrap: wrap;
}

.rdrDateDisplayWrapper{}

.rdrMonthName{}

.rdrInfiniteMonths{
  overflow: auto;
}

.rdrDateRangeWrapper{
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.rdrDateInput {
  position: relative;
}

.rdrDateInput input {
    outline: none;
  }

.rdrDateInput .rdrWarning {
    position: absolute;
    font-size: 1.6em;
    line-height: 1.6em;
    top: 0;
    right: .25em;
    color: #FF0000;
  }

.rdrDay {
  box-sizing: inherit;
  width: calc(100% / 7);
  position: relative;
  font: inherit;
  cursor: pointer;
}

.rdrDayNumber {
  display: block;
  position: relative;
}

.rdrDayNumber span{
    color: #1d2429;
  }

.rdrDayDisabled {
  cursor: not-allowed;
}

@supports (-ms-ime-align: auto) {
  .rdrDay {
    flex-basis: 14.285% !important;
  }
}

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  pointer-events: none;
}

.rdrInRange{}

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  pointer-events: none;
}

.rdrDayHovered{}

.rdrDayActive{}

.rdrDateRangePickerWrapper{
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.rdrDefinedRangesWrapper{}

.rdrStaticRanges{
  display: flex;
  flex-direction: column;
}

.rdrStaticRange{
  font-size: inherit;
}

.rdrStaticRangeLabel{}

.rdrInputRanges{}

.rdrInputRange{
  display: flex;
}

.rdrInputRangeInput{}

.rdrCalendarWrapper{
  color: #000000;
  font-size: 12px;
}

.rdrDateDisplayWrapper{
  background-color: rgb(239, 242, 247);
}

.rdrDateDisplay{
  margin: 0.833em;
}

.rdrDateDisplayItem{
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
  border: 1px solid transparent;
}

.rdrDateDisplayItem input{
    cursor: pointer;
    height: 2.5em;
    line-height: 2.5em;
    border: 0px;
    background: transparent;
    width: 100%;
    color: #849095;
  }

.rdrDateDisplayItemActive{
  border-color: currentColor;
}

.rdrDateDisplayItemActive input{
    color: #7d888d
  }

.rdrMonthAndYearWrapper {
  align-items: center;
  height: 60px;
  padding-top: 10px;
}

.rdrMonthAndYearPickers{
  font-weight: 600;
}

.rdrMonthAndYearPickers select{
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 30px 10px 10px;
    border-radius: 4px;
    outline: 0;
    color: #3e484f;
    background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    text-align: center
  }

.rdrMonthAndYearPickers select:hover{
      background-color: rgba(0,0,0,0.07);
    }

.rdrMonthPicker, .rdrYearPicker{
  margin: 0 5px
}

.rdrNextPrevButton {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 0.833em;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #EFF2F7
}

.rdrNextPrevButton:hover{
    background: #E1E7F0;
  }

.rdrNextPrevButton i {
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    text-align: center;
    border-style: solid;
    margin: auto;
    transform: translate(-3px, 0px);
  }

.rdrPprevButton i {
    border-width: 4px 6px 4px 4px;
    border-color: transparent rgb(52, 73, 94) transparent transparent;
    transform: translate(-3px, 0px);
  }

.rdrNextButton i {
    margin: 0 0 0 7px;
    border-width: 4px 4px 4px 6px;
    border-color: transparent transparent transparent rgb(52, 73, 94);
    transform: translate(3px, 0px);
  }

.rdrWeekDays {
  padding: 0 0.833em;
}

.rdrMonth{
  padding: 0 0.833em 1.666em 0.833em;
}

.rdrMonth .rdrWeekDays {
    padding: 0;
  }

.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
  display: none;
}

.rdrWeekDay {
  font-weight: 400;
  line-height: 2.667em;
  color: rgb(132, 144, 149);
}

.rdrDay {
  background: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 0;
  padding: 0;
  line-height: 3.000em;
  height: 3.000em;
  text-align: center;
  color: #1d2429
}

.rdrDay:focus {
    outline: 0;
  }

.rdrDayNumber {
  outline: 0;
  font-weight: 300;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rdrDayToday .rdrDayNumber span{
  font-weight: 500
}

.rdrDayToday .rdrDayNumber span:after{
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #3d91ff;
  }

.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{
      background: #fff;
    }

.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{
          color: rgba(255, 255, 255, 0.85);
        }

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  background: currentColor;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
}

.rdrSelected{
  left: 2px;
  right: 2px;
}

.rdrInRange{}

.rdrStartEdge{
  border-top-left-radius: 1.042em;
  border-bottom-left-radius: 1.042em;
  left: 2px;
}

.rdrEndEdge{
  border-top-right-radius: 1.042em;
  border-bottom-right-radius: 1.042em;
  right: 2px;
}

.rdrSelected{
  border-radius: 1.042em;
}

.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{
    border-top-left-radius: 1.042em;
    border-bottom-left-radius: 1.042em;
    left: 2px;
  }

.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{
    border-top-right-radius: 1.042em;
    border-bottom-right-radius: 1.042em;
    right: 2px;
  }

.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{
    border-top-left-radius: 1.333em;
    border-bottom-left-radius: 1.333em;
    border-left-width: 1px;
    left: 0px;
  }

.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{
   border-top-right-radius: 1.333em;
   border-bottom-right-radius: 1.333em;
   border-right-width: 1px;
   right: 0px;
 }

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  background: rgba(255, 255, 255, 0.09);
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
  pointer-events: none;
  border: 0px solid currentColor;
  z-index: 1;
}

.rdrDayStartPreview{
  border-top-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-top-left-radius: 1.333em;
  border-bottom-left-radius: 1.333em;
  left: 0px;
}

.rdrDayInPreview{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.rdrDayEndPreview{
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-right-radius: 1.333em;
  border-bottom-right-radius: 1.333em;
  right: 2px;
  right: 0px;
}

.rdrDefinedRangesWrapper{
  font-size: 12px;
  width: 226px;
  border-right: solid 1px #eff2f7;
  background: #fff;
}

.rdrDefinedRangesWrapper .rdrStaticRangeSelected{
    color: currentColor;
    font-weight: 600;
  }

.rdrStaticRange{
  border: 0;
  cursor: pointer;
  display: block;
  outline: 0;
  border-bottom: 1px solid #eff2f7;
  padding: 0;
  background: #fff
}

.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{
      background: #eff2f7;
    }

.rdrStaticRangeLabel{
  display: block;
  outline: 0;
  line-height: 18px;
  padding: 10px 20px;
  text-align: left;
}

.rdrInputRanges{
  padding: 10px 0;
}

.rdrInputRange{
  align-items: center;
  padding: 5px 20px;
}

.rdrInputRangeInput{
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  border: solid 1px rgb(222, 231, 235);
  margin-right: 10px;
  color: rgb(108, 118, 122)
}

.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{
    border-color: rgb(180, 191, 196);
    outline: 0;
    color: #333;
  }

.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
  content: '';
  border: 1px solid currentColor;
  border-radius: 1.333em;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0px;
  right: 0px;
  background: transparent;
}

.rdrDayPassive{
  pointer-events: none;
}

.rdrDayPassive .rdrDayNumber span{
    color: #d5dce0;
  }

.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{
    display: none;
  }

.rdrDayDisabled {
  background-color: rgb(248, 248, 248);
}

.rdrDayDisabled .rdrDayNumber span{
    color: #aeb9bf;
  }

.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{
    filter: grayscale(100%) opacity(60%);
  }

.rdrMonthName{
  text-align: left;
  font-weight: 600;
  color: #849095;
  padding: 0.833em;
}

.yt-lite {
  background-color: #000;
  position: relative;
  display: block;
  contain: content;
  background-position: 50%;
  background-size: cover;
  cursor: pointer;
}
.yt-lite:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
  background-position: top;
  background-repeat: repeat-x;
  height: 60px;
  padding-bottom: 50px;
  width: 100%;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.yt-lite:after {
  content: "";
  display: block;
  padding-bottom: var(--aspect-ratio);
}
.yt-lite > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.yt-lite > .lty-playbtn {
  width: 70px;
  height: 46px;
  background-color: #212121;
  z-index: 1;
  opacity: 0.8;
  border-radius: 14%;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.yt-lite:hover > .lty-playbtn {
  background-color: red;
  opacity: 1;
}
.yt-lite > .lty-playbtn:before {
  content: "";
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 11px 0 11px 19px;
}
.yt-lite > .lty-playbtn,
.yt-lite > .lty-playbtn:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.yt-lite.lyt-activated {
  cursor: unset;
}
.yt-lite.lyt-activated:before,
.yt-lite.lyt-activated > .lty-playbtn {
  opacity: 0;
  pointer-events: none;
}

/* @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;700;900&display=swap"); */
/* @import url('https://fonts.googleapis.com/css2?family=Anton+SC&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap'); */
.myLogo{
    display: block;
    text-decoration: none;
    /* color: rgb(235, 135, 135); */
    color : white;
    font-family: "Luckiest Guy", cursive;
    font-size: 300%;
    line-height: normal;
    text-align: center;
    transform: rotate(-5deg);
    text-shadow: 1px 1px #ac9939, 2px 2px #998833, 3px 3px #86772d, 4px 4px #82742b, 5px 5px #7e702a, 6px 6px #7a6d29, 7px 7px #776928, 8px 8px #736626, 9px 9px #6f6325, 10px 10px #6b5f24, 10px 10px 30px rgba(0, 0, 0, 0.7); 

    width: 100%;
}

 
  /* body {
    min-height: 100vh;
    display: grid;
    place-content: center;
    background-color: var(--paper);
  } */


.wavy {
    animation-name: wavy;
    animation-duration: 1.3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    position: relative;
    top: 0;
    left: 0;
  }
  @keyframes wavy {
    0% {
      top: 0px;
    }
    50% {
      top: -15px;
    }
    100% {
      top: 0px;
    }
  }

.anton-sc-regular {
    font-family: "Anton SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white
}
.outlineText{
    text-decoration: none;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

}
.navText{
    font-size: 150%;
}
.navWrapper {
    padding: 10px;
    
}
.headerInfo .navPhone{
    font-size: 120%;
    display: flex;
    align-items: center;
    background-color: green;
    padding: 10px;
    border-radius: 10px;
    gap: 10px;
}
svg{
    /* background-color: rgba(240,50,0,.5); */
    /* background-blend-mode: multiply;   */
    /* filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); */
}
.headerWrapper{
   
    /* background: url("https://replicate.delivery/yhqm/hLfF6Wv8yvWVI6NMn7DZrhZE6oxzPOPIOxvbS9YTQT35UHoJA/out-0.png"); */
    /* background: url("https://replicate.delivery/yhqm/pIo0K4uG4M47H5gDA8Sa4eU9fabhqtD7ZAfZYjdni381KggmA/out-0.png"); */
    /* background: url("https://replicate.delivery/yhqm/TVDZKEVnxooDFhDXMceA3WfFxSskdUzefg7YuGJEuHwsgABNB/out-0.png"); */
    /* background-position: -50%; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    /* background-color: rgba(240,50,0,.5);
    background-blend-mode: multiply; */


    /* background-color: rgb(23, 240, 23); */
    /* height: max-content; */

}
.headerWrapper > svg{
    /* height: 200px; */
    object-fit: cover;
    max-width: 100%;
    grid-column: 1/-1;
    grid-row: 1/1;
}
/* .headerWrapper .headerInfo{
    grid-column: 1/-1;
    grid-row: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
} */


.headerInfo {
    /* width: 90%; */
    margin: 0 auto;
    grid-row: 1/1;
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr ;
 
    align-items: center;
    justify-items: center;
    
    /* it */
}

.headerInfo img {
    width: 200px;
    object-fit: cover;
}

/* .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}

.grid div {
    justify-content: center;
    align-items: center;
} */

/*  */
.topnav {
    overflow: hidden;
    /* background-color: #333; */
    display: flex;
    flex-direction: column;
 
}
.dropdown{
    /* pad: block; */
    display: inline-block;
    
    /* line-height: 6px; */
    
}

@media (min-width: 700px) {
    .topnav {
      /* margin-right: 1rem;
      margin-bottom: 0; */
      margin: 0 auto;
      width: max-content;
      flex-wrap: wrap;
      flex-direction: row;
    }
  }

  /* @media (min-width: 500px) {
    .headerInfo{
        width: 100%;
        grid-template-columns: 1fr 3fr 1fr;
    }
  } */

  @media (min-width: 700px) {
    .headerInfo{
        width: 100%;
        grid-template-columns: 1fr 3fr 1fr;
        /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
        /* justify-content: center; */
    }
  }

.topnav a {

    /* float: left; */
    display: block;
    color: black;
    letter-spacing: 1px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

a.singleNav{
    font-size: 20px;
    position: relative;
    top :2px;
    display: inline-block;
}

/* .active {
    background-color: #04aa6d;
    color: white;
} */

.dropdown {
    /* margin : 0;
    padding: 0; */
    /* float : left; */
    /* overflow: hidden; */
    z-index: 21;
}

.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color : black;
    /* color : white; */
    padding: 14px 16px;
    background-color: inherit;
    font-size: 19px;
    cursor: pointer;
    /* font-family: inherit; */
    /* margin : 0; */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    text-align: left;
    cursor: pointer;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
    border-radius: 20%;

}

.dropdown-content a:hover {
    background: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 699px) {
    .dropdown, a.singleNav {
        width: 100%;
    }
    .dropdown .dropbtn {
        width: 100%;
        box-sizing: border-box;
    }
    .dropdown-content {
        position: static;
        box-shadow: none;
        width: 100%;
    }
    .dropdown-content a {
        text-align: center;
    }
}

.blue {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1940' height='560' preserveAspectRatio='none' viewBox='0 0 1900 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1060%26quot%3b)' fill='none'%3e%3crect width='1900' height='560' x='0' y='0' fill='rgba(6%2c 213%2c 215%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c596.418C116.734%2c592.145%2c240.302%2c589.664%2c335.021%2c521.303C427.952%2c454.233%2c451.467%2c331.873%2c506.121%2c231.138C565.546%2c121.609%2c681.84%2c27.709%2c670.133%2c-96.351C658.41%2c-220.572%2c536.386%2c-300.168%2c447.7%2c-387.935C365.408%2c-469.374%2c285.308%2c-561.183%2c172.805%2c-588.521C62.319%2c-615.368%2c-49.181%2c-570.813%2c-157.057%2c-534.887C-261.386%2c-500.142%2c-367.51%2c-463.845%2c-442.645%2c-383.554C-519.355%2c-301.579%2c-575.518%2c-195.53%2c-579.612%2c-83.336C-583.546%2c24.474%2c-501.169%2c110.66%2c-464.38%2c212.075C-423.425%2c324.973%2c-443.682%2c469.848%2c-351.163%2c546.421C-258.195%2c623.365%2c-120.598%2c600.832%2c0%2c596.418' fill='%2305b9bb'%3e%3c/path%3e%3cpath d='M1900 1053.248C1535.135 1034.434 1629.282 1031.152 1718.76 993.76 1824.003 949.78 1934.151 907.749 2003.987 817.5640000000001 2082.966 715.572 2136.929 589.443 2131.657 460.555 2126.148 325.869 2075.69 185.913 1974.509 96.84500000000003 1876.838 10.865999999999985 1735.348 0.19399999999995998 1605.26-2.8239999999999554 1497.376-5.326999999999998 1405.212 59.959 1299.407 81.185 1179.625 105.21499999999997 1045.28 62.117999999999995 943.643 129.90499999999997 833.29 203.505 725.175 326.08799999999997 733.746 458.456 742.507 593.754 922.072 647.6949999999999 984.9490000000001 767.815 1042.519 877.796 974.9069999999999 1054.103 1080.068 1120.066 1185.579 1186.249 1317.816 1077.411 1900 1053.248' fill='%2307f1f3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1060'%3e%3crect width='1900' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");

}

.red {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1940' height='560' preserveAspectRatio='none' viewBox='0 0 1900 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1266%26quot%3b)' fill='none'%3e%3crect width='1900' height='560' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1267%26quot%3b)'%3e%3c/rect%3e%3cpath d='M1900 0L1339.44 0L1900 95.25z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M1339.44 0L1900 95.25L1900 151.89L1015.8100000000001 0z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M1015.81 0L1900 151.89L1900 296.82L672.29 0z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M672.29 0L1900 296.82L1900 327.48L345.15 0z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M0 560L696.7 560L0 372.27z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M0 372.27L696.7 560L1046.22 560L0 335.42999999999995z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M0 335.43L1046.22 560L1210.89 560L0 325.86z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M0 325.86L1210.89 560L1257.93 560L0 95.06z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1266'%3e%3crect width='1900' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='15.28%25' y1='139.29%25' x2='84.72%25' y2='-39.29%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1267'%3e%3cstop stop-color='rgba(250%2c 79%2c 0%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(158%2c 50%2c 0%2c 1)' offset='0.21'%3e%3c/stop%3e%3cstop stop-color='rgba(158%2c 50%2c 0%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
}

/* Admin template responsive row */
.adminTemplateRow {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 15px;
}

.adminTemplateRow .adminTemplateCard {
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    flex: 1 1 48%;
    min-width: 280px;
    box-sizing: border-box;
}

@media screen and (max-width: 699px) {
    .adminTemplateRow {
        flex-direction: column;
    }
    .adminTemplateRow .adminTemplateCard {
        width: 100%;
        flex: 1 1 100%;
    }
}



.mainHeaderWrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.leftSide{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    z-index: 10;
}
.leftSide img{
    height: 45px;
    margin-right: 20px;
}
.rightButtons{
    display: flex;
    align-items: center;
}

/* Base styles for all header buttons */
.header-button {
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 6px;
    margin: 5px 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    cursor: pointer;
    min-width: 120px;
}

/* Default button look */
.header-button {
    background-color: #e9ecef;
    color: #0056b3;
    border-color: #dee2e6;
}

.header-button:hover {
    background-color: #d6dbe0;
    color: #003d80;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Tutorials & Industries buttons */
.tutorials-button,
.industries-button {
    background-color: #f8f9fa;
}

/* Signup button specific styles */
.signup-button {
    background: linear-gradient(45deg, #007bff, #0069d9);
    color: white;
    border-color: #007bff;
    font-weight: 600;
}

.signup-button:hover {
    background: linear-gradient(45deg, #0069d9, #0056b3);
    color: white;
    border-color: #0056b3;
}

/* Login button specific styles */
.login-button {
    background-color: transparent;
    color: #007bff;
    border: 1.5px solid #007bff;
}

.login-button:hover {
    background-color: rgba(0, 123, 255, 0.08);
    color: #0056b3;
}

/* Adjust icon alignment if needed */
.header-button .MuiSvgIcon-root {
    vertical-align: middle;
    margin-left: 5px;
    font-size: 1.1rem;
}

@media only screen and (min-width: 768px) {
    .header-content {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .leftSide {
        margin-bottom: 0;
    }
    
    .navColumn {
        flex-direction: row;
        justify-content: flex-end;
        width: auto;
    }
    
    .navRow {
        width: auto;
        margin: 0 0 0 10px;
    }
    
    .header-button {
        margin: 0 5px;
    }
    
    #articlesPage.links div {
        margin: 5px 30px;
    }
}

/* Adjust for very small screens */
@media only screen and (max-width: 350px) {
    .mainHeaderWrapper {
        padding: 10px;
    }
    
    .leftSide img {
        height: 35px;
    }
    
    #headerMainSite {
        font-size: 0.85rem;
        padding: 8px 10px;
    }
    
    .header-button {
        min-width: 110px;
        padding: 8px 12px;
    }
}

/* Styles for the top banner in _app.js */
#headerMainSite {
    background: linear-gradient(90deg, #0056b3, #007bff, #0056b3);
    background-size: 200% 100%;
    animation: gradientShift 6s ease infinite;
    color: white;
    text-align: center;
    padding: 12px 15px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: relative;
    z-index: 10;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#headerMainSite::before {
    content: "\1F389";
    margin-right: 10px;
    font-size: 1.2rem;
}

#headerMainSite strong {
    position: relative;
    color: #ffffff;
    font-weight: 700;
    padding: 0 2px;
}

#headerMainSite strong::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: -1;
}

#newChip {
    display: inline-block;
    background-color: #ff9800;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    margin-left: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    vertical-align: middle;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Styles for the articles links section in homepage.js */
#articlesPage {
    background: linear-gradient(to right, #f8f9fa, #e9ecef, #f8f9fa);
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-bottom: 1px solid #dee2e6;
}

#articlesPage.links div {
    display: inline-block;
    margin: 8px 20px;
    position: relative;
}

#articlesPage.links a {
    color: #0056b3;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
    padding: 5px 0;
    position: relative;
    transition: all 0.3s ease;
}

#articlesPage.links a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0056b3;
    transition: width 0.3s ease;
}

#articlesPage.links a:hover {
    color: #003d80;
}

#articlesPage.links a:hover:after {
    width: 100%;
}

/* Mobile hamburger menu */
.hamburger-menu {
    display: block;
    cursor: pointer;
    margin-left: auto;
    padding: 10px;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: #0056b3;
    transition: all 0.3s ease;
}

/* Mobile navigation */
.nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin-top: 10px;
}

.nav-links.mobile-open {
    display: flex;
}

/* Hero Section Styles */
.hero-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
    z-index: 1;
    width: 100%;
}

/* ============================================
   FLOATING PARTY DECORATIONS
   ============================================ */
.floating-decorations {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.floater {
    position: absolute;
    font-size: 2rem;
    opacity: 0.25;
    z-index: 0;
}

/* Different floating paths for each element */
@keyframes floatPath1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -40px) rotate(10deg); }
    50% { transform: translate(60px, -20px) rotate(-5deg); }
    75% { transform: translate(20px, -60px) rotate(15deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes floatPath2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-25px, -50px) rotate(-8deg); }
    50% { transform: translate(-50px, -30px) rotate(5deg); }
    75% { transform: translate(-15px, -70px) rotate(-12deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes floatPath3 {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(40px, -30px) rotate(15deg) scale(1.1); }
    66% { transform: translate(-20px, -50px) rotate(-10deg) scale(0.95); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes floatPath4 {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(50px, -20px) rotate(5deg); }
    40% { transform: translate(30px, -60px) rotate(-8deg); }
    60% { transform: translate(-10px, -40px) rotate(12deg); }
    80% { transform: translate(20px, -30px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Individual floater positions and animations */
.floater-1 {
    top: 5%;
    left: 5%;
    font-size: 2.5rem;
    opacity: 0.3;
    animation: floatPath1 8s ease-in-out infinite;
}

.floater-2 {
    top: 15%;
    left: 15%;
    font-size: 1.8rem;
    opacity: 0.2;
    animation: floatPath2 10s ease-in-out infinite;
    animation-delay: 1s;
}

.floater-3 {
    top: 60%;
    left: 3%;
    font-size: 2rem;
    opacity: 0.25;
    animation: floatPath3 9s ease-in-out infinite;
    animation-delay: 2s;
}

.floater-4 {
    top: 30%;
    left: 8%;
    font-size: 1.5rem;
    opacity: 0.2;
    animation: floatPath4 7s ease-in-out infinite;
    animation-delay: 0.5s;
}

.floater-5 {
    top: 75%;
    left: 12%;
    font-size: 1.8rem;
    opacity: 0.2;
    animation: floatPath1 11s ease-in-out infinite;
    animation-delay: 3s;
}

.floater-6 {
    top: 45%;
    left: 2%;
    font-size: 2.2rem;
    opacity: 0.22;
    animation: floatPath2 9s ease-in-out infinite;
    animation-delay: 1.5s;
}

.floater-7 {
    top: 20%;
    left: 25%;
    font-size: 1.4rem;
    opacity: 0.18;
    animation: floatPath3 8s ease-in-out infinite;
    animation-delay: 4s;
}

.floater-8 {
    top: 85%;
    left: 6%;
    font-size: 1.6rem;
    opacity: 0.15;
    animation: floatPath4 12s ease-in-out infinite;
    animation-delay: 2.5s;
}

/* Hide on mobile for cleaner look */
@media (max-width: 768px) {
    .floating-decorations {
        display: none;
    }
}

/* Larger floaters on big screens */
@media (min-width: 1200px) {
    .floater-1 { font-size: 3rem; }
    .floater-2 { font-size: 2.2rem; }
    .floater-6 { font-size: 2.5rem; }
}

#homePageHeader {
    font-size: 3.2rem;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    font-weight: 800;
    color: #1a1a2e;
    position: relative;
    z-index: 1;
}

#homePageHeader::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 8px;
    bottom: -10px;
    left: 0;
    background: linear-gradient(90deg, #007bff, #00c6ff);
    border-radius: 4px;
    z-index: -1;
}

.homePageHeader2 {
    font-size: 2rem;
    color: #0056b3;
    margin-top: 1.5rem;
    font-weight: 600;
    position: relative;
}

#homePageSubHeader {
    font-weight: 400;
    color: #4a4a4a;
    line-height: 1.6;
    margin-top: 1.5rem;
    font-size: 1.25rem;
    position: relative;
}

#homePageSubHeader .inner {
    position: relative;
    display: inline-block;
    border-bottom-left-radius: 30px;
}

#homePageSubHeader .inner::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 30%;
    height: 3px;
    background: linear-gradient(90deg, #007bff, transparent);
    border-bottom-left-radius: 30px;
}

/* Hero divider styling */
.divider.light {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #0056b3, rgba(0, 123, 255, 0.2));
    margin: 1.5rem 0;
    border-radius: 2px;
}

/* Hero image container styling */

/* Subtle breathing/pulse animation for hero image */
@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
    }
    50% {
        transform: scale(1.02);
        filter: drop-shadow(0 25px 50px rgba(0, 100, 200, 0.18));
    }
}

.hero-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.hero-image-container img {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
    animation: gentlePulse 8s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.hero-image-container img:hover {
    animation-play-state: paused;
    transform: scale(1.03);
    filter: drop-shadow(0 25px 50px rgba(0, 100, 200, 0.22));
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
    #homePageHeader {
        font-size: 2.5rem;
    }
    
    .homePageHeader2 {
        font-size: 1.6rem;
    }
    
    #homePageSubHeader {
        font-size: 1.1rem;
    }

    /* Center align content on mobile */
    .hero-image-container {
        justify-content: center !important;
        margin: 30px auto 0;
    }

    .hero-image-container img {
        width: 80% !important;
        margin: 0 auto;
    }

    /* Adjust background shapes for mobile */
    .hero-container::before {
        width: 150px;
        height: 150px;
        top: -30px;
        left: -30px;
    }

    .hero-container::after {
        width: 120px;
        height: 120px;
        bottom: -30px;
        right: -20px;
    }

    #headerMainSite {
        font-size: 0.95rem;
        padding: 10px;
    }
    
    #headerMainSite::before {
        font-size: 1rem;
        margin-right: 6px;
    }
    
    #newChip {
        font-size: 0.75rem;
        padding: 2px 8px;
    }
}

/* Free badge styling */
.free-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: white !important;
    border-radius: 30px;
    padding: 8px 16px;
    margin-bottom: 20px;
    box-shadow: 0 3px 8px rgba(255, 87, 34, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    transform: rotate(-2deg);
    text-decoration: none !important;
}

.free-badge:hover, .free-badge:focus {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 5px 12px rgba(255, 87, 34, 0.4);
    color: white !important;
    text-decoration: none !important;
}

.free-badge:active {
    transform: scale(0.98);
    box-shadow: 0 2px 5px rgba(255, 87, 34, 0.3);
}

.badge-icon {
    margin-right: 8px;
    font-size: 1.2rem;
}

.badge-text {
    font-weight: 700;
    letter-spacing: 0.3px;
    font-size: 1rem;
}

@media only screen and (max-width: 768px) {
    .free-badge {
        padding: 6px 12px;
        margin-bottom: 15px;
    }
    
    .badge-text {
        font-size: 0.9rem;
    }
}
.questo:hover {
  display: inline-block;
  /* display: block; */
  margin: 0 0.5rem;

  animation: jello; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

p.paragraph{
  font-size: 20px;
}

#richTextWrapper img{
  max-width: 100%;
}
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

html, body {
    width: 100%;
    height: 100%;
    /* height: 100%;
    display: flex;
  flex-direction: column;
  height: 100%; 1, 3 */
  /* display: flex;
  min-height: 100vh;
  flex-direction: column; */
}
.mtb10{
  margin : 10 0 !important;
  font-size:  120%;
}
.cdx-block{
  border : 1px dotted grey !important;
}
#articlesPage figure{
  max-height: 500px;
}
#articlesPage figure img{
 max-height: 100%;
}
.signupForm{
  width : 40%
}
.minDayMobiscrollWrapper .mbsc-label-inline{
  width : 100% !important;
}

@media screen and (min-width : 900px) {
  .mobileHeader{
    display: none;
  }
  .fullWidthHeader{
    display: block;
  }
  

}
@media screen and (max-width : 900px) {
  .mobileHeader{
    display: block;
  }
  .fullWidthHeader{
    display: none;
  }
  #articlesPage figure{
    height: auto;
  }
  .signupForm{
    width : 90%
  }

}

.cardHomePage{
  transition:  all 0.3s linear
}
.cardHomePage:hover{
  background: #EEF8EC;
  transform: scale(1.08);
  transition:  all 0.3s linear
}
.firstcharacter {
  color: blue;
  float: left;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

.docsSideBarLink{
  color : black;
  text-decoration: none;
}
.docPageDivider{
  height :5px;
  width : 100%;
  background : blue;
  margin-bottom: 5px;
}

/* Homepage */
.homePage_displayFlex {
  display: flex;
  justify-content: end;
}
/*end home page*/
#__next{
  width: 100%;
    height: 100%;
  display: flex;
  flex-direction: column;
  /* height: 100%;  */
}

.footer{
  /* flex:none; */
  flex-shrink: 0;
  padding : 10px
}
.siteHeader{
  flex:none;
}
.site-content {
  /* background: green; */
  flex: 1 0 auto; /* 2 */
  /* padding: var(--space) var(--space) 0; */
  width: 100%;
}
.site-content::after {
  content: '\A0'; /* &nbsp; */
  display: block;
  margin-top: var(--space);
  height: 0px;
  visibility: hidden;
}


[data-braintree-id="toggle"] {
  display: none;
}

.search-bar-container {
  width: 90%;
  max-width: 500px;
  margin: 0px auto 0;
  /* display: flex; */
  align-items: center;
}

.search-input-container {
  position: relative;
}

.location-search-input,
.location-search-input:focus,
.location-search-input:active {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
  border: honeydew;
  /* display: block; */
  display: inline-block;
  /* width: 100%; */
  width  :90%;
  padding: 16px;
  font-size: 16px;
  border-radius: 2px;
  outline: none;
}

.autocomplete-container {
  border-bottom: honeydew;
  border-left: honeydew;
  border-right: honeydew;
  border-top: 1px solid #e6e6e6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border-radius: 0 0 2px 2px;
}

.suggestion-item {
  padding: 8px;
  text-align: left;
  background-color: #fff;
  cursor: pointer;
}

.suggestion-item--active {
  background-color: #fafafa;
  padding: 8px;
  cursor: pointer;
}

.dropdown-footer {
  display: flex;
  justify-content: flex-end;
  padding: 4px;
}

.dropdown-footer-image {
  display: inline-block;
  width: 150px;
}

.spinner {
  color: #18bc9c;
  font-size: 30px;
}

.error-message {
  color: red;
}

.geocode-result-header {
  font-size: 20px;
  color: #222222;
}

.drop-zone-area {
    min-height: 0 !important;
    height :100%
}

.stripe-connect {
  display: inline-block;
  margin-bottom: 1px;

  background-image: -webkit-linear-gradient(#28A0E5, #015E94);
  background-image: -moz-linear-gradient(#28A0E5, #015E94);
  background-image: -ms-linear-gradient(#28A0E5, #015E94);
  background-image: linear-gradient(#28A0E5, #015E94);

  -webkit-font-smoothing: antialiased;
  border: 0;
  padding: 1px;
  height: 30px;
  text-decoration: none;

  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;

  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

  cursor: pointer;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.stripe-connect span {
  display: block;
  position: relative;
  padding: 0 12px 0 44px;
  height: 30px;

  background: #1275FF;
  background-image: -webkit-linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);
  background-image: -moz-linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);
  background-image: -ms-linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);
  background-image: linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);

  font-size: 14px;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);

  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.stripe-connect span:before {
  content: '';
  display: block;
  position: absolute;
  left: 11px;
  top: 50%;
  width: 23px;
  height: 24px;
  margin-top: -12px;
  background-repeat: no-repeat;
  background-size: 23px 24px;
}

.stripe-connect:active {
  background: #005D93;
}

.stripe-connect:active span {
  color: #EEE;

  background: #008CDD;
  background-image: -webkit-linear-gradient(#008CDD, #008CDD 85%, #239ADF);
  background-image: -moz-linear-gradient(#008CDD, #008CDD 85%, #239ADF);
  background-image: -ms-linear-gradient(#008CDD, #008CDD 85%, #239ADF);
  background-image: linear-gradient(#008CDD, #008CDD 85%, #239ADF);

  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

.stripe-connect:active span:before {

}

.stripe-connect.light-blue {
  background: #b5c3d8;
  background-image: -webkit-linear-gradient(#b5c3d8, #9cabc2);
  background-image: -moz-linear-gradient(#b5c3d8, #9cabc2);
  background-image: -ms-linear-gradient(#b5c3d8, #9cabc2);
  background-image: linear-gradient(#b5c3d8, #9cabc2);
  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.stripe-connect.light-blue span {
  color: #556F88;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);

  background: #f0f5fa;
  background-image: -webkit-linear-gradient(#f0f5fa, #e4ecf5 85%, #e7eef6);
  background-image: -moz-linear-gradient(#f0f5fa, #e4ecf5 85%, #e7eef6);
  background-image: -ms-linear-gradient(#f0f5fa, #e4ecf5 85%, #e7eef6);
  background-image: linear-gradient(#f0f5fa, #e4ecf5 85%, #e7eef6);
    
  -moz-box-shadow: inset 0 1px 0 #fff;
  -webkit-box-shadow: inset 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff;
}

.stripe-connect.light-blue:active {
    background: #9babc2;
}

.stripe-connect.light-blue:active span {
  color: #556F88;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);

  background: #d7dee8;
  background-image: -webkit-linear-gradient(#d7dee8, #e7eef6);
  background-image: -moz-linear-gradient(#d7dee8, #e7eef6);
  background-image: -ms-linear-gradient(#d7dee8, #e7eef6);
  background-image: linear-gradient(#d7dee8, #e7eef6);
    
  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
}

.stripe-connect.dark {
  background: #252525;
  background: rgba(0,0,0,0.5) !important;
}

/* Images*/

.stripe-connect span:before, .stripe-connect.blue span:before {
  background-image: url("data:image/png;base64,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");
}

.stripe-connect.light-blue span:before {
  background-image: url("data:image/png;base64,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");
  }

  .stripe-connect.light-blue span:before {
    background-image: url("data:image/png;base64,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");
  }



/*Card Stripe area*/

.success {
	 text-align: center;
}
 .success h2 {
	 color: seagreen;
}
/* #articlesPage h2:not(.largerh2){
  font-size: 25px;
  background: red;
} */
 .success a {
	 display: block;
}
 .checkout-form {
	 /* width: 400px; */
	 padding: 2em;
	 border-radius: 8px;
	 background-color: #fff;
	 box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.15);
}
 .checkout-form p {
	 text-align: center;
}
 .checkout-form label {
	 min-width: 500px;
	 color: #6b7c93;
	 font-weight: 300;
   letter-spacing: 0.025em;
   display: block;
   margin-top: 10px;
}
 .checkout-form input, .checkout-form .StripeElement {
	 display: block;
	 margin: 10px 0 0px 0;
	 padding: 10px 14px;
	 font-size: 1em;
	 font-family: 'Source Code Pro', monospace;
	 box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px, rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
	 border: 0;
	 outline: 0;
	 border-radius: 4px;
	 background: white;
}
 .checkout-form input::placeholder, .checkout-form .StripeElement::placeholder {
	 color: lightgray;
}
 .checkout-form input:focus, .checkout-form .StripeElement:focus, .checkout-form input .StripeElement--focus, .checkout-form .StripeElement .StripeElement--focus {
	 box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px, rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
	 -webkit-transition: all 150ms ease;
	 transition: all 150ms ease;
}
 .checkout-form .order-button {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 margin: 0 auto;
	 text-decoration: none;
	 margin-top: 5%;
	 background-color: #008cdd;
	 border: 1px solid #008cdd;
	 font-size: 1em;
	 font-weight: bold;
	 color: white;
	 border-radius: 5px;
	 padding: 0.5em 1em;
	 width: 200px;
	 transition: opacity 200ms;
	 cursor: pointer;
}
 .checkout-form .order-button.success {
	 background-color: seagreen;
	 border-color: seagreen;
}
 .checkout-form .order-button:hover {
	 opacity: 0.8;
}
 .checkout-form .order-button:disabled {
	 opacity: 0.5;
	 cursor: not-allowed;
}
 .checkout-form a {
	 display: block;
	 text-align: center;
	 margin-top: 1em;
}

.carousel-wrapper,
.carousel,
.carousel > .slider-wrapper,
.carousel > .slider-wrapper > .slider {
  height: 100%;
}
.slider-wrapper img{
  width : auto !important;
}
.MuiPickersBasePicker-pickerView{
  max-width: 100% !important;
}

* {
  box-sizing: border-box;
}

input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border-style: none;
}


/*stripe cc*/

/* html {
  background-color: #6772e5;
  font-size: 16px;
  font-family: Roboto, Open Sans, Segoe UI, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-rendering: optimizeLegibility;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#root {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.AppWrapper {
  /* width: 500px; */
  /* height: 400px; */
  position: relative;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: scale3D(0.95, 0.95, 0.95);
  }
  to {
    opacity: 1;
    transform: scale3D(1, 1, 1);
  }
}

.Form {
  animation: fade 200ms ease-out;
}

.FormGroup {
  margin: 0 15px 20px;
  padding: 0;
  border-style: none;
  background-color: #fff;
  /* background-color: lightgrey; */
  will-change: opacity, transform;
  box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 #829fff;
  border-radius: 4px;
}

.FormRow {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 15px;
  border-top: 1px solid #819efc;
}

.FormRow:first-child {
  border-top: none;
}

.FormRowLabel {
  width: 15%;
  min-width: 70px;
  padding: 11px 0;
  /* color: #c4f0ff; */
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes void-animation-out {
  0%,
  to {
    opacity: 1;
  }
}
.FormRowInput:-webkit-autofill {
  /* -webkit-text-fill-color: #fce883; */
  -webkit-text-fill-color: black;
  /* Hack to hide the default webkit autofill */
  transition: background-color 100000000s;
  animation: 1ms void-animation-out;
}

.FormRowInput {
  font-size: 16px;
  width: 100%;
  padding: 11px 15px 11px 0;
  /* color: #fff; */
  color : "black";
  background-color: transparent;
  animation: 1ms void-animation-out;
}
.pM0{
  margin : 0
}

.listDashContainer{
  max-height: 400px;
  overflow: hidden;
  overflow-y: scroll;
}
.listDash{
  margin: 0;
  /* border-top : 1px solid grey; */
  border-bottom : 1px solid grey;
  padding : 10px;
}
.listDash:first-of-type{
  border-top: 1px solid grey;
}
/* .listDash:last-of-type{
  boarR
} */
.FormRowInput::placeholder {
  /* color: #87bbfd; */
  color: lightgrey;
}

.StripeElement--webkit-autofill {
  background: transparent !important;
}

.StripeElement {
  width: 100%;
  padding: 11px 15px 11px 0;
}

.SubmitButton {
  display: block;
  font-size: 16px;
  width: calc(100% - 30px);
  height: 40px;
  margin: 40px 15px 0;
  /* background-color: #f6a4eb; */
  background-color: green;
  box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 #ffb9f6;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 100ms ease-in-out;
  will-change: transform, background-color, box-shadow;
}

.SubmitButton:active {
  background-color: #d782d9;
  box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 #e298d8;
  transform: scale(0.99);
}

.SubmitButton.SubmitButton--error {
  transform: translateY(15px);
}
.SubmitButton.SubmitButton--error:active {
  transform: scale(0.99) translateY(15px);
}

.SubmitButton:disabled {
  opacity: 0.6;
  cursor: default;
  /* background-color: #7795f8; */
  color: black;
  background-color: lightslategray;
  box-shadow: none;
}

.ErrorMessage {
  /* color: #fff; */
  color: "black";
  position: absolute;
  display: flex;
  justify-content: center;
  padding: 0 15px;
  font-size: 13px;
  margin-top: 0px;
  width: 100%;
  transform: translateY(-15px);
  opacity: 0;
  animation: fade 150ms ease-out;
  animation-delay: 50ms;
  animation-fill-mode: forwards;
  will-change: opacity, transform;
}

.ErrorMessage svg {
  margin-right: 10px;
}

.Result {
  margin-top: 50px;
  text-align: center;
  animation: fade 200ms ease-out;
}

.ResultTitle {
  color: #fff;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 17px;
  text-align: center;
}

.ResultMessage {
  color: #9cdbff;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 25px;
  line-height: 1.6em;
  text-align: center;
}

.ResetButton {
  border: 0;
  cursor: pointer;
  background: transparent;
}

.adminMenu{

}

.adminMenu > a{
  /* margin-top : 10px; */
  width : 100%;
  color: black;
  
  text-transform: none !important;

  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  font-weight: normal !important;
  padding: 14px 16px;
  cursor: pointer;
  background-color: white;
  font-size: 1rem;
  display: block;
  text-decoration: none;
  width: 220px;
}
.adminMenu.smallWidth a{
  width: 180px;
}
.adminMenu .highlight{
  font-size: 1.2rem;
  border: 1px solid #b6dbe9 ;
  background: linear-gradient(to bottom, #e8f4f8 0%, #d3eaf3 100%) !important;
  
}
.adminMenu .header{
  padding-bottom: 10px;
  display: block;
  border-bottom: 1px solid blue;
}
.adminMenu .regularButton svg{
  font-size: 1.2rem;
  color : grey;
  top : 5px;
  position: relative;
}
.adminMenu .outline{
  /* padding : 14px 16px;  */
  border: 1px solid #b6dbe9 ;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-position: 100%;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, transparent 50%, lightgrey 50%);
  margin-top : 10px;
}

.adminMenu .outline:hover {
  background-position: 0%;
}

.adminMenu .regularButton{
  font-size: 1rem;
  margin-top : 10px;
  padding : 10px 16px;
}

.adminMenu .outline:hover, .adminMenu .regularButton:hover {
  background-color: lightgrey;
  animation: pulseBackground .8s ease infinite;  /* Add animation */
}
.adminMenu .outline:focus, .adminMenu .regularButton:focus{
  border: 1px solid orange !important;
}


@keyframes pulseBackground {
  0% {
      background-color: transparent;
  }
  50% {
      background-color: lightgrey;
  }
  100% {
      background-color: transparent;
  }
}

.meter {
    box-sizing: content-box;
    height: 20px; /* Can be anything */
    position: relative;
    display: flex;
    /* background: #555; */
    background: #eee;
    border-radius: 25px;
    padding: 10px;
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  }
  .meter > span {
    /* display: block; */
    display: inline-block;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43, 194, 83);
    background-image: linear-gradient(
      center bottom,
      rgb(43, 194, 83) 37%,
      rgb(84, 240, 84) 69%
    );
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
      inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
  }
  .meter > span:after,
  .animate > span > span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
    );
    z-index: 1;
    background-size: 50px 50px;
    animation: move 2s linear infinite;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
  }
  
  .animate > span:after {
    display: none;
  }
  
  @keyframes move {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 50px 50px;
    }
  }

#welcomePage .active{
    margin: 20px;
    padding : 20px;
    margin-bottom: 20px;
    transform : scale(1.05)
  }
  #welcomePage .active .title{
      font-size : 1.5rem;
      font-weight : bolder;
       margin-left : 10px;
  }
  #welcomePage :not(.active) .title{
    font-size : 1.5rem;
    /* font-weight : bolder; */
     margin-left : 10px;
}
  #welcomePage .stripeLogo{
    position : absolute;
     right : 0px; 
     top : 0px; 
  }
  #welcomePage .active a{
    color : black;
    text-decoration: none;
    transition: .3s;
  }
  #welcomePage .active a:hover{
    text-decoration: initial;
    color : green;
    border-bottom: 1px solid green;
  }
  #welcomePage a{
    color : black;
    text-decoration: none;
  }
   .active .wrapperText{
    margin : 50px
  }
  #welcomePage .headerLine{
     display : flex;
     align-items : center;
  }
  #welcomePage .active p{
    margin : 0;
    /* color : red; */
    font-weight: bolder;
    color : rgb(73, 68, 68);
    font-size: 130%;
  }
  #welcomePage .stripeTipSection {
    display : flex;
     justify-content : flex-end
  }
  #welcomePage .section p {
    margin : 0;
    font-size: 130%;
  }
  .bounce{
    animation: bounce; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1s; /* don't forget to set a duration! */
    font-size: 200%;
    font-weight: bolder;
  }
  .slide{
      /* opacity: 0; */
      animation : animate__zoomIn;
      animation-duration: .5s;
      font-size: 150%;
      /* animation-delay: 1.5s; */
  }
  .infoBox{
      padding : 10px;
      font-size: 100;
      background: skyblue;
      border-radius: 10px;
      line-height: 1;
  }

  @media screen and (max-width : 900px) {
    
    .active .wrapperText{
      margin : 10px
    }
    #welcomePage .active .wrapperText p{
      margin-bottom : 10px;
      /* color : red; */
    }
  
    #welcomePage .headerLine{
      display : block;
   }
   #welcomePage .stripeTipSection {
    display : block;
    text-align: center;
     margin-top: 30px;
  }
}

/* progressBar */

@keyframes barberpole{
    100%{
        background-position: -100% 100%;
    }
}
.progress {
    display: flex;
    gap : 5px;
    margin : 10px;
}
      
.progress > div{
    width : 33%;
    height : 40px;
    line-height: 20px;
    border : 1px solid grey;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.gradientAnimate {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    /* border-radius: 10px; */
    z-index: 2;
    position: absolute;
    top : 0;
    left:0;
    bottom: 0;
    right: 40%;
    /* width : 200px; */
    background: repeating-linear-gradient(
    45deg,
    #60b6bc,
    #60b6bc 10px,
    skyblue 10px,
    skyblue 20px
    );
    background-size: 200% 200%;
    animation: barberpole 7s linear infinite;
}


.gradientBackgroundLeftStraight {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    /* border-radius: 10px; */
    z-index: 1;
    position: absolute;
    top : 0;
    left:0;
    bottom: 0;
    right: 0px;
    /* width : 200px; */
    background: repeating-linear-gradient(
    45deg,
    rgba(53, 70, 150, 0.2),
    rgba(53, 70, 150, 0.2) 10px,
    rgba(50, 122, 190, 0.2) 10px,
    rgba(53, 50, 190, 0.2) 20px
    )
}
.gradientAnimateMidStraight{
    z-index: 2;
    position: absolute;
    top : 0;
    left:0;
    bottom: 0;
    right: 40%;
    /* width : 200px; */
    background: repeating-linear-gradient(
    45deg,
    #60b6bc,
    #60b6bc 10px,
    skyblue 10px,
    skyblue 20px
    );
    background-size: 200% 200%;
    animation: barberpole 7s linear infinite;
}
.gradientAnimateRight{
    z-index: 2;
    position: absolute;
    top : 0;
    left:0;
    bottom: 0;
    right: 40%;
    /* width : 200px; */
    background: repeating-linear-gradient(
    45deg,
    #60b6bc,
    #60b6bc 10px,
    skyblue 10px,
    skyblue 20px
    );
    background-size: 200% 200%;
    animation: barberpole 7s linear infinite;
}
.box1{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.progress > div >p {
    margin : 0;
    font-weight: bolder;
    background : #6124db;
    padding : 0px 5px;
    color : white;
    text-transform: uppercase;
    z-index: 5;
    letter-spacing: 1px;
}
.gradientBackgroundStraight{
    position: absolute;
    top : 0;
    left:0;
    bottom: 0;
    right: 0px;
    /* width : 200px; */
    background: repeating-linear-gradient(
    45deg,
    rgba(53, 70, 150, 0.2),
    rgba(53, 70, 150, 0.2) 10px,
    rgba(50, 122, 190, 0.2) 10px,
    rgba(53, 50, 190, 0.2) 20px
    )
}
.gradientBackgroundStraightRight{
    position: absolute;
    top : 0;
    left:0;
    bottom: 0;
    right: 0px;
    /* width : 200px; */
    background: repeating-linear-gradient(
    45deg,
    rgba(53, 70, 150, 0.2),
    rgba(53, 70, 150, 0.2) 10px,
    rgba(50, 122, 190, 0.2) 10px,
    rgba(53, 50, 190, 0.2) 20px
    );
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.box3{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
  
  .number-input {
    border: 2px solid #ddd;
    display: inline-flex;
  }
  
  .number-input,
  .number-input * {
    box-sizing: border-box;
  }
  
  .number-input button {
    outline:none;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    margin: 0;
    position: relative;
  }
  
  .number-input button:after {
    display: inline-block;
    position: absolute;
    /* font-family: "Font Awesome 5 Free";  */
    font-weight: 900;
    /* content: '\f077'; */
    transform: translate(-50%, -50%) rotate(180deg);
  }
  .number-input button.plus:after {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  
  .number-input input[type=number] {
    font-family: sans-serif;
    max-width: 5rem;
    padding: .5rem;
    border: solid #ddd;
    border-width: 0 2px;
    font-size: 2rem;
    height: 3rem;
    font-weight: bold;
    text-align: center;
  }
  
.groupGrid{
    display: grid;
    gap : 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.featured-product-unavailable{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.product-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}   
.product-image{
    width: 100px;
    height: 100px;
    object-fit: cover;
}
/* NavBar/elegantHeader.css */

/* --- Theme Definitions --- */
/* To use a theme, add its class to the `elegant-header-container` div */

/* 1. Black and Gold Theme */
.theme-black-and-gold {
    --bg-container: #1A1A1A;
    --color-text-primary: #FFFFFF;
    --font-primary: 'Montserrat', sans-serif;
    --bg-top-bar: #0D0D0D;
    --color-top-bar-text: #CCCCCC;
    --border-top-bar: 1px solid #D4AF37;
    --color-top-bar-phone: #D4AF37;
    --color-logo: #D4AF37;
    --color-nav-link: #FFFFFF;
    --border-nav-link-hover: #D4AF37;
    --bg-mega-menu: #1A1A1A;
    --border-mega-menu-top: 3px solid #D4AF37;
    --color-mega-menu-item: #FFFFFF;
    --border-mega-menu-item-top: 1px solid #333333;
    --bg-mega-menu-item-hover: #D4AF37;
    --color-mega-menu-item-hover: #1A1A1A;
    --bg-mobile-nav-link-hover: #D4AF37;
    --color-mobile-nav-link-hover: #FFFFFF;
}

/* 2. Modern Minimalist Theme */
.theme-modern-minimalist {
    --bg-container: #FFFFFF;
    --color-text-primary: #222222;
    --font-primary: 'Inter', sans-serif;
    --bg-top-bar: #F8F8F8;
    --color-top-bar-text: #555555;
    --border-top-bar: 1px solid #EAEAEA;
    --color-top-bar-phone: #007AFF;
    --color-logo: #111111;
    --color-nav-link: #333333;
    --border-nav-link-hover: #007AFF;
    --bg-mega-menu: #FFFFFF;
    --border-mega-menu-top: 3px solid #007AFF;
    --color-mega-menu-item: #222222;
    --border-mega-menu-item-top: 1px solid #EAEAEA;
    --bg-mega-menu-item-hover: #F0F0F0;
    --color-mega-menu-item-hover: #007AFF;
    --bg-mobile-nav-link-hover: #F0F0F0;
    --color-mobile-nav-link-hover: #007AFF;
}

/* 3. Classic Luxury Theme */
.theme-classic-luxury {
    --bg-container: #FDF6E3;
    --color-text-primary: #583E26;
    --font-primary: 'Playfair Display', serif;
    --bg-top-bar: #002347;
    --color-top-bar-text: #FFFFFF;
    --border-top-bar: 1px solid #D8C7A3;
    --color-top-bar-phone: #D8C7A3;
    --color-logo: #002347;
    --color-nav-link: #583E26;
    --border-nav-link-hover: #002347;
    --bg-mega-menu: #FFFFFF;
    --border-mega-menu-top: 3px solid #002347;
    --color-mega-menu-item: #583E26;
    --border-mega-menu-item-top: 1px solid #F0E6D2;
    --bg-mega-menu-item-hover: #E9E0D0;
    --color-mega-menu-item-hover: #002347;
    --bg-mobile-nav-link-hover: #E9E0D0;
    --color-mobile-nav-link-hover: #002347;
}

/* 4. Ocean Breeze Theme */
.theme-ocean-breeze {
    --bg-container: #F0F8FF;
    --color-text-primary: #005A9C;
    --font-primary: 'Poppins', sans-serif;
    --bg-top-bar: #B3E5FC;
    --color-top-bar-text: #01579B;
    --border-top-bar: 1px solid #81D4FA;
    --color-top-bar-phone: #0277BD;
    --color-logo: #005A9C;
    --color-nav-link: #005A9C;
    --border-nav-link-hover: #4FC3F7;
    --bg-mega-menu: #FFFFFF;
    --border-mega-menu-top: 3px solid #4FC3F7;
    --color-mega-menu-item: #005A9C;
    --border-mega-menu-item-top: 1px solid #E1F5FE;
    --bg-mega-menu-item-hover: #E0F2FF;
    --color-mega-menu-item-hover: #005A9C;
    --bg-mobile-nav-link-hover: #E0F2FF;
    --color-mobile-nav-link-hover: #005A9C;
}

/* 5. Rustic Charm Theme */
.theme-rustic-charm {
    --bg-container: #F5F5DC;
    --color-text-primary: #6B4F4B;
    --font-primary: 'Merriweather', serif;
    --bg-top-bar: #8B4513;
    --color-top-bar-text: #FFFFFF;
    --border-top-bar: 1px solid #CD853F;
    --color-top-bar-phone: #FFFFFF;
    --color-logo: #6B4F4B;
    --color-nav-link: #6B4F4B;
    --border-nav-link-hover: #8B4513;
    --bg-mega-menu: #FDF5E6;
    --border-mega-menu-top: 3px solid #8B4513;
    --color-mega-menu-item: #6B4F4B;
    --border-mega-menu-item-top: 1px solid #F5DEB3;
    --bg-mega-menu-item-hover: #F0E9D1;
    --color-mega-menu-item-hover: #8B4513;
    --bg-mobile-nav-link-hover: #F0E9D1;
    --color-mobile-nav-link-hover: #8B4513;
}


/* --- Base Styles using CSS Variables --- */

.elegant-header-container {
    font-family: var(--font-primary, 'Montserrat', sans-serif);
    background-color: var(--bg-container, #fff);
    color: var(--color-text-primary, #222);
}

.elegant-header {
    width: 100%;
    /* max-width: 1400px; */
    margin: 0 auto;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background-color: var(--bg-top-bar, #f9f9f9);
    font-size: 14px;
    color: var(--color-top-bar-text, #555);
    border-bottom: var(--border-top-bar, 1px solid #eee);
}

.top-bar-text {
    font-style: italic;
}

.top-bar-phone {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-top-bar-phone, #555);
    font-weight: 500;
}

.top-bar-phone .MuiSvgIcon-root {
    margin-right: 8px;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo-image {
    max-height: 100px;
    display: block;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-logo, #222);
    text-decoration: none;
    letter-spacing: 1px;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-nav li {
    position: relative;
    margin-left: 35px;
}

.main-nav li.has-dropdown {
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: var(--color-nav-link, #333);
    font-weight: 500;
    padding: 15px 0;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
    border-bottom: 2px solid transparent;
}

.nav-link:hover {
    color: var(--border-nav-link-hover, #a27e66); 
    border-bottom: 2px solid var(--border-nav-link-hover, #a27e66);
}

.nav-link .MuiSvgIcon-root {
    margin-left: 4px;
    transition: transform 0.3s ease;
}

/* Nav link with image styling */
.nav-link-with-image {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.nav-link-image {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

li.has-dropdown.open > .nav-link .MuiSvgIcon-root {
    transform: rotate(180deg);
}

/* Mega Menu */
.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0; /* Default: align to right edge for nav items on the right */
    left: auto;
    background-color: var(--bg-mega-menu, #fff);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-radius: 0 0 8px 8px;
    padding: 20px 25px 25px;
    width: max-content;
    max-width: calc(100vw - 40px);
    min-width: 400px;
    margin-top: 0;
    z-index: 1000;
    border-top: var(--border-mega-menu-top, 3px solid #a27e66);
}

/* Connecting arrow pointing up to nav link - default right position */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 20px;
    left: auto;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--border-mega-menu-top, #a27e66);
}

/* Inner arrow for background color - default right position */
.mega-menu::after {
    content: '';
    position: absolute;
    top: -5px;
    right: 22px;
    left: auto;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--bg-mega-menu, #fff);
}

/* Left-align mega menu for first 3 items, BUT ONLY when there are 5+ total items */
/* This prevents left-aligning when there are few items (all on the right side) */

/* 1st item: left-align only if there are 5+ items (it's at least 5th from end) */
.main-nav li:nth-child(1):nth-last-child(n+5) .mega-menu,
/* 2nd item: left-align only if there are 5+ items (it's at least 4th from end) */
.main-nav li:nth-child(2):nth-last-child(n+4) .mega-menu,
/* 3rd item: left-align only if there are 5+ items (it's at least 3rd from end) */
.main-nav li:nth-child(3):nth-last-child(n+3) .mega-menu {
    left: 0;
    right: auto;
}

/* Move arrow to left side for first 3 items (when 5+ items exist) */
.main-nav li:nth-child(1):nth-last-child(n+5) .mega-menu::before,
.main-nav li:nth-child(2):nth-last-child(n+4) .mega-menu::before,
.main-nav li:nth-child(3):nth-last-child(n+3) .mega-menu::before {
    left: 20px;
    right: auto;
}

.main-nav li:nth-child(1):nth-last-child(n+5) .mega-menu::after,
.main-nav li:nth-child(2):nth-last-child(n+4) .mega-menu::after,
.main-nav li:nth-child(3):nth-last-child(n+3) .mega-menu::after {
    left: 22px;
    right: auto;
}

li.has-dropdown.open .mega-menu {
    display: block;
}

/* Keep dropdown nav link highlighted when open */
li.has-dropdown.open > .nav-link {
    color: var(--border-nav-link-hover, #a27e66);
    border-bottom: 2px solid var(--border-nav-link-hover, #a27e66);
}

.mega-menu.has-images .mega-menu-image-container {
    padding-top: 75%; /* 4:3 aspect ratio */
}

.mega-menu-item {
    display: flex; /* Changed to flex */
    flex-direction: column; /* Align items vertically */
    justify-content: space-between; /* Pushes content to top and bottom */
    height: 100%; /* Ensure all items take full height */
    text-decoration: none;
    color: var(--color-mega-menu-item, #333);
    padding: 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
    border-top: var(--border-mega-menu-item-top);
}

.mega-menu-item:hover {
    background-color: var(--bg-mega-menu-item-hover);
    color: var(--color-mega-menu-item-hover);
}

.mega-menu-image-container {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 4px;
    background-color: #f0f0f0;
}

.mega-menu-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mega-menu-item:hover .mega-menu-image {
    transform: scale(1.05);
}

.mega-menu-item-name {
    font-weight: 500;
}

@media (max-width: 992px) {
    .top-bar {
        flex-direction: column;
        text-align: center;
        padding: 10px 15px;
    }

    .top-bar-phone {
        margin-top: 8px;
    }

    .main-header {
        padding: 15px;
        flex-wrap: wrap; 
        justify-content: space-between;
    }

    .logo {
        flex-grow: 1; 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-nav {
        display: block; 
        order: 3; 
        width: 100%;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid var(--border-top-bar);
    }
    
    .main-nav ul {
        flex-direction: column; 
        align-items: center;
        padding: 0;
        width: 100%;
    }

    .main-nav li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid var(--border-top-bar);
    }

    .main-nav li:last-child {
        border-bottom: none;
    }
    
    .nav-link {
        justify-content: center;
        padding: 15px;
        width: 100%;
    }

    .nav-link:hover {
        background-color: var(--bg-mobile-nav-link-hover);
        color: var(--color-mobile-nav-link-hover);
        border-bottom: none; 
    }
    
    .mega-menu {
        position: relative;
        display: none;
        width: 100%;
        min-width: 0;
        right: auto;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 10px 0;
        background-color: var(--bg-mega-menu);
        border-bottom: 1px solid var(--border-top-bar);
    }

    /* Hide arrow on mobile */
    .mega-menu::before,
    .mega-menu::after {
        display: none;
    }

    .mega-menu-item {
        text-align: center;
        padding: 12px 20px;
        border-top: 1px solid var(--border-mega-menu-item-top);
    }

    .mega-menu-image-container {
        display: block; /* Overriding display:none for mobile */
        max-height: 200px;
    }

    .mega-menu.has-images .mega-menu-image-container {
        padding-top: 75%; /* 4:3 aspect ratio */
    }

    .mega-menu-image {
        object-fit: contain;
    }
} 

/* --- Theme Button Styles --- */
.theme-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.theme-button {
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    width: 150px;
    text-align: center;
}

.theme-button.selected {
    border-color: #007aff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.theme-button:hover {
    border-color: #007aff;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.theme-preview {
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background-color: var(--bg-container);
    border: 1px solid rgba(0,0,0,0.1);
}

.preview-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--bg-container);
}

.preview-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    background-color: var(--bg-top-bar);
    border-bottom: 2px solid var(--border-top-bar);
}

.preview-main-header {
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: calc(100% - 15px);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-logo {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background-color: var(--color-logo);
}

.preview-nav-links {
    display: flex;
    gap: 5px;
}

.preview-nav-links span {
    width: 25px;
    height: 4px;
    background-color: var(--color-nav-link);
    border-radius: 2px;
}

.theme-label {
    margin-top: 10px;
    font-weight: 600;
    display: block;
    color: #333;
} 
.hoverRed{
    background: red !important;
}
/* CSS variables. */
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: currentColor;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
	/* This is done to stretch the contents of this component. */
	display: flex;
	align-items: center;
}

.PhoneInputInput {
	/* The phone number input stretches to fill all empty space */
	flex: 1;
	/* The phone number input should shrink
	   to make room for the extension input */
	min-width: 0;
}

.PhoneInputCountryIcon {
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: var(--PhoneInputCountrySelectArrow-width);
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.buttonGrid{
    display: grid;
    gap : 10px;
    grid-template-columns: repeat(auto-fill, minmax(250px, auto));
    /* grid-template-rows: 70px 70px; */
}
.buttonWrapper{
    position: relative;
    animation-duration: translate 5s;
    transition: all .5s;
    cursor: pointer;
}
.buttonWrapper:hover{
    transform: scale(1.03);
    box-shadow: 2px 2px 0 rgba(0,0,0.5);
}
svg{
    height: 100%;
}

.buttonWrapper > div:first-child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
}

.selectedNav{
    position: absolute;
    bottom: 0;
    background: rgba(109, 241, 109, 0.8);
    left: 0;
    right: 0;
    text-align: center;
    color : red;
    font-weight: bold;
}

/* --- Nav Type Button Styles --- */
.nav-type-button-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
}

.nav-type-button {
    border: 3px solid transparent;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    width: 180px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

@media screen and (max-width: 699px) {
    .nav-type-button-container {
        gap: 10px;
        padding: 10px;
    }
    .nav-type-button {
        width: calc(33.33% - 10px);
        min-width: 90px;
        padding: 8px 4px;
    }
    .nav-type-preview {
        height: 40px;
        margin-bottom: 5px;
    }
    .nav-type-label {
        font-size: 12px;
    }
}

.nav-type-button.selected {
    border-color: #007aff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.nav-type-preview {
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background-color: #e9ecef;
    margin-bottom: 10px;
}

.preview-bar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-bar.plain {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.preview-bar.bounceHouse {
    background-color: #e0f7fa;
}

.fun-pattern {
    width: 80%;
    height: 80%;
    background-image:
        linear-gradient(45deg, #f06, #9f6, #06f, #f06);
    opacity: 0.5;
    border-radius: 4px;
}

.preview-bar.elegant {
    background-color: #2d3436;
}

.elegant-accent {
    width: 90%;
    height: 8px;
    background-color: #dfe6e9;
    border-radius: 4px;
    position: relative;
}

.elegant-accent::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 20%;
    width: 60%;
    height: 4px;
    background-color: #dfe6e9;
    border-radius: 2px;
}

.nav-type-label {
    font-weight: 600;
    color: #333;
}

.colorBoxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
}

.color-box:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.color-box.selected {
    border-color: #007aff;
    box-shadow: 0 0 0 3px #007aff, 0 4px 12px rgba(0,0,0,0.2);
    transform: scale(1.1);
}

.color-box.selected::after {
    content: '\2714';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
figure{
    width : 100%;
    margin: 0;
    position: relative;
}
figure figcaption{
    position : absolute;
    top : 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background : rgba(0 ,0,0 ,0.6);
    color : white;
    padding : 1% 4%;
    width : 90%;
    /* font-size: 300%; */
    font-size: clamp(20px, 4vw, 35px);;
    font-weight: bolder;
}
video{
   max-width: 100%;
}
.sliderTest img{
    /* height: 100%; */
}
.linkDecWrapper{
    /* outline : 5px solid purple; */
    /* outline-width: 5px;
    outline-style: solid; */
    padding : 10px;
    /* margin : 10px; */
    text-align: center;
    font-size: clamp(20px, 4vw, 35px);
    display: block;
    text-decoration:  none;
    color : black;
    height: 100%;
}
.textForImage{
    background : maroon;
    padding : 10px;
    color : white;
    font-size: clamp(20px, 4vw, 35px);
}
.homePage [data-rbd-draggable-context-id]{
    height : 100%
}
.stepperWrapper{
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin : 0 auto;
    /* width: 90%; */
    place-items: center;
    /* justify-content: center; */
    /* align-items: center; */
    /* justify-items: center; */
}

@media (max-width: 768px) {
    .stepperWrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
    }
    
    .depositSide {
        order: -1;
        width: 100% !important;
    }
}
/* .depositSide{
    padding : 50px;
} */
.productWrapper{
    background: linear-gradient(180deg, #ffffff, #f7f7f7);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 8px;
    border: 1px solid #e0e0e0;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.productWrapper img {
    height: 180px;
    object-fit: cover;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.titleVariant{
    font-size: 1rem;
    color: #2d3748;
    margin: 0;
    padding: 0;
    font-weight: 600;
    line-height: 1.2;
    /* overflow: hidden;
    text-overflow: ellipsis; */
    /* white-space: nowrap; */
    text-align: center;
}

.btn-3d {
    position: relative;
    display: inline-block;
    padding: 10px 30px;
    border: none;
    border-radius: 8px;
    background-color: #4d4dff;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
  }
  
  .btn-3d:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: inherit;
    z-index: -1;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .btn-3d:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  
  .btn-3d:hover:before {
    transform: translateY(3px);
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
  }
.content-table{
    font-size: 0.85rem;
    width: 100%;
    margin: 2px 0;
}
.content-table th, td{
    border : 1px solid purple;
}
th{
    width : 50%; 
}
tbody td{
    padding : 4px;
}
.MuiStepper-horizontal{
    border-bottom: 1px solid blue !important;
    background-color: #bae8e8 !important;
}

.productGrid{
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    max-width: 100%;
    overflow-x: auto;
    gap: 10px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
    }
}
.productCard{
    border : 1px solid green;
    border-radius: 10px;
    height: 100%;
    display: grid;
    /* display: block; */
}


.productCard .rentMeButton {
    align-self: flex-end;
    width: 90%;
    margin-bottom: 10px;
    margin: 0 auto 10px auto;
}

.multiProductCard {
    height: 150px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    overflow: hidden;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.multiProductCard img {
    height: 100%;
    width: 150px;
    object-fit: cover;
}

.multiProductCard > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
}

.multiProductCard > div > div:first-child {
    font-size: 18px;
    font-weight: bold;
}

.goToPageButton{
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.goToPageButton:hover {
    background-color: #45a049;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

.goToPageButton:active {
    background-color: #3e8e41;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transform: translateY(1px);
}
.animated-total {
    display: inline-block;
    font-weight: bold;
  }
  
  /* Optional: Add custom animation styles */
  .animate__flash {
    animation-duration: 0.5s !important; /* Make animation faster */
  }

  .btn-deselect {
    background-color: #ff6b6b !important; /* Reddish color */
    color: white !important;
}

.btn-deselect:hover {
    background-color: #ff5252 !important; /* Darker red on hover */
}

.cart-actions {
    margin: 0;
    padding: 0;
    min-height: 20px;
}
.cartActionWrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
}
.cartActionWrapper button{
    padding: 6px 12px;
    font-size: 0.85rem;
}
.sigCanvas{
    background: white;
    width: 90%;
    /* margin: 0 auto; */
    /* text-align: center; */
    height : 200px;
}

/* simProducts */
.simWrapper {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 16px 0;
    scroll-behavior: smooth;
}

.simWrapper::-webkit-scrollbar {
    height: 8px;
}

.simWrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.simWrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.simWrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.simWrapper .card {
    flex: 0 0 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.simWrapper .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.simWrapper .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.simWrapper .card-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.simWrapper .card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
    line-height: 1.4;
}

.simWrapper .card-button {
    margin-top: auto;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .simWrapper {
        padding: 12px 0;
        gap: 12px;
    }
    
    .simWrapper .card {
        flex: 0 0 240px;
    }
    
    .simWrapper .card-image {
        height: 160px;
    }
    
    .simWrapper .card-content {
        padding: 12px;
    }
    
    .simWrapper .card-title {
        font-size: 14px;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .simWrapper .card {
        flex: 0 0 200px;
    }
    
    .simWrapper .card-image {
        height: 140px;
    }
}
.gridThree{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 250px;
}
.gridThree > div{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.MuiDropzoneArea-root{
    min-height: auto !important;
}

/*3 images*/

*{
    box-sizing: border-box;
}
.threeImageWrapper{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* grid-template-rows: repeat(4, 1fr); */
  /* grid-auto-rows: 50px; */
}
.card > *{
   
}
.image{
    background: yellow;
    width : 100%;
    /* height: 400px; */
   grid-column: 1/-1;
     grid-row: 1/4;
   /* height: 400px; */
   height : 25vw;
   object-fit: cover;
    /* height: clamp(550px, 55vh, 700px); */
    /* grid-column: 1/-1;
    grid-row: 1/3; */
}
.threeImageWrapper img{
    max-width: none;
}
.centered{
    grid-column: 3/6;
    grid-row: 2/5;
    display: grid;
    place-items: center;
    /* width: 100%; */
    
}
.wrapper{
    display : grid;
    /* width : 50%; */
    grid-template-columns: min-content min-content;
}

.wrapper > img{
    border : 10px double #9df9ef;
    outline: 1px solid gold;
    border-radius: 30%;
outline-offset: -26px;
object-fit: cover;
}
.left{
    width : clamp(130px, 19vw, 400px); 
    height : clamp(130px, 20vw, 450px); 
    /* width : 80px; */
    /* background : red; */
    position : relative;
    right: -19px;
    box-shadow: -10px 10px 20px rgba(0,0,0,0.5);
}
.right{
    width : clamp(100px, 15vw, 300px);
    height: clamp(100px, 15vw, 300px);
    /* background: green; */
    align-self: center;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    display: block;
}
.pt-sans-narrow-regular {
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pt-sans-narrow-bold {
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 700;
  font-style: normal;
}


.stripeBg{
    background: lightGrey;
     background: repeating-linear-gradient( 45deg, #ddd, #ddd 10px, #eee 10px,#eee 20px);
     font-weight: bolder;
}
/* #galleryContainer{
    display: inline-flex;
} */
/* #galleryTop{
    display: inline-flex;

} */
/* #galleryBottom{
    display: inline-flex;
}
.gallaryWrapper > div{
    display : inline-flex !important;
} */
/* #ReactGridGallery{
    display : inline-flex !important;
} */
/* .gallaryWrapper > div{
    display : inline-flex !important;
} */

.stripe{
    background-image: linear-gradient(133deg, #e4f2e6 25%, #dae3e8 25%, #dae3e8 50%, #e4f2e6 50%, #e4f2e6 75%, #dae3e8 75%, #dae3e8 100%);
background-size: 54.69px 58.65px;
}

#ReactGridGallery > div{
    display : inline-flex !important;
}
.phoneButton{
    /* background : green; */
    padding : 10px;
    border-radius: 10px;
    display: flex;
    width: max-content;
    align-items: center;
    color : white;
    font-weight: bolder;
    font-size: 120%;
    
    
}
a.phoneButton  {
    text-decoration: none;
}

.btn-1 {
    background: rgb(6,14,131);
    background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
    border: none;
  }
  .btn-1:hover {
     background: rgb(0,3,255);
  background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
  }
/* #ReactGridGallery{
   width: 50%; // or whatever you want
    margin: 0 auto;
  } */
  .navButtons{
    display: grid;
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    color : black !important;
    gap : 10px;
    padding : 10px;
    margin : 10px;
    /* width : 80%;
    margin : 0 auto; */
    background-color: grey;
    background-color: #CADFF9;
  }
  .shape{
    justify-self: flex-end;;
    /* background: lightgrey; */
    /* padding : 10px; */
  }

  div.shape {
    background: lightblue;
    font-size: 80%;
	/* border-top: 50px solid lightgrey;
	border-left: 50px solid lightgray;
	border-right: 50px solid transparent;
	width: 100%; */
  /* position: relative; */
  display: grid;
  place-items: center;
  width: 100%;
  clip-path: polygon(0 0, 110% 0, 90% 100%, 0 100%);
  /* border: 3px solid aqua; */
  /* box-shadow: inset 10px 10px 10px rgb(10, 182, 195), inset -10px -10px 10px rgb(10, 182, 195); */
}

div.shape:before {
  content:"Complete these 3 steps";
  font-size: 200%;
  font-weight: bolder;
}

  .here {
      background-color: #A39582;
      color: black;
      width: 100%;
      position: relative;
      top : 10px;
  }

  .navButtons button {
      padding: 0;
      border: none;
      outline: none;
      font: inherit;
      color: inherit;
      background: none;
      padding: 0px 10px;
      background-color: white;
      border: 1px solid grey;
      border-radius: 10px;


  }
.navButtons .completed{
    background-color: #09d396;
    color : black;
    display : grid;
    grid-template-columns: 30px 1fr 30px;
    align-items: center;
    border-radius: 10px;
}
  .navButtons .gradientAnimateCreate {
      /* --grad-color : #FCD4D2; */
      --grad-color : rgb(155, 244, 155);
      /* --grad-color : rgba(53,135,83, 0.2); */
      background-color: lightgreen;
      background-image:
          linear-gradient(-135deg,
              var(--grad-color) 25%,
              transparent 25%,
              transparent 50%,
              var(--grad-color) 50%,
              var(--grad-color) 75%,
              transparent 75%,
              transparent);

      background-size: 50px 50px;
      animation: progress 1s linear infinite;
      /* font-weight: bolder; */
  }
  .navButtons .gradientAnimateCreate .tabName{
font-weight: bolder;
font-size: 110%;
letter-spacing: 2px;
/* cursor: pointer; */
/* color : red; */
}
[buttonname]{
  cursor: pointer;
}
[buttonname]:hover{
  background-color: rgb(239, 244, 239);
}

  .navButtons .notHitYet{
    /* border : 1px solid grey; */
    /* border-radius: 10px; */
  }
  /* .numberCircle {
    width : 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 20px;
    border: 2px solid white;
    background: #3911E5;
    color: white;
} */

.numberCircle {
  color: #666;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em; 
  height: 2em;
}


  @keyframes progress{
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 50px 0px;
    }
  } 


  .bhGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }


  .arrowBg {
    filter: drop-shadow(1px 0px 0px black)
            drop-shadow(-1px 0px 0px black)
            drop-shadow(0px 1px 0px black)
            drop-shadow(0px -1px 0px black)
            drop-shadow(1px 1px 0px black)
            drop-shadow(-1px -1px 0px black)
            drop-shadow(-1px 1px 0px black)
            drop-shadow(1px -1px 0px black);
  }
  .arrow {
    background: #FFFF00;
    margin:20px;
    font-family: sans-serif;
    font-size:20px;
  }
  .arrowLeft {
    padding: 20px 20px 20px 40px;
    clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 40px 100%, 0 50%);
  }
  .arrowRight{
    padding: 20px 40px 20px 20px;
    clip-path: polygon(calc(100% - 40px) 0%, 0 0, 0 100%, calc(100% - 40px) 100%, 100% 50%);
  }
.button:focus {
  outline-color: transparent;
  outline-style:solid;
  box-shadow: 0 0 0 4px #5a01a7;
}
.button:hover {
  background-color: lightcyan;
  transition: 0.7s;
}
.button{

  color: black;
  border:none; 
  border-radius:10px; 
  padding:15px;
  min-height:30px; 
  min-width: 120px;
}
.button.active{
  background-color:lime;
}
.priceFormatGrid{
    display: grid;
    gap : 10px;
    grid-template-columns: 1fr 1fr;
}
.cardOuter{
    padding: 10px;
}
.cardInner{
    background:#F8F9FB;
    border : 1px solid lightgrey;
    height: 150px;
    display: grid;
    place-items: center;
    padding : 10px;
    /* display: grid;
    justify-content: space-between; */
}
.cardOuter input{
    width: 50px;
}
.priceRow{
    display: flex;
    justify-content: center;
    align-items: center;
    gap : 10px;
}

.gridAddOns{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.editGridMulti{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap : 10px;
}
.image-gallery-icon{color:#fff;transition:all .3s ease-out;appearance:none;background-color:transparent;border:0;cursor:pointer;outline:none;position:absolute;z-index:4;filter:drop-shadow(0 2px 2px #1a1a1a)}@media(hover: hover)and (pointer: fine){.image-gallery-icon:hover{color:#337ab7}.image-gallery-icon:hover .image-gallery-svg{transform:scale(1.1)}}.image-gallery-icon:focus{outline:2px solid #337ab7}.image-gallery-using-mouse .image-gallery-icon:focus{outline:none}.image-gallery-fullscreen-button,.image-gallery-play-button{bottom:0;padding:20px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:28px;width:28px}@media(max-width: 768px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:15px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:24px;width:24px}}@media(max-width: 480px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:10px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:16px;width:16px}}.image-gallery-fullscreen-button{right:0}.image-gallery-play-button{left:0}.image-gallery-left-nav,.image-gallery-right-nav{padding:50px 10px;top:50%;transform:translateY(-50%)}.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:120px;width:60px}@media(max-width: 768px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:72px;width:36px}}@media(max-width: 480px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:48px;width:24px}}.image-gallery-left-nav[disabled],.image-gallery-right-nav[disabled]{cursor:disabled;opacity:.6;pointer-events:none}.image-gallery-left-nav{left:0}.image-gallery-right-nav{right:0}.image-gallery{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.image-gallery.fullscreen-modal{background:#000;bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:5}.image-gallery.fullscreen-modal .image-gallery-content{top:50%;transform:translateY(-50%)}.image-gallery-content{position:relative;line-height:0;top:0}.image-gallery-content.fullscreen{background:#000}.image-gallery-content .image-gallery-slide .image-gallery-image{max-height:calc(100vh - 80px)}.image-gallery-content.image-gallery-thumbnails-left .image-gallery-slide .image-gallery-image,.image-gallery-content.image-gallery-thumbnails-right .image-gallery-slide .image-gallery-image{max-height:100vh}.image-gallery-slide-wrapper{position:relative}.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{display:inline-block;width:calc(100% - 110px)}@media(max-width: 768px){.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{width:calc(100% - 87px)}}.image-gallery-slide-wrapper.image-gallery-rtl{direction:rtl}.image-gallery-slides{line-height:0;overflow:hidden;position:relative;white-space:nowrap;text-align:center}.image-gallery-slide{left:0;position:absolute;top:0;width:100%}.image-gallery-slide.image-gallery-center{position:relative}.image-gallery-slide .image-gallery-image{width:100%;object-fit:contain}.image-gallery-slide .image-gallery-description{background:rgba(0,0,0,.4);bottom:70px;color:#fff;left:0;line-height:1;padding:10px 20px;position:absolute;white-space:normal}@media(max-width: 768px){.image-gallery-slide .image-gallery-description{bottom:45px;font-size:.8em;padding:8px 15px}}.image-gallery-bullets{bottom:20px;left:0;margin:0 auto;position:absolute;right:0;width:80%;z-index:4}.image-gallery-bullets .image-gallery-bullets-container{margin:0;padding:0;text-align:center}.image-gallery-bullets .image-gallery-bullet{appearance:none;background-color:transparent;border:1px solid #fff;border-radius:50%;box-shadow:0 2px 2px #1a1a1a;cursor:pointer;display:inline-block;margin:0 5px;outline:none;padding:5px;transition:all .2s ease-out}@media(max-width: 768px){.image-gallery-bullets .image-gallery-bullet{margin:0 3px;padding:3px}}@media(max-width: 480px){.image-gallery-bullets .image-gallery-bullet{padding:2.7px}}.image-gallery-bullets .image-gallery-bullet:focus{transform:scale(1.2);background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active{transform:scale(1.2);border:1px solid #fff;background:#fff}@media(hover: hover)and (pointer: fine){.image-gallery-bullets .image-gallery-bullet:hover{background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active:hover{background:#337ab7}}.image-gallery-thumbnails-wrapper{position:relative}.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal{touch-action:pan-y}.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical{touch-action:pan-x}.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl{direction:rtl}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{display:inline-block;vertical-align:top;width:100px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{width:81px}}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails{height:100%;width:100%;left:0;padding:0;position:absolute;top:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail{display:block;margin-right:0;padding:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:0;margin-top:2px}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 5px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 3px}}.image-gallery-thumbnails{overflow:hidden;padding:5px 0}@media(max-width: 768px){.image-gallery-thumbnails{padding:3px 0}}.image-gallery-thumbnails .image-gallery-thumbnails-container{cursor:pointer;text-align:center;white-space:nowrap}.image-gallery-thumbnail{display:inline-block;border:4px solid transparent;transition:border .3s ease-out;width:100px;background:transparent;padding:0}@media(max-width: 768px){.image-gallery-thumbnail{border:3px solid transparent;width:81px}}.image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:2px}.image-gallery-thumbnail .image-gallery-thumbnail-inner{display:block;position:relative}.image-gallery-thumbnail .image-gallery-thumbnail-image{vertical-align:middle;width:100%;line-height:0}.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{outline:none;border:4px solid #337ab7}@media(max-width: 768px){.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{border:3px solid #337ab7}}@media(hover: hover)and (pointer: fine){.image-gallery-thumbnail:hover{outline:none;border:4px solid #337ab7}}@media(hover: hover)and (pointer: fine)and (max-width: 768px){.image-gallery-thumbnail:hover{border:3px solid #337ab7}}.image-gallery-thumbnail-label{box-sizing:border-box;color:#fff;font-size:1em;left:0;line-height:1em;padding:5%;position:absolute;top:50%;text-shadow:0 2px 2px #1a1a1a;transform:translateY(-50%);white-space:normal;width:100%}@media(max-width: 768px){.image-gallery-thumbnail-label{font-size:.8em;line-height:.8em}}.image-gallery-index{background:rgba(0,0,0,.4);color:#fff;line-height:1;padding:10px 20px;position:absolute;right:0;top:0;z-index:4}@media(max-width: 768px){.image-gallery-index{font-size:.8em;padding:5px 10px}}

.gradBox{
    cursor: pointer;
}
.grad-1{
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.grad-2{
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
.grad-3{
    background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
}
.grad-4{
    background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);
}
.grad-5{
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

}
.grad-6{
    background-color: #D9AFD9;
background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);

}
.grad-7{
    background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

}
.grad-8{
    background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);

}
.grad-9{
    background-color: #FF9A8B;
background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);

}
.grad-10{
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}
.grad-11{
    background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
}
.grad-12{
    background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
}

.startTime, .endTime{
    background : green;
    color: aquamarine;
    position:relative
}
.startTime::before{
   position: absolute; 
   bottom : -5px;
   content : "beginning";
   color : white;
}
.endTime::before{
    position: absolute; 
   bottom : -5px;
   content : "End";
   color : white;   
}
.between{
    background : lightgreen;
}
.editActive{
    border : 1px solid green !important;
    background : lightgreen !important;
}
.slotButton{
    cursor: pointer;
}
.slotButton:hover{
    background: #A3ECF0;
    color : black
}
.startTime.slotButton:hover, .endTime.slotButton:hover{
    background : green;
    color : black;
}
.finalSlot{
    border : 1px solid blue;
    border-radius:  10px;
    padding : 5px 10px;
    text-align: center;
    background: white;
    cursor: not-allowed;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.productDropZone{
    background : #bae8e8  !important;
    background: repeating-linear-gradient(45deg, #d0dbd94e , #d0dbd94e  10px, #fff 10px, #fff 20px) !important;
}
.schedulingWrapper{
    display : grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    
}

.schedulingWrapper > div{
    /* border : 1px solid; */
    padding : 10px;
    cursor: pointer;
}
.innerCard{
    position : relative;
    display: grid;
    gap : 2px;
    grid-template-columns: 3fr 1fr;
    border-radius : 10px;
    background: lightcyan;
    outline : 1px solid blue;
    padding : 10px;
    transition: 1s;
}
.schedulingWrapper > div:not(.chosen) .innerCard:hover {
    outline: 5px solid blue;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 0, 255, 0.5);
    transition: all 0.3s ease;
}
.fullLine{
    grid-column: 1/-1;
}
.blueGradient{
    background : #F4FCFF;
    position : sticky;
    top : 0;
    /* z-index: 5; */
    z-index: 20;
    box-shadow: 0 10px 10px 2px rgba(0,0,0,0.2);
    /* margin-bottom: 30px; */
}
.blueGradient h1{
    /* background : linear-gradient(90deg,  #fc00ff, #00dbde); */
    color : #3911E5;
    margin-bottom: .1em;
}
.blueGradient > div{
   margin-bottom: 5px;
   color : #3911E5;
}
.circle {
    border-radius: 50%;
    width: 34px;
    height: 34px;
    padding: 10px;
    background: #fff;
    border: 3px solid #000;
    color: #000;
    text-align: center;
    line-height: 10px;
    /* font: 32px Arial, sans-serif; */
  }
/* [draggable] {
    top: auto !important;
    left: auto !important;
  } */
  .advanceRow{
      display: flex;
      justify-content: space-between;
      background: #B0C4DE;
      align-items: center;
  }
  .advanceRowWrapper{
      border : 1px solid blue;
      margin-top: 10px;
  }
  .navProduct{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .navProduct > div{
      text-align: center;
      padding : 0 10px;
      border-right: 1px solid grey;
      border-left: 1px solid grey;
      color : black;
  }
  .navProduct > div:hover{
      background: lightblue;
      cursor: pointer;
  }



  .blockOutPricing{
      position : relative;
  }
  .blockOutPricing:after{
      position: absolute;
    top : 50%;
    width : 100%;
    height : 10%;
    /* background: red; */
    background: rgb(244,242,241);
    background: linear-gradient(0deg, rgba(244,242,241,0.02) 0%, rgba(255,0,0,1) 45%, rgba(255,0,0,1) 50%, rgba(250,250,250,0.02) 100%);
    pointer-events: none;
    content : "";

  }
  .blockOutPricing > div{
      pointer-events: none;
  }
  .existingSim{
      color : green;
  }
  .simRow {
      display: flex;
      align-items: center;
      border : 1px solid grey;
      padding : 10px;
      cursor: pointer;
      transition: all 1s;
      position : relative;
  }
  .simRow:hover{
      background: skyblue;
  }
  .simSelected{
      position : absolute;
      right : 10px;
      top : 0px;
  }

  /* Checkmark for success dialog creating product redirecting to edit page. */

  .checkmarkSuccess {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
    /* margin: 0 auto; */

  }
  
  .checkmarkSuccess__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }
  
  .checkmarkSuccess__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  }
  
  @keyframes stroke {
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes scale {
    0%, 100% {
      transform: none;
    }
    50% {
      transform: scale3d(1.1, 1.1, 1);
    }
  }
  @keyframes fill {
    100% {
      box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
  }

  /**/

.pricingSection {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    background: #f7f7f7;
    border-radius: 15px;
}
#noAdvancedPrice{
    max-width: 500px;    
}

.priceArea {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.priceArea.variant {
    width: 90%;
    margin: 0 auto;
}

.priceArea > div {
    width: 100%;
    /* max-width: 500px; */
}

.priceArea .MuiTextField-root {
    /* margin-top: 20px; */
    /* width: 100%; */
}

.priceArea .MuiInputBase-root {
    font-size: 1.2em;
}

.priceArea .MuiButton-root {
    margin-left: 10px;
}

.menuWrapper {
    background: #e0e0e0;
    padding: 20px;
    border-radius: 15px;
}

.menuArea {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Default to 2 columns */
    gap: 20px;
}

@media (max-width: 600px) {
    .menuArea {
        grid-template-columns: 1fr; /* 1 column for very small screens */
    }
}

@media (min-width: 1200px) {
    .menuArea {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for large screens */
    }
}

.menuButton {
    display: flex;
    gap : 10px;
    align-items: stretch; /* Changed from center to stretch */
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #ccc;
    border-radius: 8px;
    /* padding: 15px; */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    min-height: 120px; /* Changed from fixed height to min-height */
    position: relative;
    width: 100%;
}

.menuButton:hover {
    background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.menuButton:focus {
    outline: 2px solid #4CAF50;
}

.selected {
    background: linear-gradient(to bottom, #4CAF50, #45a049);
    border-color: #3d8b40;
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3), 0 1px 3px rgba(76, 175, 80, 0.1);
}

.selected:hover {
    background: linear-gradient(to bottom, #45a049, #3d8b40);
}

.menuButton img {
    width: 70px;
    /* height: 70px; */
    object-fit: cover;
    margin-right: 15px;
    border-radius: 6px;
    align-self: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2;
    flex-shrink: 0;
}

.menuButton .buttonContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    min-width: 0;
}

.menuButton p {
    margin: 0;
    text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}

.menuButton p:first-child {
    font-weight: bold;
    font-size: clamp(0.9em, 2.5vw, 1.2em);
    margin-bottom: 4px;
    color: #333;
}

.menuButton p:last-child {
    font-size: clamp(0.8em, 2vw, 0.95em);
    color: #555;
}

.selected p {
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    color: white;
}

.selected p:first-child,
.selected p:last-child {
    color: white;
}

.arrow_box {
	position: relative;
	/* background: #88b7d5; */
    background : #00b4c5;
	border: 4px solid #c2e1f5;
    width : 90%;
    color : black;
    font-weight: bolder;
    line-height: 100%;
    height: 100%;
      display: flex;
    align-items: center; 
    padding-left: 10px;
}
.arrow_box:after, .arrow_box:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    
}

.arrow_box:after {
	
	border-left-color: #3911E5;
	border-width: 30px;
	margin-top: -30px;
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #c2e1f5;
	border-width: 36px;
	margin-top: -36px;
}
.arrow_box.stepper{
    background: yellow ;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.arrow_box.stepper {
	border-color: orange;
    color : black;
}

.stepper.arrow_box:after{
    border-left-color: yellow;
}
.stepper.arrow_box:before{
    border-left-color: orange;
}
.container {
    /* display: flex;
    align-items: center; */
    line-height: 300%;
    /* width: 150px;
    height: 150px;
    border: 1px solid black; */
  }

  /* .arrow_box_bottom{

  } */

  .arrow_box_bottom {
	position: relative;
	/* background: #3911E5; */
	border: 4px solid #c2e1f5;
    text-align:  center; 
    padding: 10px;
    font-weight: bolder;
    line-height: 100%;
    font-size: 120%;
    /* height: 100%; */

}
.arrow_box_bottom:after, .arrow_box_bottom:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box_bottom:after {
	border-color: rgba(136, 183, 213, 0);
	/* border-top-color: #3911E5; */
    border-top-color: white;
	border-width: 30px;
	margin-left: -30px;
}
.arrow_box_bottom:before {
	/* border-color: rgba(194, 225, 245, 0); */
	border-top-color: #c2e1f5;
	border-width: 36px;
	margin-left: -36px;
}
.arrow_box_bottom, .arrow_box{
    /* background-color: hsl(251, 86%, 48%); */
    /* color : white; */
    border-color: #c2e1f5;
} 
.nameInstruction{
    color : white;
    width : 50%;
    margin : 30px auto 10px auto;
    text-align: center;
}
.nameInstructionBefore{
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 4px;
    padding: 12px;
    color: #c62828;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nameInstructionAfter{
    background-color: #7FFF00;
    color : black;
}
.crownButton{
    background: #000;
    color : white;
}       
  .arcadeButton{
    background: #000;
    color : white;
  } 
  .arcadeButtonInner{
    display: flex;
    align-items: center;
  }
  .arcadeButtonIcon{
    flex: 0 0 150px;
    
  } 
  .arcadeButtonText{
    flex: 1 1 auto;
  }

  .tableRow{
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 10px;
  }

  .row-number {
    min-width: 80px;
    height: 30px;
    background-color: #007bff;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    margin-right: 10px;
    display: none;
    padding-left: 5px;
    padding-right: 15px;
    align-items: center;
    /* display: flex;
    align-items: center;
    justify-content: center; */
  }
  /* .row-number { 
    color: white;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
    display: none;
  }   */


  .flashBorder {
    animation: flashBorder 1s ease-in-out;
    animation-iteration-count: infinite;
  }

  @keyframes flashBorder {
    0% { border-color: #444; }
    50% { border-color: #007bff; }
    100% { border-color: red; }
  }
  @media (min-width: 600px) {
    .tableRow {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .tableRow > * {
      margin-right: 10px;
    }

    .tableRow > *:last-child {
      margin-right: 0;
    }

    .row-number {
      display: flex;
    }
  }

  .schedulingWrapper > div.chosen  .innerCard {
    background-color: #e6ffe6 !important;
    border: 2px solid #4CAF50;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
    /* transform: scale(1.02); */
    transition: all 0.3s ease;
    outline: 3px solid #4CAF50;
    outline-offset: 2px;
    color: #2e7d32;
}

/* .schedulingWrapper > div.chosen .innerCard {
    background-color: #ffffff;
} */

/* .schedulingWrapper > div.chosen:hover {
    background-color: #bae7ff;
} */

.sectionPadding{
    padding: 10px;
}

/* Fade in down animation */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative blink animation */
@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    25% {
        opacity: 0.3;
    }
}

/* Pulse animation for attention */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* Product Grid Styling for Homepage */
.productGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  margin: 20px 0;
}

/* Add padding for the first and last product grid to avoid margin collapse */
.productGrid.productGrid-first {
  margin-top: 0;
  padding-top: 20px;
}

.productGrid.productGrid-last {
  margin-bottom: 0;
  padding-bottom: 20px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .productGrid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 15px;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .productGrid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
  }
}

/* Individual product card styling */
.product-card-container {
  position: relative;
  margin: 0; /* Reset margin to prevent collapse */
  padding: 0; /* Reset padding */
  transition: all 0.3s ease;
  height: 100%;
}

/* Remove button styling - positioned absolutely to stay on top */
.remove-button-wrapper {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  transition: none;
  transform: none !important;
}

.remove-button-wrapper button {
  transition: none;
  transform: none !important;
  box-shadow: none !important;
}

.product-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
  width: 100%;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.product-title {
  padding: 15px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
}

.product-title h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333;
  text-align: center;
}

.product-image-container {
  position: relative;
  width: 100%;
  padding-top: 100%; /* Changed from 75% to 100% for a square aspect ratio */
  overflow: hidden;
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Changed from cover to contain to prevent cropping */
  transition: transform 0.5s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-card-footer {
  margin-top: auto;
}

.rentMeButton {
  margin-top: auto !important;
  border-radius: 0 !important;
  padding: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

@media (max-width: 768px) {
  .product-title h2 {
    font-size: 1.1rem;
  }
  
  .rentMeButton {
    font-size: 0.9rem !important;
    padding: 8px !important;
  }
} 
.button-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4CAF50;
    margin-right: 15px;
    aspect-ratio: 1/1;
    min-width: 20px;
    flex-shrink: 0;
}
.button-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.button-title {
    font-size: 14px;
    font-weight: bold;
}
.button-description {
    font-size: 12px;
    color: #666;
}
.fancy-button {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border-radius: 25px;
    cursor: pointer;
    /* transition: all 0.3s ease; */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}
.fancy-button:hover{
    background-color: #e0e0e0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.form-elements-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.button-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.form-elements-header {
    font-size: 20px;
    font-weight: bold;
}
   .textImageBlock h1, .textImageBlock h2, .textImageBlock h3, .textImageBlock h4, .textImageBlock h5, .textImageBlock h6{
        line-height: 1;
    }

.centerQtyPicker .quantity-input{
  margin : 0 auto;
}
.quantity-input {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border-radius: 3px;
    width: max-content;
    -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield;
  }
  .quantity-input input::-webkit-outer-spin-button,
  .quantity-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
  .quantity-input:focus {
    background: red;
  }
  
  .quantity-input__modifier,
  .quantity-input__screen {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    outline: none;
  }
  
  .quantity-input__modifier {
    padding: 0.7rem;
    width: 3rem;
    font-size: 1.5rem;
    background: #f3f3f3;
    color: #888;
    border: 0 solid #dbdbdb;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: pointer;
  }
  .quantity-input__modifier:hover {
    background: #dadada;
    color: #555555;
  }
  .quantity-input__modifier--left {
    border-radius: 3px 0 0 3px;
  }
  .quantity-input__modifier--right {
    border-radius: 0 3px 3px 0;
    padding : 0.36em 0.7em;
  }
  
  .quantity-input__screen {
    width: 4rem;
    padding: 0.7rem;
    font-size: 1.5rem;
    border: 0;
    border-top: 0 solid #dbdbdb;
    border-bottom: 0 solid #dbdbdb;
    text-align: center;
  }

.pricing-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 24px;
}

.pricing-box {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.pricing-box.selected {
    border-color: #6B4EFF;
    background: #F8F7FF;
    
}

.pricing-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #6B4EFF;
}

/* Different background colors for each scheduling box */
.pricing-box:nth-child(1) {
    background: #F8F7FF;
}

.pricing-box:nth-child(2) {
    background: #F0F9FF;
}

.pricing-box:nth-child(3) {
    background: #FFF7F5;
}

.pricing-box:nth-child(4) {
    background: #F5FFF5;
}


.circle-indicator {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border: 2px solid #E8E5FF;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.pricing-box.selected .circle-indicator {
    border-color: #6B4EFF;
    background: #6B4EFF;
}
.pricing-box.selected p{
    color : #666;
}

.pricing-box.selected .circle-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
}

.icon-container {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
}

.pricing-box:nth-child(1) .icon-container {
    background: rgba(107, 78, 255, 0.1);
    color: #6B4EFF;
}

.pricing-box:nth-child(2) .icon-container {
    background: rgba(14, 165, 233, 0.1);
    color: #0EA5E9;
}

.pricing-box:nth-child(3) .icon-container {
    background: rgba(234, 88, 12, 0.1);
    color: #EA580C;
}

.pricing-box:nth-child(4) .icon-container {
    background: rgba(22, 163, 74, 0.1);
    color: #16A34A;
}

.pricing-box h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.pricing-box p {
    font-size: 14px;
    color: #666;
    margin: 0;
    text-align: center;
}

/* Advanced pricing options specific styles */
.advanced-pricing-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
}

.advanced-pricing-box {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #E0E0E0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.advanced-pricing-box.selected {
    border-color: #2196F3;
    background: #E3F2FD;
}

.advanced-pricing-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.advanced-pricing-box .circle-indicator {
    border-color: #90CAF9;
}

.advanced-pricing-box.selected .circle-indicator {
    border-color: #2196F3;
    background: #2196F3;
}

.advanced-pricing-box .icon-container {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.advanced-pricing-box h3 {
    font-size: 16px;
    margin: 12px 0 8px;
}

.advanced-pricing-box p {
    font-size: 13px;
    color: #757575;
    margin: 0;
}
.pricing-box.selected p{
    color: black !important;
}

.stepper-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
    padding: 16px 0;
    margin: -16px 0 24px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stepper-container {
    width: 100%;
    background-color: white;
    border-radius: 16px;
    border: 1px solid #E0E0E0;
    padding: 20px;
    margin: 0;
}

.progress-message {
    text-align: center;
    padding: 0 0 24px 0;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 24px;
}

.progress-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 16px;
}

.progress-content > div {
    text-align: left;
    flex: 1;
}

.progress-title {
    font-size: 24px;
    font-weight: 600;
    color: #6B4EFF;
    margin-bottom: 8px;
}

.progress-subtitle {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
}

.progress-status {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.progress-status span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.steps-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    width: 100%;
    gap: 0;
}

.step-item {
    padding: 12px;
    transition: all 0.2s ease;
    border-radius: 12px;
    position: relative;
}

.step-item:hover {
    background-color: #F8F7FF;
}

.step-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.step-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.step-circle.active {
    background-color: #6B4EFF;
    color: white;
    box-shadow: 0 4px 8px rgba(107, 78, 255, 0.2);
}

.step-circle.inactive {
    background-color: #F0F0F0;
    color: #666;
}

.step-circle.completed {
    background-color: #6B4EFF;
    color: white;
}

.step-circle.completed svg {
    width: 20px;
    height: 20px;
}

.step-label {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.step-description {
    font-size: 14px;
    color: #666;
    max-width: 200px;
    line-height: 1.4;
}

.step-label.active {
    color: #6B4EFF;
}

.step-label.inactive {
    color: #666;
}

.step-label.completed {
    color: #6B4EFF;
}

.step-line {
    height: 2px;
    background: transparent;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.step-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 2px dotted #E0E0E0;
    transition: all 0.3s ease;
}

/* Add completed state for the line */
.step-item.completed + .step-line::after {
    border-top: 2px dotted #6B4EFF;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .stepper-container {
        padding: 16px;
    }

    .steps-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .step-line {
        height: 24px;
        width: 2px;
        margin: 0 auto;
    }

    .step-line::after {
        width: 2px;
        height: 100%;
        top: 0;
        border-top: none;
        border-left: 2px dotted #E0E0E0;
    }

    .step-item.completed + .step-line::after {
        border-left: 2px dotted #6B4EFF;
    }

    .step-content {
        align-items: center;
    }

    .step-description {
        max-width: none;
    }

    .progress-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .progress-content > div {
        text-align: center;
    }
}

.product-input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.product-input-label {
    font-size: 16px;
    color: #666;
    font-weight: 400;
}

.required {
    color: #FF4444;
    margin-left: 4px;
}

.product-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E8E5FF;
    border-radius: 12px;
    font-size: 16px;
    color: #333;
    background-color: #FAFAFA;
    transition: all 0.2s ease;
}

.product-input:focus {
    outline: none;
    border-color: #6B4EFF;
    background-color: white;
}

.product-input.error {
    border-color: #FF4444;
    background-color: #FFF5F5;
}

.error-message {
    font-size: 14px;
    color: #FF4444;
}

.product-input::placeholder {
    color: #999;
}

.main-details-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
}

/* .details-card {
    background: white;
    border: 1px solid #E8E5FF;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.details-card:hover {
    border-color: #6B4EFF;
    background-color: #FAFAFA;
} */

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.card-header h2 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

/* .card-header svg {
    color: #6B4EFF;
} */

.card-description {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .details-grid {
        grid-template-columns: 1fr;
    }
}

.category-section {
    background: white;
    border: 1px solid #E8E5FF;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    font-size: 18px;
    color: #666;
    font-weight: 400;
    margin: 0;
}

.settings-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #F5F3FF;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-button svg {
    color: #6B4EFF;
    font-size: 20px;
}

.settings-button:hover {
    background-color: #E8E5FF;
}

.empty-category-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 24px;
}

.empty-category-state h4 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin: 0;
}

.empty-category-state p {
    font-size: 14px;
    color: #666;
    margin: 0;
    max-width: 300px;
    line-height: 1.5;
}

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}

.category-dialog {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #E8E5FF;
    position: sticky;
    top: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    z-index: 1;
}

.dialog-header h2 {
    font-size: 24px;
    color: #333;
    margin: 0;
}

.close-button {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
}

.category-list {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #E8E5FF;
    border-radius: 12px;
}

.category-name {
    font-size: 16px;
    color: #333;
}

.category-actions {
    display: flex;
    gap: 8px;
}

.icon-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 4px;
    display: grid;
    place-items: center;
}

.icon-button:hover {
    color: #333;
}

.icon-button .tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 8px); /* Position to the left of the icon */
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.icon-button:hover .tooltip {
    opacity: 1;
}

/* Update arrow position to point right */
.icon-button .tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -4px;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) rotate(45deg);
}

.add-category-button {
    width: 100%;
    padding: 16px;
    border: 1px solid #6B4EFF;
    border-radius: 12px;
    background: none;
    color: #6B4EFF;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.add-category-button:hover {
    background: #F5F3FF;
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-top: 1px solid #E8E5FF;
    position: sticky;
    bottom: 0;
    background: white;
    border-radius: 0 0 16px 16px;
    z-index: 1;
}

.back-button {
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 16px;
}

.save-button {
    background: #6B4EFF;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-button:hover {
    background: #5B3EEF;
}

.subcategory-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #E8E5FF;
    width: 100%;
}

.subcategory-name {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 14px;
    color: #666;
}

.subcategory-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

/* Add subcategory specific styles */
.add-subcategory-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 32px);
    margin: 8px 16px;
    padding: 8px 16px;
    background: white;
    border-radius: 8px;
}

.add-subcategory-input .edit-input {
    flex: 1;
    margin-right: 16px;
}

.add-subcategory-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px dashed #E8E5FF;
    border-radius: 8px;
    padding: 8px 16px;
    color: #6B4EFF;
    font-size: 14px;
    cursor: pointer;
    width: calc(100% - 32px);
    margin: 8px 16px;
    transition: all 0.2s ease;
}

.add-subcategory-button:hover {
    background: #F8F7FF;
    border-color: #6B4EFF;
}

.category-group {
    display: flex;
    flex-direction: column;
    border: 1px solid #E8E5FF;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    width: 100%;
    border-bottom: 1px solid #E8E5FF;
}

/* Remove bottom border when expanded */
.category-item.expanded {
    border-bottom-color: #E8E5FF;
}

.subcategory-list {
    background: #FAFAFA;
    width: 100%;
}

.subcategory-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #E8E5FF;
    width: 100%;
}

.subcategory-item:last-child {
    border-bottom: none;
}

/* Update add subcategory styles to match the connected look */
.add-subcategory-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 32px);
    margin: 8px 16px;
    padding: 8px 16px;
    background: white;
    border-radius: 8px;
}

.add-subcategory-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px dashed #E8E5FF;
    border-radius: 8px;
    padding: 8px 16px;
    color: #6B4EFF;
    font-size: 14px;
    cursor: pointer;
    width: calc(100% - 32px);
    margin: 8px 16px;
    transition: all 0.2s ease;
}

.add-subcategory-button:hover {
    background: #F8F7FF;
    border-color: #6B4EFF;
}

/* Animation for expand/collapse */
.subcategory-list {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.add-category-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    border: 1px solid #E8E5FF;
    border-radius: 12px;
    margin-top: 16px;
    width: 100%;
}

.add-category-input-container .edit-input {
    flex: 1;
    margin-right: 16px;
}

.add-category-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.add-category-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: 2px dashed #E8E5FF;
    border-radius: 12px;
    padding: 12px 16px;
    color: #6B4EFF;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    margin-top: 16px;
    transition: all 0.2s ease;
}

.add-category-button:hover {
    background: #F8F7FF;
    border-color: #6B4EFF;
}

.add-category-button span {
    font-size: 20px;
    font-weight: bold;
}

/* Edit input container styles */
.edit-input-container {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-input {
    width: 100%;
    padding: 8px 40px 8px 12px; /* Added right padding for the save icon */
    border: 1px solid #E8E5FF;
    border-radius: 8px;
    font-size: inherit;
    color: inherit;
    background: white;
}

.save-icon-button {
    position: absolute;
    right: 8px;
    top: 6px; /* Align with input text */
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #6B4EFF;
    display: grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
}

.save-icon-button:hover {
    background: #F8F7FF;
    border-radius: 4px;
}

.save-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.error-message {
    color: #d32f2f;
    font-size: 12px;
    margin-top: 4px;
}

.edit-input.error {
    border-color: #d32f2f;
}

.edit-input.error:focus {
    border-color: #d32f2f;
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.1);
}

.edit-input.loading {
    background-color: #F5F5F5;
    cursor: not-allowed;
}

/* Add loading state styles for category and subcategory inputs */
.add-category-input-container .edit-input.loading,
.add-subcategory-input .edit-input.loading {
    background-color: #F5F5F5;
    cursor: not-allowed;
}

.category-selects {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.select-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.select-group label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.category-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #E8E5FF;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-select:hover {
    border-color: #6B4EFF;
}

.category-select:focus {
    outline: none;
    border-color: #6B4EFF;
    box-shadow: 0 0 0 2px rgba(107, 78, 255, 0.1);
}

.empty-category-state {
    padding: 24px;
    text-align: center;
    color: #666;
}

.empty-category-state h4 {
    margin: 0 0 8px 0;
    color: #333;
}

.empty-category-state p {
    margin: 0;
    font-size: 14px;
}

.save-progress-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-progress-button.inactive {
    background-color: #F5F3FF;
    color: #6B4EFF;
    border: 1px solid #E8E5FF;
}

.save-progress-button.inactive:hover {
    background-color: #E8E5FF;
}

.save-progress-button.active {
    background-color: #6B4EFF;
    color: white;
    border: 1px solid #6B4EFF;
}

.save-progress-button.active:hover {
    background-color: #5B3EEF;
}

.save-progress-button svg {
    font-size: 20px;
}

.error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 76, 76, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-radius: 12px;
    pointer-events: none;
}

.error-overlay.show {
    opacity: 1;
    visibility: visible;
}

.step-error-message {
    background-color: #FF4C4C;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.error-overlay.show .step-error-message {
    transform: translateY(0);
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.custom-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.custom-tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}