*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    position: relative;
}
.over-flow-lock{
    height: 100vh !important;
    overflow: hidden !important;
}


.overflow-hide{
    overflow: hidden;
    height: 100vh;
}


.font-jakarta {
  font-family: "Plus Jakarta Sans", sans-serif;
}


.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}
.chart-container canvas{
    width: 100% !important;
}

.chart-skeleton {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 20px 30px;
    overflow: hidden;
}

.skeleton-bars {
    width: 100%;
    height: 85%;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 20px;
}

.skeleton-bars span {
    display: block;
    width: 12%;
    border-radius: 6px 6px 0 0;
    background: #feeaf6;
    animation: skeletonPulse 1.4s ease-in-out infinite;
}

.skeleton-bars span:nth-child(1) {
    height: 65%;
}

.skeleton-bars span:nth-child(2) {
    height: 90%;
}

.skeleton-bars span:nth-child(3) {
    height: 45%;
}

.skeleton-bars span:nth-child(4) {
    height: 75%;
}

.skeleton-bars span:nth-child(5) {
    height: 55%;
}

@keyframes skeletonPulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

.d-none {
    display: none !important;
}

#insight{
    padding: 10px 16px;
    padding-bottom: 0px;
}

#insight p{
    font-size: 12px;
}

.insight-btn{
    cursor: pointer;
    color: #B5247B;
    text-decoration: underline;
    font-weight: bold;
}
.view{
    opacity:0;
    visibility:hidden;
    max-height:0;
    overflow:hidden;
    transform:translateY(10px);

    transition:
        opacity .3s ease,
        transform .3s ease,
        max-height .3s ease;
}

.view.active{
    opacity:1;
    visibility:visible;
    max-height:max-content;
    transform:translateY(0);
}


.display-flex-item{
    display: flex !important;
}

.display-block-item{
    display: block !important;
}


.display-none-item{
    display: none !important;
}
section#loading-dashboard{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: white;
    overflow: hidden;
}

section#loading-dashboard img.logo-black{
    width: 150px;
    animation: heartbeat 6s infinite ease-in-out;
    transform-origin: center;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.13);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.11);
    }
    70% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

section#overview-dashboard{
    display: flex;
    height: max-content;
}


section#overview-dashboard .overview_inner{
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: .3s ease-out;
}
section#overview-dashboard aside.side_nav {
    padding: 16px;
    width: 22%;
    min-height: 100vh;
    background: white;
    position: fixed;
    left: 0;
    top: 0;
    border-right: 1px solid #F6D2E8;

    transform: translateX(0);
    transition: transform .35s ease-in-out;
    z-index: 999;
}

section#overview-dashboard aside.side_nav.closed {
    transform: translateX(-100%);
}



aside.side_nav ul{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 32px 0px;
    gap: 0px;
}

aside.side_nav ul li{
    list-style-type: none;
    display: flex;
    align-items: center;
    min-height: 48px;
    height: max-content;
    cursor: pointer;
    padding: 16px 8px;
    color: #6A1548;
    gap: 10px;
    border-radius: 8px;
}

aside.side_nav ul li.active{
    color: #FEFAFC ;
    background: #6A1548;
}


aside.side_nav .logo-text{
    display: flex;
    gap: 20px;
    margin: 5px 0px;
    position: relative;
}


.logo-text .close_nav_btn{
    right: -7%;
    position: absolute;
    top: 10%;
    cursor: pointer;
}

.logo-text img.vector{
    width: 50px;
}

.logo-text img.text{
    width: 134px;
}



#overview-dashboard .overview-body{
    flex-grow: 1;
    background: #FEFAFC;
    margin-left: 22%;
    transition: .3s ease-out;
    min-height: 100vh;
}


.overview-body nav{
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    background: white;
    border-bottom: 1px solid #F6D2E8;
    position: relative;
    width: 100%;
}

.overview-body nav .profile_view_nav{
    position: absolute;
    right: 1%;
    top: 90%;
    border-radius: 12px;
    background: #FCFCFC;
    border: 1px solid #F6D2E8;
    min-width: 344px;
    width: max-content;
    padding: 16px;
    display: none;
    flex-direction: column;
    gap: 24px;
    z-index: 999;
}

.profile_view_nav.display-flex-item{
    display:flex;
}

.profile_view_nav_top{
    display: flex;
    align-items: center;
    gap: 10px;
}


.profile_view_nav_top img{
    width: 60px;
}

.profile_view_nav_top span{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}

.profile_view_nav_top h4{
    font-weight: 400;
    font-size: 18px;
    width: 100%;
    text-align: left;

}

.profile_view_nav_top p{
    font-weight: 400;
    font-size: 16px;
    text-align: left;
}


p.account_created{
    font-size: 16px;
    font-weight: 400;
    color: #5B6B86;
}

.profile_view_nav .btn_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.profile_view_nav .btn_box button{
    height: 50px;
    padding: 16px 20px;
    min-width: 150px;
    background: #B5247B;
    color: #B5247B;
    border: 1px solid #B5247B;
    font-weight: 500;
    color: #FEFAFC;
    font-size: 12px;
    border-radius: 40px;
}

.profile_view_nav .btn_box button.logout_btn{
    background: #FEFAFC;
    color: #B5247B ;
}
.overview-body nav h2{
    color: #6A1548;
    font-size: 18px;
    font-weight: 700;
}


.logo_nav #open_nav_btn{
    display: none;
}
.overview-body nav .logo_nav{
    display: flex;
    align-items: center;
}

.logo_nav img{
    left: 0%;
    position: absolute;
}

.overview-body .nav-items{
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-items .item{
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    background: #FBEBF5;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    position: relative;
}

.nav-items .item .drop-down-items{
    position: absolute;
    top: 100%;
    width: 302px;
    right: 0%;
    height: max-content;
    background: white;
    border: 1px solid #F6D2E8;
    z-index: 99;
    border-radius: 12px;
    padding: 16px;
    flex-direction: column;
}

.nav-items .item .drop-down-items .drop-down-item{
    margin: 5px 0px;
    font-size: 14px;
}

.drop-down-items h3{
    color: #6A1548;
}


.nav-items .item img.icon{
    width: 24px;
}

.nav-items .item img{
    width: 24px;
}




.overview-body .cards_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    gap: 16px;
}


.cards_container .card_box{
    min-height: 164px;
    display: flex;
    flex-direction: column;
    padding: 16px 16px;
    background: white;
    gap: 16px;
    border-radius: 8px;
    border: 1px solid #E0E4EA;
    flex-grow: 1;
}

.card_box p{
    font-weight: 500;
    font-size: 16px;
    color: #6A1548;
}

.card_box h3{
    text-transform: capitalize;
    font-size: 24px;
    font-weight: 700;
    color: #6A1548;
}

.card_box .icon{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.card_box .icon img{
    width: 32px;
}

.user_table_meals{
    width: 100%;
    padding: 32px 16px;
}

#my-meal-view{
    padding: 0px;
}

#my-meal-view .user_table_meals{
    padding: 0px 6px;
    margin: 16px;
    width: inherit;
}

.user_table_meals .overflow_table {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;             
    scrollbar-color: #B5247B #FEFAFC;
    scroll-behavior: smooth;
    padding-bottom: 4px;
}

/* Chrome, Edge & Safari */
.user_table_meals .overflow_table::-webkit-scrollbar {
    height: 10px;
}

.user_table_meals .overflow_table::-webkit-scrollbar-track {
    background: #FEFAFC;
    border-radius: 50px;
}

.user_table_meals .overflow_table::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #B5247B, #B5247B);
    border-radius: 50px;
    border: 2px solid #FEFAFC;
    transition: background 0.3s ease;
}

.user_table_meals .overflow_table::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #B5247B, #B5247B);
}

.user_table_meals .overflow_table::-webkit-scrollbar-corner {
    background: transparent;
}

.user_table_meals .table_nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table_nav .table_flex{
    display: flex;
    align-items: center;
    gap: 10px;
}

.table_flex .table_items{
    padding: 16px 24px;
    font-size: 16px;
    border-radius: 40px;
    border: 1px solid #F6D2E8;
    display: flex;
    align-items: center;
    background: #FCFCFD;
    cursor: pointer;
}

.table_flex .table_items.search{
    border-color: #8292AA;
    background: #FCFCFD;
    color: #8292AA;
}

.table_flex .table_items.active{
    border-color: #B5247B;
    color: #B5247B;
    background-color: #F6D2E8;
}

.table_flex .table_items.dark{
    border-color: #B5247B;
    color: #FEFAFC;
    background-color: #B5247B;
}

.user_table_meals .table_parent .table_parent_top{
    width: 100%;
    display: flex;
    align-items: center;
    height: 64px;
    padding: 10px;
    border-bottom: 1px solid #D9D9D9;
}



.table_parent{
    width: 100%;
    background: #FFFFFF;
    margin: 16px 0px;
    border-radius: 16px;
}

.table_parent_top p{
    color: #6A1548;
    font-weight: 700;
    font-size: 16px;
    width: 25%;
}


.table_parent_top p.meal_mood_top{
    padding: 0px 10px;
}
.table_parent .history_parent{
    height: max-content;
}

.table_parent .no_history{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 142px;
    height: max-content;
    gap: 16px;
}

.no_history h3{
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    color: #384252;
}

.no_history p{
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    color: #384252;
}

.table_parent .pagination-history{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    height: 72px;
    border-top: 1px solid #D9D9D9;
}

.table_parent .history_meals_container{
    display: flex;
    justify-content: space-between;
    min-height: 76px;
    height: max-content;
    padding: 4px 10px;
}

.history_meals_container .history_container_inner{
    display: flex;
    align-items: center;
    width: 25%;
}

.table_parent .meal_type_inner{
    width: 15%;
}

.table_parent .meal_description_inner{
    width: 35%;
}
.history_meals_container .meal_mood_history{
    padding: 10px;
    gap: 10px;
}


.meal_mood_history .mood_history{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #384252;
    background: #E0E4EA;
}


.history_container_inner .meal_mood_{
    display: flex;
    align-items: center;
}

.history_container_inner .meal_type_history{
    color: #E96325;
    font-size: 14px;
    font-weight: 400;
    gap: 6px;
    border-radius: 30px;
    background: #FCE9E0;
    height: 37px;
    padding: 8px 16px;
}


.meal_type_history.scanner{
    background: #F8D9E1 !important;
    color: #DB315C !important;
}

.history_container_inner .meal_description_history{
    font-weight: 400;
    font-size: 16px;
    color: #384252;
}

.pagination-history img.btn-right{
    transform: rotate(180deg);
}

.pagination-history .pagination-page-count{
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-page-count .pagination-num{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: #F1F3F6;
    color: #8292AA;
    font-size: 14px;
    border-radius: 8px;
}


.pagination-page-count .pagination-num.active{
    color: white;
    background: #B5247B;
}


.meal_mood_form_inner{
    width: 100%;
    display: flex;
    gap: 0px;
    flex-wrap: wrap;

}

.meal_mood_form_inner form{
    display: flex;
    flex-direction: column;
    background: #FCFCFC;
    width: 40%;
    border: 1px solid #E0E4EA;
    padding: 16px;
    margin: 16px;
    gap: 20px;
    border-radius: 12px;
    transition: .3s ease-out;
}

form h3{
    font-size: 29px;
    color: #470E30;
    font-weight: 700;
}



form .form_box{
    display: flex;
    flex-direction: column;
}

form .form_box label{
    color: #242B35;
    font-weight: 500;
    font-size: 16px;
}
.options_select{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0px;
    
}

.options_select .select_item{
    padding: 4px 8px;
    width: max-content;
    border-radius: 20px;
    min-height: 26px;
    background: #F1F3F6;
    color: #5B6B86;
    border: 1px solid #5B6B86;
    font-size: 16px;
    cursor: pointer;
}

.select_item.active{
    border-color: #6A1548;
    background: #6A1548;
    color: white;
}

.form_box select, .form_box input{
    width: 100%;
    padding: 10px;
    height: 40px;
    display: flex;
    background: #F1F3F6;
    color: #A8B3C4;
    border-radius: 8px;
    align-items: center;
    margin: 10px 0px;
}


.form_box input{
    border: 1px solid #F1F3F6;
    border-radius: 12px;
    background: #FCFCFD;
}

.form_box select:focus, .form_box input:focus{
    border-color: #A8B3C4;
    outline: none;
    color: #242B35;
}

form button{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: white;
    background: #B5247B;
    border: none;
    border-radius: 40px;
    margin: 10px 0px;
}

.meal_mood_form_inner .load_result_container{
    flex-grow: 1;
    background: #FCFCFC;
    border: 1px solid #E0E4EA;
    height: fit-content;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    margin: 16px;
    margin-left: 0px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.5s ease;
}

.load_result_container.active {
    opacity: 1;
    transform: translateY(0);
}

.load_result_container img{
    width: 120px;
    margin: 10px 0px;
}
.load_result_container h3{
    text-align: center;
    font-weight: 700;
    font-size: 21px;
    color: #6A1548;
    margin: 10px 0px;
}

.load_result_container p{
    text-align: center;
    font-size: 14px;
    color: #6A1548;
    font-weight: 300;
}

form .upload_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px dashed #DB4BA2;
    gap: 12px;
    min-height: 148px;
    height: max-content;
}


.upload_container h4{
    font-size: 14px;
    color: #1B1B1B;
    font-weight: 400;
    text-align: center;
}

.upload_container h4 span{
    color: #B5247B;
}

.upload_container p{
    color: #A8B3C4;
    font-size: 14px;
    font-weight: 400;
}

#upload_initial_content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:4px;
}


p.upload_p{
    font-size: 12px;
    font-weight: 400;
    color: #8292AA;
}

.progress-ring {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring circle {
    fill: none;
    stroke-width: 8;
}

.progress-ring .bg {
    stroke: #e5e7eb;
}

.progress-ring .progress {
    stroke:#DB4BA2;
    stroke-linecap:round;
    stroke-dasharray:326.73;
    stroke-dashoffset:326.73;

    transition:stroke-dashoffset .25s linear;
}

.progress-ring .percentage {
    position: absolute;
    font-size: 12px;
    font-weight: 600;
}

.meal_upload_snippet {
    display: none;
    align-items: center;
    justify-content: space-between;
}


form .meal_upload_snippet{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    border: 1px solid #E7E7E7;
    padding: 16px;
    min-height: 68px;
    height: max-content;
}


.meal_upload_snippet .meal_upload_snippet_inner{
    display: flex;
    align-items: center;
    gap: 10px;
}


.meal_upload_snippet_inner img{
    width: 36px;
    height: 36px;
}

.meal_upload_snippet_inner span h5{
    color: #6A1548;
    font-weight: 600;
    font-size: 12px;
}

.meal_upload_snippet_inner span p{
    color: #8292AA;
    font-weight: 400;
    font-size: 12px;
}

.result_container{
    width: 100%;
    padding: 16px;
}


.result_container .back{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: #6A1548;
}

.result_container .back img{
    width: 24px;
}


.result_view{
    min-width: 833px;
    width: 100%;
    border-radius: 12px;
    margin: 12px 0px;
}

.result_container.result_container_program .result_view{
    min-width: unset;
    width: 100%;
}

.result_view .result_inner_top{
    background: #FBEBF5;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.result_container.result_container_program .result_view .result_inner_top{
    background: white;
}


.result_inner_top .match_percent{
    display: flex;
    align-items: center;
    color: #B5247B;
    background: #FCFCFC;
    border: 1px solid #B5247B;
    border-radius: 40px;
    padding: 4px 8px;
    height: 32px;
    color: #B5247B;
    font-size: 16px;
    font-weight: 600;
}

.result_container.result_container_program .result_inner_top .match_percent{
    border: none;
    color: #6A1548;
    font-size: 20px;
    font-weight: 700;
}
.result_inner_top button{
    padding: 8px 16px;
    height: 32px;
    display: flex;
    gap: 9px;
    color: #B5247B;
    font-size: 12px;
    background: #FCFCFC;
    border: 1px solid #B5247B;
    border-radius: 40px;
}

.result_inner_top button img{
    width: 16px;
}


.result_display_flex_container{
    display: flex;
    width: 100%;
    background: #FCFCFC;
}



.result_display_flex_container .result_display_flex_container_inner{
    width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.result_container.result_container_program .result_display_flex_container_inner{
    width: 100%;
}
.result_display_flex_container_inner.border{
    border-right: 1px solid #F6D2E8;
}


.result_display_flex_container_inner h4{
    font-size: 12px;
    color: #8292AA;
    font-weight: 600;
}

.result_display_flex_container_inner h2{
    font-size: 16px;
    font-weight: 700;
    color: #6A1548;
}

.result_display_flex_container_inner p{
    font-size: 12px;
    font-weight: 400;
    color: #6A1548;
}


.result_display_flex_container_inner .result_reason_box{
    background: #FEF9C1;
    color: #322E01;
    padding: 10px;
    gap: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.result_container.result_container_program .result_display_flex_container_inner .result_reason_box{
    border: 1px solid #CBBA02;
}


.programs_days_container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    
    /* margin: 16px; */
}

.programs_days_container .program_day{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 20px;
    height: 26px;
    color: #384252;
    border: 1px solid #E0E4EA;
    background: white;
    font-weight: 600;

}

.programs_days_container .program_day.active{
    background: #E0E4EA;
}

.program_result_card{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.program_result_card .meal_card{
    width: 31%;
    padding: 16px;
    height: max-content;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #FCFCFC;
    border: 1px solid #E0E4EA;
}

.program_result_card .meal_card .card_day{
    padding: 4px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border-radius: 40px;
    width: fit-content;
}

.program_result_card .meal_card .card_day.brown{
    background: #87340D;
    color: #FEF5F1;
}

.program_result_card .meal_card .card_day.green{
    background: #595101;
    color: #FCFCFC;
}


.program_result_card .meal_card .card_day.pink{
    background: #A51D3F;
    color: #FCFCFC;
}


.program_result_card .meal_card h2{
    font-weight: 500;
    font-size: 16px;
    color: #6A1548;
}

.program_result_card .meal_card p{
    font-weight: 500;
    font-size: 16px;
    color: #5B6B86;
    font-size: 12px;
}

.result_reason_box h5{
    font-size: 12px;
}




.result_reason_box p{
    color: #322E01;
    font-weight: 400;  
}

.modal-share{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100vh;
    background: #1B1B1BB2;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999 !important; 
}

.modal-share .share_container{
    background: #FCFCFC;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    width: 35%;
}

.share_container .cancel{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.share_container h1{
    text-align: center;
    font-weight: 600;
    color: #6A1548;
    font-size: 24px;
}

p.p{
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #6A1548;

}
.share_container .cancel img{
    width: 24px;
}

.share_inner{
    background: #FBEBF5;
    padding: 16px;
    gap: 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.share_inner h2{
    font-size: 14px;
    font-weight: 500;
    color: #6A1548;
}

.share_inner p{
    font-size: 12px;
    padding: 12px;
    color: #6A1548;
    border-radius: 8px;
    background: #FEFAFC;
}

.share_social{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.share_social .social{
    background: #efafd680;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    padding: 8px;
}

.share_container a{
    all: unset;
}

.share_social .social img{
    width: 16px;
    height: 16px;
}


a.link_copy{
    text-decoration: none;
    width: 100%;
}
.share_container button{
    width: 100%;
    background: #EFAFD6;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    border: none;
    color: #6A1548;
    height: 36px;
}

.share_container button img{
    width: 20px;
}
.modal-result{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100vh;
    background: #1B1B1BB2;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999 !important;
}

.modal-result .modal-content{
    background: #FCFCFC;
    border-radius: 12px;
    width: 40%;
    height: max-content;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-content img.recipe-img{
    width: 24px;
}

.modal-content .flex_ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.modal-content .flex_ul .ul_container{
    flex-grow: 1;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.close-modal-container{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.close-modal-container img{
    width: 24px;
}
.modal-content.recipe-modal h2{
    font-size: 20px;
    color: #595101;

}

.modal-content.image-beta-result h2{
    font-size: 20px;
    color: #6A1548;
}

.modal-content.image-beta-result p.p{
    font-size: 14px;
    color: #6A1548;
}


.modal-content.image-beta-result .beta-result-img{
    width: 100%;
    border-radius: 12px;
    height: 370px;
}
.modal-content ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-content ul li{
    list-style-type: none;
    color: #595101;
    font-size: 14px;
}
.modal-content button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    background: #FEF590;
    font-size: 12px;
    color: #595101;
    height: 34px;
    border: none;
    font-weight: 500;
}

.modal-content button img{
    width: 16px;
}
.form_box_tweak{
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.form_box_tweak img.btn_re_reprompt{
    position: absolute;
    right: 2%;
    top: 60%;
    z-index: 9999;
    width: 18px;
}

.form_box_tweak label{
    font-weight: 500;
    font-size: 14px;
    color: #470E30;
}


.form_box_tweak input{
    width: 100%;
    background: #FCFCFD;
    border-radius: 12px;
    font-size: 12px;
    padding: 10px;
    min-height: 38px;
    border: 1px solid #F1F3F6;
    color: #5B6B86;
    font-weight: 400;
}

.form_box_tweak input::placeholder{
    color: #5B6B86;
}

.result_display_flex_container_inner .result_btn{
    padding: 16px;
    display: flex;
    gap: 12px;
    border-radius: 8px;
    border: 1px solid #595101;
}

.result_btn img{
    width: 30px;
}

.result_btn span{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.result_btn h5 span{
    padding: 6px;
    border-radius: 30px;
    background: #EFAFD6;
    font-size: 12px;
    color: #6A1548;
    min-height: 16px;

}

.result_btn span h5{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}



.result_btn span p{
    font-size: 14px;
    font-weight: 400;
}


.result_display_flex_container_inner h3{
    color: #8292AA;
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
}

.profile_container{
    display: none;
    flex-direction: column;
    padding: 16px;
    gap: 10px;
    background: #FCFCFC;
    border-radius: 12px;
    border: 1px solid #F6D2E8;
    height: max-content;
    margin: 16px;
}


.profile_container .profile_inner_top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
}

.profile_inner_top span{
    display: flex;
    align-items: center;
    height: inherit;
    gap: 10px;
}

.profile_inner_top span img{
    width: 40px;
}

.profile_inner_top span h2{
    font-size: 20px;
    font-weight: 800;
    color: #6A1548;
}
.profile_inner_top button{
    height: 38px;
    width: 150px;
    border-radius: 40px;
    color: #B5247B;
    border: 1px solid #B5247B;
    background: #FCFCFC;
}


img.profile_avatar{
    width: 80px;
    margin: 16px 0px;
}

.profile_container .form_box{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 5px 0px;
}

.profile_container .form_box label{
    font-size: 14px;
    font-weight: 500;
    color: #470E30;
}

.profile_container .form_box input{
    width: 70%;
    padding: 10px;
    height: 38px;
    background: #FCFCFD;
    border-radius: 12px;
    border: 1px solid #F1F3F6;
    font-size: 14px;
    color: #5B6B86;
}

.profile_container .form_box input[type = "email"]{
    background: #F1F3F6;
}


.profile_container .form_box .google{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #242B35;
}

.google img{
    width: 32px;
}

.profile_container .form_box p.p{
    font-size: 14px;
    font-weight: 400;
    color: #5B6B86;
    width: 100%;
}

#upgrade-view .current_plan{
    margin: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.current_plan img{
    width: 40px;
}

.current_plan span{
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.current_plan span h5{
    font-weight: 500;
    font-size: 12px;
    color: #6A1548;
}


.current_plan span h5{
    font-weight: 500;
    font-size: 12px;
    color: #6A1548;
}

.current_plan span p{
    font-weight: 700;
    font-size: 20px;
    color: #6A1548;
}


.program-plans{
    display: flex;
    align-items: flex-start;
    margin: 20px 16px;
    gap: 20px;
}


.program-plans .pricing{
    background: #FCFCFC;
    border-radius: 12px;
    width: 35%;
}


.pricing .pricing_top{
    padding: 16px;
    min-height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #EFAFD6;
    gap: 8px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.pricing .pricing_top.premium{
    background: #470E30;
}

.pricing_top .pricing_type{
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #B5247B;
    background: #FEFAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;

}

.pricing_top.premium .pricing_type{
    background: #FEC210;
    color: #B5247B;
}

.pricing_top h1{
    font-weight: 600;
    font-size: 20px;
    color: #6A1548;
}
.pricing_top.premium h1{
    color: #FCFCFC;
}

.pricing_top p.pricing_description{
    font-weight: 400;
    font-size: 12px;
    color: #6A1548;
}

.pricing_top.premium p.pricing_description{
    color: #FCFCFC;
}

.pricing_amount, .pricing_enq{
    text-align: center;
    color: #6A1548;
    font-weight: 500;
    margin: 12px 0px;
}

.pricing_amount{
    font-size: 14px;
}
.pricing_enq{
    font-size: 16px;
}

.pricing ul{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.pricing ul li{
    list-style-type: none;
    color: #6A1548;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing .btn{
    width: 100%;
    padding: 16px;
}

.pricing .btn button{
    width: 100%;
    height: 46px;
    border: 1px solid #B5247B;
    color: #B5247B;
    border-radius: 40px;
    font-size: 14px;
    background: #FCFCFC;
    display: flex;
    justify-content: center;
    align-items: center;
}

.support-container{
    padding: 16px;
    gap: 24px;
    display: none;
    flex-direction: column;
}


.support-container h2{
    font-size: 24px;
    font-weight: 700;
    width: 40%;
    color: #6A1548;
}

.support-container-outer{
    display: flex;
    gap: 20px;
}

.support-container-outer .support-container-item{
   background: #FCFCFC;
   border-radius: 12px;
   padding: 20px; 
   gap: 20px;
   border: 1px solid #E0E4EA;
   width: 40%;
   display: flex;
   flex-direction: column;
}


.support-container-item h3{
    color: #384252;
    font-size: 24px;
    font-weight: 700;
}

.support-container-item p{
    color: #384252;
    font-size: 12px;
}

.support-container-item button{
    width: 100%;
    background: #B5247B;
    height: 50px;
    border-radius: 40px;
    font-size: 14px;
    color: #FEFAFC;
    border: none;
}


.notifications_dropdown{
    position: absolute;
    width: 30%;
    right: 10%;
    top: 87%;
    display: none;
    z-index: 999;
    background: #FCFCFC;
    border-radius: 12px;
    border: 1px solid #F6D2E8;
}

.notifications_nav{
    padding: 16px;
    display: flex;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    align-items: center;
    justify-content: space-between;
    background: #FEFAFC;
    border-bottom: 1px solid #E4E7EB;
}

.notifications_nav h2{
    font-size: 16px;
    font-weight: 600;
    color: #6A1548;
}

.notifications_nav img{
    width: 24px;
    cursor: pointer;
}

.notifications_list{
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notifications_list .notfications_flex{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.notfications_flex.flex-column{
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.notfications_flex h3{
    font-weight: 400;
    font-size: 14px;
    color: #6A1548;
}


.unread_notfication{
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background: #DB4BA2;
}

.notfications_flex img{
    width: 18px;
}

.notfications_flex p{
    font-size: 10px;
    color: #5B6B86;
}

section#sign-up-modal{
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100vh;
    background: #1B1B1BB2;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

section#sign-up-modal .sign-up-modal_container{
    width: 35%;
    border-radius: 16px;
    background: #FCFCFC;
    display: flex;
    flex-direction: column;
    
}

.sign-up-modal_container .top_img{
    height: 242px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}


.sign-up-modal_container_items{
    width: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sign-up-modal_container_items h3{
    color: #6A1548;
    font-weight: 700;
    font-size: 24px;
}

.sign-up-modal_container_items p{
    color: #6A1548;
    font-weight: 400;
    font-size: 14px;
}


.sign-up-modal_container_items button{
    background: #B5247B;
    border: 1px solid #B5247B;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #FEFAFC;
    font-weight: 400;
    font-size: 14px;
    gap: 10px;
    border-radius: 40px;
}


.sign-up-modal_container_items button.google{
    color: #B5247B;
    border: 1px solid #B5247B;
    background: #FEFAFC;
}

.sign-up-modal_container_items button img{
    width: 20px;
}

.b2b-overview{
    padding: 16px;
    position: relative;
    min-height: 90vh;
}

.popup_new_b2b{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #1B1B1BB2;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0%;
    left: 0%;
}


.popup_new_b2b form{
    background: #FCFCFC;
    padding: 16px;
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 12px;
    border: 1px solid #F6D2E8;

}
.b2b-overview .create_menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 12px;
    padding: 16px;
    background: #FCFCFC;
    border: 1px solid #F6D2E8;
}

.create_menu_flex{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.create_menu_flex span{
    display: flex;
    align-items: center;
    gap: 10px;
}

.create_menu_flex span img{
    width: 40px;
}

.create_menu_flex span h1{
    font-weight: 600;
    font-size: 20px;
    color: #6A1548;
}

.create_menu_flex p{
    color: #242B35;
    font-size: 12px;
}

.create_menu button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 56px;
    border-radius: 40px;
    background: #B5247B;
    border: none;
    color: #FEFAFC;
    padding: 0px 24px;
}


.create_menu button img{

}


.error_popup{
    position: fixed;
    top: 15%;
    right: 3%;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    color: white;
    padding: 15px 20px;
    align-items: center;
    transform: translateX(0);
    opacity: 1;
    transition: transform 1s ease, opacity 0.4s ease;
}

.error_popup.slide_out {
    transform: translateX(120%);
    opacity: 0;
}


.error_popup i{
    font-size: 15px;
}

.error_popup.success{
    background: #ECFDF5;
    border-left: 4px solid #07966A;
    color: #07966A;
}

.error_popup.success i.check{
    color: #4FDB7D;
}


.error_popup.error i.check{
    color: #F79449;
}

.error_popup.info i.check{
    color: #5EA6F3;
}

.error_popup.error{
    background: #FEF2F2;
    border-left: 3px solid #AF5B66;
    color: #AF5B66;
}

.error_popup.info{
    background: #FEFBEA;
    border-left: 3px solid #E27702;
    color: #E27702;
}
.error_popup span{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 25px;
}
.error_popup span h3{
    font-size: 15px;
}

.error_popup span p{
    font-size: 12px;
}
@media only screen and (max-width: 1200px){
    section#overview-dashboard aside.side_nav{
        width: 25%;
        padding: 16px 10px;
    }

    #overview-dashboard .overview-body{
        margin-left: 25%;
        width: 75%;
    }


    aside.side_nav .logo-text{
        display: flex;
        gap: 10px;
        margin: 5px 0px;
    }

    .logo-text img.vector{
        width: 40px;
    }

    .logo-text img.text{
        width: 124px;
    }

    .logo-text .close_nav_btn{
        right: -4%;
        top: 0%;
    }

    .overview-body nav{
        padding: 10px 16px;
        min-height: 70px;
    }


    .overview-body .cards_container{
        padding: 10px 10px;
        width: 100%;
        gap: 10px;
        flex-wrap: wrap;
    }


    .cards_container .card_box{
        min-height: 154px;
        display: flex;
        flex-direction: column;
        padding: 16px 16px;
        background: white;
        gap: 10px;
        flex-grow: 1;
    }

    .user_table_meals{
        padding: 20px 10px;
    }

    .table_flex .table_items{
        padding: 12px 24px;
    }

    .table_parent .meal_type_inner{
        width: 20%;
    }

    .table_parent .meal_description_inner{
        width: 40%;
    }

    .table_parent .meal_mood_inner{
        width: 30%;
    }

    .table_parent_top p.meal_mood_top{
        width: 30%;
    }

    .table_parent .meal_date_inner{
        width: 10%;
    }
    .history_meals_container .meal_mood_history{
        padding: 10px;
        gap: 10px;
    }


    .result_view{
        min-width: 100%;
        width: 100%;
    }



}


@media only screen and (max-width: 1100px){
    section#overview-dashboard aside.side_nav{
        width: 25%;
        position: fixed;
        padding: 16px 10px;
    }

    
    .modal-result .modal-content{
        width: 65%;
    }

    section#overview-dashboard aside.side_nav.close-query {
        transform: translateX(-100%);
    }

    .logo_nav #open_nav_btn{
        display: block;
    }

    .logo_nav h2{
        margin-left: 25px;
    }


    #overview-dashboard .overview-body{
        margin-left: 0px;
        width: 75%;
    }

    .logo-text .close_nav_btn{
        right: -4%;
        top: 0%;
    }

}

@media only screen and (max-width: 950px){
    section#overview-dashboard aside.side_nav{
        width: 35%;
    }

    .modal-result .modal-content{
        width: 75%;
    }

    .modal-share .share_container{
        width: 60%;
    }

    .cards_container .card_box{
        min-height: 130px;
    }
    .card_box p{
        font-size: 14px;
    }

    .card_box h3{
        font-size: 20px;
    }







    .overview-body nav h2{
        font-size: 20px;
    }


    .user_table_meals .table_nav{
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
    }

    .history_container_inner .meal_description_history{
        font-size: 14px;
    }

    .table_parent .meal_date_inner{
        font-size: 14px;
    }

    .table_flex .table_items{
        padding: 8px 16px;
        font-size: 14px;
    }

    .user_table_meals .table_parent{
        width: 180%;
    }

    .table_parent_top p{
        font-size: 14px;
    }

    .result_display_flex_container{
        width: 100%;
        flex-wrap: wrap;
    }

    .result_display_flex_container .result_display_flex_container_inner{
        width: 100%;
        padding: 12px;
    }

    .result_view .result_inner_top{
        padding: 12px;
    }


    .profile_container .form_box input{
        width: 100%;
    }

    .program-plans .pricing{
        width: 45%;
    }

    .notifications_dropdown{
        width: 35%;
    }

    section#sign-up-modal .sign-up-modal_container{
        width: 50%;
        
    }

    .b2b-overview{
        padding: 10px 10px;
    }

    .popup_new_b2b form{
        width: 50%;

    }

    
}

@media only screen and (max-width: 800px){
    section#overview-dashboard aside.side_nav{
        width: 50%;
    }


    .modal-share .share_container{
        width: 70%;
    }



    .meal_mood_form_inner form{
        width: 100%;
    }

    .meal_mood_form_inner .load_result_container{
        margin: 16px;
    }

    form h3{
        font-size: 24px;
    }

    .program-plans{
        flex-direction: column;
    }

    .program-plans .pricing{
        width: 100%;
    }


    .support-container h2{
        width: 100%;
        font-size: 20px;
    }

    .support-container-outer{
        flex-direction: column;
    }

    .support-container-outer .support-container-item{
        width: 100%;
    }

    .support-container-item h3{
        font-size: 20px;
    }

    .support-container-item button{
        font-size: 12px;
    }

    section#sign-up-modal .sign-up-modal_container{
        width: 60%;
        
    }

    .popup_new_b2b form{
        width: 70%;

    }

    .modal-result .modal-content{
        width: 95%;
    }

    .modal-content.recipe-modal h2{
        font-size: 18px;
     
    }

    .program_result_card .meal_card{
        width: 48%;
        flex-grow: 1;
    }

            
 
}


@media only screen and (max-width: 600px){
    section#overview-dashboard aside.side_nav{
        width: 60%;
    }

    .modal-share .share_container{
        width: 80%;
    }


    .cards_container .card_box{
        width: 45%;
    }

    .notifications_dropdown{
        width: 55%;
        right: 35%;
    }

    section#sign-up-modal .sign-up-modal_container{
        width: 80%;
        
    }

    .sign-up-modal_container img.top_img{
        height: 220px;
    }


    .user_table_meals .table_parent{
        width: 240%;
    }

    .meal_mood_form_inner form{
        width: 100%;
        margin: 16px 5px;
    }


    form h3{
        font-size: 20px;
    }


    .popup_new_b2b form{
        width: 80%;

    }

    .program_result_card .meal_card{
        width: 47%;
    }

    .profile_container .profile_inner_top{
        /* flex-wrap: wrap; */
        height: max-content;
    }

    .profile_inner_top button{
        height: 38px;
        width: unset;
        padding: 0px 15px;
        font-size: 14px;
        border-radius: 40px;
        color: #B5247B;
        border: 1px solid #B5247B;
        background: #FCFCFC;
    }

    .profile_container{
        margin: 16px 5px;
    }

    .profile_inner_top span img{
        width: 30px;
    }

    .overview-body .nav-items{
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .nav-items .item{
        padding: 8px 10px;
    }

    .overview-body nav{
        padding: 16px 10px;
    }

    #insight{
        padding: 10px 10px;
        padding-bottom: 0px;
    }
}