:root {
    --primary-color: #020336;
    --secondary-color: #05d8c8;
    --color-success: #04a404;
    --disabled-color: #0203366b;
    --background-error: #900e0e17;
    --color-error: #900e0e;
    --text-color: #212529;
    --text-color-grey: #6a727a;
    --text-color-white: #fff;
    --text-hover-background: #f1f3f4;
    --color-gray-50: rgb(249 250 251);
    --color-gray-100: rgb(243 244 246);
    --color-gray-200: rgb(229 231 235);
    --color-gray-300: rgb(209 213 219);
    --color-gray-400: rgb(156 163 175);
    --color-gray-500: rgb(107 114 128);
    --color-gray-600: rgb(75 85 99);
    --color-gray-700: rgb(55 65 81);
    --color-gray-800: rgb(31 41 55);
    --color-gray-900: rgb(17 24 39);
    --color-gray-950: rgb(3 7 18);
}

html {
    scroll-padding-top: 80px;
    overflow-x: hidden;
    width: 100vw;
    position: relative;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #212529;
}
input{
    border-radius: 0;
}
.red-bg{
    background: rgb(193 0 7);
}
.light-bg {
    background: #f3f3f3;
}
.modal-overlay{
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0, 0.25);
    z-index: 1002;
    transition: opacity .25s ease-in;
}
.modal-overlay.active{
    opacity: 1;
}
.sub-modal{
    max-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 50%;
    left: 50%;
    opacity: 0;
    max-width: 500px;
    width: 95%;
    background-color: #fff;
    transform: translate(-50%, calc(-50% + 10px));
    z-index: 1003;
    transition: opacity .25s ease-in, transform .25s ease-in;
}
.sub-modal.active{
    opacity: 1;
    transform: translate(-50%, -50%);
}
.border-box{
    box-sizing: border-box;
}
.royal-mail {
    position: fixed;
    bottom: 0;
    z-index: 9999;
    background: #f5e9e9;
    border-top: 1px solid var(--color-error);
    color: var(--color-error);
}

.no-shrink{
    flex-shrink: 0;
}
main {
    min-height: 100vh;
}

body {
    margin: 0;
    overflow-x: clip;
    width: 100vw;
    position: relative;
}

ol {
    list-style: disc;
}

body.no-scroll-y {
    overflow-y: hidden;
}

.b-radius-2 {
    border-radius: 2px;
}

.b-radius-4 {
    border-radius: 4px;
}

.b-radius-8 {
    border-radius: 8px;
}

.b-radius-top-left-4 {
    border-top-left-radius: 4px;
}

.b-radius-top-right-4 {
    border-top-right-radius: 4px;
}

.b-radius-bottom-left-4 {
    border-bottom-left-radius: 4px;
}

.b-radius-bottom-right-4 {
    border-bottom-right-radius: 4px;
}

.b-top-0 {
    border-top: 0px !important;
}

.b-left-0 {
    border-left: 0px !important;
}

.b-bottom-0 {
    border-bottom: 0px !important;
}

button {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #212529;
}

button.loading>span {
    opacity: 0;
}

.removing {
    transform: translateX(-45px);
    opacity: 0;
}

.overflow-horizontal {
    overflow-x: overlay;
}
.overflow-horizontal-auto{
    overflow-x: auto;
}
.overflow-hidden{
    overflow: hidden;
}
button:disabled {
    cursor: default;
    opacity: .25;
    pointer-events: none;
}

button.no-border {
    border: 0 !important;
}

button.chevron {
    position: relative;
    height: 17px;
    width: 17px;
    border-radius: 100%;
    cursor: pointer;
    background-color: #fff;
    border: 0px;
}

button.chevron::before {
    background-image: url(/images/icons/chevron.svg);
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    display: inline-block;
    content: "";
    position: absolute;
    top: 1px;
    left: -1px;
}

button.chevron.next-month::before {
    transform: scale(-1);
    left: 1px
}

.chevron:disabled {
    opacity: .25;
}

.border-bottom-0 {
    border-bottom: 0px !important;
}

.container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 30px;
}
.contain-1200 {
    max-width: 1200px;
}
.container.no-padding{
    padding: 0px;
}
.container.smaller {
    max-width: 1140px;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.absolute-center-x {
    transform: translateX(-50%);
    left: 50%;
}

.absolute-center-y {
    transform: translateY(-50%);
    top: 50%;
}

.absolute-center-xy {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.h2 {
    font-weight: bold;
    font-size: 24px;
}

.d-block {
    display: block;
}

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

.v-none {
    visibility: hidden !important;
    height: 0;
}

.d-flex {
    display: flex !important;
}
.d-grid {
    display: grid;
}
.flex-wrap{
    flex-wrap: wrap;
}

.gap-5 {
    gap: 5px;
}

.gap-15 {
    gap: 15px;
}

.align-items-flex {
    align-items: flex-end;
}

.align-stretch {
    align-items: stretch;
}

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

.align-items-baseline {
    align-items: baseline;
}

.justify-center {
    justify-content: center;
}

.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}
.bg-gray-100{
    background-color: var(--color-gray-100);
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.grid {
    display: flex;
    flex-flow: row wrap;
}

.flex-column {
    flex-flow: column;
}

small {
    font-family: inherit;
    font-size: 10px;
}

.a-no-style {
    text-decoration: inherit;
    color: inherit;
}

.a-just-line {
    color: inherit;
}

a.taller {
    padding: 19px;
}

a:visited {
    text-decoration: none;
}

a:visited .offscreen-li {
    text-decoration: none;
}

.no-style {
    list-style-type: none;
}

.img-fit {
    height: auto;
    width: 100%;
}

.img-drop-shadow {
    filter: brightness(1.1) drop-shadow(0 0px 10px #00000040);
}
.no-drop-shadow{
    filter: brightness(1.1);
}
h1 {
    margin: 0;
}

h1.bigger {
    font-size: 32px;
}

.p-0 {
    padding: 0 !important;
}
.p-5 {
    padding: 5px;
}
.p-10 {
    padding: 10px;
}

.p-15 {
    padding: 15px;
}

.p-30 {
    padding: 30px !important;
}

.p-1 {
    padding: 1rem;
}

.py-sm {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.px-15 {
    padding-right: 15px;
    padding-left: 15px
}
.px-30 {
    padding-top: 30px;
    padding-bottom: 30px
}
.px-10 {
    padding-right: 10px;
    padding-left: 10px;
}
.px-5 {
    padding-right: 50px;
    padding-left: 50px
}

.pt-2 {
    padding-top: 2rem;
}
.pt-15{
    padding-top: 15px;
}
.pt-50{
    padding-top: 50px;
}
.pb-1 {
    padding-bottom: 1rem;
}

.pb-2 {
    padding-bottom: 2rem;
}

.pb-5 {
    padding-bottom: 5rem;
}

.pb-5px {
    padding-bottom: 5px;
}

.pb-10{
    padding-bottom: 10px;
}

.pb-15{
    padding-bottom: 15px;
}

.pb-30{
    padding-bottom: 30px;
}

.m-auto {
    margin: auto !important;
}

.mx-5{
    margin-right: 5px;
    margin-left: 5px;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mx-10 {
    margin-right: 10px;
    margin-left: 10px;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
.my-10{
    margin-top: 10px;
    margin-bottom: 10px;
}
.mt-auto {
    margin-top: auto;
}

.invert {
    filter: invert(1);
}

.ml-auto {
    margin-left: auto;
}
.ml-0 {
    margin-left: 0 !important;
}
.ml-1 {
    margin-left: 1rem;
}

.ml-2 {
    margin-left: 2rem;
}
.ml-5 {
    margin-left: 5px;
}
.ml-10 {
    margin-left: 10px;
}
.ml-15 {
    margin-left: 15px;
}
.ml-30 {
    margin-left: 30px;
}
.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0px !important;
}

.mt-small {
    margin-top: 3px;
}
.mt-5px {
    margin-top: 5px;
}
.mt-05 {
    margin-top: 0.5rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem !important;
}

.mt-5 {
    margin-top: 5rem;
}

.mt-10 {
    margin-top: 10px;
}
.mt-15 {
    margin-top: 15px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-50 {
    margin-top: 50px;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-sm {
    margin-bottom: 5px !important;
}
.mb-05{
    margin-bottom: .5rem;
}
.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem !important;
}
.mb-5p {
    margin-bottom: 5px;
}
.mb-10px {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-50{
    margin-bottom: 50px;
}
.mb-3 {
    margin-bottom: 3rem;
}

.mb-5 {
    margin-bottom: 5rem !important;
}

.mb-10 {
    margin-bottom: 10rem;
}

.mr-5 {
    margin-right: 5px;
}
.mr-10 {
    margin-right: 10px;
}
.mr-15 {
    margin-right: 15px;
}
.mr-20 {
    margin-right: 20px;
}
.mr-1 {
    margin-right: 1rem;
}

.mr-2 {
    margin-right: 2rem;
}

.h-0 {
    height: 0%;
}

.h-100 {
    height: 100%;
}
.w-fit{
    width: fit-content !important;
}
.w-100 {
    width: 100%;
}

.w-100-important {
    width: 100% !important;
}

.w-75 {
    width: 75% !important;
}

.w-50 {
    width: 50%;
}

.w-33 {
    width: 33.33%;
}

.w-25 {
    width: 25% !important;
}
.z-behind{
    z-index: -1 !important;
}
.overflow-visible {
    overflow: visible !important;
}

.hide {
    height: 0;
    opacity: 0;
    visibility: hidden;
}

.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-100 {
    opacity: 1;
}

.col-2 {
    width: 50%;
}

.col-3 {
    width: 33.3%;
}

.col-4 {
    width: 25%;
}

.col-5 {
    width: 20%;
}
.text-start{
    text-align: start;
}
.text-center {
    text-align: center;
}

.text-end {
    text-align: end;
}
.text-ellipses {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.text-capitalize {
    text-transform: capitalize;
}
.text-capitalize-first::first-letter {
    text-transform: capitalize;
}
.list-no-style {
    list-style-type: none;
}

.f-white {
    color: var(--text-color-white);
}

.f-grey {
    color: var(--text-color-grey);
}

.f-black {
    color: var(--text-color);
}

.f-blue {
    color: var(--primary-color);
}

.f-lato {
    font-family: 'Lato', sans-serif;
}

.f-light {
    font-weight: 300;
}
.f-400 {
    font-weight: 400;
}
.f-normal {
    font-weight: 500;
}

.f-bold {
    font-weight: 600;
}
.f-25rem{
    font-size: 2.5rem;
}
.f-13rem{
    font-size: 1.3rem;
}
.f-18rem{
    font-size: 1.8rem;
}
.f-biggest{
    font-size: 2rem;
}
.f-bigger {
    font-size: 1.5rem;
}
.f-big {
    font-size: 1.1rem !important;
}
.f-16 {
    font-size: 1rem;
}
.f-sm{
    font-size: 0.875rem;
}

.f-small {
    font-size: 14px;
}

.f-smaller {
    font-size: 13px;
}

.f-smallest {
    font-size: 12px;
}
.text-decoration-underline{
    text-decoration: underline;
}
.caret {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.link-button-underline {
    border-bottom: 1px solid #fff;
    padding-right: 18px;
    padding-left: 0px;
    padding-bottom: 5px;
}

.link-button-underline:hover {
    border-bottom: 1px solid #2c3960;
}

#order-within:before {
    content: url(/images/icons/timer.svg);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#order-within {
    padding: 11px 10px 14px 29px;
    margin-top: 4px;
    min-width: 39vw;
    font-family: 'Lato', sans-serif;
}

#order-within>span {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
}

.link-button-underline-subtract {
    border-bottom: 1px solid #2c3960;
    padding-right: 18px;
    padding-left: 0px;
    padding-bottom: 5px;
}

.link-button-underline-subtract:hover {
    border-bottom: 1px solid #fff;
}

#cookies-banner {
    position: fixed;
    bottom: 0;
    z-index: 99999999999999;
    background: #020336;
    width: calc(100% - 40px);
    display: flex;
    padding: 10px 20px 20px 20px;
    align-items: center;
}

#cookies-banner>div {
    font-family: 'Lato', sans-serif;
    color: #fff;
}

#cookies-banner>div:first-child {
    width: 80%;
    padding-right: 15px;
}

#cookies-banner>div:nth-child(2) {
    width: 20%;
}

.bigger-headers {
    font-size: 32px;
}

/* landing */
main.landing, .max-w-1400{
    max-width: 1400px;
    margin: auto;
}
.landing-overlay{
    background: rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
}

.landing-modal{
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    height: auto;
    padding: 30px 10px;
    transform: translate(-50%, -50%);
    width: 325px;
    z-index: 10001;
}

.landing-modal .outline-btn{
    padding: 15px;
}
.landing-picture {
    flex-shrink: 0;
    width: 50%;
    height: 800px;
    max-width: 640px;
    background: url(https://static.hightownpharmacy.co.uk/landing/landing-ed.webp);
    background-size: cover;
    background-position: center;
}
.landing-info {
    margin-top: 30px;
    margin-left: 30px;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}
.landing-treatment{
    font: 800 1.1rem Lato, sans-serif;
    letter-spacing: 0.55px;
}
.landing-mobile-btn{
    display: none !important;
}
.landing-item{
    font: 700 4rem "Lora", serif;
    margin-top: 10px;
}
.landing-tag{
    font-weight: 400;
    font-size: 2.5rem;
    margin-left: 5px;
    margin-top: -10px;
    font-style: italic;
}
.landing-description{
    line-height: 24px;
}
.landing-code{
    width: fit-content;
    box-sizing: border-box;
    padding: 7px;
    background: #020336;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
}
.landing-btn{
    font: 600 1rem Lato;
    letter-spacing: 0.3px;
    max-width: 325px;
    min-width: 300px;
    text-align: center;
}
.landing-floating-bar{
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 0px 1px #020336, 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
    padding: 10px;
    position: fixed;
    bottom: 30px;
    left: 50%;
    max-width: 800px;
    transform: translateX(-50%);
    width: 90%;
    box-sizing: border-box;
    z-index: 9;
}
.landing-floating-bar a {
    margin: 0;
    padding: 10px;
    min-width: 200px;
    width: 200px;
}
.trustpilot-landing{
    width: 240px;
}
.landing-prices{
    padding: 15px;
    gap: 15px;
}
.landing-prices-container{
    width: 100%;
    max-width: 400px;
}
.landing-steps{
    font: 500 1rem Lato;
    width: 325px;
    text-align: center;
    box-shadow: 0px 0px 0px 2px var(--primary-color);
    border-radius: 2px;
    padding: 15px 5px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 15px;
}
.landing-steps:not(:last-of-type)::after{
    content: "";
    position: absolute;
    bottom: -28px;
    right: 10px;
    height: 25px;
    width: 10px;
    border-right: 3px dotted var(--primary-color);
}
.landing-steps.left::after{
    right: unset;
    left: 10px;
}
.landing-step{
    position: absolute;
    top: -11px;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    padding: 0px 11px;
}
/* blog */
.blog-post-card{
    background: #fff;
    width: 300px;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 12px;
}
#loading-blogs {
    position: relative;
    margin-top: 10px;
    margin-bottom: 30px;
}

.view-all-blog-products {
    width: 200px;
    margin: 20px auto;
    text-align: center;
    font-weight: 700;
    font-family: lato;
}

.view-all-blog-products>a {
    font-family: 'Lato';
}

.load-more {
    width: 200px;
    padding-bottom: 30px;
}

.blog-product-li {
    width: 270px;
    flex-shrink: 0;
}
.blog-product-li>.treatment-product-type-holder{
    top: 15px;
    right: 15px;
}
.blog-product-li:first-child {
    margin-left: auto;
}

.blog-product-li:last-child {
    margin-right: auto;
}

.article-holder {
    box-shadow: 0px 0px 0px 1px var(--color-gray-300);
    border-radius: 8px;
}
.article-holder:hover{
    box-shadow: 0px 0px 0px 2px var(--primary-color);
}
.article-seperator {
    border-bottom: 1px solid #000;
    width: 50%;
}
.article-header_container{
    background-color: rgb(245 248 251);
    padding: 30px 0px 50px;
}
.article_wrapper {
    width: 90%;
    max-width: 1000px;
}
.article-post{
    margin: 50px 0px;
    font-family: Lato;
    line-height: 28px;
}
.article-post>h2{
    font-weight: 600;
    margin-top: 30px;
    font-size: 25px;
}
.article-post>ul{
    padding-left: 25px;
}
.article-post li{
    margin: 10px 0px;
    padding: 7px 0px;
}
.blog-product-table, .blog-product-table thead, .blog-product-table th, .blog-product-table td{
    border: 0px;
}
.blog-product-table {
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    overflow: hidden;
}
.blog-product-table thead {
    background-color: var(--primary-color);
    color: #fff;
}
.blog-product-table td{
    border: 0.5px solid var(--primary-color);
}

/* AESTHETICS */
.aesthetics-h1 {
    padding: 15px;
    font-weight: 500;
    width: 100%;
    font-size: 32px;
    margin-left: -10px;
}

.aesthetics-bg {
    background: #fdf6f0;
}

.aesthethics-treatment-header {
    margin-left: 60px;
    z-index: 1;
}

.aesthetics-header-image {
    width: 450px;
    margin-top: 50px;
    padding: 25px;
    z-index: 1;
}

.aesthetics-treatment-h1 {
    font-size: 62px;
    color: #4d4e59;
    font-weight: 600;
    margin-left: 16px;
    line-height: 68px;
    margin-bottom: 28px;
}

.aesthetics-info-boxes {
    flex-wrap: wrap;
    margin-top: 15px;
}

.aesthetics-info-boxes>div {
    width: calc(50% - 100px);
    padding: 15px;
    border: 2px solid #000;
    position: relative;
    margin: 0px 0px 30px 20px;
}

.aesthetics-info-boxes h2 {
    margin-top: -26px;
    background: #fdf6f0;
    width: fit-content;
    padding: 0px 5px;
    font-size: 20px;
    margin-bottom: 0;
    font-weight: 600;
    color: #000;
}

.aesthetics-info-boxes h3 {
    font-size: 20px;
    font-weight: 400;
    margin: 5px 0px 5px 7px;
    line-height: 28px;
}

.aesthetics-header-triangle {
    background: #fdf6f0;
    height: 65px;
    position: absolute;
    width: 0;
    bottom: 0px;
    right: 0;
    border-top: 110px solid transparent;
    border-right: 100vw solid #fff;
    border-bottom: 0px solid transparent;
}

.aesthetics-overview {
    padding: 55px 25px;
    text-align: center;
}

.aesthetic-overview.pb {
    padding-bottom: 80px;
}

.aesthetics-overview>h2 {
    margin: 0;
    font-size: 42px;
    font-weight: 400;
}

.aesthetics-overview>p {
    max-width: 900px;
    margin: 5px auto 30px;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    line-height: 32px;
}

.aesthetics-overview a {
    max-width: 250px;
    margin: auto;
    font-family: Lato, sans-serif;
    font-weight: 600;
}

.aesthetics-overview>.aesthetic-prices {
    max-width: 550px;
    margin: 15px auto 30px auto !important;
}

.tag-list {
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    justify-content: center;
    margin: auto;
    padding: 0;
}

.tag-list>li {
    padding: 15px 30px;
    font-family: Lato, sans-serif;
    text-transform: capitalize;
    margin: 10px;
    background: #0000000a;
    border-radius: 100px;
    border: 2px solid #0000003b;
    font-weight: 600;
}

.title-underline {
    width: 75px;
    height: 1px;
    background: #020336;
    margin: 5px auto 17px;
}

.rodney-image {
    background-image: url(/images/aesthetics/rodney-street-2.webp);
    height: 50vw;
    background-size: cover;
    background-position-y: 84%;
    background-size: 100%;
}

.rodney-header {
    background: #fdf6f0;
    position: relative;
}

.rodney-header>.placement {
    left: 75px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.placement>.btn-holder {
    margin-left: 8px;
}

.rodney-header h1 {
    font-size: 66px;
    color: #4d4e59;
    line-height: 68px;
}

.rodney-header button {
    margin-left: 7px;
}

.rodney-header h1>div {
    font-family: 'Old Standard TT'
}

.rodney-header h2 {
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    margin-left: 7px;
    color: #4d4e59;
    width: 50%;
    margin-top: 25px;
}

.rodney-header h1>.lead {
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    margin-left: 7px;
}

.rodney-two {
    padding: 12%;
    text-align: center;
}

.rodney-two>h2 {
    font-family: 'Old Standard TT';
    font-style: italic;
    color: #545454;
    font-weight: 500;
    margin: 0;
    font-size: 48px;
    line-height: 85px;
}

.rodney-three {
    background: #fff;
}

.rodney-three .treatment-wave {
    background-image: url(/images/aesthetics/wave.svg) !important
}

.rodney-three>h2 {
    font-size: 54px;
    text-align: center;
    color: #38384a;
    font-weight: 400;
    font-style: italic;
    background: #fdf6f0;
    padding: 45px;
    margin: 0;
}

.rodney-three>section {
    background: #fdf6f0;
}

.rodney-all-treatments {
    text-align: center;
    background: #fdf6f0;
    font-size: 60px;
    font-weight: 500;
    font-style: italic;
    padding-top: 60px;
    padding-bottom: 40px;
    color: #3a3a57;
    transition: color .3s ease-in;
}

.back-container{
    margin-left: 45px;
}
.aesthetic-button {
    width: 24px;
    height: 24px;
}

.aesthetic-chevron {
    width: 24px;
    height: 24px;
    transform: rotate(-90deg);
    transition: transform .15s ease-in;
}

.anim-down,
.anim-up {
    opacity: 0;
    visibility: hidden;
    transition: transform .5s ease-out, opacity .5s ease-out, visiblity .5s ease-out;
}

.anim-down.active,
.anim-up.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.anim-down {
    transform: translateY(-15px);
}

.anim-up {
    transform: translateY(15px);
}

.rodney-all-treatments:hover {
    color: #020336;
}

.rodney-four>h2 {
    font-size: 54px;
    text-align: center;
    color: #38384a;
    font-weight: 400;
    font-style: italic;
}

.sliding-container {
    display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
    --position: 50%;
    max-width: 250px;
    max-height: 250px;
    margin-right: 40px;
    --opacity-before: 100%;
    --opacity-after: 100%;
}

.sliding-container:last-of-type {
    margin-right: 0px;
}

.sliding-container.case-study {
    margin-left: auto !important;
    margin-right: 100px !important;
}

.image-container {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
}

.sliding-container::before {
    content: "Before";
    position: absolute;
    color: #fff;
    left: 0px;
    background: #00000047;
    padding: 8px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    opacity: var(--opacity-before);
}

.sliding-container::after {
    content: "After";
    position: absolute;
    color: #fff;
    right: 0px;
    background: #00000047;
    padding: 8px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    opacity: var(--opacity-after);
    z-index: 4;
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.before-image {
    position: absolute;
    top: 0;
    left: 0f;
    width: var(--position);
}

.slider {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.container-new {
    position: relative;
    height: 250px;
    width: 250px;
    overflow: hidden;
    touch-action: none;
}
.before-image-new, .after-image-new {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    clip: rect(0, 250px, 250px, 0);
}
.before-image-new{
      z-index: 2;
      object-fit: cover;
      clip: rect(0, 125px, 250px, 0);
}
  
.slider-new {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 100%;
    cursor: pointer;
    z-index: 3;
}
.slider-new > .slider-arrows {
    height: 12px;
    width: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 6px;
    display: flex;
    border-radius: 100%;
    align-items: center;
    z-index: 6;
}  
.slider-line {
    position: absolute;
    inset: 0;
    width: 4px;
    height: 100%;
    background-color: #fff;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0px 0px 2px 1px #00000030;
}
.slider-button {
    position: absolute;
    background-color: #fff;
    color: #000;
    padding: 5px;
    border-radius: 100%;
    display: grid;
    top: 50%;
    left: var(--position);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
    box-shadow: 0px 0px 2px 1px #00000030;
}

.sliding-container img {
    pointer-events: none;
    user-select: none;
}

.sliding-container:hover>.slider-line,
.sliding-container:hover>.slider-button {
    box-shadow: 0px 0px 2px 1px #0000007a;
}

.slider:focus-visible~.slider-button {
    box-shadow: 0px 0px 9px 1px #0000005e;
}

.rodney-contact {
    margin-top: 125px;
    flex-wrap: wrap;
    margin-bottom: 100px;
}

.rodney-contact>div:not(:last-of-type) {
    margin-right: clamp(0px, 15%, 150px);
}

.rodney-contact>h2 {
    width: 100%;
    text-align: center;
    font-size: 32px;
    margin-bottom: 75px;
    font-size: 54px;
    text-align: center;
    color: #38384a;
    font-weight: 400;
    font-style: italic;
}

.rodney-contact a {
    opacity: .5;
}

.rodney-contact a:hover {
    opacity: 1;
}

.rodney-contact h2 {
    font-weight: 500;
}

.ft-box {
    background: #fdf6f0;
    width: 380px;
}

.ft-box img {
    margin-top: auto;
    display: block;
    margin-bottom: auto;
    height: auto;
    width: 100%;
}

.ft-box h2 {
    font-size: 60px;
    color: #9a9a9f;
    font-weight: 500;
    margin: auto;
    font-style: italic;
    transition: color .3s ease-in;
    cursor: pointer;
    text-align: center;
}

.book-float {
    position: fixed;
    background: #020336;
    z-index: 999999;
    color: #fff;
    font-weight: 900;
    top: 25px;
    right: 20px;
}

.book-float>a {
    padding: 20px;
    display: block;
    letter-spacing: .7px;
}

.ft-box h2:hover {
    color: #020336;
}

.rodney-review {
    text-align: center;
    font-size: 42px;
    width: 1000px;
    margin: 83px auto 15px;
    line-height: 50px;
    color: #9a9a9f;
    font-style: italic;
}

.rodney-review~img {
    opacity: .2;
}

.rodney-footer {
    background: #fdf6f0;
}

.rodney-footer>.address {
    margin-left: 50px;
    margin-top: auto;
    margin-bottom: auto;
    color: #38384a;
}

.rodney-footer>.address>h2:first-of-type {
    font-weight: 600;
    font-size: 26px;
    text-transform: uppercase;
    color: #38384a;
    margin-bottom: 10px;
}

.rodney-footer>.address>h2:nth-child(2) {
    font-weight: 600;
    color: #38384a;
}

.rodney-footer>.address>h2 {
    margin: 0;
    font-weight: 500;
    color: #5f6060;
}

.rodney-footer img {
    height: auto;
    width: 100%;
    max-width: 900px;
}

.map-details {
    position: absolute;
    top: 25px;
    left: 50px;
    background: #fff;
    padding: 15px 35px 15px 15px;
    border-radius: 2px;
    box-shadow: 0px 2px 2px 1px #00000038;
}

.map-details>.map-title {
    font-family: 'Lato';
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

.map-details>.map-lead {
    font-family: 'Lato';
    font-size: 12px;
    margin-bottom: 5px;
}

.map-details>.map-link {
    font-family: 'Lato';
    font-size: 12px;
    text-decoration: none;
    color: #1a73e8;
}

.map-details>.map-link {
    text-decoration: underline;
}

.map-details>.map-link {
    color: #1a73e8;
}

.aesthetic-prices-header {
    margin: 0 0px 0 15px;
    padding: 0px;
    margin-top: 20px;
    font-weight: 300;
    font-size: 26px;
    background: #fff;
    z-index: 1;
    position: relative;
    width: fit-content;
}

.aesthetic-prices {
    padding: 10px 20px;
    margin-bottom: 35px;
    border: 1px solid;
    margin-top: -15px;
}

.aesthetic-list-order {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: auto;
}

.aesthetic-list-order>section {
    width: calc(33% - 10px);
    margin-right: 10px;
}

.aesthetic-list-order>section:first-child {
    order: 2
}

.aesthetic-list-order>section:nth-child(2) {
    order: 1
}

.aesthetic-list-order>section:last-child {
    order: 3
}

.aesthetic-prices>li {
    padding: 8px 0px;
    border-bottom: 1px solid #cacaca;
}

.aesthetic-prices>li:last-of-type {
    border-bottom: 0px;
}

.aesthetic-prices b {
    font-size: 21px;
}

.aesthetic-prices div {
    font-size: 18px;
    margin-top: 3px;
}

.case-study>h3 {
    text-align: start;
    font-size: 28px;
    margin: 0;
    font-weight: 200;
}

.case-study>ul {
    text-align: left;
    padding: 0;
    margin: 15px 0px 0px;
}

.case-study>ul>li {
    margin: 10px 0px;
    font-size: 22px;
}

.before-after-offset {
    margin-top: 90px;
    margin-bottom: 30px;
}

/* trt */
.trt-header{
    padding: 80px 15px;
}
.trt-transition{
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0s ease 0.2s;
}
.trt-transition.active{
    opacity: 1;
    transform: translateY(0px);
    transition: transform 0.35s ease;
}
.trt-btn{
    padding: 10px 20px;
    background: linear-gradient(21deg, var(--primary-color), #12dacb 306%);
    color: #fff;
    text-decoration: none;
}
.trt-info-container{
    background: #f5f5f5;
}
.trt-right-grid{
    box-sizing: border-box;
    color: #fff;
}
.trt-uptrend::after{
    rotate: 180deg;
    transform: scaleX(-1);
}
.trt-info {
    background-color: #fff;
    box-sizing: border-box;
    padding: 50px;
    min-width: 385px;
}
.trt-info-container > .container{
    overflow-x: auto;
}
.trt-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.trt-grid-item{
    background: #f5f5f5;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 10%), 0px 0px 0px 1px #e1e1e169;
    border-radius: 18px;
    padding: 25px 15px;
    line-height: 1.4;
}
.trt-table{
    max-width: 800px;
    overflow-x: auto;
    width: calc(100% + 10px);
}
.trt-table::after{
    pointer-events: none;
    content: "";
    position: absolute;
    z-index: 100;
    height: 100%;
    right: -10px;
    bottom: 0;
    width: 200px;
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgb(255 255 255) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgb(255 255 255) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgb(255 255 255) 100%);
}
.trt-table table{
    min-width: 484px;
    margin-right: 40px;
}
.trt-table td {
    border-bottom: 1px solid;
    padding: 15px 15px 15px 0px;
}
.trt-options{
    overflow-x: auto;
    scroll-snap-type: x mandatory;  
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.trt-dots{
    display: none;
}
.trt-option{
    scroll-snap-align: center;
    box-sizing: border-box;
    border-radius: 2px;
    background-color: #f5f5f5;
    padding: 30px;
    min-width: 325px;
}
.trt-options-pad::after{
    content: " ";
    height: 0px;
    width: 20px;
}
.trt-popular{
    border: 2px solid #020336;
}
.trt-popular::before{
    content: 'Most Popular';
    position: absolute;
    top: -22px;
    text-align: center;
    width: calc(100% + 4px);
    left: -2px;
    background: #020335;
    color: #fff;
    padding: 5px;
    box-sizing: border-box;
    font-size: 0.875rem;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    font-weight: 600;
}
.trt-choice-option{
    background: #fff;
    padding: 10px 5px;
}
.trt-choice-option.dark-btn{
    border-radius: 4px;
    font-weight: 500;
    font-size: 1rem;
    margin-top: 10px;
    padding: 10px 5px;
}
.trt-price{
    color: #6b7585;
    bottom: 6px;
}
.trt-pill{
    padding: 10px 20px;
    background: linear-gradient(21deg, var(--primary-color), #12dacb 306%);
    border-radius: 100px;
    border: 1px solid #020336;
    color: #fff;
}
.trt-pricing-step{
    width: 325px;
    box-sizing: border-box;
    border-left: 1px solid #020336;
    padding: 19px 5px 10px 15px;
    background: #f5f5f5;
}
.trt-pricing-step::before{
    content: attr(data-step);
    position: absolute;
    left: -7px;
    top: -8px;
    border-radius: 2px;
    color: #fff;
    background-color: #020336;
    font-size: 0.6rem;
    width: 40px;
    height: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trt-pricing-step:last-of-type{
    padding: 19px 5px 20px 15px;
}
.trt-step{
    background: linear-gradient(21deg, var(--primary-color), #12dacb 306%);
    border-radius: 8px;
    box-sizing: border-box;
    color: #fff;
    padding: 30px;
    margin: 10px 0px;
    width: 27%;
    min-width: 240px;
}
.trt-step.third{
    width: 33%;
}
.trt-step.light{
    background: #fff;
    color: #222222;
}
.trt-step-price{
    font-weight: 600;
    background: #020336;
    width: fit-content;
    color: #fff;
}
.trt-step-description{
    padding-bottom: 17px;
}
.pie-chart {
    background:
        radial-gradient(
            circle closest-side,
            white 0,
            white 65.84%,
            transparent 65.84%,
            transparent 99%,
            white 0
        ),
        conic-gradient(
            #085b73 0,
            #020336 90%,
            #fff 0,
            #fff 100%
    );
    width: 125px;
    height: 132px;
    margin: 0;
}
.silhoutte{
    width: 50px;
}
.silhoutte.fade{
    opacity: 0.5;
}
.see-more-btn{
    display: none;
}
.trt-biomarkers{
    background: #f5f5f5;
    box-shadow: 0px 0px 0px 1px #e1e1e1;
}
.trt-at-home, .trt-in-person {
    border-radius: 12px;
    flex-shrink: 0;
    width: 50%;
    height: 690px;
    max-width: 640px;
    background: url(https://static.hightownpharmacy.co.uk/trt/testosterone-at-home-blood-test.webp);
    background-size: cover;
    background-position: center;
}
.trt-in-person{
    background: url(https://static.hightownpharmacy.co.uk/products/in-person-testosterone-blood-test.webp);
    background-size: cover;
    background-position: center;
}
.trt-splash-card{
    background-size: cover;
    border-radius: 12px;
    width: 250px;
    height: 400px;
    overflow: hidden;
}
.trt-splash-energy{
    background-image: linear-gradient(183deg, rgb(0 0 0 / 77%) 11.4%, rgb(63 76 119 / 0%) 70.2%), url(https://static.hightownpharmacy.co.uk/trt/improved-energy.webp);
}
.trt-splash-weight-loss{
    background-image: linear-gradient(183deg, rgb(0 0 0 / 77%) 11.4%, rgb(63 76 119 / 0%) 70.2%), url(https://static.hightownpharmacy.co.uk/trt/weight-loss.webp);
}
.trt-splash-libido{
    background-image: linear-gradient(183deg, rgb(0 0 0 / 77%) 11.4%, rgb(63 76 119 / 0%) 70.2%), url(https://static.hightownpharmacy.co.uk/trt/improved-libido.webp);
}
.trt-splash-sleep{
    background-image: linear-gradient(183deg, rgb(0 0 0 / 77%) 11.4%, rgb(63 76 119 / 0%) 70.2%), url(https://static.hightownpharmacy.co.uk/trt/improved-sleep.webp);
}
.trt-splash-muscle{
    background-image: linear-gradient(183deg, rgb(0 0 0 / 77%) 11.4%, rgb(63 76 119 / 0%) 70.2%), url(https://static.hightownpharmacy.co.uk/trt/increased-muscle.webp);
}
.trt-splash-mood{
    background-image: linear-gradient(183deg, rgb(0 0 0 / 77%) 11.4%, rgb(63 76 119 / 0%) 70.2%), url(https://static.hightownpharmacy.co.uk/trt/improved-mood.webp);
}
.trt-splash-header{
    padding: 10px 35px 10px 10px;
    color: #fff;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: bolder;
    letter-spacing: 0.2px;
}
.trt-splash-text{
    position: absolute;
    top: 34px;
    padding: 10px 35px 10px 10px;
    color: #fff;
    line-height: 24px;
}
.trt-scroll-section{
    margin-left: clamp(0px, calc((100% - 1400px) / 2), calc((100% - 1400px) / 2));
}
.trt-description{
    max-width: 446px;
    line-height: 24px;
}
.trt-add-to-cart{
    height: 50px;
    max-width: 446px;
}
.trt-info-box{
    max-width: 400px;
    line-height: 20px;
}
.trt-blog-container{
    background-color: #f5f5f5;
    padding: 30px 30px 90px;
}
/* weight loss */
.weight-loss-header {
    background: #83a9f9;
    border-radius: 100%;
    height: 550px;
    width: 550px;
    overflow: hidden;
    display: block;
    position: relative;
    border: 1px solid #34373c4d;
}
.weightloss-header-container{
    max-width: 520px;
}
.section-spacing{
    margin: 50px 0px;
}

.weight-loss-header>img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.weightloss-header {
    display: flex;
    background: rgb(243, 241, 238);
    border-bottom: 1px solid rgb(183 180 176);
    padding: 30px;
    align-items: center;
    margin: auto;
}
.weightloss-header > .d-flex{
    gap: 20px;
}
.weightloss-header .btn-holder {
    width: 200px;
    border-radius: 2px;
}
.weightloss-header .btn-holder::after, .trt-header .btn-holder::after{
    -webkit-mask-image: url(/images/icons/arrow-back.svg);
    mask-image: url(/images/icons/arrow-back.svg);
    content: "";
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #fff;
    width: 15px;
    height: 15px;
    display: block;
    margin-left: 5px;
    scale: -1;
}
.weight-loss-grid{
    gap: 20px;
}
.weight-loss-left-side{
    flex-direction: column;
    gap: 20px;
}
.weight-loss-right-grid-item{
    background: linear-gradient(315deg, #2e2f54, #12dacb 322%);
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transition: transform .35s ease-in .1s, opacity .2s ease-in .1s;
    transform: translateX(40px);
    width: 180px;
}
.weight-loss-right-grid-item-img{
    background-image: url(/images/weight-loss/grid-item-three.png);
    background-size: cover;
    height: 100%;
    width: 100%;
}
.weight-loss-left-grid-item{
    background-color: var(--primary-color);
    border-radius: 6px;
    box-sizing: border-box;
    height: 180px;
    opacity: 0;
    width: 180px;
}
.weight-loss-left-grid-item.one{
    background-color: var(--primary-color);
    background: linear-gradient(21deg, var(--primary-color), #12dacb 218%);
    color: #fff;
    padding: 20px;
    transform: translateY(-40px);
    transition: transform .35s ease-in, opacity .2s ease-in;
} 
.description-table{
    border-spacing: 0;
    margin: 10px 0px;
    padding: 0;
    width: 320px;
}
.description-table thead th {
    border-top: 1px solid rgb(0, 0, 0, 0.25);
    border-bottom: 1px solid rgb(0, 0, 0, 0.25);
    border-right: 1px solid rgb(0, 0, 0, 0.25);
    font: 600 0.875rem Lato;
    padding: 10px;
    text-align: start;
}
.description-table thead th:first-of-type {
    border-left: 1px solid rgb(0, 0, 0, 0.25);
    border-top-left-radius: 4px;
}
.description-table thead th:last-of-type {
    border-top-right-radius: 4px;
}
.description-table tr td:first-of-type {
    border-left: 1px solid rgb(0, 0, 0, 0.25);
}
.description-table td {
    border-bottom: 1px solid rgb(0, 0, 0, 0.25);
    border-right: 1px solid rgb(0, 0, 0, 0.25);
    padding: 10px;
    font: 500 0.875rem Lato;
}
.description-table tbody tr:last-of-type td:first-of-type {
    border-bottom-left-radius: 4px;
}
.description-table tbody tr:last-of-type td:last-of-type {
    border-bottom-right-radius: 4px;
}
.downtrend-header{
    font-size: 3rem;
    font-weight: 700;
    font-family: Lato;
}
.downtrend::after {
        content: "";
        -webkit-mask-size: cover;
        mask-size: cover;
        background-color: #fff;
        width: 30px;
        height: 30px;
        display: block;
}
.downtrend::after{
    -webkit-mask-image: url(/images/icons/downtrend.svg);
    mask-image: url(/images/icons/downtrend.svg);
}
.weight-loss-left-grid-item.two{
    background-color: var(--primary-color);
    /* background: linear-gradient(199deg, #12dacb -90%, var(--primary-color) 43%); */
    color: #fff;
    padding: 20px;
    transform: translateY(40px);
    transition: transform .35s ease-in .2s, opacity .2s ease-in .2s;
}
.weight-loss-left-grid-item.one.animated, .weight-loss-left-grid-item.two.animated, .weight-loss-right-grid-item.animated {
    opacity: 1;
    transform: translate(0px, 0px);
}
.weightloss-header p {
    line-height: 26px;
    font-size: 1.05rem;
}
[data-faq-target] {
    display: none;
}
.wegovy [data-faq-target="wegovy"] {
    display: block;
}
.mounjaro [data-faq-target="mounjaro"] {
    display: block;
}
.rybelsus [data-faq-target="rybelsus"] {
    display: block;
}
.new-accordian {
    display: grid;
    grid-template-rows: 0fr;
    line-height: 28px;
    letter-spacing: 0.1px;
    margin: 0;
    transition: grid-template-rows .2s ease-in, margin .2s ease-in;
}
.new-accordian.active{
    margin-top: 10px;
    grid-template-rows: 1fr;
}
.new-accordian.no-style{
    margin-top: 0px;
    line-height: inherit;
}
.new-accordian > div, .new-accordian > p{
    overflow: hidden;
}
.accordian-btn::after{
    background-color: var(--primary-color);
    content: "";
    display: block;
    -webkit-mask-image: url(/images/icons/add.svg);
    mask-image: url(/images/icons/add.svg);
    -webkit-mask-size: cover;
    mask-size: cover;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.accordian-container:has(.active) > .accordian-btn::after{
    -webkit-mask-image: url(/images/icons/remove.svg);
    mask-image: url(/images/icons/remove.svg);
}
.weight-loss-accordian, .product-accordian{
    cursor: pointer;
    padding: 20px 6px;
    border-bottom: 1px solid rgb(183, 180, 176);
    max-width: 700px;
}
.product-accordian {
    border-bottom: 1px solid var(--primary-color);
}
.weight-loss-step{
    background: rgb(2 3 54 / 86%);
    border-radius: 8px;
    box-sizing: border-box;
    color: #fff;
    padding: 30px;
    margin: 10px 0px;
    width: 27%;
}
.weight-loss-pen-show-off{
    border-radius: 60px;
    box-shadow: 0px 0px 22px 3px rgb(0, 0, 0, 0.25) inset;
    height: 460px;
    margin: 180px auto 80px;
    overflow-y: visible;
    overflow-x: clip;
    transition: background-color .2s ease-in;
    width: 300px;
}
.pen-image{
    position: absolute;
    left: 50%;
    transition: transform .5s ease-in-out;
    width: 105px;
}
.weight-loss-pen-img {
    filter: drop-shadow(1px 4px 22px rgb(0, 0, 0, 0.25));
    transition: filter .3s ease-in-out .1s;
}
[data-show="wegovy"] {
    background-color: #9ed8db;
}
[data-show="wegovy"] .wegovy {
    transform: translate(-50%, -43px) rotate(12deg);
}
[data-show="wegovy"] .mounjaro {
    transform: translate(-300%) rotate(0deg);
}
[data-show="wegovy"] .rybelsus {
    transform: translate(300%) rotate(0deg);
}
[data-show="mounjaro"] .wegovy .weight-loss-pen-img, [data-show="wegovy"] .mounjaro .weight-loss-pen-img {
    filter: drop-shadow(1px 4px 22px rgb(0, 0, 0, 0));
}
[data-show="mounjaro"] {
    background-color: #b390d2;
}
[data-show="mounjaro"] .mounjaro {
    transform: translate(-50%, -43px) rotate(12deg);
}
[data-show="mounjaro"] .wegovy, [data-show="mounjaro"] .rybelsus {
    transform: translateX(300%) rotate(0deg);
}
[data-show="rybelsus"] {
    background-color: #7eca9c;
}
[data-show="rybelsus"] .rybelsus {
    transform: translate(-50%, -43px) rotate(4deg);
}
[data-show="rybelsus"] .wegovy, [data-show="rybelsus"] .mounjaro {
    transform: translateX(-300%) rotate(0deg);
}
.pen-image.rybelsus{
    width: 236px;
}
#faq>h1,
#faq>h3 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 32px !important;
    font-family: "Lora";
    min-height: 40.8px;
}

.what-is-bmi-sec {
    background: var(--primary-color);
    z-index: -1;
    padding-bottom: 40px;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    border-radius: 100px;
}

.what-is-bmi-sec>div {
    max-width: 900px;
    margin: auto;
}

.what-is-bmi-sec p,
.how-much-to-lose-sec p {
    line-height: 30px;
}

.how-much-to-lose-sec {
    margin: 30px auto 50px;
    padding: 25px;
    gap: 25px;
    max-width: 1000px;
}

.select-weight-option {
    width: fit-content;
    border: 1px solid var(--primary-color);
    border-radius: 2px;
}
.select-weight-option button:first-of-type {
    border-right: 1px solid var(--primary-color);
}
.select-weight-option button:last-of-type {
    border-left: 1px solid var(--primary-color);
}
.select-weight-option button {
    color: #000;
    padding: 10px;
    font-size: 1.1rem;
}
.select-weight-option button.active{
    background: var(--primary-color);
    color: rgb(255, 255, 255);
}

.header-half-weight{
    max-width: 400px;
}
.bmi-calc {
    padding: 20px;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 1px var(--primary-color);
}

.bmi-inputs-contaner{
    gap: 20px;
}

.bmi-inputs {
    margin-bottom: 15px;
    max-width: 150px;
}

.bmi-inputs>div:first-child {
    margin-bottom: 5px;
}

.bmi-inputs label {
    font-size: 0.875rem;
    font-family: 'Lato';
    color: var(--primary-color);
    font-weight: 600;
}

.bmi-input {
    border-radius: 2px;
    box-shadow: 0px 0px 0px 1px #979797;
}
.bmi-input input {
    border: 0;
    border-radius: 2px;
    font: 600 1rem Lato;
    outline: 0 !important;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}
.bmi-input div {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.75;
    font-family: lato;
}
.bmi-inputs button{
    font-weight: 600;
    padding: 5px;
    margin-left: auto;
    text-align: end;
    width: 100%;
}
.metric [data-metric] {
    display: block;
}
.metric [data-imperial] {
    display: none;
}
.imperial [data-metric] {
    display: none;
}
.imperial [data-imperial] {
    display: flex;
    gap: 10px;
}
.bmi-results {
    margin-left: auto;
    margin-right: auto;
}

.bmi-results>div {
    padding: 30px 0px;
    height: calc(100% - 60px);
    box-sizing: border-box;
    width: 100%;
    margin: inherit;
}

.bmi-results img {
    box-shadow: 0px 0px 7px 1px #00000021
}

.bmi-bar{
    box-shadow: 0px 0px 0px 1px var(--primary-color);
    border-radius: 25px;
    height: 24px;
    overflow: hidden;
}
.bmi-sec{
    width: 25%;
}
.bmi-sec.one{
    background-color: #d9efec;
    border-right: 1px solid var(--primary-color);
}
.bmi-sec.two{
    background-color: #d3f3d3;
    border-right: 1px solid var(--primary-color);
}
.bmi-sec.three{
    background-color: #f2e0c0;
    border-right: 1px solid var(--primary-color);
}
.bmi-sec.four{
    background-color: #f8adad;
}
.bmi-pointer {
    background: #f3f1ee;
    border-radius: 100%;
    box-shadow: 0px 0px 0px 1px rgb(81 81 81);
    height: 26px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: left .2s ease-in;
    width: 26px;
    z-index: 999;
}

#bmi-result {
    font-size: 28px;
    margin-top: 15px;
}

#bmi-result>span {
    font-size: 34px;
    font-weight: 600;
}

#bmi-result-text {
    font-family: Lato;
    line-height: 26px;
    margin-top: 15px;
}

.bmi-graph{
    width: 350px;
    height: 300px;
    border-bottom: 1px solid #262752;
    border-left: 1px solid #262752;
}
.graph-total-lost{
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 3px;
    padding: 5px;
}
.graph-line{
    position: absolute;
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed rgb(0, 0, 0, 0.25);
}
.graph-line.one{
    top: 20%;
}
.graph-line.two{
    top: 40%;
}
.graph-line.three{
    top: 60%;
}
.graph-line.four{
    top: 80%;
}
.x-axis-label{
    position: absolute;
    bottom: -35px;
}
.x-axis-label.left{
    left: 0px;
}
.x-axis-label.right{
    right: -20px;
}
.y-axis-label{
    position: absolute;
    left: -45px;
}
.y-axis-label.bottom{
    bottom: 0px;
}
.reference{
    position: absolute;
    bottom: -80px;
}
.graph-point{
    height: 10px;
    width: 10px;
    background: #545585;
    border-radius: 100%;
    border: 2px solid var(--primary-color);
    position: absolute;
}
.graph-point.high{
    top: 19.5%;
    left: 12px;
}
.graph-point.high::after{
    content: attr(data-point-value);
    position: absolute;
    top: -22px;
    left: -4px;
    font: 600 0.875rem Lato;
}
.graph-point.low{
    bottom: 18.5%;
    right: 14px;
}
.graph-point.low::after{
    content: attr(data-point-value);
    position: absolute;
    bottom: -22px;
    left: -4px;
    font: 600 0.875rem Lato;
}
.joining-line{
    position: absolute;
    top: 24%;
    left: 18px;
    right: 27px;
    bottom: 20%;
    border-left: 3px solid var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    border-radius: 0 0px 0px 100%;
}

.placeholder {
    width: 400px;
    height: 400px;
    background: var(--primary-color);
    margin: auto;
    border-radius: 100%;
}

.bmi-why-header {
    font-family: 'Lato';
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 22px;
    width: 360px;
}

.bmi-why-text {
    width: 360px;
    font-size: 20px;
    font-family: lato;
    font-weight: 400;
    color: #1b1b1b;
    line-height: 30px;
    margin-top: 0;
}

.choice_wrapper {
    max-width: 600px;
    padding: 20px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    margin-bottom: 15px;
}

.choice_wrapper h4 {
    margin: 0 0 12px;
    font-size: 32px;
}

.choice_wrapper .choice-img {
    background-image: url(/images/weight-loss-header.webp);
    height: 175px;
    background-size: cover;
    background-position-y: 14%;
    border-radius: 8px;
}

.choice_wrapper ol {
    counter-reset: item;
}

.choice_wrapper li {
    counter-increment: item;
    margin-bottom: 12px;
    display: flex;
}

.choice_wrapper li:before {
    margin-right: 10px;
    content: counter(item);
    background: var(--primary-color);
    border-radius: 100%;
    color: #fff;
    width: 20px;
    height: 20px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    line-height: 21px;
}

.choice_wrapper .choice-cost {
    text-align: center;
    padding: 20px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
}

.choice-cost>.weekly {
    font-size: 32px;
}

.choice-cost>.month {
    font-size: 14px;
}

.weightloss-journey{
    padding: 30px 0px 60px;
}

.journey-wrapper{
    flex-wrap: wrap;
    gap: 20px;
}

.journey-container{
    background-color: #262752;
    --div-contrast-color: var(--primary-color);
    box-shadow: 0px 2px 4px 0px var(--div-contrast-color);
    box-sizing: border-box;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: calc(25% - 15px);
}
.journey-container div {
    color: var(--div-contrast-color);
 }
.healthy .journey-container.first, .healthy .journey-container.second, .healthy .journey-container.third, .healthy .journey-container.last{
    --div-contrast-color: #033503;
    background: rgb(211 243 211);
}
.overweight .journey-container.first{
    --div-contrast-color: #573805;
    background: rgb(242 224 192);
}
.overweight .journey-container.second{
    --div-contrast-color: #573805;
    background: rgb(242 224 192);
    background: linear-gradient(90deg, rgb(242 224 192) 41%, rgb(242 224 192) 100%);
}
.overweight .journey-container.third{
    --div-contrast-color: #573805;
    background: rgb(242 224 192);
    background: linear-gradient(90deg, rgb(242 224 192) 62%, rgb(211 243 211) 100%);
}
.overweight .journey-container.last{
    --div-contrast-color: #033503;
    background: rgb(211 243 211);
}
.obese .journey-container.first{
    background: rgb(248 173 173);
    --div-contrast-color: #360a0a;
}
.obese .journey-container.second{
    background: rgb(248 173 173);
    --div-contrast-color: #360a0a;
    background: linear-gradient(90deg, rgb(248 173 173) 41%, rgb(242 224 192) 100%);
}
.obese .journey-container.third{
    --div-contrast-color: #573805;
    background: rgb(242 224 192);
    background: linear-gradient(90deg, rgb(242 224 192) 62%, rgb(211 243 211) 100%);
}
.obese .journey-container.last{
    --div-contrast-color: #033503;
    background: rgb(211 243 211);
}
.not-calculated .journey-container{
    background: #fff;
}
.underweight .journey-container, .overweight.not-hit .journey-container, .healthy .journey-container, .blur{
    filter: blur(4px);
}
.bmi-graph-container{
    transition: filter .2s ease-in;
}
.journey-image-container{
    background-color: #fff;
    width: 100px;
    height: 100px;
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    margin-left: auto;
    flex-shrink: 0;
}
.journey-tag {
    font: 600 0.875rem Lato;
    background: var(--div-contrast-color);
    padding: 5px;
    border-radius: 4px;
    width: fit-content;
}
.journey-lead{
    margin: 5px 0 5px;
    font: 600 1.3rem Lato;
}
/* accordian - sort out before live*/
#faq {
    max-width: 700px;
    margin: auto;
}

section.faq {
    padding-top: 2em;
    padding-bottom: 3em;
}

.transition {
    transition: all 0.3s;
}

.faq-header{
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 32px !important;
}


#faq.aesthetics ul {
    border: 1px solid #000000;
    border-radius: 0px;
}

#faq.aesthetics ul li:first-child {
    padding-top: 5px;
}

#faq.aesthetics ul li i {
    margin-top: 12px;
}

#faq.aesthetics ul li input[type=checkbox]:checked~p,
#faq.aesthetics ul li input[type=checkbox]:checked~div {
    max-height: 0px;
}

#faq.aesthetics h2 {
    padding: 0px 15px 0 !important;
    letter-spacing: 0.1px !important;
}

.contact-form {
    width: calc(100% - 30px);
    max-width: 500px;
    padding: 15px;
    margin: auto;
}

.contact-form textarea {
    margin-top: 0px !important;
    border: 1px solid !important;
    padding: 15px 20px !important;
    width: calc(100% - 40px) !important;
    border-radius: 0;
}

.contact-form .input-wrapper {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}

.contact-form label {
    font-family: 'Lato';
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
    color: #020336;
}

.contact-form input {
    border: 1px solid;
    font-size: 16px;
    padding: 10px 20px;
    width: calc(100% - 40px);
    transition: .25s ease;
}

.contact-form input:focus-visible {
    outline: 0;
    box-shadow: 0px 0px 2px 1px #00000042;
}

/* All meds */
.all-headers {
    width: 50%;
    margin: auto;
    text-align: center;
    max-width: 600px;
    padding: 15px;
    margin-top: 15px;
}

.all-headers>p {
    margin-bottom: 20px;
}

.alphabet-holder {
    width: 75%;
    padding: 0;
    margin: auto auto 30px auto;
}

.alphabet-holder>div {
    padding: 20px 0px 0px;
    text-transform: capitalize;
    font-weight: 800;
    display: flex;
    align-items: center;
}

.alphabet-holder>li {
    text-transform: capitalize;
    font-family: 'Source Serif Pro';
    font-size: 22px;
    padding: 10px 0px;
    font-weight: 600;
    border-bottom: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.letter-holder {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 100%;
    border-radius: 5px;
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 0px 11px 0px #0000004f;
}

.letter-break {
    width: calc(100% - 40px);
    height: 2px;
    background: var(--primary-color);
    box-shadow: 0 0px 11px 1px #00000042;
}

.load-next-letters {
    width: 300px !important;
    height: 55px;
    text-align: center;
    font-family: 'Lato';
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.4px;
}

/* Treatment */
.treatment-headers-stick {
    position: sticky;
    top: 0px;
}

.treatment-headers>li {
    line-height: 22px;
    margin: 15px 0px;
}

.treatment-headers>li>a {
    font-family: 'Lato';
    color: #656565;
}

.treatment-description h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
}

.treatment-description p,
.treatment-description li {
    font-family: 'Lato';
    font-size: 16px;
    line-height: 27px;
}

.treatment-description mark {
    background: #292929;
    border-radius: 2px;
    color: #fff;
    padding: 4px 5px;
    font-family: 'Lato';
}
.treatment-description b {
    font-family: Lato, sans-serif;
}
.treatment-description h3 {
    font-weight: 600;
}
.treatment-headers>li>a:hover {
    color: #000
}

.tag_wrapper {
    padding-top: 40px;
    max-height: 90px;
    overflow: hidden;
    transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tag-lead {
    max-width: 600px;
    line-height: 25px;
    font-size: 14px;
}

.submit-btn-holder {
    width: 250px;
    margin-left: auto;
}

.start-consultation-lead {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0px 15px;
    width: fit-content;
}

.start-consultation-holder {
    text-align: center;
    width: 90vw;
    max-width: 725px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-bottom: 15px;
}

.start-consultation-btn-holder {
    padding: 25px 15px;
    border: 1px solid #979797;
}

.start-consultation-btn-holder>button {
    height: 50px;
    max-width: 700px;
}
.warning-box{
    box-sizing: border-box;
    border-radius: 4px;
    background: #FBF2DE;
    box-shadow: 0px 0px 0px 2px #C48A17;
}
.show-btn {
    font-size: 13px;
    text-decoration: underline;
    padding: 10px 10px 10px 0px;
}

.breadcrumb_wrapper {
    padding: 20px;
    font-size: 12px;
}

.breadcrumb_wrapper.no-padding{
    padding: 0px;
}

.breadcrumb_wrapper>p {
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

#products-list {
    width: 90vw;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    min-height: 420px;
}
.selection-header{
    margin: 15px 0 0 0;
}
.treatment-product-ul {
    padding: 0;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    gap: 20px;
}

.treatment-product-li {
    flex-shrink: 1;
    width: calc(25% - 15px);
}

.treatment-product-type-holder {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 0.7rem;
    padding: 5px 7px;
    border-radius: 100px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    min-width: 35px;
    text-align: center;
    z-index: 99;
}

.treatment-product_wrapper {
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    padding: 10px;
    height: calc(100% - 20px);
}

.treatment-product-img_wrapper {
    text-align: center;
}

.treatment-product-img_wrapper>div>img {
    max-width: 180px;
}

.treatment-product-name {
    text-transform: capitalize;
    font-size: 1rem;
    margin: 0;
}

.price-italic {
    margin-right: 5px;
}

.surgery-input {
    font-size: 16px;
    padding: 5px 10px;
    width: calc(100% - 23px);
    font-family: 'Lato';
    margin-top: 10px;
}

.surgery-input::placeholder {
    font-size: 14px;
}

.surgery-input:focus-within {
    outline: var(--primary-color) auto 1px;
}

.surgery-list {
    position: absolute;
    top: 48px;
    background-color: #fff;
    z-index: 9;
    width: 100%;
    border-radius: 2px;
    box-shadow: 0px 0px 4px 1px #00000026;
    max-height: 155px;
    overflow-y: overlay;
}

.surgery-list.loading {
    min-height: 50px;
}

.surgery-list:not(.loading)>.loading {
    display: none;
}

.surgery-list.loading>.loading {
    display: block;
}

.surgery-list.loading>.list-holder {
    opacity: .5;
}

.surgery-list>.list-holder>div {
    cursor: pointer;
    padding: 5px 10px 5px;
    font-size: 12px;
}

.surgery-list>.list-holder>div>span {
    font-family: 'Lato', sans-serif;
}

.surgery-list>.list-holder>div>b {
    font-family: 'Lato', sans-serif;
}

.surgery-list>.list-holder>div:hover {
    background: var(--text-hover-background);
}

.product-list-item {
    box-shadow: 0px 0px 0px 1px #eaeaea;
}

.product-list-item.recommended{
    box-shadow: 0px 0px 0px 1px rgb(16 132 95), 0px 0px 0px 3px rgb(0 212 146 / 26%);
}

.consultation-products {
    padding-inline-start: 0;
}

.product-option-btn{
    background: var(--color-gray-200);
    box-shadow: var(--color-gray-200);
    width: 160px;
}

.product-recommended {
    position: absolute;
    right: 15px;
    top: 15px;
    background: #37f9bc;
    color: #004f3b;
}

.product-features{
    padding: 5px 10px;
    border-radius: 100px;
    background: #dafffc;
    box-shadow: 0px 0px 0px 1px #82d9d2;
}

.product-option-btn.active{
    background: var(--primary-color);
    color: #fff;
}
.subscription-holder{
    display: none;
}
.subscription-holder.show-subscribed {
    display: flex;
}
.prod-price{
    border-top: 1px solid var(--color-gray-300);
}
.normal-price, .subscribed-price{
    line-height: 35px;
}
.subscribed-price{
    display: none;
}
.show-subscribed > .subscribed-price {
    display: block;
}
.show-subscribed > .normal-price {
    display: none;
}
.hide-unsubscribable{
    display: none !important;
}
.consultation-select-btn-holder {
    padding: 0px 10px;
}

/* NAV BAR */
.hamburger_wrapper {
    display: none;
}

.bottom-bar {
    background: #0e215a;
    height: 5px;
}

.nav-bar {
    padding-right: 50px;
    padding-left: 50px;
    border-bottom: 1px solid #cfcfcf;
    z-index: 1001;
    position: relative;
    background: #fff;
}

.logo-big {
    height: 85px;
}

.logo_wrapper {
    display: none;
}

.logo-offset {
    left: calc(50% - 20px);
}

#logo-small {
    visibility: visible;
    opacity: 1;
    transition: .3s ease;
    width: 150px;
    height: 30px;
    left: calc(50% - 14px);
}

#logo-small.aesthetics {
    visibility: visible;
    opacity: 1;
    transition: .3s ease;
    width: 200px;
    height: 30px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    height: 21px;
}

.secondary-header {
    opacity: 0;
    visibility: hidden;

}

.secondary-header:not(.d-none-load) {
    transition: .3s ease;
}

.secondary-header.second-open {
    opacity: 1;
    visibility: visible;
}

.nav-inner {
    height: 105px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
.nav-inner.dark{
    background: #020336;
}
.nav-inner.landing{
    height: 91px;
    max-width: 100%;
}
.nav-icons {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.nav-icons.close-offscreen {
    display: none;
}

.nav-list {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
}

.nav-list>li {
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
}

.nav-list>li:hover {
    cursor: pointer;
    border-bottom: 1px solid black;
}

.hover-nav {
    padding: 20px 0px;
    font-weight: 600;
    font-family: 'Lato';
    color: var(--primary-color);
}

.a-hover-nav {
    padding: 20px 0px;
    font-weight: 600;
    font-family: 'Lato';
    color: var(--primary-color);
}

.top-bar {
    background: #12dacb;
    color: #fff;
}

.top-bar>div {
    padding: 4px 10px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.nav-tick {
    height: 14px;
    margin-right: 8px;
}

.reason-text {
    height: 18px;
}

/* POP UP MENU */
#pop-up-menu {
    width: 100%;
    text-transform: capitalize;
    position: absolute;
    z-index: 1000;
    visibility: hidden;
}

#pop-up-menu:not(.d-load-none)>div._wrapper {
    transition: .5s cubic-bezier(.92, .09, .06, 1);
}

#pop-up-menu.active {
    visibility: visible;
}

#pop-up-menu>div._wrapper {
    background-color: #fff;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    height: 0px;
}

.pop-up-menu-inner {
    visibility: hidden;
    opacity: 0;
    max-width: 1400px;
    background: transparent;
    box-sizing: border-box;
    flex-wrap: wrap;
    width: 100%;
    padding: 40px;
    z-index: 100;
    transition: .3s ease;
}

.pop-up-menu-inner.active {
    transition: .3s ease .3s;
    visibility: visible;
    opacity: 1;
}

.pop-up-menu-inner>li {
    width: 25%;
}

.pop-up-menu-inner>li>span {
    font-weight: 600;
    font-family: 'Lato', sans-serif;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    padding-bottom: 6px;
    transition: border .175s ease-in;
}

.pop-up-menu-inner>li>span:hover {
    border-bottom: 1px solid #000;
}

.pop-up-menu-inner>li>ul {
    font-weight: 400;
    color: #424242;
    margin-bottom: 40px;
    margin-top: 10px;
}

.pop-up-menu-inner>li>ul>li {
    font-family: 'Lato', sans-serif;
    padding: 9px 0px;
    cursor: pointer;
    width: fit-content;
    border-bottom: 1px solid #fff;
    transition: border .25s ease-in;
}

.pop-up-menu-inner>li>ul>li:hover {
    border-bottom: 1px solid #424242;
}

#pop-up-overlay {
    width: 100vw;
    height: 100vh;
    background: #00000021;
    z-index: 99;
}

#offscreen-menu {
    display: none;
}

/* SEARCH BAR */
#search-bar {
    position: absolute;
    top: 167px;
    width: 100%;
    background: #fff;
    z-index: 1000;
    /* padding: 15px 15px 15px 15px; */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-80px);
}

#search-loader {
    height: 60px;
    display: none;
}

#search-bar.loading>#search-loader {
    display: block;
}

#search-bar:not(.d-none-load) {
    transition: all 0.25s ease-in;
}

#search-bar.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.search-bar-icon {
    margin: 0px 10px 0px 15px;
}

.search-bar-input {
    padding: 0;
    outline: 0 !important;
    border: 0;
    font-size: 40px;
    margin-left: 10px;
    width: 100%;
    margin-top: 2px;

}

.search-img {
    width: 90px;
}

.search-price {
    font-weight: 500;
    font-size: 20px;
}

.search-price>i {
    font-size: 17px;
}

#search-results.active {
    padding: 0px 15px 45px;
    max-height: calc(100vh - 272.2px);
    overflow-y: scroll;
    margin-right: 20px;
}

.search-results-count {
    font-size: 26px;
    margin-bottom: 15px;
}

#overlay {
    opacity: 0;
    transition: opacity 0.25s ease-in;
}

#overlay.active {
    cursor: pointer;
    opacity: 1;
    width: 100vw;
    height: 100vh;
    background: #00000021;
    z-index: 999;
    position: fixed;
    top: 0;
    overflow-y: clip;
}

#overlay.offscreen.active {
    z-index: 9998;
}

/* ORDER HISTORY */
#collection-holder {
    padding: 0 30px;
    width: 100%;
    min-width: 300px;
    margin-left: auto;
}

#collection-holder>.collect-holder {
    border: 0 !important
}

.order-no-lead {
    text-align: center;
    padding-top: 25px;
    font-size: 18px;
}

.order-history-header_wrapper {
    margin-top: 30px;
    padding: 0px 30px;
}

.order-history-header_wrapper>h1 {
    font-size: 32px;
}

.order-history-header_wrapper>h2 {
    font-size: 16px;
    margin-left: 2px;
    margin-top: 0;
}

.order-history-status_wrapper {
    padding: 0px 30px;
}

.order-history-status_wrapper>h3 {
    font-size: 16px;
}

.order-history-address_wrapper {
    padding: 30px;
}

.order-history-address_wrapper>div {
    height: fit-content;
    min-width: 400px;
    border: 1px solid #dbdbdb;
    padding: 19px 24px;
    margin-right: 20px;
}

.order-history-address_wrapper>div>h5 {
    font-size: 28px;
}

.order-history-address_wrapper>div>h6 {
    font-size: 16px;
}

.order-history-tables>div {
    display: grid;
    grid-template-columns: auto auto auto auto;
    margin: 2px 30px;
    border: 1px solid #e4e4e4;
    align-items: baseline;
}

.order-history-table-items>div {
    padding: 30px 25px;
    text-transform: capitalize;
}

.order-history-table-header {
    border-bottom: 1px solid #e4e4e4;
    padding: 30px 25px;
    background: #f0f0f0;
    font-family: 'Lato';
    font-weight: 600;
}

.order-history-table-items {
    display: contents;
}
.unread-count {
    font-family: sans-serif;
    margin-left: 10px;
    background: #fff;
    border-radius: 100px;
    height: 20px;
    font-size: 16px;
    width: 80px;
    padding: 5px 15px;
    color: #020336;
    position: absolute;
    top: -11px;
    right: 5px;
    box-shadow: 0px 1px 4px 0px #00000042;
}
.order-blank {
    grid-column-start: 1;
    grid-column-end: 4;
    border-bottom: 1px solid #e4e4e4;
    height: 25px;
}

.order-history-table-view-more {
    padding: 0 30px;
}

.status.info {
    color: #c8960a;
}

.status.danger {
    color: #d84848;
}

.status.success {
    color: var(--color-success);
}

.order-history-totals {
    padding: 30px;
}

.order-history-totals>div:not(:last-of-type)>h4 {
    font-size: 22px;
}

.order-history-totals>div:last-of-type {
    margin-top: 5px;
}

.order-history-totals>div:last-of-type>h4 {
    font-size: 32px;
}

.order-info-box{
    padding: 15px;
    color: #2b6cb0;
    background: rgb(235 248 255 / 70%);
    border-top: 1px solid rgba(66, 153, 225);
    border-bottom: 1px solid rgba(66, 153, 225);
}

.notes-modal {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    background: #0000005c;
    height: 100%;
    z-index: 9999;
    transition: opacity .3s ease-in, visibility .3s ease-in;
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
}

.notes-modal.active {
    visibility: visible;
    opacity: 1;
}

.notes-modal>div {
    background: #fff;
    width: 60%;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    height: calc(100% - 40px);
    transform: translateY(-20px);
    transition: opacity .3s ease-in .15s, transform .3s ease-in;
    cursor: default;
}

.notes-modal.active>div {
    transform: translateY(0px);
}

.notes-modal-header {
    font-size: 22px;
    font-family: 'Lato';
    font-weight: 600;
}

.notes-uploader {
    border: 1px solid var(--color-gray-200)
}
#notes-holder {
    overflow-y: auto;
}

.no-notes {
    font-size: 20px;
}
.prescriber-note > div,
.patient-note > div {
    font-family: 'Lato', sans-serif;
}

.prescriber-note,
.patient-note {
    width: fit-content;
    margin-bottom: 10px;
    max-width: 65%;
}

.prescriber-note>div:first-of-type,
.patient-note>div:first-of-type {
    padding: 10px;
    border: 1px solid #727272;
    font-size: 15px;
    line-height: 20px;
}

.prescriber-note>div:last-of-type,
.patient-note>div:last-of-type {
    width: fit-content;
    font-family: 'Lato';
    font-size: 12px;
    margin-top: 2px;
}

.prescriber-note>div:first-of-type {
    margin-right: auto;
}

.patient-note {
    margin-left: auto;
}

.patient-note>div:last-of-type {
    margin-left: auto;
}

.note-textbox {
    width: calc(100% - 14px);
    padding: 2px 7px;
    font-size: 18px;
    border-radius: 2px;
    resize: none
}

.note-textbox:focus {
    outline: 1px solid var(--primary-color);
}

.note-textbox:focus-visible {
    outline: 1px solid var(--primary-color);
}

#note-form {
    max-width: 100% !important;
}

#notes-modal-inner>.top-holder {
    height: fit-content;
}

#notes-modal-inner>.mid-holder {
    height: fit-content;
    max-height: fit-content;
    overflow: overlay;
    overscroll-behavior-y: contain;
}

#notes-modal-inner>.mid-holder::-webkit-scrollbar,
#search-results::-webkit-scrollbar {
    width: 4px;
    display: block;
}

#notes-modal-inner>.mid-holder::-webkit-scrollbar-button,
#search-results::-webkit-scrollbar-button {
    display: none;
}

#notes-modal-inner>.mid-holder::-webkit-scrollbar-track,
#search-results::-webkit-scrollbar-track {
    background-color: #00000000;
}

#notes-modal-inner>.mid-holder::-webkit-scrollbar-track-piece,
#search-results::-webkit-scrollbar-track-piece {
    background-color: #00000000;
}

#notes-modal-inner>.mid-holder::-webkit-scrollbar-thumb,
#search-results::-webkit-scrollbar-thumb {
    background-color: #00000040;
    border: 1px solid #ffffff40;
    border-radius: 24px;
}

#notes-modal-inner>.bottom-holder {
    height: fit-content;
}

.show-scroll::-webkit-scrollbar {
    width: 7px;
    border-radius: 10px;
}

.show-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background: transparent;
}

.show-scroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px #64748b7d;
    border-radius: 10px;
    border: 6px solid transparent;
}


/* AUTH */
.account-breadcrumbs {
    padding: 20px;
    font-size: 12px;
}

.auth-holder {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    margin-top: 40px;
    position: relative;
}

.auth-holder.small-mt {
    margin-top: 15px;
}

.auth-holder.mt-small {
    margin-top: 3px;
}

.auth-holder>div {
    width: 100%;
    text-align: start;
}

.auth-label {
    font-size: 14px;
    font-family: 'Lato';
    margin-bottom: 7px;
    color: #565656;
}

.auth-input {
    width: 100%;
    padding: 14px 30px;
    font-size: 18px;
    border: 1px solid #979797;
    background: rgb(255, 255, 255);
    border-radius: 0px;
    box-sizing: border-box;
    font-family: 'Lato';
}

.auth-input::placeholder {
    color: transparent;
    opacity: 0;
}

.auth-input.invalid,
textarea.invalid {
    border: 1px solid #be6f6f;
}

.auth-input.discount {
    margin-right: 15px;
    height: 38px;
    padding: 10px;
}

.checkbox_wrapper.invalid>input[type="checkbox"] {
    border-radius: 2px !important;
    box-shadow: 0px 0px 0px 1px #be6f6f;
    border: 0px;
    appearance: none;
    -webkit-appearance: none;
}

.checkbox_wrapper.border-radius-4 {
    border-radius: 4px;
}

.checkbox_wrapper.invalid>input[type="checkbox"]+div {
    color: #c83a3a;
}

.auth-input.touched:invalid {
    border: 1px solid #900e0e;
}

.auth-input:disabled {
    background: #ebebeb;
}

.auth-input:not(:placeholder-shown):invalid {
    border: 1px solid #900e0e;
}

.auth-input:focus {
    outline: 0;
    border: 1px solid var(--primary-color);
}

.auth-input.sm-p {
    width: 70px;
    padding: 12px;
    font-size: 16px;
}

.cart-input {
    width: 45px;
    padding: 10px 3px;
    text-align: center;
}

.cart-subscription{
    background-color: var(--primary-color);
    color: #fff;
}

.toggle-pass {
    position: absolute;
    right: 0;
    z-index: 9999;
    top: 50%;
    transform: translateY(-50%);
    text-transform: uppercase;
    font-family: 'Lato';
    font-weight: 800;
}

.consultation-holder {
    flex-flow: row;
    flex-wrap: wrap;
}
.consultation-holder.error h6 {
    color: var(--color-error);
}
.consultation-holder.error div {
    color: var(--color-error);
}
.consultation-holder.error .file-upload {
    border: 1px dashed var(--color-error);
    background: var(--background-error);
}
.consultation-holder.error .upload-header {
    background: var(--color-error);
    color: #fff;
}
#consultation {
    position: fixed;
    top: 0px;
    z-index: 10000;
    background: #f6f7ff;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    max-height: 0px;
    transition: max-height 0s;
}

#consultation.active {
    visibility: visible;
    opacity: 1;
    transition: max-height .5s cubic-bezier(1, -0.01, 1, 0.29);
}

#close-consultation {
    border: 0;
    margin-left: auto;
    display: block;
    background: #ffffff;
    color: #000;
    padding: 13px;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
    height: 44px;
}

.consultation-header {
    text-transform: capitalize;
    font-weight: 600;
    margin: 15px 0 0 0;
    font-size: 32px;
    font-family: 'Lato';
}

.consultation-lead {
    margin: 15px 0 0 0;
    font-size: 18px;
    font-family: 'Lato';
}

.consultation_wrapper {
    width: calc(50% - 160px);
    border-top: 10px solid var(--primary-color);
    border-bottom: 10px solid var(--primary-color);
    max-width: 750px;
    background: #fff;
    padding: 40px 80px;
    height: fit-content;
    min-width: 690px;
}

.consultation-holder>.radio_wrapper {
    position: relative;
    width: fit-content;
    height: 40px;
    background: #fff;
    margin-right: 15px;
    margin-top: 15px;
}
.measurement-input{
    border: 0;
    box-shadow: 0px 0px 0px 1px #cfcfcf;
    padding: 10px;
    border-radius: 2px;
    font-family: Lato, sans-serif;
    height: 40px;
    box-sizing: border-box;
    margin-right: 5px;
    text-align: center;
    width: 100px;
}
.measurement-text{
    font-family: Lato, sans-serif;
    margin-right: 10px;
}
.swap-btn{
    font-family: Lato;
    margin-top: 1rem;
    padding-left: 0;
    font-weight: 600;
    background: var(--primary-color);
    border-radius: 4px;
    color: #fff;
    padding: 5px 9px;
    font-size: 0.8rem;
}
.radio_wrapper.mt-small {
    margin-top: 3px;
}

.consultation-holder>h6 {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0px;
    padding-top: 20px;
    font-size: 15px;
    font-family: 'Lato';
}

.consultation-holder>h5 {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0px;
    padding-top: 20px;
    font-size: 22px;
    font-family: 'Lato';
}

.consultation-holder:not(:first-child)>h6 {
    border-top: 1px solid #cfcfcf;
}

.consultation-holder>.radio_wrapper>input[type="radio"] {
    position: absolute;
    opacity: 0.01;
    height: 100%;
    width: 100%;
    margin: 0;
    z-index: 1000;
    cursor: pointer;
}

.consultation-holder>.radio_wrapper>label {
    width: fit-content;
    padding: 0px 15px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfcfcf;
    border-radius: 2px;
}

.consultation-holder>.radio_wrapper>label.border-radius-4 {
    border-radius: 4px;
}

.radio-column {
    flex-flow: column;
}

.radio-column>.radio_wrapper {
    width: 100%;
    height: 53px;
}

.radio-column>label {
    width: calc(100% - 32px) !important;
    height: 53px !important;
}

.consultation-holder>.radio_wrapper>label>span:first-letter {
    text-transform: capitalize;
}

.consultation-holder>.radio_wrapper>label>span {
    font-family: 'Lato';
}

.consultation-holder>ul {
    margin: 15px 0px;
    font-size: 14px;
}

.consultation-holder>ul>li {
    font-weight: 400;
    margin-bottom: 3px;
    font-family: 'Lato';
}

.consultation-holder>ul>li::before {
    content: "-";
    margin-right: 5px;
    font-weight: 900;
}

.consultation-holder>.radio_wrapper input[type="radio"]:checked+label {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 6px 0px #00000038;
}

.consultation-holder>.radio_wrapper input[type="radio"]:checked+label.f-normal {
    font-weight: 500;
}
.file-upload-input{
    display: none;
}
.file-upload{
    border: 1px dashed #cbd5e1;
    cursor: pointer;
    min-width: 300px;
    max-width: 400px;
    box-sizing: border-box;
    padding: 10px 10px 15px;
}
.file-upload:hover .upload-header{
    color: #334155;
    --icon-color: #334155;
    background: #e2e8f0;
}
.upload-header{
    color: rgb(100, 116, 139);
    --icon-url: url(/images/icons/upload.svg);
    --size: 18px;
    --icon-color: rgb(100, 116, 139);
    padding: 3px;
    background: #fff;
    transition: background-color 0.2s ease-in;
}
.upload-subheader {
    font-weight: 400;
    font-size: 0.65rem;
}
textarea {
    margin-top: 15px;
    width: 100%;
    resize: vertical;
    border: 1px solid #cfcfcf;
    border-radius: 2px;
    max-height: 215px;
}

textarea:focus-within {
    outline: var(--primary-color) auto 1px;
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 6px 0px #00000038;
}

.checkbox_wrapper {
    margin-bottom: 10px;
    width: 100%;
    border: 1px solid #cfcfcf;
    border-radius: 2px;
    align-items: center;
    cursor: pointer;
}

.checkbox_wrapper:first-of-type {
    margin-top: 10px;
}

.dob-container, .gap-10 {
    gap: 10px;
}

.dob-short {
    width: 60px;
}

.dob-long {
    width: 75px;
}

.checkbox_wrapper.checked {
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 6px 0px #00000038;
}

.checkbox_wrapper.invalid {
    border: 1px solid #900e0e;
}

.birthday-holder {
    flex-flow: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.birthday-holder>div:not(:first-child) {
    width: 30%;
}

/* Account history */
.account-history-table {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    border: 1px solid #e4e4e4;
}
.view-order-btn{
    background-color: var(--primary-color);
    color: #fff;
    font: 600 .875rem 'Lato';
    margin: auto;
    padding: 10px;
    border-radius: 2px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.view-order-btn.mobile{
    margin-left: auto;
    margin-right: unset;
}
.account-history-table-header {
    border-bottom: 1px solid #e4e4e4;
    padding: 30px 25px;
    background: #f0f0f0;
    font-family: 'Lato';
    font-weight: 600;
}

.account-history-table-items {
    display: contents;
}

.account-history-table-items>div {
    padding: 30px 25px;
    text-transform: capitalize;
}

.account-history-table-items:hover>div {
    background: #f6f6f6;
}

.order-history-item {
    padding: 35px 30px;
    border: 1px solid #cfcfcf;
}

.order-history-item>div {
    margin-bottom: 5px
}

.order-history-item b {
    margin-right: 15px;
}

.account-history-header {
    font-weight: 400;
    font-size: 32px;
    margin-bottom: 5px;
}

#order-history-holder-mobile {
    display: none;
}

/* bag */
#bag {
    display: flex;
    flex-flow: column;
    position: fixed;
    right: 0;
    z-index: 10000;
    width: 100%;
    max-width: 750px;
    height: 100%;
    top: 0;
    background: #fff;

    transform: translateX(100%);
}

#bag:not(.d-none-load) {
    transition: transform .5s cubic-bezier(.92, .09, .06, 1);
}

/* bag */
#bag.active {
    transform: translateX(0);
}

.bag_wrapper {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
    overflow-y: overlay;

}

.bag {
    opacity: 1;
    visibility: visible;
    transition: translateX(0px);
}
.extra-items .bag {
    visibility: hidden;
    transform: translateX(-45px);
    opacity: 0;
}

.bag_wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.bag_wrapper::-webkit-scrollbar-thumb {
    background: rgba(90, 90, 90);
}

.bag_wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.bag-empty {
    font-size: 30px;
}

.bag-empty-lead {
    margin-top: 15px;
    font-size: 16px;
    color: #5a5a5a;
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.bag-empty-lead>button {
    width: fit-content;
    font-size: 16px;
    padding: 0;
    color: #5a5a5a;
    border-bottom: 1px solid #5a5a5a;
    border-right: 0px;
    border-top: 0px;
    border-left: 0px;
    border-radius: 0;
    min-height: 25px;
    margin: 0px 5px;
}

.bag-empty-lead>button:hover {
    color: #000;
}

.nav-bag-item-count {
    background: var(--primary-color);
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-bag-item-count>span {
    font-family: sans-serif;
}

.bag-header-holder {
    justify-content: space-between;
    height: 94px;
    margin-top: 30px;
    padding-bottom: 20px;
    width: 86%;
    margin-left: auto;
    margin-right: auto;
    align-items: baseline;
    border-bottom: 1px solid #cfcfcf;
}

.bag-main-wrapper {
    height: calc(100% - 339px);
}

.bag-header_wrapper {
    min-width: 150px;
    position: relative;
}

.close-bag {
    width: fit-content;
    margin-left: auto;
}

.bag-header,
.upsell-header {
    font-weight: 400;
    font-size: 32px;
}

.upsell-header {
    position: absolute;
    top: 0;
    width: 150px;
    width: 200px;
}

.upsell-back {
    position: absolute;
    right: 0;
    top: calc(50% - 13px);
}

.bag-close {
    font-size: 18px;
}

.dummy {
    width: 150px;
    height: 150px;
    background-color: #f7f7f7f7;
    margin: 10px;
}

.upsell-holder {
    width: 150px;
    height: 150px;
    margin: 10px;
}

.bag-item {
    width: 86%;
    margin: 0 auto;
    border-bottom: 1px solid #cfcfcf;
    transform: translateX(0px);
    opacity: 1;
}

.bag-item-img-holder {
    width: 110px;
    height: 110px;
    padding: 15px 0px;
}

.bag-item-img-holder>img {
    width: 100%;
    height: auto;
}

.bag-item-info-holder {
    margin-top: 15px;
    padding: 15px;
}

.bag-item-delete-holder {
    margin-left: auto;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    margin-top: 0;
}

.bag-item-delete-holder>button {
    border: 0;
}

.bag-item-name {
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    font-weight: 400;
}

.upsell-page {
    position: absolute;
    width: calc(100% - 30px);
    display: flex;
    padding: 15px;
    flex-wrap: wrap;
    height: 478px;
    overflow-y: overlay;
    justify-content: center;
}

.upsell {
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
    transform: translateX(45px);
}

.upsell-item-name,
.upsell-item-type {
    text-align: center;
    font-family: Lato;
    margin: 3px 0px;
}

.upsell-item-type {
    font-size: 14px;
}

.upsell-item-name {
    font-size: 18px;
}

.upsell-add-btn {
    width: 130px;
    margin: auto;
}

.upsell-add-btn>button {
    margin-top: 0px;
    letter-spacing: 0.4px;
}

.upsell,
.bag {
    transition: opacity .4s, transform .4s, visibility .4s;
    transition-timing-function: cubic-bezier(0.83, 0.54, 0.49, 1.51);
}

.extra-items .upsell {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

.bag-subtotal {
    font-size: 26px;
    font-weight: 600;
    font-family: 'Lato';
    margin: 10px 0px;
}

.checkout-btn {
    width: 150px;
}

.checkout-btn>a,
.checkout-btn>button {
    font-weight: 800;
    letter-spacing: 0.65px;
    text-transform: uppercase;
    font-size: 12px !important;
    margin-top: 0 !important;
    border-radius: 40px;
    box-shadow: 0px 2px 3px 0px #00000057;
}

.bag-footer {
    padding: 25px 35px;
    background: #f6f7ff;
}

.shipping-text {
    width: 100%;
    padding: 15px 0px;
}

.shipping-text>div {
    font-family: 'Lato';
    text-align: center;
    margin-bottom: 5px;
    font-size: 14px;
}

/* ITEM ADDED */
#item-added,
#error-consultation,
#notfication-holder {
    position: fixed;
    top: 150px;
    right: 15px;
    z-index: 99999;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0px 8px 2px rgb(0 0 0 / 17%);
    border-radius: 2px;
    min-width: 290px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
}

#item-added:not(.d-none-load),
#error-consultation:not(.d-none-load),
#notfication-holder:not(.d-none-load) {
    transition: .3s ease-in;
}

#item-added.active,
#error-consultation.active,
#notfication-holder.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

#error-consultation,
#notfication-holder {
    border-top: 5px solid #940c0c;
    padding: 15px 20px 30px;
    top: 200px;
    right: 50%;
    z-index: 99999;
    transform: translate(50%, -15px);
}

#notfication-holder.success {
    border-top: 5px solid #0c941e;
}

#error-consultation.active,
#notfication-holder.active {
    opacity: 1;
    visibility: visible;
    transform: translate(50%, 0);
}

#item-added>div>h2,
#error-consultation>div>h2 {
    font-weight: 400;
    margin-bottom: 5px;
    margin-top: 10px;
}

#notfication-holder>div>p {
    font-weight: 400;
    margin-bottom: 5px;
    margin-top: 10px;
}

#error-consultation>div>p {
    font-weight: 400;
    margin-bottom: 5px;
    margin-top: 10px;
}

#item-added>div>button {
    border: 0;
    max-width: 245px;
    font-size: 12px;
}
/* AUTH */
#password-requirements {
    display: none;
}

#password-requirements.active {
    display: block;
}

.password-requirement-li.invalid::before {
    content: url(/images/icons/circle.svg);
    position: absolute;
    height: 100%;
    width: 5px;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.password-requirement-li:not(.invalid)::before {
    content: url(/images/icons/tick-green.svg);
    position: absolute;
    height: 100%;
    width: 10px;
    left: -15px;
    top: 2px;
}

#password-requirements.invalid .password-requirement-li.invalid {
    color: #df1b41 !important;
}

#password-requirements.invalid .password-requirement-li.invalid::before {
    content: url(/images/icons/cross-red.svg);
    position: absolute;
    height: 100%;
    width: 15px;
    left: -18px;
    top: 8px;
}

/* CHECKOUT */
.minus-margin {
    margin-top: -50px;
}

.three-frame {
    width: calc(100% - 4px);
    min-height: 400px;
}

#submit-payment.loading {
    pointer-events: none;
}

#submit-payment.loading>span {
    display: none;
}

#submit-payment:not(.loading)>.loading {
    display: none;
}

#card-error {
    width: calc(100% - 20px) !important;
}

#loading-rapyd>.card-loading {
    width: 530px;
}

#loading-order {
    height: 550px;
}

#loading-order>div {
    display: flex;
    flex-flow: column;
    position: relative;
    height: 300px;
}

.loading-txt {
    line-height: 24.5px;
}

.top-10 {
    top: 10px;
}

.top-7 {
    top: 7px;
}

.top-5 {
    top: 5px;
}

.top-3 {
    top: 3px;
}

/* checkout - new start */
[data-discount-box]:has(.coupon-applied) .hide-on-applied{
    display: none !important;
}
.coupon-icon, .remove-coupon{
    height: 16px;
    padding: 0px;
}
.coupon-input, .coupon-applied{
    background: rgb(122 122 122 / 40%);
    border: 0;
    padding: 7px;
    outline: 0 !important;
}
.coupon-input::placeholder{
    color: #ffffff;
}
.coupon-input:hover{
    background: rgb(122 122 122 / 70%);
}
.coupon-input:focus-visible::placeholder{
    color: #000;
}
.coupon-input.mobile{
    background: #fff;
    color: #000;
}
.coupon-input.mobile::placeholder {
    color: #020336;
    font-weight: 600;
}
.coupon-input.mobile:placeholder-shown{
    padding: 0px;
}
.coupon-input.mobile:focus-visible{
    padding: 7px;
}
.coupon-input:focus-visible, .coupon-input:not(:placeholder-shown){
    box-shadow: 0px 0px 0px 1px #020336;
    background: #fff;
    color: #000;
}
.apply-coupon-btn{
    display: none;
    padding: 7px;
    background: #05d8c8;
    color: #020336;
}
.coupon-input:focus-visible + .apply-coupon-btn, .coupon-input:not(:placeholder-shown) + .apply-coupon-btn {
    display: block;
}
.invalid-coupon{
    display: grid;
    flex-shrink: 0;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: opacity .15s ease, grid-template-rows .2s ease, margin .1s ease;
    margin: 0px;
    font: 500 .8rem Lato;
    color: #dc2727;
    pointer-events: none;
}
.invalid-coupon div {
    overflow: hidden;
}
.invalid-coupon:has(.active){
    grid-template-rows: 1fr;
    opacity: 1;
    margin: 5px 0px;
}
.mobile-checkout-container {
    display: none;
    top: 0;
}

.checkout-container-v2 {
    background: var(--primary-color);
    margin-top: 50px;
}

.checkout-container-v2::before {
    left: 0;
    top: 0;
    content: "";
    height: 100%;
    position: fixed;
    width: 50%;
    background-color: #fff;
}

.checkout-background {
    background-color: var(--primary-color);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
}

.checkout-section {
    width: 375px;
    z-index: 1;
}
.checkout-back {
    width: 20px;
    height: 20px;
}

.checkout-input {
    padding: 10px 15px;
    font-size: 14px;
    box-sizing: border-box;
    font-weight: 400;
    border: 0;
    color: var(--text-color);
    background-clip: padding-box;
    box-shadow: 0px 0px 0px 1px #cecece, rgb(0 0 0 / 7%) 0px 1px 0px 0px;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.invalid-text {
    height: 0px;
    opacity: 0;
    transition: height .3s ease-in, opacity .3s ease-in;
    font-family: Lato, sans-serif;
    font-size: 13px;
    color: #cc1538;
}
.invalid > .invalid-text{
    height: 18px;
    opacity: 1;
}
.checkout-input:focus {
    color: var(--text-color);
    outline: 0;
    box-shadow: 0px 0px 0px 1px var(--text-color), 0px 0px 0px 3px #00000014;
    z-index: 2;
}

.outline-option {
    padding: 10px 15px;
    box-shadow: 0px 0px 0px 1px #cecece;
    margin-top: 5px;
    cursor: pointer;
    flex-wrap: wrap;
}

.outline-option.active {
    box-shadow: 0px 0px 0px 2px var(--primary-color), 0 0 8px 0px #00000038;
    color: var(--primary-color);
}

.outline-option>.d-flex {
    flex-wrap: wrap;
}

.checkout-total {
    font-size: 36px;
}

.checkout-items-container {
    height: 255px;
    overflow-y: overlay;
    padding-right: 32px;
    margin-right: -22px;
}

.checkout-items-container::-webkit-scrollbar {
    width: 14px;
}

.checkout-items-container::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
    box-shadow: 0px 0px 6px 0px #00000082;
}

.checkout-items-container::-webkit-scrollbar-thumb {
    background-color: #4b4c70;
    border-radius: 100px;
}

.checkout-item-holder {
    transition: opacity .3s ease-in, transform .3s ease-in;
}

.checkout-item-img {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    background: #ffffff4a;
    border-radius: 6px;
}

.checkout-bag-qty-btn {
    padding: 4px;
    background: #ffffff57;
    border-radius: 4px;
}
.checkout-mobile-add-coupon{
    display: none;
    padding: 8px;
    background: #ffffff57;
    width: fit-content;
}
.checkout-bag-qty-btn:not(.upselling)::after {
    content: url(/images/icons/chevron.svg);
    height: 14px;
    width: 14px;
    margin-left: 4px;
    display: block;
    transform: rotate(270deg);
    filter: invert(1);
}

.subtotal-boxes {
    margin-left: 80px;
    padding: 18px 0px;
}

.subtotal-boxes.middle {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.shipping-address-fields,
.billing-address-fields {
    transition: height .15s ease-in, opacity .1s ease-in, visibility .1s ease-in;
}

.shipping-address-fields:not(.hide),
.billing-address-fields:not(.hide) {
    min-height: 110px;
    opacity: 1;
}

.shipping-address-fields.taller:not(.hide),
.billing-address-fields.taller:not(.hide) {
    height: 162px;
}

.mobile-checkout-footer {
    display: none;
}

.checkout-footer-logo {
    width: 150px;
}

.checkout-footer-pharmacy-verify {
    width: 60px;
}

/* checkout - new end */
#checkout-items_wrapper {
    display: none;
}

#checkout-items_wrapper.active {
    display: block;
}

.checkout-item-details {
    padding: 7px 0px 7px 7px;
}

.delivery-select {
    text-transform: uppercase;
    letter-spacing: .5px;
}

.collect-holder,
.del-address-holder,
.billing-address-holder {
    border: 1px solid #cfcfcf;
    padding: 15px 20px;
    cursor: pointer;
}

.del-address-holder,
.billing-address-holder {
    color: #747474;
}

.del-address-holder.active,
.billing-address-holder.active {
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 6px 0px #00000038;
    padding: 15px 20px;
    color: var(--primary-color);
}

.del-address-holder>h3,
.billing-address-holder>h3 {
    margin: 0;
    font-weight: 500;
}

.del-address-holder>h3:first-of-type,
.billing-address-holder>h3:first-of-type {
    font-weight: 600;
}

.collect-header {
    padding: 15px 15px 0px;
}

.checkout-info-holder {
    padding: 10px 15px 20px 15px;
}

.map {
    width: 100%;
}

.auth-header {
    font-size: 38px;
}

.address-modal,
.modal {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: #00000059;
    z-index: 90000;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: .15s ease;
}

.amend-modal {
    width: 380px;
    background: #fff;
    box-shadow: 0px 0px 14px 0px #00000029, 0px 5px 12px 0px #02020229;
}

.amend-modal-container {
    width: 380px;
    background: #fff;
}

.amend-button {
    height: 32px;
    margin: auto 0;
    background: #eeeeee;
    opacity: 0.35;
    transition: opacity .15s ease, box-shadow .075s ease;
    box-shadow: 0px 0px 0px 1px #cecece, rgb(0 0 0 / 7%) 0px 1px 0px 0px;
}

.amend-button:hover {
    opacity: 1;
}

.amend-button:focus {
    opacity: 1;
    box-shadow: 0px 0px 0px 1px #cecece, rgb(0 0 0 / 7%) 0px 0px 0px 4px;
}

.address-modal.active,
.modal.active {
    opacity: 1;
    visibility: visible;
}

.amend-modal-padding {
    padding: 17px 25px;
}

.amend-input {
    width: 50px;
}

.address-modal>div {
    width: 40%;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding: 40px 60px;
    transition: .3s ease .15s;
    opacity: 0;
    transform: translateY(-15px);
}

.address-modal.active>div {
    opacity: 1;
    transform: translateY(0px);
}

#new-address-form {
    max-width: 100% !important;
}

/* FOOTER */
.about-us-container{
    border-radius: 8px;
    box-shadow: 0 0px 0px 1px var(--color-gray-300);
    height: fit-content;
    margin-top: 23px;
    max-width: 425px;
    width: 100%;
}
.directions-container{
    gap: 10px;
    padding: 6px 15px;
    box-shadow: 0px 0px 0px 1px #000;
    border-radius: 100px;
}
.directions-container:hover{
    background-color: var(--color-gray-100);
}
.container-nhs-inputs{
    max-width: 350px;
}
.headshot{
    line-height: 0;
    border-radius: 100%;
    overflow: hidden;
    width: 130px;
}
footer {
    border-top: 1px solid #f1f1f1;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: var(--primary-color);
}

.footer-logo {
    width: 300px;
}

.footer-list>li:first-of-type {
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 12px;
    color: #fff;
}

.footer-list>li {
    padding: 8px 0px;
    color: #ffffffc7;
}

.footer-list>li>a {
    color: #142044;
    text-decoration: none;
    cursor: pointer;
    color: #ffffffc7;
}

/* Error page */
.error_wrapper {
    padding: 50px 50px;
    min-height: 500px;
}

.error-header {
    font-size: 46px;
}

.error-lead {
    font-size: 20px;
}

.error-holder {
    border: 1px solid #900e0e;
    background: #900e0e17;
}

.error-text {
    color: #900e0e;
    margin: 0;
    padding: 15px 10px;
}

.error-span {
    color: #900e0e;
}

.show-password-requirements>.requirements {
    position: absolute;
    left: 0;
    top: 35px;
    width: 200px;
    background: #272727;
    color: #fff;
    box-shadow: 0px 0px 0px 1px var(--primary-color), 0 0 6px 0px #00000038;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visiblity .15s ease, top .15s ease;
}

.active>.requirements {
    top: 45px;
    opacity: 1;
    visibility: visible;
}

.requirements>ul {
    padding: 9px 18px 15px 35px;
    margin: 0;
}

.requirements>ul>li::before {
    content: "";
    left: -20px;
    top: 1px;
    width: 0.88rem;
    height: 0.88rem;
    display: inline-block;
    position: absolute;
    background-color: #fc4747;
    mask-size: 0.88rem 0.88rem;
    -webkit-mask-size: 0.88rem 0.88rem;
    mask-image: url(/images/icons/close-services.svg);
    -webkit-mask-image: url(/images/icons/close-services.svg);
}

.requirements>ul>li:not(.invalid)::before {
    background-color: green;
    width: 0.8rem;
    height: 0.8rem;
    mask-size: 0.8rem 0.8rem;
    -webkit-mask-size: 0.8rem 0.8rem;
    mask-image: url(/images/icons/tick-green.svg);
    -webkit-mask-image: url(/images/icons/tick-green.svg);
}

/* BUTTONS */
button.taller {
    height: 55px;
}

button.sm,
a.sm {
    width: 200px !important;
}

.outline-btn {
    border: 1px solid var(--primary-color);
    background: #fff;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    color: var(--primary-color);
    padding: 10px;
    margin-top: 15px;
    width: 100%;
    transition: .3s ease;
}

.outline-btn.f-smallest {
    font-size: 12px;
}

.outline-btn.bg-trans {
    background-color: transparent;
}

.outline-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.dark-btn {
    background: var(--primary-color);
    width: 100%;
    border-radius: 2px;
    color: #fff;
    padding: 10px;
    margin-top: 15px;
    font-size: 14px;
    box-sizing: border-box;
}
.dark-btn.mt-small {
    margin-top: 0.5rem;
}

.dark-btn.f-smallest {
    font-size: 12px;
}

.secondary-btn {
    background: var(--secondary-color);
    width: 100%;
    border-radius: 2px;
    color: var(--primary-color);
    padding: 10px;
    margin-top: 15px;
    font-size: 14px;
    box-sizing: border-box;
}

a.dark-btn {
    text-decoration: none;
    display: block;
    padding: 15px;
}

a.dark-btn.wide {
    padding: 18px 35px;
}

.rounded {
    border-radius: 100px;
}

.w-300 {
    width: 300px;
}

.dark-btn:disabled {
    background: var(--disabled-color);
}

.dark-btn.tall {
    height: 45px;
}

.dark-btn.max-w {
    max-width: 350px;
}

.dark-btn.min-w {
    min-width: 285px;
}

.dark-btn.mt-small {
    margin-top: 3px;
}

.dark-btn.w-80 {
    width: 80%;
}

.main-btn {
    border-radius: 100px;
    background: black;
    color: white;
    width: 100%;
    margin: 1rem 0;
    font-size: .9rem;
    font-weight: 500;
    box-shadow: none !important;
    padding: 14px 0px;
    z-index: 10;
    position: relative;
}

/* BUTTONS END */
/* INPUTS + FLOATING LABEL */

input[type=checkbox] {
    accent-color: var(--primary-color);
    margin: 0px 0px 0px 15px;
    height: 16px;
    width: 16px;
    pointer-events: none;
    flex-shrink: 0;
}

input[type=checkbox]+label {
    height: auto;
    font-family: 'Lato';
    margin-left: 13px;
    cursor: pointer;
    padding: 10px 0px;
    width: 100%;
}

input[type=checkbox]+div {
    min-height: 20px;
    font-family: 'Lato';
    margin-left: 13px;
    cursor: pointer;
}


#new-password,
#reset-password {
    width: 100%;
}

#new-password h1,
#reset-password h1 {
    font-size: 32px;
    font-weight: 600;
}

form {
    max-width: 50%;
}

#card-form {
    max-width: 100%;
}

#payment-form {
    min-width: 0px;
}

#consultation-form-holder {
    min-width: 275px;
    width: 100%;
    max-width: 100%;
}

.consultation-form.pom.active, .consultation-products {
    display: block;
}

.consultation-form.pom.inactive {
    display: none;
}

.form-input {
    position: relative;
    margin-bottom: 1rem;
}

.form-input>input,
.form-input>label {
    padding: 0.75rem 2rem 0.75rem 0.75rem;
}

.input {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    min-width: 400px;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.input-labels {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    margin-bottom: 0;
    line-height: 1.5;
    color: #49505700;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
}

.input:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25)
}

.form-input input:disabled {
    background: #f8f9fa;
    border: 1px solid #f8f9fa;
}

.form-input input:not(:placeholder-shown) {
    padding-top: calc(0.75rem + 0.75rem * (2 / 3));
    padding-bottom: calc(0.75rem / 3);
}

.form-input input:not(:placeholder-shown)~label {
    padding-top: calc(0.75rem / 3);
    padding-bottom: calc(0.75rem / 3);
    font-size: 12px;
    color: #777;
}

/* INPUTS + FLOATING END */

/* Orders products CSS */
.order-product-holder {
    border-bottom: 1px solid #00000017;
}

.order-product-holder>.image-holder {
    width: 15%;
    min-width: 150px;
}

.order-product-holder>div>div>.details-holder {
    width: 15%;
    min-width: 150px;
}

.order-product-holder>div>div>.product-name {
    text-transform: capitalize;
    font-size: 1.5rem;
    margin-bottom: 0;
}

.order-product-holder>div>div>.product-size {
    font-size: 1.2rem;
    margin-bottom: 0px;
}

.order-product-holder>div>div>.product-status {
    font-size: 1rem;
}

.order-product-holder>div>.btn-holder {
    position: absolute;
    bottom: 10px;
}

.text-btn-sm {
    font-size: .8rem;
    cursor: pointer;
    margin-bottom: 0px;
}

.overlay {
    position: absolute;
    top: 0;
    background: #0000005c;
    width: 100%;
    left: 0;
    height: 100vh;
    opacity: 0;
    transition: .25s ease;
    visibility: hidden;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.prescribers-notes {
    width: 80%;
    margin-left: auto;
    margin-top: 100px;
    margin-right: auto;
    transform: translateY(-10px);
    transition: .25s ease;
}

.overlay.active>.prescribers-notes {
    transform: translateY(0px);
}

.patient-notes {
    opacity: 0;
    transition: .25s;
}

.patient-notes.active {
    opacity: 1;
    transition: .25s;
}

.btn-end {
    max-width: 400px;
    width: 100%;
    margin-left: auto;
}

.text-btn-sm:hover {
    text-decoration: underline;
}

/* Orders products CSS END*/
/* PRODUCTS */
.size {
    margin-left: -5px;
}
.img_wrapper{
    width: 100%;
    height: inherit;
    display: flex;
    max-height: 400px;
}
.product-img-holder{
    width: 26%;
    max-width: 400px;
    margin: auto;
    min-width: 220px;
    padding: 3vw;
}
.name-price-padding, #strength-size-selection, #products-button-holder{
    padding: 0px 15px;
}
.strike-out{
    align-self: flex-end;
    text-decoration: line-through;
    font-size: 12px;
    margin-right: 5px;
}
.interval-btn{
    background-color: transparent;
    box-shadow: 0px 0px 0px 1px var(--color-gray-200);
}
.interval-btn:not(.active):hover .fake-radio::after{
    background: rgb(2 3 54 / 40%);
}
[data-subscribe-type="subscription"]::after {
    content: "Save 10%";
    position: absolute;
    top: 50%;
    right: 6px;
    padding: 10px;
    background: rgb(193 0 7);
    color: #fff;
    border-radius: 4px;
    transform: translateY(-50%);
}
.fake-radio{
    box-shadow: 0px 0px 0px 1px var(--color-gray-200);
    color: var(--color-gray-200);
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 100%;
}
.fake-radio::after{
    background: #fff;
    border-radius: 100%;
    content: "";
    height: 10px;
    width: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.active > .fake-radio, :checked + .fake-radio{
    box-shadow: 0px 0px 0px 1px var(--primary-color);
}
.active > .fake-radio::after, :checked + .fake-radio::after {
    background: var(--primary-color);
}
.interval-btn.active{
    background-color: var(--primary-color);
    box-shadow: unset;
    color: #fff;
}
.strength-btn.outline-option, .size-btn{
    padding: 14px;
}
.strength-btn.active, .size-btn.active {
    font-weight: 600;
}
.info-margin{
    margin-top: 2px;
}
.product-img-holder > img{
    width: 100%;
    height: auto;
    min-width: 200px;
}
.product-li {
    margin-top: 10px;
}
.size-list-item{
    padding: 10px 0px;
}
.size-list-item:not(:last-of-type){
    border-bottom: 1px solid var(--color-gray-300);
}
.product-name{
    text-transform: capitalize;
    font-weight: 500;
    font-size: 2rem;
    font-style: normal;
    letter-spacing: -0.5px;
    min-height: 40px;
}
.product-key-feature{
    box-shadow: 0px 0px 0px 1px var(--primary-color);
    gap: 7px;
    color: #000;
    padding: 5px 10px;
    width: fit-content;
    border-radius: 12px;
    background: rgb(2 3 54 / 5%);
}
.product-saving{
    background-color: var(--color-success);
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 18px;
}
.product-sku{
    color: #31383f;
}
.product-price{
    margin-top: 32px;
    margin-bottom: 18px;
    font-family: 'Lato';
    font-weight: 600;
}
.out-of-stock-alternative{
    color: var(--color-error);
    font: 500 0.875rem "Lato";
    box-shadow: 0px 0px 0px 1px #900e0e;
    margin-left: 10px;
    padding: 10px 10px;
    border-radius: 4px;
    background: #900e0e0d;
    box-sizing: border-box;
    margin-right: 5px;
}
.out-of-stock-alternative a {
    text-align: center;
    font: 500 0.875rem "Lato";
    text-transform: capitalize;
}
.similar-holder {
    padding: 0;
    max-width: 1050px;
    margin: auto;
    overflow: overlay;
}

.product-suggestion {
    padding: 20px;
    width: calc(25% - 44px);
    display: flex;
    flex-flow: column;
}

.suggestion-tag {
    position: absolute;
    left: 5px;
    font-size: 10px;
    background: #020336;
    padding: 5px 10px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-family: 'Lato';
    text-transform: capitalize;
    user-select: none;
    pointer-events: none;
}

.product-suggestion>.img-wrapper {
    background: #f7f7f7;
    padding: 15%;
    position: relative;
}

.sugg-img-link {
    width: 50%;
    margin: auto;
}

.sugg-info-holder {
    margin-top: 10px;
    display: flex;
    flex-flow: column;
    height: 100%;
}

.sugg-info-holder>a {
    margin-top: auto !important;
    color: #fff !important;
}

.sugg-info-product {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
}

.full_info_wrapper {
    margin-top: 30px;
    width: 50%;
}

.product-description br {
    margin-top: 7px;
    display: block;
    content: "";
}

.product-description b {
    font-family: 'Lato';
}

.product-description ul {
    padding: 0px;
    margin: 7px 0px;
}

.product-description li {
    font-family: 'Lato';
    line-height: 28px;
    list-style: none;
}

.why {
    width: 75%;
    max-width: 1100px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 10px 0px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.06) 0px 4px 2px, rgba(0, 0, 0, 0.06) 0px 8px 4px, rgba(0, 0, 0, 0.06) 0px 16px 8px, rgba(0, 0, 0, 0.06) 0px 32px 16px, 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
}

.why>div {
    padding: 20px;
}

.why-head {
    font-family: 'Lato';
    font-weight: 700;
}

.why-lead {
    font-family: 'Lato';
    font-size: 14px;
    margin-top: 5px;
}

#product-high-information {
    display: flex;
    width: 75%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.product-description {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    margin-top: 15px;
    max-width: 1100px;
    font-family: sans-serif;
}

#quantity-selection {
    width: 70px;
}

.product-description a {
    font-family: sans-serif;
    font-weight: 600;
    color: #01323f;
}

.product-description a:visited {
    color: #01323f;
}

.product-description h2,
.similar-header {
    margin: 25px 0px 5px;
    font-size: 1.6rem;
    font-weight: 600;
    color: #212529;
    font-family: "Lora";
    min-height: 32.8px;
}

.product-description h2::after {
    content: "";
}

.product-description p {
    margin: 0;
    font-family: sans-serif;
    line-height: 28px;
}

#products-button-holder>button {
    margin-top: 5px;
    height: 55px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Lato';
}

.products-product-type {
    padding: 0px 15px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}
.products-product-type > div, .info-box{
    box-shadow: 0px 0px 0px 1px rgba(66, 153, 225);
    background: #ebf8ff;
    color: #2b6cb0;
    padding: 10px 37px 10px 10px;
}
.img-disclaimer {
    position: absolute;
    bottom: 15px;
    left: 10px;
    font-family: 'lato';
    font-size: 12px;
    user-select: none;
}
.product-publish-data-box{
    justify-content: center;
    gap: 40px;
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.06) 0px 4px 2px, rgba(0, 0, 0, 0.06) 0px 8px 4px, rgba(0, 0, 0, 0.06) 0px 16px 8px, rgba(0, 0, 0, 0.06) 0px 32px 16px, 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    width: fit-content;
    margin: 20px auto 50px;
    border-radius: 12px;
}

/* subscription */
.subscription-container{
    max-width: 1000px;
}
.subscription-section-header{
    border-bottom: 1px solid var(--color-gray-300);
    color: var(--color-gray-700);
}
.card-asterisk{
    letter-spacing: -7px;
    font-weight: 800;
}
.subscription-card-holder{
    background: var(--color-gray-100);
}
.subscription-edit{
    height: 24px;
}
.subscription-edit:hover{
    background: var(--color-gray-200);
}
.sub-interval-choice{
    box-sizing: border-box;
    box-shadow: 0px 0px 0px 1px var(--color-gray-300);
}
.sub-interval-choice input {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.sub-interval-choice:has(input:checked) {
    box-shadow: 0px 0px 0px 2px var(--primary-color);
}
.sub-btn-width{
    min-width: 100px;
}
.subscription-order-container{
    min-height: 150px;
}
.subscription-order{
    border: 0 !important;
    outline: 0 !important;
    color: var(--color-gray-800);
    text-decoration: none;
    box-shadow: 0px 0px 0px 1px var(--color-gray-400);
}
.subscription-order:hover, .subscription-order:focus-visible{
    box-shadow: 0px 0px 0px 2px var(--primary-color);
    color: #000;
}

.subscription-mid{
    height: fit-content;
    max-height: fit-content;
    overflow: overlay;
    overscroll-behavior-y: contain;
}
/* LOADER */
.loader-container {
    top: calc(50% - 11px);
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}

.loader {
    left: -2.5px;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 20px;
    position: absolute;
    animation: bounce 0.6s linear infinite;
}


.loader.black {
    background-color: #000;
}

.s-wrapper.right-align {
    right: -60px;
    left: unset !important;
}

.s-wrapper>div.bigger {
    border-top: 8px solid rgba(255, 255, 255, 0.2);
    border-right: 8px solid rgba(255, 255, 255, 0.2);
    border-bottom: 8px solid rgba(255, 255, 255, 0.2);
    border-left: 8px solid #ffffff;
}

.s-wrapper>div.bigger,
.s-wrapper>div.bigger:after {
    width: 40px;
    height: 40px;
}

@keyframes bounce {
    0% {
        transform: translateY(20px);
        animation-timing-function: ease-out;
    }

    50% {
        transform: translateY(0px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateY(20px);
    }
}

/* TRANSITION */
.transition {
    transition: .25s ease;
}

.translate-y {
    transform: translateY(0px);
}

.translate-y.up {
    transform: translateY(-10px);
}

.translate-y.down {
    transform: translateY(10px);
}

#errorReset {
    max-width: 400px;
}

/* INDEX */
.header_wrapper {
    background: linear-gradient(45deg, #1a1b4e, var(--primary-color), var(--primary-color));
    background-color: var(--primary-color);
    justify-content: space-between;
    max-width: 1400px;
    box-sizing: border-box;
    margin: auto;
}

.header_wrapper.light {
    background: #fff;
    background-color: #fff;
}

.header-aspect-fill {
    padding-bottom: 75.33333333333333%;
}

.header-txt {
    font-size: 42px;
    color: #fff;
    word-spacing: 3px;
    line-height: 52pt;
    margin-top: 70px;
    margin-bottom: 0px;
    font-weight: 500;
}

.header_wrapper.light .header-txt {
    color: var(--text-color);
}

.header-sp-holder {
    overflow: hidden;
    margin-bottom: 20px;
}

.header-sp {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0s ease 0.2s;
    font-size: 2.25rem;
    line-height: 42px;
}

.header-sp.active {
    opacity: 1;
    transform: translateY(0px);
    transition: transform 0.65s ease;
}

.header-text-holder {
    position: relative;
    width: 45%;
}
.header-grid{
    margin-top: 35px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.header-pop-cat{
    border-radius: 8px;
    height: 220px;
    width: 200px;
    min-height: 178px;
}
.header-pop-cat h2 {
    z-index: 2;
}
.header-pop-cat img {
    filter: drop-shadow(4px 4px 0px rgb(0, 0, 0, .6));
}
.header-pop-arrow{
    height: 25px;
    width: 25px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    border-radius: 100px;
    background: #020336;
}
.header-testosterone img {
    position: absolute;
    width: 142px;
    bottom: -42px;
    left: -25px;
}
.header-weight-loss img {
    position: absolute;
    left: -2px;
    bottom: -12px;
    width: 75px;
}
.header-ed img, .header-period-delay img, .header-acid-reflux img, .header-pain-relief img {
    position: absolute;
    width: 187px;
    bottom: -61px;
    left: -33px;
}
.header-testosterone {
    background: #6e53ab1f;
    color: #0e0533;
}
.header-weight-loss {
    background: #e0f1f37d;
    color: #02252a;
}
.header-ed {
    background: #b4ddf642;
    color: #041b2b;
}
.header-period-delay {
    background: #d4d2d13b;
    color: #161414;
}
.header-acid-reflux {
    background: #fb85855e;
    color: #1c0101;
}
.header-pain-relief {
    background: #dfc46e42;
    color: #221801;
}
.header-lead {
    color: #fff;
    font-size: 22pt;
}

.header-btn {
    width: fit-content;
    margin-top: 40px;
    font-size: 23px;
    padding: 15px 35px;
    background: #fff;
    border-radius: 100px;
    font-weight: 600;
    box-shadow: 0px 0px 10px 4px #0000007a;
    transition: 0.5s ease;
    opacity: 0;
    transform: translateY(10px);
}

.header-search {
    margin-top: 25px;
    margin-bottom: 15px;
    padding: 17px 20px 15px 23px;
    font-size: 16px;
    border: 2px solid var(--primary-color);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: 0.5s ease;
    opacity: 0;
    transform: translateY(10px);
}

.header-btns {
    transition: 0.5s ease .1s;
    opacity: 0;
    transform: translateY(10px);
}

.header-search>div:before {
    content: "";
    background: var(--primary-color);
    width: 57px;
    height: 55px;
    position: absolute;
    right: -2px;
    top: -1px;
    z-index: 0;
}

.header-search>div:after {
    content: url(/images/icons/search-services.svg);
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    height: 24px;
    width: 24px;
    filter: invert(1);
}

.header-btn.active,
.header-search.active,
.header-btns.active {
    opacity: 1;
    transform: translateY(0px);
}

.header-btn:hover {
    transition: 0.2s ease;
    transform: translateY(-5px);
}

.header-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.header-list>li {
    position: relative;
    color: #fff;
    font-size: 18px;
    margin-bottom: 5px;
    overflow: hidden;
}

.header_wrapper .header-list>li {
    color: var(--text-color);
}

.header-list>li>span {
    transform: translateY(100%);
    transition: 0.65s ease;
    font-family: 'lato';
    display: block;
}

.header-list>li>span.active {
    transform: translateY(0%);
}

.what {
    width: 75%;
    line-height: 24px;
    margin: 0px auto 25px;
}
.marquee-wrapper {
    --gap: 15px;
    --duration: 27s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
    gap: var(--gap);
    width: 100vw;
}
.marquee-group {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: marquee-scroll-x var(--duration) linear infinite;
}

@keyframes marquee-scroll-x {
    from {
      transform: translateX(var(--scroll-start));
    }
    to {
      transform: translateX(var(--scroll-end));
    }
}

.us-card{
    width: 310px;
    background: #f9fafb;
    padding: 30px 20px;
    border-radius: 13px;
    box-sizing: border-box;
}
.us-card h2 {
    font-size: 1.2rem;
}
.sub-header-text {
    font-size: 44px;
    font-weight: 600;
}

.sub-header-lead {
    line-height: 24px;
    font-size: 22px;
}
.help-section{
    border-radius: 100px;
    padding: 100px 0px;
    margin-bottom: 100px;
}
.color {
    background: var(--color-gray-50);
    color: var(--primary-color);
}
.pointer {
    cursor: pointer;
}
.text-color-gray-700{
    color: var(--color-gray-700)
}
.pop-cat-holder,
.who-holder {
    padding: 30px;
    margin: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0px 0px 1px var(--color-gray-300);
    max-width: 255px;
}
.pop-cat-holder{
    width: calc(33% - 90px);
}
.who-holder{
    width: 100%;
}
.pop-cat-holder>li:first-child {
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: 600;
}

.pop-cat-holder>li:not(:first-child) {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-gray-300);
    font-size: 18px;
}

.pop-cat-holder>li:last-child {
    border-bottom: 0px;
    margin: 0;
}


.categories-link {
    font-size: 20px;
    color: #2c3960;
    line-height: 28px;
    letter-spacing: .55px;
    font-weight: 700;
    position: relative;
}

.categories-link::after {
    content: url(/images/icons/chevron.svg);
    width: 18px;
    height: 18px;
    position: absolute;
    top: calc(50% + -2px);
    margin-left: 5px;
    transform: translateY(-50%) scaleX(-1);
    right: -23px;
}

.all-medication-holder {
    width: 400px;
    height: 400px;
    background-color: #e1e8ff;
}

.index-view-all {
    width: calc(100% - 180px);
    border: 1px solid #d1d1d1;
}

.index-view-all .dark-btn {
    padding: 17px 27px;
}

.choose-us{
    padding: 100px 0px;
    margin: 100px 0px;
    background: var(--primary-color);
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

.waves-middle {
    color: #fff;
    padding: 0px 15px;
    font-size: 48px;
    background: var(--primary-color);
    letter-spacing: 0.8px;
}

.steps_wrapper {
    background: var(--primary-color);
}

.steps {
    width: 65%;
    min-width: 708px;
    max-width: 1000px;
    background: var(--primary-color);
    color: #fff;
}

.steps>div {
    padding: 20px;
    width: 255px;
}

.steps-img-holder {
    width: 55px;
}

.step-header {
    font-weight: 800;
}

.step-lead {
    line-height: 20px;
}

#help>h1,
#who h1 {
    margin-top: 50px;
    font-size: 36px;
}

#help>p,
#who p {
    font-size: 18px;
    line-height: 28px;
    width: 85%;
}

.seen-in-container{
    justify-content: space-evenly;
}
.seen-in {
    width: 300px;
    filter: grayscale(1);
}
.seen-in:hover{
    filter: grayscale(0);
}
/* MEDIA QUERIES */
@media only screen and (min-width: 1400px) {
    .container-above-1400 {
        max-width: 1400px;
        margin: auto;
    }
}
@media only screen and (max-width: 1400px) {
    .ml-30-1400{
        margin-left: 30px;
    }
    .header-grid{
        margin-top: 35px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .header-pop-cat{
        height: 185px;
        width: 185px;
    }
    .header-pop-cat .f-bigger{
        font-size: 1.4rem;
    }
    .header_wrapper{
        justify-content: center;
        gap: 35px;
    }
}
/* 1200PX START */
@media only screen and (max-width: 1200px) {
    .trt-pricing-step{
        border-top: 1px solid #020336;
        width: 100%;
    }
    .trt-pricing-step:first-of-type{
        border-top: 0px solid #020336;
    }
    .flex-column-xl {
        flex-flow: column;
    }
    .nav-bar {
        padding-right: 10px;
        padding-left: 10px;
    }

    .header-text-holder {
        position: relative;
        width: 44%;
    }

    .header-txt {
        font-size: 36px;
        margin-top: 34px;
        line-height: normal;
    }

    .header-lead {
        font-size: 18px;
    }

    .header-btn {
        font-size: 18px;
        padding: 12px 28px;
    }
    .about-us-wrapper{
        flex-flow: column-reverse;
    }
    .about-us-container{
        margin-left: 0px;
    }
}

/* 1200PX END */
/* 1000PX START */
@media only screen and (max-width: 1000px) {
    .subscription-container{
        flex-flow: column-reverse;
    }
    .header_wrapper{
        flex-flow: column;
    }
    .header-grid{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .header-pop-cat{
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
    }
    .justify-unset-lg {
        justify-content: unset;
    }
    .trt-info-container{
        padding: 30px 0px !important;
    }
    .checkout-mobile-add-coupon{
        display: block;
    }
    .checkout-mobile-add-coupon.hide{
        display: none;
    }
    .how-much-to-lose-sec{
        flex-flow: column;
        align-items: center;
    }
    .weight-loss-step{
        width: 32%;
    }
    .img_wrapper{
        width: 100vw;
    }
    .product-img-holder{
        padding: 3vw;
        width: 26%;
        max-width: 400px;
        margin: auto;
    }
    .product-img-holder > img{
        padding-top: 20px;
    }
    #product-high-information{
        flex-flow: column;
    }
    .consultation_wrapper{
        width: calc(50% - 80px);
        padding: 0 12.5%;
        max-width: 750px;
        min-width: 330px;
    }
    .submit-btn-holder{
        width: 100%;
        margin-left: 0;
    }

    .d-flex-1000 {
        display: flex;
    }
    .mr-5-1000 {
        margin-right: 5px;
    }
    .p-10-1000{
        padding: 10px;
    }
    .mt-15-1000{
        margin-top: 15px;
    }
    .ml-0-1000 {
        margin-left: 0px;
    }
    .mt-small-1000 {
        margin-top: 10px;
    }

    .overflow-y-1000 {
        overflow-y: overlay;
    }

    .flex-column-1000 {
        flex-flow: column;
    }

    .align-items-start-1000 {
        align-items: start;
    }

    .align-items-center-1000 {
        align-items: center;
    }

    .no-scroll-y.fixed.md {
        overflow-y: hidden;
        position: fixed;
        top: 0;
        left: 0;
    }

    .header-text-holder {
        position: relative;
        width: 90%;
    }

    .header-txt {
        font-size: 34px;
        margin-top: 23px;
    }

    .header-lead {
        font-size: 16px;
    }

    .header-btn {
        font-size: 16px;
        padding: 10px 26px;
        margin-top: 15px;
    }

    #collection-holder {
        padding: 0px;
    }

    #collection-holder>h3 {
        margin: 20px;
    }

    .full_info_wrapper {
        width: 100%;
    }

    .why {
        width: calc(100% - 30px);
        margin-top: 30px;
    }

    #product-high-information {
        width: 100%;
    }

    .product-description {
        padding: 30px 30px 0px 30px;
        width: calc(100% - 60px);
    }

    .consultation_wrapper {
        width: 80%;
        padding: 0px 20px;
        max-width: 750px;
        min-width: 250px;
    }

    #new-password h1 {
        padding-top: 2rem;
    }

    main:not(.landing) {
        margin-top: 81px;
    }
    main.checkout-container-v2{
        margin-top: 64px;
    }
    #order-history-holder-mobile {
        display: flex;
        width: 50%;
    }

    .account-history-table,
    .account-history-header.lg {
        display: none;
    }

    .pop-cat-holder {
        width: calc(33% - 70px);
        margin: 5px;
    }

    .who-holder {
        width: 100%;
        margin: 5px;
    }


    .w-auto-1000 {
        width: auto;
    }

    .w-50-1000 {
        width: 50%;
    }

    .all-medication-holder {
        width: 350px;
        height: 350px;
    }

    #search-bar {
        position: fixed;
        top: 81px;
        width: 100%;
    }

    .secondary-header {
        position: absolute;
        left: 20px;
        text-transform: uppercase;
        font-weight: 600;
    }

    #search-results.active {
        max-height: calc(100vh - 143.2px);
    }

    .container.no-md {
        padding: 0;
    }

    .p-relative-md {
        position: relative;
    }

    .container.md {
        padding: 0px 15px;
    }

    .nav-bar {
        padding-right: 0px;
        padding-left: 0px;
        position: fixed;
        width: 100vw;
        top: 0px;
        height: 80px;
        transition: transform 0.3s ease-in;
    }

    .nav-inner {
        justify-content: space-between;
        align-items: center;
        height: 80px;
    }

    .hamburger_wrapper {
        height: 32px;
        display: block;
        transition: .3s ease;
    }

    .hamburger {
        height: 32px;
    }

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

    .logo_wrapper {
        height: 38px;
        display: block;
    }

    .nav-icons>img {
        height: 23px;
        width: 23px;
    }

    #offscreen-menu {
        position: fixed;
        top: 0;
        z-index: 9999;
        background: #fff;
        width: 400px;
        height: calc(100dvh - 81px);
        display: block;
        transform: translateX(-100%);
    }

    #offscreen-menu:not(.d-none-load) {
        transition: transform .5s cubic-bezier(.92, .09, .06, 1);
    }

    #offscreen-menu.active {
        transform: translateX(0%);
    }

    #offscreen-menu>._wrapper {
        padding: 0px;
        position: relative;
        overflow-x: hidden;
        height: 100%;
        width: 100%;
    }

    #offscreen-menu>._wrapper>ul {
        position: absolute;
        width: 100%;
    }

    #offscreen-close {
        position: absolute;
        top: 0;
        right: -40px;
        height: 40px;
        width: 40px;
        z-index: 9999;
        background: #fff;
        visibility: hidden;
        opacity: 0;
        transition: .25s ease-in;
    }

    #offscreen-menu.active>#offscreen-close {
        visibility: visible;
        opacity: 1;
    }

    #offscreen-close>img {
        height: 40px;
        width: 18px;
        margin: auto;
        display: block;
    }

    #first-menu {
        transform: translateX(0%);
        transition: .5s cubic-bezier(.92, .09, .06, 1);
    }

    #first-menu.second-open {
        transform: translateX(-110%);
    }

    .second-menu {
        transform: translateX(110%);
        transition: .5s cubic-bezier(.92, .09, .06, 1);
    }

    .second-menu.active {
        transform: translateX(0%);
    }

    .second-menu-header {
        background: #f1f1f1;
        border-bottom: 1px solid #dedede;
        color: #070d2d;
    }

    .second-menu-chevron {
        margin-right: 22px;
        height: 22px;
        width: 22px;
    }

    .second-menu-header>h2 {
        font-family: 'Lato';
        font-weight: 400;
    }

    .offscreen-li {
        border-bottom: 1px solid #dedede !important;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        padding: 0;
    }

    .offscreen-li>a,
    .offscreen-li>span {
        padding: 30px;
    }

    .offscreen-li>a {
        width: 100%;
    }

    .offscreen-li-text {
        font-family: 'Lato';
        font-size: 18px;
        text-transform: capitalize;
    }

    .offscreen-li-chevron {
        height: 22px;
        transform: scaleX(-1);
        position: absolute;
        right: 20px;
    }

    #overlay.active {
        cursor: pointer;
        opacity: 1;
        width: 100vw;
        height: 100vh;
        background: #00000021;
        z-index: 999;
        position: fixed;
        top: 0;
        overflow-y: clip;
    }

    #error-consultation {
        top: 40px;
    }

    /* Payments */
    .checkout_wrapper {
        flex-flow: column-reverse;
    }

    #select-col {
        font-size: 12px;
    }

    .order-history-header_wrapper {
        padding: 20px 0px 0px 0px;
    }

    .order-history-status_wrapper {
        padding: 0;
    }

    .order-history-tables>div {
        margin: 2px 0px;
    }

    .order-history-totals {
        padding: 15px 0px;
    }

    .order-history-address_wrapper {
        padding: 0;
        flex-flow: column;
        width: 100%;
    }

    .order-history-address_wrapper>div {
        margin-bottom: 15px;
        min-width: 250px;
        margin-right: 0px;
        width: unset;
    }

    .order-history-table-view-more {
        padding: 0px;
    }

    .treatment-product-li {
        width: calc(33% - 12px);
    }

    .tag-lead {
        max-width: 450px;
    }

    .index-view-all h3 {
        font-size: 19px;
    }

    .index-view-all h4 {
        font-size: 16px;
    }

    .index-view-all .dark-btn {
        padding: 15px 25px;
        display: block;
    }

    .max-w.lg {
        max-width: unset;
    }

    #loading-rapyd>.card-loading {
        width: 100%;
    }

    #rapyd-checkout {
        min-height: 620px;
    }

    #loading-rapyd {
        max-width: 400px;
        margin: auto;
    }

    /*aesthetics 1000 */
    .rodney-header h1 {
        font-size: 42px;
        line-height: 41px;
    }

    .rodney-header h1>.lead {
        font-size: 14px;
        line-height: 22px;
        margin-top: 8px;
    }

    .rodney-header h2 {
        margin-top: 14px;
        font-size: 14px;
        line-height: 20px;
    }

    .book-float {
        top: 12px;
        right: 15px;
    }

    .book-float>a {
        padding: 18px;
    }

    .rodney-two>h2 {
        font-size: 28px;
        line-height: 56px;
    }

    .rodney-three>h2 {
        font-size: 38px;
        padding: 25px 25px 45px;
    }

    .ft-box {
        width: calc(33% - 50px);
    }

    .ft-box h2 {
        font-size: 32px;
        padding-top: 8px;
    }

    .rodney-all-treatments {
        font-size: 44px;
    }

    .rodney-four>h2 {
        font-size: 44px;
        margin-bottom: 45px;
    }

    .sliding-container {
        max-width: 230px;
        max-height: 230px;
        margin-right: 25px;
    }

    .rodney-review {
        width: calc(100% - 43px);
        margin: 70px auto 15px;
        font-size: 26px;
    }

    .rodney-review~img {
        width: 36px;
    }

    .rodney-contact {
        margin-top: 45px;
        margin-bottom: 45px;
    }

    .rodney-contact>h2 {
        margin-bottom: 55px;
        font-size: 44px;
    }

    .rodney-footer>div>div>h2 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 18px;
    }

    .rodney-footer>.address>h2:first-of-type {
        font-size: 18px;
        margin-bottom: 0;
        font-weight: 700;
    }

    .rodney-footer>.address>h2 {
        font-size: 16px;
    }

    .map-details {
        top: 5px;
        left: 5px;
        padding: 6px 10px 6px 10px
    }

    .map-details>.map-title {
        font-size: 12px;
    }

    .map-details>.map-lead {
        font-size: 10px;
    }

    .map-details>.map-link>a {
        font-size: 10px;
    }

    .aesthetic-list-order>section {
        width: calc(50% - 10px);
    }

    .aesthetic-list-order>section:first-child {
        order: 2;
        margin-left: 10px;
    }

    .aesthetic-list-order>section:nth-child(2) {
        order: 1;
        margin-right: 10px;
    }

    .aesthetic-list-order>section:last-child {
        order: 3;
    }

    .aesthetics-treatment-resizer {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .aesthetics-treatment-h1 {
        font-size: 48px;
        line-height: 54px;
    }

    .aesthethics-treatment-header {
        margin-left: 5px;
        margin-top: 0px;
    }

    .aesthetics-info-boxes>div {
        width: calc(50% - 57px);
    }

    .trt-at-home, .trt-in-person {
        width: 100%;
        max-width: 100%;
        height: 400px;
    }
    .trt-add-to-cart, .info-box, .trt-description{
        max-width: unset;
    }
    /* checkout new below 100 */
    .mobile-header-margin {
        padding: 61px 10px 10px 10px;
    }

    .mobile-checkout-bag-count {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: #fff;
        font-weight: 600;
        text-align: center;
        margin-right: 8px;
        transition: background-color .45s cubic-bezier(0.03, 0.99, 0.43, 1);
    }

    .mobile-checkout-container {
        display: flex;
        position: fixed;
        width: 100%;
        max-width: unset !important;
        z-index: 3;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-checkout-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 21px 13px 21px;
        z-index: 5;
        background: var(--primary-color);
    }

    .checkout-items-container {
        display: none;
    }

    .checkout-totals {
        display: none;
    }

    .mobile-chevron {
        height: 20px;
        width: 20px;
        transform: rotate(270deg);
    }

    .normal-checkout-back {
        display: none !important;
    }

    .checkout-container-v2 {
        flex-flow: column-reverse;
        justify-content: center;
        align-items: center;
        margin-top: 0px;
        background-color: #fff;
    }

    .checkout-background {
        display: none;
    }

    .checkout-section {
        width: 100%;
    }

    .mobile-top {
        background: var(--primary-color);
    }

    .checkout-section>* {
        max-width: 380px;
        margin: auto;
    }

    .checkout-section>div:first-of-type {
        margin-top: 50px;
    }

    .checkout-footer {
        display: none;
    }

    .mobile-checkout-footer {
        display: block;
        padding: 15px;
    }

    .checkout-input {
        font-size: 16px;
        height: 44px;
    }

    .outline-btn {
        font-size: 14px !important;
    }

    .mobile-drop {
        position: absolute;
        left: 0;
        top: 64px;
        width: 100%;
        height: 0px;
    }

    .mobile-drop.active {
        height: calc(100vh - 64px);
    }

    .mobile-drop-list {
        z-index: 2;
        position: relative;
        background: #fff;
        padding: 15px;
        min-height: 130px;
        max-height: 225px;
        overflow-y: overlay;
    }

    .mobile-overlay {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        height: calc(100vh - 64px);
        background: #0000002e;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease-in, visibility .25s ease-in;
    }

    .mobile-drop.active>.mobile-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: unset;
    }

    .mobile-drawer {
        transform: translateY(calc(-100% - 64px));
        pointer-events: none;
        z-index: 3;
        transition: transform .4s cubic-bezier(0, 0.86, 0.95, 1);
        position: relative;
    }

    .mobile-drop.active>.mobile-drawer {
        transform: translateY(0%);
        pointer-events: unset;
    }

    .close-text {
        position: absolute;
        right: 0px;
        top: -10px;
        opacity: 0;
        transition: top .15s ease-in, opacity .15s ease-in;
    }

    .expanded>div>.close-text {
        top: 0px;
        opacity: 1;
    }

    .total-text {
        transition: transform .15s ease-in, opacity .15s ease-in;
        opacity: 1;
        transform: translateY(0px);
    }

    .expanded>div>.total-text {
        opacity: 0;
        transform: translateY(10px);
    }

    .mobile-totals {
        background: #fff;
        z-index: 3;
        position: relative;
        margin-top: -1px;
        padding: 5px 15px 20px 9px;
    }

    .checkout-bag-qty-btn.dark {
        background: #020336;
        color: #fff;
    }

    .subtotal-boxes.middle-mobile {
        border-top: 1px solid var(--text-color-grey);
        border-bottom: 1px solid var(--text-color-grey);
    }

    .checkout-item-img.mobile {
        width: 50px;
        height: 50px;
        margin-right: 15px;
        background: #373bc43b;
    }

    .checkout-item-holder.upselling {
        padding: 0px 15px 0px 0px;
    }

    .upselling>.checkout-item-details {
        width: 85px;
    }

    .landing-header {
        padding: 0px;
    }
    .landing-header > div {
        flex-flow: column-reverse;
    }
    .landing-info {
        margin: 0;
        padding: 30px;
    }
    .landing-info .landing-btn{
        display: none !important;
    }
    .trustpilot-landing {
        width: 100%;
    }
    .landing-picture {
        width: 100%;
        max-width: 999px;
        height: 240px;
    }
    .landing-prices-container{
        width: 100%;
        max-width: unset;
    }
}

/* 1000PX END */
/* 768px start */

@media only screen and (max-width: 768px) {
    .product-option-btn{
        width: calc(50% - 5px);
    }
    .header-grid{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .container-md-padding{
        padding: 0px 15px;
    }
    .trt-blog-container{
        padding: 15px 15px 60px;
    }
    .ml-15-md{
        margin-left: 15px;
    }
    .trt-image{
        max-width: 200px;
    }
    .trt-dots{
        display: flex;
    }
    .trt-dot{
        border-radius: 100%;
        width: 10px;
        height: 10px;
        background-color: rgb(0, 0, 0, 0.25);
    }
    .trt-dot.active{
        background-color: rgb(0, 0, 0, 0.75);
    }
    .trt-options{
        padding: 0px 20px 10px;
    }
    .trt-grid {
        grid-template-columns: 1fr;
    }
    .see-more-btn{
        display: block;
    }
    .see-more-btn.hide,
    .trt-see-more{
        display: none;
    }
    .trt-see-more.show{
        display: block;
    }
    .blog-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .healthy .journey-container.first, .healthy .journey-container.second, .healthy .journey-container.third, .healthy .journey-container.last{
        --div-contrast-color: #033503;
        background: rgb(211 243 211);
    }
    .overweight .journey-container.first{
        --div-contrast-color: #573805;
        background: rgb(242 224 192);
    }
    .overweight .journey-container.second{
        --div-contrast-color: #573805;
        background: rgb(242 224 192);
        background: linear-gradient(180deg, rgb(242 224 192) 41%, rgb(242 224 192) 100%);
    }
    .overweight .journey-container.third{
        --div-contrast-color: #573805;
        background: rgb(242 224 192);
        background: linear-gradient(180deg, rgb(242 224 192) 62%, rgb(211 243 211) 100%);
    }
    .overweight .journey-container.last{
        --div-contrast-color: #033503;
        background: rgb(211 243 211);
    }
    .obese .journey-container.first{
        background: rgb(248 173 173);
        --div-contrast-color: #360a0a;
    }
    .obese .journey-container.second{
        background: rgb(248 173 173);
        --div-contrast-color: #360a0a;
        background: linear-gradient(180deg, rgb(248 173 173) 41%, rgb(242 224 192) 100%);
    }
    .obese .journey-container.third{
        --div-contrast-color: #573805;
        background: rgb(242 224 192);
        background: linear-gradient(180deg, rgb(242 224 192) 62%, rgb(211 243 211) 100%);
    }
    .obese .journey-container.last{
        --div-contrast-color: #033503;
        background: rgb(211 243 211);
    }
    .weightloss-header .w-50{
        width: 100%;
    }
    .weightloss-header .container{
        flex-flow: column;
        padding: 0px 0px;
    }
    .weight-loss-header{
        height: 275px;
        border-radius: 8px;
        width: 100%;
    }
    .weight-loss-left-grid-item, .weight-loss-right-grid-item{
        width: 100%;
    }
    .weight-loss-right-grid-item-img{
        background-size: 60%;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position-x: center;
    }
    .weightloss-header .btn-holder {
        width: 100%;
    }
    [data-show="mounjaro"] .wegovy, [data-show="mounjaro"] .rybelsus, [data-show="wegovy"] .rybelsus {
        transform: translateY(-150%) rotate(0deg);
    }
    [data-show="wegovy"] .mounjaro,  [data-show="rybelsus"] .mounjaro,  [data-show="rybelsus"] .wegovy {
        transform: translate(-50%, 100%) rotate(12deg);
    }

    .pen-overflow-container{
        height: 260px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    .journey-wrapper{
        flex-flow: column;
    }
    .journey-container{
        width: 100%;
    }
    .how-much-to-lose-sec .w-50 {
        width: 100%;
    }
    .trt-step{
        padding: 20px;
        width: 100%;
    }
    .weight-loss-step{
        padding: 20px;
        width: 100%;
    }
    .weight-loss-faq{
        flex-flow: column-reverse;
    }
    .weight-loss-faq .w-50{
        width: 100%;
    }
    .weight-loss-pen-show-off{
        border-radius: 8px;
        height: 150px;
        margin: 0px;
        width: 100%;
    }
    .pen-image.rybelsus {
        width: 165px;
    }
    .pen-image{
        width: 51px;
    }
    
    .product-suggestion {
        min-width: 225px;
    }

    .col-3-md {
        width: 33%;
    }

    .w-75-md {
        width: 75% !important;
    }

    .p-0-md{
        padding: 0px;
    }
    .header-aspect-fill {
        padding-bottom: 45.2%;
    }

    .all-headers {
        width: 85%;
        padding: 30px 15px 15px;
    }

    .alphabet-holder {
        width: 85%;
        padding: 0;
        margin: auto auto 30px auto;
    }

    .why {
        flex-flow: column;
    }

    .why>div {
        padding: 15px 25px;
    }

    .waves-middle {
        font-size: 34px;
    }

    #new-password h1 {
        font-size: 32px;
        font-weight: 600;
    }

    .steps {
        flex-flow: column;
        width: 100%;
        padding: 0;
        justify-content: center;
        align-items: center;
        min-width: 0px;
    }

    .index-view-all {
        flex-flow: column;
    }

    .flex-row-md {
        flex-flow: row;
        overflow: scroll;
    }
    .help-section{
        border-radius: 35px;
        padding: 50px 0px;
    }
    .unset-center-sm{
        justify-content: unset;
    }
    .who-holder {
        width: 255px;
        margin: 10px;
    }

    #help>p,
    #who p {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.4px;
    }

    .pop-cat-holder {
        width: 240px;
        margin: 10px;
    }

    .pop-cat-holder>li {
        width: 240px;
    }

    .flex-column-md {
        flex-flow: column;
    }

    .align-items-center-md {
        align-items: center;
    }

    .align-items-start-md {
        align-items: start;
    }

    .flex-reverse-md {
        flex-direction: column-reverse;
    }

    .ml-0-md {
        margin-left: 0px;
    }

    .w-100-md {
        width: 100% !important;
    }

    .w-auto-md {
        width: auto !important;
    }

    .why-us .text_wrapper {
        width: calc(100% - 200px);
    }

    .all-medication-holder {
        width: 275px;
        height: 275px;
    }

    .header_wrapper {
        flex-flow: column;
        margin-top: 0px;
    }

    .header-txt {
        font-size: 32px;
        padding: 40px 0px 1px 0px;
        width: 60%;
        margin-top: 0;
        border-top-right-radius: 100px;
    }

    .header-list {
        padding: 0px;
        width: 85%;
    }

    .header-list>li {
        font-size: 15px;
    }

    .header_wrapper:not(.lighter) .header-text-holder {
        position: relative;
        width: 100%;
    }

    .header_wrapper .header-text-holder {
        background: #fff;
    }

    .header-btn {
        margin-top: 18px;
        font-size: 14px;
    }

    .header-btn-holder {
        width: 60%;
        padding: 0px 0px 30px 20px;
        border-bottom-right-radius: 100px;
    }

    #order-history-holder-mobile {
        width: 70%;
    }

    .d-block-md {
        display: block !important;
    }

    .d-none-md {
        display: none;
    }

    .order-history-table-header:first-of-type {
        grid-column-start: 1;
        grid-column-end: 4;
    }

    .order-history-table-items>div:first-of-type {
        grid-column-start: 1;
        grid-column-end: 4;
    }

    .notes-modal>div {
        width: 80%;
    }

    .bmi-inputs {
        width: 125px;
        margin-right: 15px;
    }

    #bmi-btn {
        height: 52.78px;
        margin-top: 13px;
    }

    .why-us>._wrapper {
        height: unset;
    }

    /* aesthetics 768px */
    .rodney-image {
        width: 100%;
        height: 82vh;
        max-height: 685px;
        position: relative;
        background-position-x: 50%;
        background-size: cover;
        background-image: url(/images/aesthetics/rodney-street-2-md.webp);
    }

    .rodney-image::before {
        content: "";
        top: 0;
        left: 0;
        position: absolute;
        background: #0000002e;
        width: 100%;
        height: 82vh;
        max-height: 685px;
    }

    .rodney-header {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
    }

    .rodney-header>.placement {
        left: 10%;
        filter: drop-shadow(0px 0px 6px #000);
    }

    .rodney-header h1 {
        font-size: 32px;
        line-height: 35px;
        color: #fff;
    }

    .rodney-header a {
        border: 1px solid #fff;
        background: #fff;
        color: #fff;
    }

    .rodney-header h2 {
        width: calc(100% - 66px);
        max-width: 250px;
        color: #fff;
    }

    .rodney-two>h2 {
        font-size: 22px;
        line-height: 38px;
    }

    .rodney-three>h2 {
        font-size: 32px;
    }

    .rodney-all-treatments {
        font-size: 32px;
    }

    .ft-box {
        width: calc(100% - 50px);
        max-width: 400px;
        margin: auto;
    }

    .ft-box h2 {
        font-size: 28px;
        padding-top: 8px;
        padding-bottom: 20px;
    }

    .book-float {
        right: 0;
        font-size: 14px;
        bottom: 0;
        top: unset;
    }

    .book-float>a {
        padding: 15px 12px;
    }

    .rodney-four>h2,
    .rodney-contact>h2 {
        font-size: 34px;
    }

    .sliding-container {
        max-width: 250px;
        max-height: 250px;
        margin-right: 0;
        margin-bottom: 25px;
    }

    .rodney-review {
        font-size: 18px;
        line-height: 38px;
    }

    .rodney-contact>div:not(:last-of-type) {
        margin-right: 0;
    }

    .rodney-contact>div {
        margin-bottom: 30px;
    }

    .rodney-contact h2 {
        font-size: 22px;
    }

    .flex-row-reverse-md {
        flex-flow: column-reverse;
    }

    .rodney-footer>.w-50 {
        width: 100%;
    }

    .rodney-footer>.address {
        margin-left: 25px;
        padding-top: 15px;
        padding-bottom: 25px;
    }

    .rodney-footer>div>div>h2 {
        margin-bottom: 10px;
    }

    .aesthetic-list-order {
        display: block;
    }

    .aesthetic-list-order>section {
        width: 100%;
    }

    .aesthetic-list-order>section:first-child {
        order: unset;
        margin-left: 0;
    }

    .aesthetic-list-order>section:nth-child(2) {
        order: unset;
        margin-right: 0;
    }

    .aesthetic-list-order>section:last-child {
        order: unset;
    }

    .aesthetics-treatment-h1 {
        font-size: 48px;
        line-height: 54px;
        text-align: center;
    }

    .aesthetics-info-boxes {
        justify-content: center;
    }

    .aesthetics-info-boxes>div {
        width: calc(50% - 150px);
        margin: 0px 3px 30px 3px;
        min-width: 165px;
    }

    .aesthetics-header-image {
        width: 280px;
        margin-top: -30px;
    }

    .aesthetics-treatment-resizer {
        flex-flow: column;
    }

    .sliding-container.case-study {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .before-after-offset {
        margin-top: 60px;
        margin-bottom: 0px;
    }

    .choose-us{
        border-bottom-left-radius: 35px;
        border-bottom-right-radius: 35px;
    }
}

/* 768px end */
@media only screen and (min-width: 576px) {
    body.top-0-sm {
        top: 0 !important;
    }
}

/* 576X START */
@media only screen and (max-width: 576px) {
    .trt-header-txt{
        font-size: 2rem;
        max-width: 500px;
        margin: auto;
    }
    .trt-lead{
        font-size: 0.9rem;
    }
    .mt-25-sm{
        margin-top: 25px;
    }
    .blog-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .article-post table{
        font-size: 0.875rem;
    }
    .features-list{
        display: flex;
        gap: 5px;
    }
    .bmi-graph{
        width: 285px;
        height: 250px;
    }
    .y-axis-label{
        left: -33px;
        font-size: 0.875rem;
    }
    .x-axis-label {
        bottom: -27px;
        font-size: 0.875rem;
    }
    .reference{
        bottom: -71px;
        left: -20px;
    }
    .product-img-holder{
        width: 100%;
        margin: auto;
        max-width: 220px;
    }
    .downtrend-header{
        font-size: 2.5rem;
    }
    .grid-lead{
        font-size: 0.875rem;
    }
    .weight-loss-right-grid-item-img{
        background-size: 180px;
        background-position-y: bottom;
    }
    .product-img-holder > img{
        width: 220px;
    }
    #consultation {
        background: #fff;
    }
    .consultation_wrapper{
        padding: 0 5%;
        width: 100%;
    }
    .consultation-header{
        margin: 35px 0 0 0;
    }
    .product-description h2,
    .similar-header {
        font-size: 32px;
    }
    .p-0-sm{
        padding: 0px;
    }
    .px-0-sm{
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .product-description li,
    .product-description p {
        font-size: 14px;
        line-height: 26px;
    }

    .treatment-description p,
    .treatment-description li {
        font-size: 14px;
        line-height: 26px;
        margin-top: 5px;
    }

    .treatment-description h2 {
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .treatment-headers {
        margin: 0;
    }

    #faq {
        padding: 0 !important;
    }

    #faq p {
        padding: 0 50px 0 0px;
    }

    #cookies-banner>div:first-child {
        font-size: 14px;
        line-height: 20px;
    }

    .article-holder {
        padding: 18px 15px;
    }

    .px-20-sm {
        padding-right: 20px;
        padding-left: 20px;
    }

    a.dark-btn.wide {
        padding: 18px 30px;
    }

    .p-15-sm {
        padding: 15px !important;
    }

    .col-2-sm {
        width: 50%;
    }

    #close-search>img {
        width: 16px;
        height: 16px;
    }
    .cart-input {
        padding: 14px 0px !important;
    }

    .auth-input {
        padding: 14px 23px;
    }

    .bmi-inputs {
        width: 115px;
        margin-right: 0px;
    }

    .bmi-inputs label {
        font-size: 14px;
    }

    #bmi-btn {
        margin-top: 0px;
    }

    #what-is-my-bmi {
        padding: 15px;
    }

    #bmi-result-text {
        margin-bottom: 15px;
    }

    .why-us>p {
        width: 100%;
    }

    .why-us .text_wrapper {
        width: 100%;
        margin-bottom: 30px;
    }

    #faq p {
        max-height: 500px;
    }

    #faq div {
        max-height: 500px;
    }

    .header-aspect-fill {
        padding-bottom: 45.23076923076923%;
    }

    .start-consultation-lead {
        font-size: 13px;
        width: 200px;
    }

    #consultation {
        background: #fff;
    }

    .consultation_wrapper {
        padding: 0 5%;
        width: 100%;
    }

    .consultation-header {
        margin: 35px 0 0 0;
    }

    #new-password h1 {
        font-size: 28px;
    }

    #order-history-holder-mobile {
        width: 100%;
    }

    .index-view-all {
        width: calc(100% - 120px);
    }

    .account-breadcrumbs {
        padding: 20px 2px;
    }
    .treatment-product-ul{
        gap: 10px;
    }
    .treatment-product-li {
        width: calc(50% - 5px);
    }

    .tag-lead {
        max-width: 300px;
    }

    .breadcrumb_wrapper:not(.no-padding) {
        border-top: 1px solid #cfcfcf;
        border-bottom: 1px solid #cfcfcf;
    }

    #help>h1,
    #who h1 {
        font-size: 32px;
    }

    #order-no-login {
        width: 100%;
        max-width: 100%;
    }

    .container.sm {
        padding: 0px 15px;
    }

    #search-results.active {
        max-height: calc(100vh - 140.56px);
    }

    .w-75-sm {
        width: 75% !important;
    }

    .mb-1-sm {
        margin-bottom: 1rem;
    }

    .mr-0-sm {
        margin-right: 0;
    }

    .no-container-sm {
        padding: 0 !important;
    }

    .align-start-sm {
        align-items: flex-start;
    }

    .flex-column-sm {
        flex-flow: column;
    }

    .flex-row-sm {
        flex-flow: row;
        overflow: scroll;
    }

    .w-100-sm {
        width: 100% !important;
    }

    .w-50-sm {
        width: 50% !important;
    }

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

    .d-block-sm {
        display: block !important;
    }

    #offscreen-menu {
        top: 81px;
        width: 100%;
    }

    .search-results-count {
        font-size: 18px;
    }

    .search-img {
        width: 80px;
    }

    .search-type {
        font-size: 14px;
    }

    .search-product {
        font-size: 22px;
    }

    .search-price {
        font-size: 17px;
    }

    .search-price>i {
        font-size: 14px;
    }

    #offscreen-menu>._wrapper>ul {
        width: calc(100% - 60px);
        padding-left: 30px !important;
    }

    #offscreen-close {
        right: -50px;
        height: 50px;
        width: 50px;
        display: none;
    }

    #offscreen-close>img {
        height: 50px;
    }

    #logo-small.second-open {
        opacity: 0;
        visibility: hidden;
    }

    #overlay.offscreen.active {
        z-index: 999;
    }

    .offscreen-li>a,
    .offscreen-li>span {
        padding: 20px 23px 20px 0px;
    }

    .offscreen-li-chevron {
        right: 0px;
    }

    .offscreen-li-text {
        font-size: 16px;
    }

    .hamburger_wrapper.offscreen-open {
        visibility: hidden;
        opacity: 0;
    }

    .nav-icons.offscreen-open {
        visibility: hidden;
        opacity: 0;
    }

    .nav-icons.close-offscreen {
        display: block;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        right: 17px;
        top: 50%;
        transform: translateY(-50%);
    }

    .nav-icons.close-offscreen:not(.d-none-load) {
        transition: .3s ease-in;
    }

    .nav-icons.close-offscreen>img {
        height: 16px;
    }

    .nav-icons.close-offscreen.active {
        visibility: visible;
        opacity: 1;
    }

    .footer-list {
        padding-left: 15px;
    }

    .search-bar-input {
        font-size: 22px;
    }

    .search-bar-icon {
        margin: 0px 5px 0px 5px;
        height: 20px;
        width: 20px;
    }

    .flex-row-reverse-sm {
        flex-flow: row-reverse;
    }

    .bag-item-img-holder {
        width: 80px;
        height: 80px;
        padding: 8px 0px;
        align-self: center;
    }

    .bag-item-info-holder {
        margin: 0;
    }

    .bag-item-name {
        font-size: 18px;
    }

    .bag-item-info-holder>h3 {
        margin-top: 18px;
        font-size: 16px;
    }

    .bag-footer h3 {
        font-size: 26px;
    }

    /* ITEM ADDED */
    #item-added {
        top: 40px;
        right: 50%;
        z-index: 99999;
        transform: translate(50%, -15px);
    }

    #item-added.active {
        opacity: 1;
        visibility: visible;
        transform: translate(50%, 0);
    }

    .error_wrapper {
        padding: 25px;
    }

   .all-medication-holder {
        width: 300px;
        height: 300px;
    }

    .sub-header-text {
        font-size: 32px;
        padding: 0px 5px;
    }

    .sub-header-lead {
        font-size: 16px;
    }

    .header-txt {
        margin-bottom: 0px;
        font-size: 32px;
        padding: 40px 0px 0px 0px;
        width: 90%;
    }

    .header-list {
        padding: 0px;
        width: 90%;
    }

    .header-list>li {
        font-size: 16px;
    }

    .header-text-holder {
        position: relative;
        width: 100%;
    }

    .header-btn {
        margin-top: 18px;
        font-size: 14px;
    }

    .header-btn-holder {
        width: 90%;
        padding: 0px 0px 50px 10px;
        border-bottom-right-radius: 70px;
    }

    .order-history-table-header:first-of-type {
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .order-history-table-items>div:first-of-type {
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .notes-modal>div {
        width: 100%;
        padding: 25px 0px 10px;
        height: calc(100% - 35px);
    }

    #notes-modal-inner>div {
        padding: 0px 15px;
    }

    #notes-holder {
        margin-right: 15px;
        padding-right: 0px;
    }

    #close-notes>img {
        width: 14px;
        height: 14px;
    }

    .notes-modal-header {
        font-size: 26px;
        line-height: 23.2px;
    }

    #note-modal-other {
        font-size: 22px;
    }

    .notes-modal-date {
        font-size: 14px;
    }

    .notes-modal-header-two {
        font-size: 26px;
    }

    .prescriber-note>div:first-of-type,
    .patient-note>div:first-of-type {
        padding: 10px 15px;
        font-size: 15px;
    }

    .prescriber-note>div:last-of-type,
    .patient-note>div:last-of-type {
        font-size: 12px;
    }

    .prescriber-note,
    .patient-note {
        max-width: 85%;
    }
    .no-scroll-y.fixed.sm {
        overflow-y: hidden;
        position: fixed;
        top: 0;
        left: 0;
    }

    .note-textbox {

        font-size: 16px;
    }

    .tag-list>li {
        padding: 12px 27px;
        font-family: Lato, sans-serif;
        text-transform: capitalize;
        margin: 7px;
        background: #0000000a;
        border-radius: 100px;
        border: 2px solid #0000003b;
        font-weight: 600;
    }

    .aesthetics-overview {
        padding: 55px 15px;
    }

    .aesthetics-info-boxes>div {
        width: calc(50% - 31px);
        margin: 0 3px 20px;
        min-width: 150px;
        max-width: 180px;
        padding: 10px;
    }

    .aesthetics-info-boxes h2 {
        margin-left: -6px;
        margin-top: -22px;
        font-size: 16px;
    }

    .aesthetics-info-boxes h3 {
        font-size: 18px;
        font-weight: 400;
        margin: 2px 0px 2px;
    }

    .aesthetics-info-boxes {
        margin-bottom: 15px;
    }
    .landing-floating-bar{
        width: 95%;
    }
    .landing-floating-info{
        display: none;
    }
    .landing-floating-link-container{
        width: 100%;
    }
    .landing-item {
        font-size: 3.25rem;
    }
    .landing-info{
        padding: 15px;
    }
    .landing-treatment{
        font-size: 0.9rem;
    }
    .landing-tag{
        font-size: 1.7rem;
        margin-top: -5px;
    }
    .landing-desktop-btn{
        display: none !important;
    }
    a.landing-mobile-btn{
        display: flex !important;
        max-width: 100%;
        width: 100%;
    }
    [data-subscribe-type="subscription"]::after{
        font-size: 0.8rem;
        padding: 10px;
    }
    .interval-btn{
        font-size: 0.875rem;
    }
    .product-recommended{
        right: 5px;
        top: 7px;
    }
}

/* 576X END */

@media only screen and (max-width: 410px) {
    .subscription-address{
        max-width: 214px;
    }
}

.squished {
    min-height: 0px !important;
    max-height: 0px !important;
    overflow: hidden;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

/* ANIMATION FOR CONSULTATION */

.consultation_wrapper>form,
.consultation_wrapper>p,
.consultation_wrapper>h5,
.consultation_wrapper>div {
    opacity: 0;
    transition: .25s ease-in .1s;
}

.active>.consultation_wrapper>form, 
.active>.consultation_wrapper>h5,
.active>.consultation_wrapper>p,
.active>.consultation_wrapper>div {
    opacity: 1;
}

.d-none-load {
    visibility: hidden !important;
    transition: 0s !important;
}

.selection {
    font-family: 'lato';
    padding: 10px 0px;
    width: 130px;
    border: 1px solid #000;
    color: #000;
    margin-right: 15px;
    border-radius: 4px;
    text-align: center;
    opacity: .35;
    cursor: pointer;
    margin-bottom: 10px;
}

.selection.active {
    opacity: 1;
    box-shadow: 0px 0px 0px 1px #000;
}

#end-date::first-letter {
    text-transform: capitalize;
}

/* loading */
.loading>.s-wrapper {
    display: flex;
    align-items: center;
}

.loading>.calendar {
    opacity: .3;
    user-select: none !important;
    pointer-events: none !important;
}

:not(.loading)>.s-wrapper {
    display: none;
}

.s-wrapper {
    height: 100%;
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999999;
}

.s-wrapper.invert {
    filter: invert(1);
}

.s-wrapper>div {
    position: relative;
    border-top: 5px solid rgba(255, 255, 255, 0.2);
    border-right: 5px solid rgba(255, 255, 255, 0.2);
    border-bottom: 5px solid rgba(255, 255, 255, 0.2);
    border-left: 5px solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

.s-wrapper>div.dark {
    border-top-color: rgba(0, 0, 0, 0.2);
    border-right-color: rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(0, 0, 0, 0.2);
    border-left-color: var(--text-color);
}

.s-wrapper>div,
.s-wrapper>div:after {
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}