.new-byo-pill-wrapper-container {
    padding-top: 160px;
    background-color: #FAFAFA;
}

.new-meal-wrapper {
    margin: 0 auto;
    max-width: 78.5%;
    gap: 10px;
}

.new-meal-card-desktop {
    flex: 0 0 19.45%;
    cursor: pointer;
}

.new-meal-content {
    position: relative;
    background-color: #ffffff;
    box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.10);
    padding-bottom: 15px;
}

.new-image-container {
    position: relative;
}

.new-meal-primary-overlay {
    position: absolute;
    bottom: 0;
    background-color: rgba(216, 217, 218, 0.8);
    width: 100%;
    height: 25px;
    text-align: center;
}

.macros-wrapper {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.macros-container {
    background: rgba(216, 217, 218, 0.80);
    width: 100%;
    display: flex;
    justify-content: center;
    height: 24px;
}

.macros-inner-container {
    width: 92%;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
    position: absolute;
    bottom: 3px;
    gap: 5px;
}

.macro-value-container {
    width: max-content;
}

.macro-item {
    height: 19px;
    padding: 1px 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
    width: 100%;
    cursor: pointer;
}

.macro-value {
    color: #595B61;
    font-size: 14px;
    font-family: Barlow;
    font-weight: 700;
    word-wrap: break-word;
}

.macro-label {
    color: #595B61;
    font-size: 14px;
    font-family: Barlow;
    font-weight: 400;
    word-wrap: break-word;
}

.macro-calories {
    background: #007878;
    border-radius: 2px;
}

.macro-calories .macro-value, .macro-calories .macro-label {
    color: white;
}

/* Low Calorie Tooltip Styling */
.macro-calories:hover::after {
    content: attr(data-hover);
    position: absolute;
    bottom: 20px;
    left: 23%;
    transform: translateX(-50%);
    background-color: #007878;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 16px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.macro-calories::after {
    opacity: 0;
    pointer-events: none;
}

.macro-calories:hover::after {
    opacity: 1;
}

.macro-carbs {
    background: #703D37;
    border-radius: 2px;
}

.macro-carbs .macro-value, .macro-carbs .macro-label {
    color: white;
}

/* Low Carb Tooltip Styling */
.macro-carbs:hover::after {
    content: attr(data-hover);
    position: absolute;
    bottom: 20px;
    left: 37%;
    transform: translateX(-50%);
    background-color: #703D37;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 16px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.macro-carbs::after {
    opacity: 0;
    pointer-events: none;
}

.macro-carbs:hover::after {
    opacity: 1;
}

.macro-protein {
    background: #c37547;
    border-radius: 2px;
}

.macro-protein .macro-value, .macro-protein .macro-label {
    color: white;
}

/* High Protein Tooltip Styling */
.macro-protein:hover::after {
    content: attr(data-hover);
    position: absolute;
    bottom: 20px;
    left: 63%;
    transform: translateX(-50%);
    background-color: #c37547;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 16px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.macro-protein::after {
    opacity: 0;
    pointer-events: none;
}

.macro-protein:hover::after {
    opacity: 1;
}

.new-meal-card-container {
    padding: 8px 0;
    padding-bottom: 0;
}

.new-meal-card {
    width: 100%;
    padding: 0 12px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: inline-flex;
}

.new-meal-header {
    align-self: stretch;
    height: 70px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.new-meal-title {
    align-self: stretch;
    color: black;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 24px;
    word-wrap: break-word;
}

.new-meal-subtitle {
    color: #595B61;
    font-size: 14px;
    font-family: Barlow;
    font-weight: 500;
    line-height: 21px;
    word-wrap: break-word;
}

.new-meal-body {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 8px;
    display: flex;
}

.new-meal-switch-price {
    align-self: stretch;
    height: 24px;
    padding-left: 2px;
    padding-right: 2px;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
    gap: 10px;
}

.new-meal-switch {
    width: 100%;
    height: 24px;
    background: #EFEFEF;
    border-radius: 50px;
    justify-content: flex-start;
    align-items: center;
    gap: 1px;
    display: flex;
}

.new-meal-switch-regular {
    flex: 1 1 0;
    align-self: stretch;
    padding: 1px;
    background: #EFEFEF;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.new-meal-switch-regular.selected {
    background: #595B61;
}

.new-meal-switch-regular.selected .new-meal-switch-text {
    color: white;
}

.new-meal-switch-low-cal {
    flex: 1.5 1 0;
    align-self: stretch;
    padding: 1px;
    background: #EFEFEF;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.new-meal-switch-low-cal.selected {
    background: #007878;
}

.new-meal-switch-low-cal.selected .new-meal-switch-text {
    color: white;
}

.new-meal-switch-text {
    color: #595B61;
    font-size: 14px;
    font-family: Barlow;
    font-weight: 500;
    line-height: 16.80px;
    word-wrap: break-word;
}

.new-meal-switch-count-regular {
    height: 20px;
    width: 20px;
    padding-bottom: 1px;
    background: #85878B;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.new-meal-switch-count-text {
    color: white;
    font-size: 12px;
    font-family: Barlow;
    font-weight: 500;
    word-wrap: break-word;
}

.new-meal-switch-count-low-cal {
    height: 20px;
    width: 20px;
    padding-bottom: 1px;
    background: #00B6B6;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.new-meal-price {
    color: #212121;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 700;
    word-wrap: break-word;
}

.new-meal-add-button {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: #EDEDEE;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    text-align: center;
}

.new-meal-add-button.padding {
    padding: 16px 0;
}

.new-meal-swap-btn-additional-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 14.4px;
    color: #85878B;
    font-family: Barlow Condensed Medium;
}

.new-add-text {
    color: black;
    font-size: 20px;
    font-family: Montserrat;
    font-weight: 700;
    word-wrap: break-word;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.new-meal-added-button {
    width: 100%;
    height: 100%;
    background: rgb(255, 106, 33);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
    padding: 16px 0px;
}

.new-minus-button {
    width: 100%;
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    border-radius: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.new-minus-text{
    color: white;
    font-size: 20px;
    font-family: Barlow;
    font-weight: 700;
    word-wrap: break-word;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.new-quantity-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-quantity {
    color: white;
    font-size: 20px;
    font-family: Barlow;
    font-weight: 700;
    word-wrap: break-word;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.new-plus-button {
    width: 100%;
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    border-radius: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.new-plus-text {
    color: white;
    font-size: 20px;
    font-family: Barlow;
    font-weight: 700;
    word-wrap: break-word;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.new-minus-button {
    color: white;
}

.new-plus-button {
    color: white;
}

/* for 320 devices */
@media (max-width: 320px) {
    /* Styles for devices smaller than 321px */
    .new-byo-pill-wrapper-container {
        padding-top: 110px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 49%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 10px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 10px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 10px;
    }

    .new-meal-switch-regular {
        gap: 1px;
    }

    .new-meal-switch-low-cal {
        gap: 1px;
    }

    .new-meal-switch-text {
        font-size: 10px;
    }

    .new-meal-switch-count-text {
        font-size: 10px;
    }

    .new-meal-switch-count-regular {
        height: 15px;
        width: 15px;
    }

    .new-meal-switch-count-low-cal {
        height: 15px;
        width: 15px;
    }

    .new-meal-body {
        gap: 5px;
        height: 85px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }

    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .new-meal-swap-btn-additional-text {
        font-size: 10px;
    }

    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 10px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }
    
    .macros-inner-container {
        gap: 2px;
    }
}

/* for 375 devices */
@media (min-width: 321px) and (max-width: 375px) {
    /* Styles for devices between 321px and 375px */
    .new-byo-pill-wrapper-container {
        padding-top: 125px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 49%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 10px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 10px;
    }

    .new-meal-switch-regular {
        gap: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 5px;
    }

    .new-meal-switch-text {
        font-size: 10px;
    }

    .new-meal-switch-count-text {
        font-size: 10px;
    }

    .new-meal-switch-count-regular {
        height: 15px;
        width: 15px;
    }

    .new-meal-switch-count-low-cal {
        height: 15px;
        width: 15px;
    }

    .new-meal-body {
        gap: 5px;
        height: 85px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }

    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .new-meal-swap-btn-additional-text {
        font-size: 10px;
    }

    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 10px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }

    .macros-inner-container {
        gap: 2px;
    }
}

/* for 411 devices */
@media (min-width: 376px) and (max-width: 411px) {
    /* Styles for devices between 376px and 411px */
    .new-byo-pill-wrapper-container {
        padding-top: 130px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 49%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 10px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 10px;
    }

    .new-meal-switch-regular {
        gap: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 5px;
    }

    .new-meal-switch-text {
        font-size: 11px;
    }

    .new-meal-switch-count-text {
        font-size: 11px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 85px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }

    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .new-meal-swap-btn-additional-text {
        font-size: 12px;
    }

    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 10px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }

    .macros-inner-container {
        gap: 2px;
    }
}

/* for 412 devices */
@media (min-width: 412px) and (max-width: 413.98px) {
    /* Styles for devices between 376px and 411px */
    .new-byo-pill-wrapper-container {
        padding-top: 130px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 49%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }
    
    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 10px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 10px;
    }

    .new-meal-switch-regular {
        gap: 12px;
    }

    .new-meal-switch-low-cal {
        gap: 12px;
    }

    .new-meal-switch-text {
        font-size: 11px;
    }

    .new-meal-switch-count-text {
        font-size: 11px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 85px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }
    
    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    
    .new-meal-swap-btn-additional-text {
        font-size: 12px;
    }
    
    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 10px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }

    .macros-inner-container {
        gap: 2px;
    }
}

/* for 414px devices */
@media (min-width: 414px) and (max-width: 425.98px) {
    /* Styles for devices between 376px and 413px */
    .new-byo-pill-wrapper-container {
        padding-top: 130px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 49%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 10px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 10px;
    }

    .new-meal-switch-regular {
        gap: 12px;
    }

    .new-meal-switch-low-cal {
        gap: 12px;
    }

    .new-meal-switch-text {
        font-size: 11px;
    }

    .new-meal-switch-count-text {
        font-size: 11px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 85px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }

    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .new-meal-swap-btn-additional-text {
        font-size: 12px;
    }

    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 10px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }

    .macros-inner-container {
        gap: 2px;
    }
}

@media (min-width: 426px) and (max-width: 539.98px) {
    /* Styles for devices smaller than 539px */
    .new-byo-pill-wrapper-container {
        padding-top: 130px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 49%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 11px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 11px;
    }

    .new-meal-switch-regular {
        gap: 12px;
    }

    .new-meal-switch-low-cal {
        gap: 12px;
    }

    .new-meal-switch-text {
        font-size: 12px;
    }

    .new-meal-switch-count-text {
        font-size: 12px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 85px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }
    
    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    
    .new-meal-swap-btn-additional-text {
        font-size: 14px;
    }
    
    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 11px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }
    
    .macros-inner-container {
        gap: 2px;
    }
}

@media (min-width: 540px) and (max-width: 575.98px) {
    /* Styles for devices smaller than 575px */
    .new-byo-pill-wrapper-container {
        padding-top: 130px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 49%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 11px;
    }

    .new-meal-card {
        padding: 10px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 11px;
    }

    .new-meal-switch-regular {
        gap: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 5px;
    }

    .new-meal-switch-text {
        font-size: 12px;
    }

    .new-meal-switch-count-text {
        font-size: 12px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 65px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }
    
    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    
    .new-meal-swap-btn-additional-text {
        font-size: 12px;
    }
    
    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 11px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }

    .macros-inner-container {
        gap: 2px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    /* Styles for devices between 576px and 767px */
    .new-byo-pill-wrapper-container {
        padding-top: 100px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }

    .macros-inner-container {
        gap: 2px;
    }
}

@media (min-width: 768px) and (max-width: 819px) {
    /* Styles for devices between 768px and 991px */
    .new-byo-pill-wrapper-container {
        padding-top: 135px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 24.5%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 11px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 11px;
    }

    .new-meal-switch-regular {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 2px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-text {
        font-size: 12px;
    }

    .new-meal-switch-count-text {
        font-size: 12px;
    }

    .new-meal-switch-count-regular {
        height: 15px;
        width: 15px;
    }

    .new-meal-switch-count-low-cal {
        height: 15px;
        width: 15px;
    }

    .new-meal-body {
        gap: 5px;
        height: 90px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }
    
    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    
    .new-meal-swap-btn-additional-text {
        font-size: 12px;
    }
    
    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 11px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }

    .macros-inner-container {
        gap: 2px;
    }

    .new-meal-switch-low-cal {
        flex: 2 1 0;
    }
}

/* for 820px devices */
@media (min-width: 820px) and (max-width: 852.98px) {
    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 24.5%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 11px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 11px;
    }

    .new-meal-switch-regular {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-text {
        font-size: 12px;
    }

    .new-meal-switch-count-text {
        font-size: 12px;
    }

    .new-meal-switch-count-regular {
        height: 15px;
        width: 15px;
    }

    .new-meal-switch-count-low-cal {
        height: 15px;
        width: 15px;
    }

    .new-meal-body {
        gap: 5px;
        height: 85px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }
    
    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    
    .new-meal-swap-btn-additional-text {
        font-size: 12px;
    }
    
    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 11px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }

    .macros-inner-container {
        gap: 2px;
    }
}

/* for 853 */
@media (min-width: 853px) and (max-width: 911.98px) {
    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 24.5%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 10px;
    }

    .macro-label {
        font-size: 11px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-title {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-subtitle {
        font-size: 12px;
        line-height: 14px;
    }

    .new-meal-price {
        font-size: 11px;
    }

    .new-meal-switch-regular {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-text {
        font-size: 12px;
    }

    .new-meal-switch-count-text {
        font-size: 12px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 85px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding-top: 7px;
        padding-bottom: 5px;
    }

    .new-meal-switch-price {
        gap: 11px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }

    .macros-inner-container {
        gap: 2px;
    }

    .new-meal-add-button.padding {
        padding: 9px 0;
    }
}

/* for 912px devices */
@media (min-width: 912px) and (max-width: 991.98px) {
    /* Styles for devices between 912px and 991px */

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 24.5%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 14px;
    }

    .macro-label {
        font-size: 14px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-header {
        height: 90px;
    }

    .new-meal-title {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-subtitle {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-price {
        font-size: 14px;
    }

    .new-meal-switch-regular {
        gap: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-text {
        font-size: 13px;
    }

    .new-meal-switch-count-text {
        font-size: 13px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 95px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }
    
    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    
    .new-meal-swap-btn-additional-text {
        font-size: 12px;
    }
    
    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 14px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }
}

@media (min-width: 992px) and (max-width: 1023.98px) {
    /* Styles for devices between 992px and 1023px */
    .new-byo-pill-wrapper-container {
        padding-top: 180px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }
}

/* 1024x1366 */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
    .byo-main {
        width: 100%;
    }
}

/* for 1024px devices */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    /* Styles for devices between 1024px and 1199px */
    .new-byo-pill-wrapper-container {
        padding-top: 180px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 24.5%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 14px;
    }

    .macro-label {
        font-size: 14px;
    }

    .new-meal-card {
        padding: 5px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-header {
        height: 90px;
    }

    .new-meal-title {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-subtitle {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-price {
        font-size: 14px;
    }

    .new-meal-switch-regular {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-text {
        font-size: 13px;
    }

    .new-meal-switch-count-text {
        font-size: 13px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 95px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding: 8px 0;
    }
    
    .new-meal-add-button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    
    .new-meal-swap-btn-additional-text {
        font-size: 12px;
    }
    
    .new-meal-add-button.padding {
        padding: 11px 0;
    }

    .new-meal-switch-price {
        gap: 14px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }
}

/* for 1280px devices */
@media (min-width: 1280px) and (max-width: 1439.98px) {
    .byo-main {
        width: 90%;
    }

    .new-byo-pill-wrapper-container {
        padding-top: 180px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 24.5%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 14px;
    }

    .macro-label {
        font-size: 14px;
    }

    .new-meal-card {
        padding: 10px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-header {
        height: 90px;
    }

    .new-meal-title {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-subtitle {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-price {
        font-size: 14px;
    }

    .new-meal-switch-regular {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-text {
        font-size: 13px;
    }

    .new-meal-switch-count-text {
        font-size: 13px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 65px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding-top: 7px;
        padding-bottom: 5px;
    }

    .new-meal-switch-price {
        gap: 14px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 15px;
    }
}

/* for 1470px devices */
@media (min-width: 1470px) and (max-width: 956px) {
    .new-byo-pill-wrapper-container {
        padding-top: 180px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 24.5%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 14px;
    }

    .macro-label {
        font-size: 14px;
    }

    .new-meal-card {
        padding: 10px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-header {
        height: 90px;
    }

    .new-meal-title {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-subtitle {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-price {
        font-size: 14px;
    }

    .new-meal-switch-regular {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-text {
        font-size: 13px;
    }

    .new-meal-switch-count-text {
        font-size: 13px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 65px;
    }

    .new-add-text {
        font-size: 12px;
    }

    .new-meal-added-button {
        height: auto;
        padding-top: 7px;
        padding-bottom: 5px;
    }

    .new-meal-switch-price {
        gap: 14px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 1rem;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .new-meal-content {
        padding-bottom: 5px;
    }
}

/* for specific device of 1024px 600px */
@media (min-width: 1024px) and (max-width: 1024px) {
    .new-byo-pill-wrapper-container {
        padding-top: 175px;
    }
    
    .new-meal-content {
        padding-bottom: 5px;
    }
}

/* for 2160 */
@media (min-width: 2160px) and (max-width: 2160px) {
    .new-byo-pill-wrapper-container {
        padding-top: 170px;
    }

    .filter-pill-main-container {
        margin-left: 235px;
    }

    .new-main-dietary-filter-container {
        top: 155px;
    }

    .new-sub-main-container-dietary-filter {
        width: 21%;
    }
}

/* for specific device of 2560px */
@media (min-width: 2560px) and (max-width: 2560px) {
    .new-byo-pill-wrapper-container {
        padding-top: 215px;
    }

    .macros-container {
        height: 25px;
    }

    .macro-item {
        height: 25px;
    }

    .macro-value {
        font-size: 20px;
    }

    .macro-label {
        font-size: 20px;
    }
    
    .new-meal-title {
        font-size: 20px;
        line-height: 30px;
    }

    .new-meal-subtitle {
        font-size: 20px;
        line-height: 30px;
    }

    .new-meal-price {
        font-size: 20px;
    }

    .new-meal-header {
        height: 90px;
    }

    .new-meal-switch {
        height: 35px;
    }

    .new-meal-switch-text {
        font-size: 20px;
    }

    .new-meal-switch-count-regular {
        height: 30px;
        width: 30px;
    }

    .new-meal-switch-count-low-cal {
        height: 30px;
        width: 30px;
    }

    .new-meal-switch-count-text {
        font-size: 20px;
    }

    .new-meal-switch-regular {
        gap: 15px;
    }

    .new-meal-switch-low-cal {
        gap: 15px;
    }

    .new-meal-body {
        gap: 15px;
    }

    .new-meal-add-button {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .new-meal-added-button {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .filter-pill-main-container {
        margin-left: 275px;
    }
}

/* for specific device of 1728px */
@media (min-width: 1728px) and (max-width: 1728px) {
    .new-meal-card-desktop {
        flex: 0 0 19.4%;
    }

    .byo-main {
        width: 90%;
    }
}

/* 1440x1469 */
@media (min-width: 1440px) and (max-width: 1470px) {
    .byo-main {
        width: 90%;
    }

    .new-byo-pill-wrapper-container {
        padding-top: 180px;
    }

    body .row {
        padding-left: 2px;
        padding-right: 2px;
    }

    .new-meal-wrapper {
        max-width: 100%;
        gap: 5px;
    }

    .new-meal-card-desktop {
        flex: 0 0 24.7%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .macro-value {
        font-size: 14px;
    }

    .macro-label {
        font-size: 14px;
    }

    .new-meal-card {
        padding: 10px;
        padding-top: 0px;
        gap: 0px;
    }

    .new-meal-header {
        height: 90px;
    }

    .new-meal-title {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-subtitle {
        font-size: 16px;
        line-height: 20px;
    }

    .new-meal-price {
        font-size: 14px;
    }

    .new-meal-switch-regular {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-low-cal {
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-meal-switch-text {
        font-size: 13px;
    }

    .new-meal-switch-count-text {
        font-size: 13px;
    }

    .new-meal-switch-count-regular {
        height: 20px;
        width: 20px;
    }

    .new-meal-switch-count-low-cal {
        height: 20px;
        width: 20px;
    }

    .new-meal-body {
        gap: 5px;
        height: 65px;
    }

    .new-add-text {
        font-size: 20px;
    }

    .new-meal-added-button {
        padding: 18px 0px;
    }

    .new-meal-switch-price {
        gap: 14px;
    }

    .new-minus-text {
        font-size: 12px;
    }

    .new-quantity {
        font-size: 20px;
    }

    .new-plus-text {
        font-size: 12px;
    }

    .filter-pill-main-container {
        margin-left: 5px;
    }

    .new-meal-card-container {
        padding-bottom: 10px;
    }

    .new-meal-add-button.padding {
        padding: 16px 0;
    }
}

/* 1470x1852 */
@media (min-width: 1471px) and (max-width: 1852px) { 
    .new-byo-pill-wrapper-container {
        padding-top: 180px;
    }
    
    .new-meal-card-desktop {
        flex: 0 0 19.4%;
        cursor: pointer;
        width: 49%;
        height: 50%;
        margin-bottom: 10px;
    }

    .new-meal-wrapper {
        max-width: 100%;
    }

    .filter-pill-main-container {
        margin-left: 5px;
    }
}