@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=PT+Sans+Narrow:wght@400;700&display=swap);
/* @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: 400px) {
    .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");
}



.colorBoxes{
    display: grid;
    grid-template-columns: repeat(auto-fit, 20px);
    gap : 20px
}

.colorBoxes > div{
    width: 20px;
    aspect-ratio: 1;
    /* background-color: orange; */
    background : var(--bg);
    cursor : pointer;
}

.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%;
}

.hero-container::before {
    content: "";
    position: absolute;
    top: -80px;
    left: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.08), rgba(0, 198, 255, 0.08));
    z-index: -1;
}

.hero-container::after {
    content: "";
    position: absolute;
    bottom: -50px;
    right: 0;
    width: 180px;
    height: 180px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.05), rgba(0, 198, 255, 0.05));
    z-index: -1;
}

#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 */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.hero-image-container {
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}

.hero-image-container img {
    position: relative;
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.1));
    transition: all 0.5s ease;
}

/* 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;
    }
}
.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;
    }
  }
.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;
}

/* 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;
  }
}


#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;
  }
  
.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%;
    }
}



.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;
}
.hoverRed{
    background: red !important;
}
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: grid;
    grid-template-columns:  repeat(auto-fill, minmax(200px, 1fr));
}
.simWrapper .card{
    position : relative
}
.simWrapper a{
    position : absolute;
    bottom : 0;
    left : 50%;
    display: block;
}
.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;
}
.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;
} */

.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%);
}

.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;
}
.sectionPadding{
    padding: 10px;
}
/* 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;
}
/* 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;
}
.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;
}