.pantrytoplate_main {
    display: flex;
    padding: 163px 0px 80px 0px;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    /* background-image: url(/img/ptp_bg.png); */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    background-color: #FAFAFA;
    position: relative;
}
.btn_date, .btn_date:hover {
    display: flex;
    padding: 24px 16px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-White, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Colours-Text, #001D40);

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
}
.macro_chart-wrapper {
    position: relative;
    height: 183px;
    width: 183px;
}
.macro_graph_index {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
}
.macro_chart-center h2 {
    color: var(--Base-01, #383838);
    text-align: center;

    /* H/H3 */
    font-family: "DM Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 39px */
    letter-spacing: -0.18px;
    text-transform: capitalize;
    margin-bottom: 0px;
}
.macro_chart-center p {
    color: var(--Base-02, #727272);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%; /* 26.1px */
    margin-bottom: 0px;
}
.macro_graph_div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;
    border-radius: 16px;
    border: 1px solid #F2F2F2;
    background: var(--Base-Off-White, #FAFAFA);
    padding: 38px 24px;
}
.macr_chart-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
}

.macro_chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.magro_graph_title {
    color: var(--Base-01, #383838);

    /* H/H3 */
    font-family: "DM Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 39px */
    letter-spacing: -0.18px;
    text-transform: capitalize;
    margin-bottom: 0px;
}
.macro_graph_index_text {
    color: var(--Base-01, #383838);

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%; /* 26.1px */
    margin-bottom: 0px;
}
.macro_graph_index_dot {
    height: fit-content;
    width: fit-content;
}
.macro_graph_row_boooody {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
}
.macro_graph_index_head {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
}
.pantrytoplate_outer {
    display: flex;
    width: stretch;
    padding: 24px 0;
    flex-direction: column;
    max-width: 707px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    gap: 32px;
    align-self: stretch;
    border-radius: 16px;
    background: var(--Base-White, #FFF);
    height: fit-content;
    position: relative;
    z-index: 9;
}


.pantrytoplate_inner1 {
    display: flex;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.pantrytoplate_heading1 {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H2 */
    font-family: "DM Sans";
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 52px */
    letter-spacing: -0.24px;
    text-transform: capitalize;
    margin-bottom: 0%;
    flex: 1 0 0;
}

.pantrytoplate_inner2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    padding: 0px 24px;
}

.pantrytoplate_heading2 {
    color: var(--Colours-Text, #001D40);

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
    margin-bottom: 0%;

}

.pantrytoplate_searchinput {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0px;
    background: var(--Base-Off-White, #FAFAFA);
    color: var(--Base-02, #727272);

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
}

.pantrytoplate_2inside {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.pantrytoplate_forheading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-bottom: 0%;
    align-self: stretch;

}

.pantrytoplate_heading3 {
    color: var(--Colours-Text, #001D40);

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
    flex: 1 0 0;

}

.pantrytoplate_grpofdiv {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 4px;
    padding: 0px;
}

.pantrytoplate_ingredients {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 32px;
    border: 1px solid var(--Base-03, #BDBDBD);
    background: var(--Base-White, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.pantrytoplate_para1 {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
}

.pantrytoplate_inner3 {
    display: flex;
    padding: 0 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}
.pantrytoplate_inner4 {
    display: flex;
    padding: 0 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.pantrytiplate_btn {
    width: 100%;
    border: 0px;
}

.pantrytoplate_search {
    display: flex;
    height: 48px;
    padding: 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.ptp_arrow_logo {
    display: flex;
    width: 52px;
    height: 52px;
    padding: 9px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);

    /* Card Shadow */
    box-shadow: 0 27.844px 27.028px 0 rgba(0, 0, 0, 0.03), 0 11px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2.406px 3.584px 0 rgba(0, 0, 0, 0.02);
}

.pantrytoplate_ingredients.active {
    background: var(--Base-Success-Green, #47B147);
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
}

.hidden {
    display: none;
}

.pantrytoplate_ingredients {
    transition: 0.3s;
    cursor: pointer;
}

.pantrytoplate_ingredients:hover {
    transform: scale(1.05);
}

.selected-ingredients-container {
    margin: 10px 0 20px;
}

#selectedIngredients {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ingredient-chip {
    display: flex;
    padding: 2px 12px 2px 12px;
    align-items: center;
    gap: 8px;



}




.selected-ingredients-container {
    margin: 10px 0 20px;
}

#selectedIngredients {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ingredient-chip {
    border-radius: 8px;
    border: 1px solid var(--Base-Success-Green, #47B147);
    background: #ECFFEA;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    display: flex;
    padding: 2px 12px 2px 12px;
    align-items: center;
    gap: 8px;
    color: var(--Colours-Text, #001D40);

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
}

.ingredient-chip span {
    cursor: pointer;
    font-weight: bold;
}

.ingredient_chip_outer {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    flex-wrap: wrap;
}

.ptp_btn_acc {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background-color: #FAFAFA;
    color: var(--Colours-Text, #001D40);
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 174%;
    margin-bottom: 0%;
    padding: 0px;
}

.countnum {
    display: flex;
    height: 23px;
    width: 23px;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
    border-radius: 32px;
    background: var(--Base-Success-Green, #47B147);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.ptp_btn_acc:not(.collapsed) {
    background-color: #FAFAFA;
    color: var(--Colours-Text, #001D40);
    box-shadow: none;
}

.ptp_btn_acc:focus {
    box-shadow: none;
}

.ptp2_outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.ptp2_inner3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: 0 24px;
    gap: 16px;
}

.ptp2_inner4 {
    display: flex;
    flex-direction: column;
    padding: 0 24px;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.ptp2_inside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.recipe_inner {
    display: flex;
    padding: 0 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.recipe_inside {
    display: flex;
    padding: 24px;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
}

.recipe_div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
}

.recipe_heading {
    color: var(--Colours-Text, #001D40);

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.recipe_para {
    color: var(--Base-02, #727272);

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
}

.inspire_btn {
    display: flex;
    padding: 12px 32px;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex: 1 0 0;
    border-radius: 100px;
    border: 1px solid var(--Base-03, #BDBDBD);
    background: var(--Colours-Light-Blue, #F0F4F8);
    color: var(--Colours-Text, #001D40);
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 155%;
    /* 27.9px */
    text-transform: capitalize;
    width: 100%;
}

.inspire_me_div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 24px;
    gap: 16px;
    align-self: stretch;
}

.inspire_inner_btn {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 32px;
    border: 1px solid var(--Base-03, #BDBDBD);
    background: var(--Base-White, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
}

.inspire_inner_btn span {
    font-size: 15px;
}

.inspire_inner_btn.active {
    background: var(--Base-Success-Green, #47B147);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: white;
}

.inspire_me_inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 8px;
}

.div_for_modal {
    display: flex;
    width: 692px;
    padding: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    border-radius: 12px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-White, #FFF);
    box-shadow: 0 27.844px 27.028px 0 rgba(0, 0, 0, 0.03), 0 11px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2.406px 3.584px 0 rgba(0, 0, 0, 0.02), 0 -1px 3.584px 0 rgba(0, 0, 0, 0.02);
}

.modal_inner1 {
    display: flex;
    width: 92px;
    height: 92px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    background: #FFECBD;
    box-shadow: 0 0 0 4px #FFF6DE;
}

.modal_inner2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.modal_heading {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H3 */
    font-family: "DM Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 39px */
    letter-spacing: -0.18px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.modal_para {
    color: var(--Base-01, #383838);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
}

.modal_para span {
    color: var(--Base-01, #383838);

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 174%;
}

.modal_inner3 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    justify-content: center;
}

.modal_section {
    padding: 180px;

}

.modal_inner1_green {
    display: flex;
    width: 92px;
    height: 92px;
    justify-content: center;
    align-items: center;
    border-radius: 1000px;
    background: #BBF9BB;
    box-shadow: 0 0 0 4px #DEFFE3;
}

.modal_2_inside {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.modal_inner1_red {
    display: flex;
    width: 92px;
    height: 92px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 1000px;
    background: #FED4D5;
    box-shadow: 0 0 0 4px #FEEBED;
}
.mw-fit {
    max-width: fit-content;
}

.btn-red {
    display: flex;
    padding: 12px 32px;
    justify-content: center;
    align-items: center;
    gap: 32px;
    border-radius: 100px;
    background: var(--Base-Error-Red, #DF3F3F);
    color: var(--Base-White, #FFF);
    font-family: "DM Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 155%;
    /* 27.9px */
    text-transform: capitalize;
}

.adjust_para {
    color: var(--Base-02, #727272);
    text-align: center;

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.adjust_div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.ingre_outer {
    display: flex;
    flex-direction: column;
    min-width: 707px;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
    align-self: stretch;
    width: fit-content;
    position: relative;
    z-index: 9;
}

.ingredient_inner1 {
    width: -webkit-fill-available;
    height: 425px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%), url(/img/ingredients_bg.png);
}

.ingredient_inside {
    display: flex;
    position: absolute;
    top: 0;
    width: 100%;
    padding: 24px;
    justify-content: space-between;
    align-items: center;
}

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

.manual_icon {
    display: flex;
    width: 52px;
    height: 52px;
    padding: 9px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 100px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);

    /* Card Shadow */
    box-shadow: 0 27.844px 27.028px 0 rgba(0, 0, 0, 0.03), 0 11px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2.406px 3.584px 0 rgba(0, 0, 0, 0.02);

}

.ingredient_icon {
    display: flex;
    width: 52px;
    height: 52px;
    padding: 9px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 100px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);

    /* Card Shadow */
    box-shadow: 0 27.844px 27.028px 0 rgba(0, 0, 0, 0.03), 0 11px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2.406px 3.584px 0 rgba(0, 0, 0, 0.02);
}

.ingredient_inner2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    border-radius: 18px;
    z-index: 1;
    padding: 0 24px 24px 24px;
    gap: 24px;
    margin-top: -16px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
}

.ingredient_heading {
    color: var(--Colours-Text, #001D40);

    /* H/H3 */
    font-family: "DM Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 39px */
    letter-spacing: -0.18px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.ingredient2_inside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.ingredient_info {
    display: flex;
    padding: 16px 24px;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid #F2F2F2;
    background: var(--Base-White, #FFF);

    /* Card Shadow */
    box-shadow: 0 27.844px 27.028px 0 rgba(0, 0, 0, 0.03), 0 11px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2.406px 3.584px 0 rgba(0, 0, 0, 0.02);
}

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

.ingre_para {
    color: var(--Base-02, #727272);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
}

.ingre_heading2 {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
    margin-bottom: 0;
}

.ingre2_inside2 {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;

}

.ingre_nutri {
    display: flex;
    padding: 8px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid #F2F2F2;
    background: var(--Base-White, #FFF);

    /* Card Shadow */
    box-shadow: 0 27.844px 27.028px 0 rgba(0, 0, 0, 0.03), 0 11px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2.406px 3.584px 0 rgba(0, 0, 0, 0.02);
}

.ingre_nutri_img {
    width: 45.455px;
    height: 34.545px;
    flex-shrink: 0;
}

.ingre_nutri_inside {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ingre_inside_head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    padding: 16px 0px 0px 0px;
}

.ingre_taps {
    display: flex;
    padding: 4px;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 100px;
    background: var(--Base-04, #E9E9E9);
}

.ingre_tap_btn {
    padding: 8px 16px;
    color: var(--Base-02, #727272);

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
}

.ingre_tap_btn.active {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 100px;
    background: var(--Base-White, #FFF);
    color: var(--Base-01, #383838);

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 174%;
    /* 26.1px */
}

.ingre_tap_li {
    flex: 1 0 0;
    display: flex;
    justify-content: center;
}

.tap_info_outer {
    display: flex;
    padding: 16px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid #F2F2F2;
    background: var(--Base-White, #FFF);
}

.tap_info_inner {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.tap_info_para {
    color: var(--Base-01, #383838);

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    flex: 1 0 0;
    margin-bottom: 0%;
}

.tap_hr {
    width: -webkit-fill-available;
    height: 1px;
    background: #E9E9E9;
}

.image_loading {
    height: 292px;
        width: -webkit-fill-available;
    position: relative;
    background: var(--Base-04, #E9E9E9);
    border-radius: 18px 18px 0 0;
}

.loding_main {
    display: flex;
    padding: 60px 24px 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: -16px;
    align-self: stretch;
    z-index: 1;
    border-radius: 18px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
}

.loading_grpdiv {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.loading_inner_div {
    align-self: stretch;
    display: flex;
    padding: 8px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    align-self: stretch;
    height: 116px;
    border-radius: 16px;
    border: 1px solid #F2F2F2;
    background: var(--Base-04, #E9E9E9);
}

.loading_head {
    height: 88px;
    width: 100%;
    border-radius: 16px;
    border: 1px solid #F2F2F2;
    background: var(--Base-04, #E9E9E9);
}

.loading_slider {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid #F2F2F2;
    background: var(--Base-White, #FFF);

    /* Card Shadow */
    box-shadow: 0 27.844px 27.028px 0 rgba(0, 0, 0, 0.03), 0 11px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2.406px 3.584px 0 rgba(0, 0, 0, 0.02);
}

.load_slider_head {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.loading_outer {
    border: none;
}

.manual_heading {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H2 */
    font-family: "DM Sans";
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 52px */
    letter-spacing: -0.24px;
    text-transform: capitalize;
    flex: 1 0 0;
    margin-bottom: 0%;
}

.manual_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 18px;
    z-index: 1;
    margin-top: -16px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
}

.manual_main1 {
    display: flex;
    width: -webkit-fill-available;
    padding: 24px 24px 0 24px;
    flex-direction: column;
    align-items: flex-start;
}

.manual_main2 {
    display: flex;
    width: -webkit-fill-available;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.head_manual_main {
    color: var(--Base-02, #727272);
    text-align: center;
    border: none;
    background: none;

    /* H/H3 */
    font-family: "DM Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 39px */
    letter-spacing: -0.18px;
    text-transform: capitalize;
    margin-bottom: 0%;
    display: flex;
    padding-top: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.head_manual_main:focus {
    background: transparent;
    color: var(--Base-02, #727272);
}
.head_manual_main::placeholder {
    color: var(--Base-02, #727272);
}

.manual2_inside1 {
    display: flex;
    padding: 24px;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid #F2F2F2;
    background: var(--Base-White, #FFF);

    /* Card Shadow */
    box-shadow: 0 27.844px 27.028px 0 rgba(0, 0, 0, 0.03), 0 11px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2.406px 3.584px 0 rgba(0, 0, 0, 0.02);
}

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

.manual_head2 {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H2 */
    font-family: "DM Sans";
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 52px */
    letter-spacing: -0.24px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.para_manual {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.manual2_inside2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    border-radius: 16px;

}

.manual_head3 {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.manual2inside2_div0 {
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid #F2F2F2;
    background: var(--Base-White, #FFF);

    /* Card Shadow */
    box-shadow: 0 27.844px 27.028px 0 rgba(0, 0, 0, 0.03), 0 11px 10.075px 0 rgba(0, 0, 0, 0.03), 0 2.406px 3.584px 0 rgba(0, 0, 0, 0.02);
}

.manual2inside2_div1 {
    display: flex;
    align-items: flex-start;
}

.div_inside_manual1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-self: stretch;
}

.manual_input {
    display: flex;
    height: 48px;
    padding: 16px;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-White, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.manual_inside_btn {
    display: flex;
    width: 75px;
    height: 48px;
    padding: 16px;
    align-items: center;
    gap: 8px;
    border-radius: 0 8px 8px 0;
    border-left: none;
    border-top: 1px solid var(--Base-04, #E9E9E9);
    border-right: 1px solid var(--Base-04, #E9E9E9);
    border-bottom: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Base-02, #727272);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
}

.manual2inside2_div2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: 9.5px;
}

.manual_div2_inside {
    display: flex;
    padding: 8px 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background: var(--Base-White, #FFF);
}

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

.para_maualingre {
    color: var(--Base-02, #727272);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
}

.manual_input2 {
    display: flex;
    width: 72px;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-White, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
}

.manual_inside_btn2 {
    display: flex;
    width: 39px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 0 8px 8px 0;
    border-left: none;
    border-top: 1px solid var(--Base-04, #E9E9E9);
    border-right: 1px solid var(--Base-04, #E9E9E9);
    border-bottom: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Colours-Text, #001D40);
    text-align: center;
    justify-content: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
}

.manual2inside2_div3 {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    border: 1px solid var(--Colours-Primary, #0166ED);
    background: var(--Colours-Light-Blue, #F0F4F8);
}

.manual_head4 {
    color: var(--Colours-Primary, #0166ED);
    text-align: center;

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.manual_kal_div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.manul_kal_div_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.para_manual4 {
    color: var(--Base-01, #383838);
    text-align: center;
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: lowercase;
    margin-bottom: 0%;
}

.para_manual5 {
    color: var(--Base-01, #383838);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
}

.manual2inside2_div4 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.manual_head5 {
    color: var(--Colours-Text, #001D40);

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.manual2inside2_div5 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.manual_div5_inside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.manual_for_meal {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.manual_input3 {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex: 1 0 0;
    border-radius: 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-White, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.manual_input3_head {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
    flex: 1 0 0;
}

.manual_input_radio {
    width: 20px;
    height: 20px;
    margin-left: 0px;
    background-color: #E9E9E9;
}

.form-check .manual_input_radio {
    margin-left: 0%;
}

.manual2inside2_div6 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.manual_input5 {
    display: flex;
    height: 48px;
    padding: 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-White, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Base-02, #727272);
    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
}

.macrokitchen1 {
    display: flex;
    flex-direction: column;
    align-items: self-start;
    gap: 16px;
    align-self: stretch;
}

.macro_head1 {
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H3 */
    font-family: "DM Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    /* 39px */
    letter-spacing: -0.18px;
    text-transform: capitalize;
    margin-bottom: 0%;
}

.macro1_inner {
    display: flex;
    width: 659px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 8px;
}

/* Chrome, Edge, Safari */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    border: 2px solid var(--Colours-Primary, #0166ED);
    background: white;

    margin-top: -8px;

    /* Shadows/shadow-md */
    box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
}
.pant_range {
    height: 8px;
    border-radius: 4px;
background: var(--Gray-200, #E4E7EC);
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
       background: transparent;

    border-radius: 10px;
}

.macro2_inner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
}

.macro3_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

.macro3_inside1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.macro_nutri {
    display: flex;
    padding: 8px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background: var(--Base-White, #FFF);
}

.para_macro1 {
    color: var(--Base-02, #727272);
    text-align: center;

    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
}

.macronutri_inner2 {
    display: flex;
    align-items: center;
}

.macro_input {
    display: flex;
    width: 79px;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-White, #FFF);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Colours-Text, #001D40);
    text-align: center;

    /* H/H4 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 26px */
    letter-spacing: -0.12px;
    text-transform: capitalize;
}

.macro_btn {
    display: flex;
    width: 39px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 0 8px 8px 0;
    border-top: 1px solid var(--Base-04, #E9E9E9);
    border-left: none;
    border-right: 1px solid var(--Base-04, #E9E9E9);
    border-bottom: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--Colours-Text, #001D40);
    text-align: center;
    justify-content: center;
    /* P/Standard */
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    margin-bottom: 0%;
}

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

.macro_img {
    width: 30.682px;
    height: 23.318px;
    flex-shrink: 0;
}
/* 
.macro_dropdowm {
    display: flex;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
} */


/* .macro_dropdowm, .macro_dropdowm:active {
    display: flex;
    padding: 16px;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Base-04, #E9E9E9);
    background: var(--Base-Off-White, #FAFAFA);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    width: 100%;
} */
.macro_dropdowm_btn, .macro_dropdowm_btn.show {
    background: var(--Base-Off-White, #FAFAFA);
    border: none;
    color: var(--Colours-Text, #001D40);
    display: flex;
    justify-content: space-between;
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    width: 100%;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    padding: 16px;
}
.macro_dropdowm_btn:active {
    background-color: var(--Base-Off-White, #FAFAFA);
    color: var(--Colours-Text, #001D40);
}

.macro_dropdowm_btn:hover {
    background: var(--Base-Off-White, #FAFAFA);
    border: none;
    color: var(--Colours-Text, #001D40);
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
    /* padding: 0%; */
}

.macro_dropdowm_btn:active {
    background: var(--Base-Off-White, #FAFAFA);
    border: none;
    color: var(--Colours-Text, #001D40);
    font-family: "DM Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 174%;
    /* 26.1px */
}

.dropdown-toggle::after {
    
    position: unset;
    margin-top: 3px;
    /* top: 50%; */
    /* right: 14px; */
    /* transform: translate(-50%, -50%); */
}

.macro_dropdowm_menu {
    width: 100%;
}

.leaf1 {
    position: absolute;
    top: 292px;
    right: 206px;
}
.leaf2 {
    position: absolute;
    top: 348px;
    left: 206px;
}
.leaf3 {
    position: absolute;
    top: 792px;
    left: 206px
}
.leaf4 {
    position: absolute;
    top: 723px;
    right: 0px
}
.ptp2_head2 {
    display: flex;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
}
.ptp2_head1 {
    color: var(--Colours-Text, #001D40);

/* H/H3 */
font-family: "DM Sans";
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 130%;
letter-spacing: -0.18px;
text-transform: capitalize;
margin-bottom: 0%;
}
#servingText {
    color: var(--Colours-Text, #001D40);

/* H/H3 */
font-family: "DM Sans";
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 130%;
letter-spacing: -0.18px;
text-transform: capitalize;
margin-bottom: 0%;
}
.ptp2_inside {
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.ptp2_input3 {
    display: flex;
padding: 8px 16px;
align-items: center;
gap: 12px;
align-self: stretch;
border-radius: 8px;
border: 1px solid var(--Base-04, #E9E9E9);
background: var(--Base-Off-White, #FAFAFA);
box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}
 /* .ptp2_input3.active {
    display: flex;
padding: 8px 16px;
align-items: center;
gap: 12px;
align-self: stretch;
border-radius: 8px;
border: 1px solid #E9E9E9;
background: var(--Colours-Light-Blue, #F0F4F8);
box-shadow: 0 0 0 3px #B8D3F7, 0 1px 2px 0 rgba(16, 24, 40, 0.05);
} */
.form-check.ptp2_input3 {
    border: 1px solid transparent;
    background: #fff;
    border-radius: 12px;
    transition: 0.3s ease;
}

.form-check.ptp2_input3:has(input:checked) {
    border: 1px solid #E9E9E9;
    background: var(--Colours-Light-Blue, #F0F4F8);
    box-shadow: 0 0 0 3px #B8D3F7,
                0 1px 2px 0 rgba(16, 24, 40, 0.05);
}
.ptp2_lable_oter {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.label_ptp2_head {
    color: var(--Colours-Text, #001D40);

/* P/Standard */
font-family: "DM Sans";
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 174%; /* 26.1px */
margin-bottom: 0%;
    text-align: left;
}
.para_label_ptp2 {
    color: var(--Base-01, #383838);

/* P/Standard */
font-family: "DM Sans";
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 174%; /* 26.1px */
margin-bottom: 0%;
    text-align: left;
}
.ptp2_img {
    width: 41px;
    height: 41px;
}
.adj_contain2 {
    max-width: min-content;
}
.off_can_pant {
    padding: 60px;
}

@media only screen and (max-width: 600px) {
    .pantrytoplate_main {
        display: flex;
        padding: 24px 0 0;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        background-image: none;
        background-color: white;
        margin-top: 62px;
    }
    .reci_main {
        background-color: #FAFAFA;
    }
    .ingre_outer {
        display: flex;
        flex-direction: column;
        min-width: unset;
        margin-left: auto;
        margin-right: auto;
        align-items: flex-start;
        align-self: stretch;
        width: -webkit-fill-available;
        position: relative;
        z-index: 9;
    }
    .macro3_inner {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px;
        align-self: stretch;
        flex-direction: column;
    }
    .off_can_pant {
        padding: 0;
        margin-top: 0px;
    }
    .macro_graph_div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 50px;
        border-radius: 16px;
        border: 1px solid #F2F2F2;
        background: var(--Base-Off-White, #FAFAFA);
        padding: 16px;
    }
    .magro_graph_title {
        color: var(--Base-01, #383838);

        /* P/Standard */
        font-family: "DM Sans";
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 174%; /* 26.1px */
    }
    .macro_chart-wrapper {
        position: relative;
        height: 143px;
        width: 143px;
    }

    .pantrytoplate_heading1 {
        font-size: 25px;
    }

    .pantrytoplate_outer {
        gap: 24px;
    }
    .pantrytoplate_inner2 {
        gap: 16px;
    }

    .pantrytoplate_heading2 {
        font-size: 15px;
    }

    .recipe_outer {
        background-color: #FAFAFA;
        border-radius: 0%;
    }
    .inspire_btn {
        font-size: 12px;
    }

    .recipe_inside {
        background-color: white;
    }

    .recipe_img {
        width: 73px;
        height: 68px;
    }

    .recipe_desk {
        display: none;
    }

    .recipe_heading {
        font-size: 18px;
    }

    .recipe_para {
        line-height: normal;
        font-size: 12px;
    }

    .inspire_me_inner {
        gap: 10px 4px;
    }

    .inspire_inner_btn {
        font-size: 11px;
    }

    .inspire_inner_btn span {
        font-size: 11px;
    }

    .modal_inner1 {
        display: flex;
        width: 48px;
        height: 48px;
    }

    .div_for_modal {
        display: flex;
        width: 357px;
        padding: 16px;
        gap: 13px;
    }

    .modal_inner1 svg {
        height: 28px;
        width: 28px;
    }

    .modal_heading {
        font-size: 18px;
    }

    .modal_inner2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px
    }

    .modal_para {
        color: var(--Base-01, #383838);
        text-align: center;

        /* P/Small */
        font-family: "DM Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .modal_inner3 button {
        font-size: 10px;
    }

    .modal_inner1_green {
        width: 48px;
        height: 48px;
    }

    .modal_inner1_green svg {
        height: 28px;
        width: 28px;
    }

    .modal_inner1_red {
        width: 48px;
        height: 48px;
    }

    .modal_inner1_red svg {
        width: 28px;
        height: 28px;
    }

    .modal_para span {
        font-size: 12px;
    }

    .modal_section {
        padding: 180px 40px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .ptp_arrow_logo {
        display: flex;
        width: 33px;
        height: 33px;
        position: absolute;
        left: 24px;
        top: 24px;
    }
    .adjust_para {
        font-size: 12px;
    }
    .adjust_btn {
        padding: 5px 16px;
    }
    .adjust_div {
        gap: 8px;
    }
    .adj_contain {
        padding: 0px;
    }
    .adj_contain2 {
        max-width: none;
    }
    .adjust_outer {
        gap: 16px;
    }
    .adjust_div2 {
        padding: 0px 24px 75px 24px;
    }
    .img_dat_manu {
        width: 23px;
        height: 24px;
    }
    .p_dat_manu {
        font-size: 15px;
    }
    .btn_date, .btn_date:hover {
        padding: 16px;
    }
    .pantrytoplate_inner3 {
        display: flex;
padding: 42px 12px 16px 12px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
border-top: 1px solid var(--Base-04, #E9E9E9);
background: var(--Base-White, #FFF);
    }
    .pantrytiplate_btn {
        font-size: 12px;
        height: 40px;
    }

    .adjust_outer {
        background: var(--Base-Off-White, #FAFAFA);
        padding-bottom: 0%;
    }

    .adjust_search {
        background-color: white;
    }

    .ingredient_inner1 {
        width: -webkit-fill-available;
        height: 364px;
        border-radius: 0px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%), url(/img/ingre_bg_phone.png);
    }

    .ingredient_heading {
        font-size: 20px;
    }

    .ingredient_inner2 {
        gap: 16px;
        border-bottom-left-radius: 0%;
        border-bottom-right-radius: 0%;
    }
    .macro2_inner {
        gap: 10px 4px;
    }

    .ingredient_info {
        padding: 16px;
    }

    .ingre_para {
        font-size: 10px;
    }

    .ingre_heading2 {
        font-size: 12px;
    }

    .ingre_nutri_inside p {
        font-size: 12px;
    }

    .ingre_tap_btn {
        font-size: 10px;
    }

    .ingre_tap_btn.active {
        font-size: 10px;
    }

    .image_loading {
        height: 364px;
        border-radius: 0%;
        width: 100%;
    }

    .ingredient_icon {
        display: flex;
        width: 33px;
        height: 33px;
    }
    .pantrytoplate_ingredients {
        font-size: 12px;
    }

    .manual_icon {
        display: flex;
        width: 33px;
        height: 33px;
                position: absolute;
        top: 0;
        right: 0;
    }

    .loading_head {
        height: 65px;
    }

    .loading_inner_div {
        height: 89px;
    }

    .load_slider_head {
        font-size: 12px;
    }

    .loading_slider {
        gap: 8px;
    }

    .manual_heading {
        font-size: 25px;
    }

    .manual_main1 {
        padding: 0px 24px;
    }

    .manual_inside_btn2 {
        width: 25px;
        font-size: 12px;
    }

    .manual_input2 {
        height: 39px;
        width: 62px;
    }

    .manual_div2_inside {
        flex-direction: column;
    }

    .head_manual_main {
        font-size: 18px;
    }

    .manual_main2 {
        padding: 16px 24px 24px 24px;
        gap: 16px;
    }

    .manual_head2 {
        font-size: 25px;
    }

    .para_manual {
        font-size: 15px;
    }

    .manual2_inside1 {
        padding: 16px;
    }

    .manual2inside2_div0 {
        padding: 16px;
    }

    .manual_head3 {
        font-size: 15px;
    }

    .para_maualingre {
        font-size: 10px;
    }

    .manual_head4 {
        font-size: 12px;
    }

    .manual2inside2_div3 {
        padding: 8px 16px;
    }

    .para_manual4 {
        font-size: 15px;
    }

    .para_manual5 {
        font-size: 10px;
    }

    .manual_head5 {
        font-size: 15px;
    }

    .manual_input3 {
        padding: 8px 16px;
    }

    .manual_inner {
        width: -webkit-fill-available;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .manual_input3_head {
        font-size: 12px;
    }

    .manual2_inside2 {
        gap: 16px;
    }
    .macro1_inner  {
        width: stretch;
    }
    .macro_head1 {
        font-size: 20px;
    }
    .macro3_inside1 {
        flex-direction: row;
                gap: 27px;
    }
    .macro_input {
        width: 62px;
    }
    .macro_btn {
        width: 25px;
        font-size: 10px;
    }
    .ptp2_img {
        width: 23px;
        width: 23px;
    }
    .ptp2_head1 {
        font-size: 20px;
    }
    #servingText {
        font-size: 20px;
    }
    .para_label_ptp2 {
            line-height: normal;
            font-size: 12px;
    }
}


@media only screen and (min-width: 780px) and (max-width:991px) {
    .pantrytoplate_main {
        display: flex;
        padding: 24px 0;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        background-image: none;
        background-color: white;
        margin-top: 74px;
    }

    .pantrytoplate_heading1 {
        font-size: 25px;
    }

    .pantrytoplate_inner2 {
        gap: 16px;
    }

    .pantrytoplate_outer {
        gap: 24px;
    }

    .pantrytoplate_heading2 {
        font-size: 15px;
    }

    .recipe_outer {
        background-color: #FAFAFA;
        border-radius: 0px;
    }

    .recipe_inside {
        background-color: white;
    }

    .recipe_img {
        width: 73px;
        height: 68px;
    }

    .recipe_desk {
        display: none;
    }

    .recipe_heading {
        font-size: 18px;
    }

    .recipe_para {
        line-height: normal;
        font-size: 12px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1151px) {
    .pantrytoplate_main {
        /* padding: 163px 186px 80px 186px; */
        background-size: contain;
    }

}

@media only screen and (min-width: 1152px) and (max-width:1279px) {
    .pantrytoplate_main {
        /* padding: 163px 285px 80px 286px; */
        background-size: contain;
    }

}


@media only screen and (min-width: 1280px) and (max-width:1348px) {
    .pantrytoplate_main {
        /* padding: 163px 285px 80px 286px; */
        background-size: contain;
    }
}

@media only screen and (min-width: 1349px) and (max-width:1439px) {
    .pantrytoplate_main {
        /* padding: 163px 606px 80px 606px; */
        background-size: contain;
    }
}

@media only screen and (min-width: 1440px) and (max-width:1499px) {
    .pantrytoplate_main {
        /* padding: 163px 366px 80px 366px; */
        background-size: contain;
    }

}

@media only screen and (min-width: 1500px) and (max-width:1599px) {
    .pantrytoplate_main {
        /* padding: 163px 396px 80px 396px; */
        background-size: contain;
    }
}

@media only screen and (min-width: 1600px) and (max-width:1699px) {
    .pantrytoplate_main {
        /* padding: 163px 446px 80px 446px; */
        background-size: contain;
    }
}

@media only screen and (min-width: 1700px) and (max-width:1799px) {
    .pantrytoplate_main {
        /* padding: 163px 496px 80px 496px; */
        background-size: contain;
    }
}

@media only screen and (min-width: 1800px) and (max-width:1919px) {
    .pantrytoplate_main {
        /* padding: 163px 546px 80px 546px; */
        background-size: contain;
    }
}