@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --flexible-size: calc(1vw + 1vh + .5vmin);
    --gradient-top: #2C529F;
    --gradient-bottom: #163169;
    --dark-blue: #163169;
    --light-blue: #6084C1;
    --light-pale-blue: #b5bdd6;
    --pale-blue: #728DC3;
    --dark-gray: #4b4b4b;
    --mid-gray: #d3d9eb;
    --light-gray: #F2F4F8;
    --gray: #E9ECF4;
    --green: #95C14E;
    --fentanyl: rgb(99, 32, 208);


    /*Font sizes */
    /* scale (proportions) taken from: https://m2.material.io/design/typography/the-type-system.html#type-scale */
    --h1-size: 7.35vw;
    --h2-size: 4.575vw;
    --h3-size: 3.675vw;
    --h4-size: 2.625vw;
    --h5-size: 1.79vw;
    --h6-size: 1.5vw;
    --body1-size: 1.2vw;
    --body2-size: 1.05vw;
    --subtittle1-size: 1.2vw;
    --subtittle2-size: 1.05vw;
    --button-size: 1.05vw;
    --overline-size: 0.75vw;
    --caption-size: 0.89vw;
    --loading-text-height: 1.2vw;
    --upper-left-picture-width: calc(100vw * (286 / 2602));
}

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

p {
    margin: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Montserrat';
}

html {
    font-size: 100%;
}

body {
    background: linear-gradient(180deg, var(--gradient-bottom) 0%, var(--gradient-top) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100%;
    height: fit-content;
    position: relative;
}

h1,
.headline1 {
    font-size: var(--h1-size);
}

h2,
.headline2 {
    font-size: var(--h2-size);
}

h3,
.headline3 {
    font-size: var(--h3-size);
}

h4,
.headline4 {
    font-size: var(--h4-size);
}

h5,
.headline5 {
    font-size: var(--h5-size);
}

h6,
.headline6 {
    font-size: var(--h6-size);
}

p {
    font-size: var(--body1-size);
}

.subtittle1 {
    font-size: var(--subtittle1-size);
    font-weight: bold;
}

.subtittle2 {
    font-size: var(--subtittle2-size);
    font-weight: bold;
}

.body1 {
    font-size: var(--body1-size);
}

.body2 {
    font-size: var(--body2-size);
}

button {
    font-size: var(--button-size);
    font-family: 'Montserrat';
}

.overline {
    font-size: var(--overline-size);
}

.caption {
    font-size: var(--caption-size);
}

.headline1,
.headline2,
.headline3,
.headline4,
.headline5,
.headline6 {
    font-weight: bolder;
}

.font-light {
    font-weight: lighter;
}

.font-bold {
    font-weight: bold;
}

.text-green {
    color: var(--green);
}

.text-dark-blue {
    color: var(--dark-blue);
}

.text-dark-gray {
    color: var(--dark-gray);
}

.bg-img {
    background-position: center;
    background-repeat: no-repeat;
}

.clean-btn {
    border: none;
    background-color: transparent;
}

.download-btn {
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_descargarsimple.svg");
}

.green-btn {
    font-family: 'Montserrat';
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 1.5vw;
    text-decoration: none;
    background: var(--green);
    color: white;
    padding: 0.58431vw 0.9686vw;
    font-weight: bolder;
}

.see-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--overline-size);
    width: 3vw;
    background: var(--green);
    aspect-ratio: 81/43;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 1vw;
    text-decoration: none;
    font-weight: bolder;
    color: white;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate-text-2lines {
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.truncate-text-3lines {
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.input-fentanyl-blocked {
    border: .15vw solid var(--fentanyl) !important;
}

.blurry-bg {
    /* backdrop-filter: blur(5px) opacity(1);
    -webkit-backdrop-filter: blur(5px) opacity(1); */
    -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 50%);
    mask-image: linear-gradient(to bottom, transparent 10%, black 50%);
}

/*[START] Farmanova Header component */

farmanova-header>div:first {
    display: block;
}

.upper-left-picture {
    width: var(--upper-left-picture-width);
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    aspect-ratio: 384/587;
}

farmanova-header>div:first-child {
    width: 100%;
    aspect-ratio: 2602 / 183;
    background: var(--light-gray);
    display: flex;
    align-items: center;
    padding-left: var(--upper-left-picture-width);
}

.header-bottom-line {
    aspect-ratio: 2602 / 15;
}

farmanova-header .first {
    background: var(--light-pale-blue);
}

farmanova-header .second {
    background: var(--pale-blue);
}

farmanova-header>div> :nth-child(3) {
    margin-left: auto;
}

farmanova-header>div> :nth-child(2) {
    margin-left: 4.76%;
}

farmanova-header>div> :last-child {
    margin-right: 2.38%;
}

farmanova-header hr {
    background-color: var(--light-pale-blue);
    border: none;
    height: 45.35%;
    aspect-ratio: 1 / 83;
    margin: 0 1.3%;
}

.header-logo {
    aspect-ratio: 300/149;
    width: 9.53%;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/logocolor_gfi.svg");
}

.header-user-icon {
    width: 1.7%;
    aspect-ratio: 16/25;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/icono_usuario.svg");
}

.header-user-details {
    overflow: hidden;
    width: 12.79%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: .7%;
}

.header-user-details>* {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.change-regency-btn {
    width: 6.34%;
    aspect-ratio: 100/33;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_cambiarregencia.svg");
}

.logout-btn {
    width: 2.57%;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_cerrarsesion.svg");
    aspect-ratio: 187/150;
}

.underline-btn {
    color: var(--green);
    text-decoration: underline;
}

/*[END] Farmanova Header component */

/*[START] Farmanova Navbar component */

farmanova-navbar {
    z-index: 1;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background: var(--light-blue);
    width: 100%;
    aspect-ratio: 2602/ 104;
}


.nav-btns-container {
    width: 34.66%;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    height: 100%;
}

.nav-btns-container>button {
    height: 62.5%;
    aspect-ratio: 277 / 65;
    border-radius: 3vw;
    transition: background .5s;
    font-weight: bold;
    color: white;
}

.nav-btns-container>button:hover {
    background: var(--green);
}

.nav-btns-container>button[selected="true"] {
    background: var(--green);
}

.nav-carrito-container {
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    right: 2.38%;
    gap: 4%;
}


.nav-carrito-container>p::before {
    content: '¢ ';
}

.nav-carrito-container>button {
    height: 68.26%;
    aspect-ratio: 53/75;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_carrito_fondooscuro.svg");
}

/*[END] Farmanova Navbar component */


/* [START] Search bar */
farmanova-search-bar {
    width: 100%;

}

farmanova-search-bar>div:first-child {
    display: flex;
    align-items: center;
    width: 100%;
    aspect-ratio: 2192/72;
}

farmanova-search-bar farmanova-row-logos {
    width: 25.09%;
    height: 100%;
    margin-left: auto;
}

farmanova-search-bar.searchable farmanova-row-logos {
    margin-left: 3.19%;
}

search-input {
    position: relative;
    margin-left: auto;
    height: 76.38%;
    aspect-ratio: 420 / 55;
}

search-input input {
    background: var(--mid-gray);
    font-family: 'Montserrat';
    font-size: var(--body2-size);
    color: var(--light-blue);
    position: absolute;
    padding-right: 14.75%;
    padding-left: 7.38%;
    border: none;
    border-radius: 4vw;
    width: 100%;
    height: 100%;
}

search-input::after {
    display: block;
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: 2.85%;
    mask-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_lupabuscar.svg");
    -webkit-mask-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_lupabuscar.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    content: " ";
    width: 10%;
    background: var(--light-blue);
    aspect-ratio: 21/22;
}

.bottom-line {
    margin-top: 1%;
    background: var(--light-gray);
    width: 100%;
    aspect-ratio: 2192 / 8;
}

farmanova-search-bar.searchable .bottom-line {
    display: none;
}

/* [END] Search bar */

/*[START] Navguide */
farmanova-navguide {
    width: 100%;
}

farmanova-navguide>div:first-child {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.76vw;
}

farmanova-navguide farmanova-row-logos {
    height: 100%;
    width: 25.09%;
    margin-left: auto;
}

farmanova-navguide>div>.bg-image:first-child {
    height: 100%;
    margin-right: 1.345vw;
    aspect-ratio: 53/75;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_carrito_fondoclaro.svg");
}

/*[END] Navguide */

/*[START] Logos images */
.logo-farmanova {
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/logo_farmanova.svg");
}

.logo-pharmanet {
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/logo_pharmanet.svg");
}

.logo-intermed {
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/logo_intermed.svg");
}

.white-logo {
    z-index: -1;
    filter: brightness(0) invert(1);
    background-repeat: no-repeat;
    background-position: center;
}

/*[END] Logos images */

/*[START] Logos row */
farmanova-row-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

farmanova-row-logos hr {
    background-color: var(--light-pale-blue);
    border: none;
    height: 100%;
    aspect-ratio: 1 / 72;

}

farmanova-row-logos .logo-farmanova {
    height: 69.44%;
    aspect-ratio: 130 / 50;
}

farmanova-row-logos .logo-intermed {
    height: 79.16%;
    aspect-ratio: 128 / 57;
}

farmanova-row-logos .logo-pharmanet {
    height: 23.61%;
    aspect-ratio: 154 / 17;
}

/*[END] Logos row */

/* [START] Main Container */
farmanova-main-container {
    flex-grow: 1;
    width: 84.24%;
    margin: 3% auto;
    border-radius: 1.8vw;
    position: relative;
    padding: 2% 2.5%;
}

.main-blurry {
    background-color: #acacac1f;
    backdrop-filter: blur(33px);
    background-blend-mode: overlay;
}

.main-gray {
    background: var(--gray);
}

/* [END] Main Container */


/* [START] Data section */
farmanova-data-section {
    width: 100%;
    padding: 1.15vw;
}

farmanova-data-section .bottom-line {
    width: calc(100% - (10vw * 2));
    margin-left: auto;
    margin-right: auto;
}

farmanova-data-section>div:first-child {
    width: 100%;
    display: flex;
}

.data-section-center {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

.data-section-center>div {
    width: 23.674vw;
}

.back-button {
    width: 4.8039vw;
    background-repeat: no-repeat;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_atras.svg");
    aspect-ratio: 79/50;
}

.total-of-purchase::before {
    content: "COMPRA TOTAL: ¢ ";
}

farmanova-data-section p.loading,
farmanova-data-section h6.loading {
    min-height: var(--loading-text-height);
    margin: calc(var(--loading-text-height) * .65) 0;
}

/* [END] Data section */

/* [START] Numeric Input */
.numeric-input {
    border-radius: 4vw;
    border: none;
    aspect-ratio: 182 / 53;
    font-family: 'Montserrat';
    font-weight: bold;
    background: var(--mid-gray);
    text-align: center;
    font-size: var(--body2-size);
    padding-left: 5%;
    padding-right: 5%;
    color: var(--dark-blue);
}

/* [END] Numeric Input */

/*[START] Delete button */
.delete-btn {
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_borrar.svg");
    background-repeat: no-repeat;
    background-position: center;
}

/*[END] Delete button */

/* [START] Order overview */
farmanova-order-overview {
    display: block;
    padding: 0.6149vw;
    width: 62.2982vw;
    max-height: 25.7109vw;
    background: white;
}

farmanova-order-overview hr:first-child {
    margin-bottom: 0.92235vw;
}

farmanova-order-overview hr:last-of-type {
    margin-top: 0.92235vw;
}

farmanova-order-overview hr {
    background: var(--green);
    height: 0.1921vw;
    border: none;
}

farmanova-order-overview .total-detail {
    max-width: 18.0630vw;
    width: 18.0630vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark-blue);
}

farmanova-order-overview .total-detail p {
    font-size: var(--subtittle1-size);
}

farmanova-order-overview .total-detail p:last-child::before {
    content: "¢ ";
}

farmanova-products-overview-list {
    height: 9.2236vw;
    width: 60.26133vw;
    margin: 0 auto;
}

farmanova-products-overview-list .overview-content {
    width: 100%;
    color: var(--dark-blue);
}

farmanova-products-overview-list .overview-content .overview-row {
    display: grid;
    gap: 0.7686vw;
    grid-template-columns: 0.9992vw 38.1245vw 6.8793vw auto;
    /* 10.45349vw; */
    grid-auto-rows: max-content;
    padding: 0.7686vw 0;
    border-bottom: 0.1152vw solid #b5bdd66b;
    position: relative;
}

.overview-row.loading>* {
    width: 100%;
    border-radius: .5vw;
    height: var(--loading-text-height);
    animation: skeleton-loading-animation .5s linear infinite alternate;
}

farmanova-products-overview-list .overview-content .overview-row>* {
    display: flex;
    align-items: center;
}

farmanova-products-overview-list .overview-content .overview-row p:last-child {
    text-align: right;
    width: 100%;
    justify-content: end;
}

farmanova-order-overview p.loading,
farmanova-order-overview h6.loading {
    min-height: var(--loading-text-height);
}

farmanova-order-overview .total-detail.loading {
    margin-bottom: .5vw;
}

/* [END] Order overview */

/* [START] Order overview with toggler */
farmanova-order-overview-with-toggler {
    display: block;

    overflow: hidden;
    width: 62.2982vw;
}

farmanova-order-overview-with-toggler .toggler-container {
    display: flex;
    justify-content: space-between;
    height: 6.5718vw;
    padding: 0 1.96vw;
    color: var(--dark-blue);
    z-index: 2;
    position: relative;
    background-color: white;
}

farmanova-order-overview-with-toggler>div>img {
    height: fit-content;
    width: 9.684vw;
    border: none;
    outline: none;
    align-self: flex-end;
}

.toggler-container>div {
    height: fit-content;
    align-self: flex-end;
}

.toggler-container>div>h6 {
    width: fit-content;
    height: fit-content;
    margin-right: .4vw;
}

.toggler-container>div>.bg-img {
    margin-left: .5vw;
    background-color: var(--pale-blue);
    mask-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/flecha_selector.svg");
    -webkit-mask-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/flecha_selector.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    mask-repeat: no-repeat;
    width: 2vw;
    aspect-ratio: 89/75;
}

farmanova-order-overview-with-toggler farmanova-order-overview>div>h6 {
    margin-bottom: .7vw;
}

farmanova-order-overview-with-toggler>div>img.loading {
    aspect-ratio: 1/.5;
    border-radius: .5vw;
    animation: skeleton-loading-animation .5s linear infinite alternate;
}

farmanova-order-overview-with-toggler .toggler-right-container.loading {
    color: transparent;
    overflow: hidden;
    width: 45%;
    border-radius: .5vw;
    height: var(--loading-text-height);
    animation: skeleton-loading-animation .5s linear infinite alternate;
}

farmanova-order-overview-with-toggler .toggler-right-container.loading>* {
    display: none;
}

farmanova-order-overview-with-toggler farmanova-order-overview {
    max-height: unset;
}

farmanova-order-overview-with-toggler farmanova-products-overview-list {
    height: unset;
}

farmanova-order-overview-with-toggler.hide-delete .delete-btn {
    pointer-events: none;
    opacity: 0;
}

/* [END] Order overview with toggler */

/*[START] Carrito */
farmanova-carrito {
    position: fixed;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background: rgb(30, 30, 30, .3);
    z-index: 99;
    background-blend-mode: overlay;
    display: grid;
    transition: backdrop-filter 0.2s;
}

farmanova-carrito .outside {
    position: absolute;
    width: 100%;
    inset: 0;
    margin: auto;
    z-index: 99;
}

farmanova-carrito.active {
    display: grid;
    transition: opacity .2s;
    backdrop-filter: blur(33px) opacity(1);
    -webkit-backdrop-filter: blur(33px) opacity(1);
}

farmanova-carrito.hidden {
    z-index: -9999999;
    opacity: 0;
    backdrop-filter: blur(33px) opacity(0);
    -webkit-backdrop-filter: blur(33px) opacity(0);
}

farmanova-carrito.hidden .carrito-side-container {
    transform: translateX(100%);
}

farmanova-carrito.active .carrito-side-container {
    transform: translateX(0%);
}

.carrito-side-container {
    z-index: 100;
    justify-self: end;
    width: 26vw;
    height: 100%;
    background: var(--light-gray);
    display: flex;
    flex-direction: column;
    transition: transform .5s;
    overflow: hidden;
}

.carrito-side-top {
    height: 8.6079vw;
    background: var(--dark-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.carrito-side-top hr {
    background: white;
    height: 0.05vw;
    width: 96%;
    border: none;
    margin: .5vw 0;
}

.meds-quantity-container {
    display: flex;
}

.meds-quantity-container>* {
    font-weight: bold;
}

.carrito-side-img {
    width: 1.729vw;
    aspect-ratio: 53/75;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/btngfi_carrito_fondooscuro.svg");
}

.carrito-side-container farmanova-scrollable-container {
    flex-grow: 1;
    /* height: 30vw; */

}

.carrito-side-container ._scrollable-content-container {
    width: 100% !important;
}

.carrito-side-bottom {
    height: 12.6825vw;
    width: 100%;
    border-top: .2vw solid var(--pale-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.carrito-side-bottom p {
    font-size: var(--h6-size);
    font-weight: bold;
}

farmanova-carrito-product {
    display: flex;
    flex-direction: column;
    padding: 1vw;
    width: 100%;
    color: var(--dark-blue);
    border-bottom: .25vw solid white;
    position: relative;
}


farmanova-carrito-product p {
    font-size: var(--caption-size);
}

.edit-carrito-product {
    display: flex;
    gap: 1vw;
}

.edit-carrito-product input {
    padding-left: .5vw;
    padding-right: .5vw;
    width: 7.0338vw;
}

.edit-carrito-product button {
    font-size: var(--caption-size);
    text-decoration: underline;
    color: var(--dark-blue);
}

.carrito-product-loading-editing {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 25%,
            #1b3a774f 50%, transparent 75%);
    background-size: 200% 100%;
    animation: loading-horizontal 2s infinite linear;
}


/*[END] Carrito */

/*[START] Popup */
farmanova-popup {
    width: 100%;
    height: 100vh;
    position: fixed;
    inset: 0;
    background: rgb(30, 30, 30, .3);
    z-index: 999;
    justify-content: center;
    align-items: center;
    display: none;
}

farmanova-popup.initialized {
    display: flex;
}

farmanova-popup .container {
    z-index: 1001;
    border-radius: 1.5vw;
    width: 46.11837vw;
    background: white;
    overflow: hidden;
    aspect-ratio: 1/.8;
    padding: 1.5vw;
    display: flex;
    flex-direction: column;
}

farmanova-popup .title-container {
    background: var(--dark-blue);
    width: 100%;
    height: 8.0707vw;
    border-radius: 1.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5vw;
}

farmanova-popup .popup-title {
    font-size: var(--h6-size);
    color: white;
    text-align: center;
}

farmanova-popup .content {
    flex-grow: 1;
    margin-top: 1.5vw;
}

farmanova-popup .popup-back {
    z-index: 1000;
}

/*[END] Popup */

/*[START] Select */
select {
    appearance: none;
    font-family: 'Montserrat';
    color: var(--dark-blue);
    background: var(--mid-gray);
    border: none;
    width: 100%;
    border-radius: 4vw;
    font-size: var(--body1-size);
    padding: .5vw 2.2vw .5vw 1vw;
    background-image: url("https://storage.googleapis.com/farmanova-cdn/imgs/flecha_selector.svg");
    background-repeat: no-repeat;
    background-size: 1.2vw 1.2vw;
    background-position: right .7vw center;
}

/*[END] Select */

/*[START] Select Regency*/
.select-regency {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.select-regency>*:not(:first-child) {
    margin-top: 1.5vw;
}

.select-regency select {
    width: 70%;
}

.select-regency>button:last-child {
    color: var(--green);
    text-decoration: underline;
}

/*[END] Select Regency*/


/*[START] Loading box */
.loading-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading-box>svg {
    margin-bottom: 1vw;
}

/*[END] Loading box */

/*[START] Footer */
farmanova-footer {
    height: 9.339vw;
    width: 100%;
    background: var(--gray);
    padding: 1.5vw 3.5vw 0 3.5vw;
    display: flex;
    justify-content: space-between;
}

farmanova-footer .logo {
    /* aspect-ratio: 300/149; */
    height: 4.3334vw;
    width: 8.725vw;
    background-image: url(https://storage.googleapis.com/farmanova-cdn/imgs/logocolor_gfi.svg);
}

.footer-left {
    display: flex;
}

.footer-left hr {
    background-color: var(--light-pale-blue);
    border: none;
    height: 5.3334vw;
    aspect-ratio: 1 / 72;
    margin: 0 1vw;
}


.footer-left a {
    display: block;
    font-size: var(--caption-size);
    margin-bottom: .5vw;
    color: var(--dark-blue);
}

farmanova-footer farmanova-row-logos {
    width: 25.09%;
    height: 3vw;
    margin-left: auto;
}

/*[END] Footer */

/*[START] OS list */
.os-list-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.os-list {
    font-size: var(--caption-size);
    list-style: none;
    position: absolute;
    background: white;
    padding: 0 1vw;
    border: .1vw solid rgba(10, 10, 10, .1);
    border-top: none;
    outline: none;

}

.os-list>li {
    display: flex;
    align-items: center;
    margin-bottom: .5vw;
}

.os-list>li>*:first-child {
    margin-right: .4vw;
}

/*[END] OS list */

/*[START] Brands icons */
.ic-macOs {
    display: block;
    width: 1.5vw;
    height: 1.5vw;
    background-color: black;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
}

.ic-linux {
    display: block;
    width: 1.5vw;
    height: 1.5vw;
    background-color: black;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm52.7 93c8.8-15.2 28.3-20.5 43.5-11.7 15.3 8.8 20.5 28.3 11.7 43.6-8.8 15.2-28.3 20.5-43.5 11.7-15.3-8.9-20.5-28.4-11.7-43.6zM87.4 287.9c-17.6 0-31.9-14.3-31.9-31.9 0-17.6 14.3-31.9 31.9-31.9 17.6 0 31.9 14.3 31.9 31.9 0 17.6-14.3 31.9-31.9 31.9zm28.1 3.1c22.3-17.9 22.4-51.9 0-69.9 8.6-32.8 29.1-60.7 56.5-79.1l23.7 39.6c-51.5 36.3-51.5 112.5 0 148.8L172 370c-27.4-18.3-47.8-46.3-56.5-79zm228.7 131.7c-15.3 8.8-34.7 3.6-43.5-11.7-8.8-15.3-3.6-34.8 11.7-43.6 15.2-8.8 34.7-3.6 43.5 11.7 8.8 15.3 3.6 34.8-11.7 43.6zm.3-69.5c-26.7-10.3-56.1 6.6-60.5 35-5.2 1.4-48.9 14.3-96.7-9.4l22.5-40.3c57 26.5 123.4-11.7 128.9-74.4l46.1.7c-2.3 34.5-17.3 65.5-40.3 88.4zm-5.9-105.3c-5.4-62-71.3-101.2-128.9-74.4l-22.5-40.3c47.9-23.7 91.5-10.8 96.7-9.4 4.4 28.3 33.8 45.3 60.5 35 23.1 22.9 38 53.9 40.2 88.5l-46 .6z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm52.7 93c8.8-15.2 28.3-20.5 43.5-11.7 15.3 8.8 20.5 28.3 11.7 43.6-8.8 15.2-28.3 20.5-43.5 11.7-15.3-8.9-20.5-28.4-11.7-43.6zM87.4 287.9c-17.6 0-31.9-14.3-31.9-31.9 0-17.6 14.3-31.9 31.9-31.9 17.6 0 31.9 14.3 31.9 31.9 0 17.6-14.3 31.9-31.9 31.9zm28.1 3.1c22.3-17.9 22.4-51.9 0-69.9 8.6-32.8 29.1-60.7 56.5-79.1l23.7 39.6c-51.5 36.3-51.5 112.5 0 148.8L172 370c-27.4-18.3-47.8-46.3-56.5-79zm228.7 131.7c-15.3 8.8-34.7 3.6-43.5-11.7-8.8-15.3-3.6-34.8 11.7-43.6 15.2-8.8 34.7-3.6 43.5 11.7 8.8 15.3 3.6 34.8-11.7 43.6zm.3-69.5c-26.7-10.3-56.1 6.6-60.5 35-5.2 1.4-48.9 14.3-96.7-9.4l22.5-40.3c57 26.5 123.4-11.7 128.9-74.4l46.1.7c-2.3 34.5-17.3 65.5-40.3 88.4zm-5.9-105.3c-5.4-62-71.3-101.2-128.9-74.4l-22.5-40.3c47.9-23.7 91.5-10.8 96.7-9.4 4.4 28.3 33.8 45.3 60.5 35 23.1 22.9 38 53.9 40.2 88.5l-46 .6z"/></svg>');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
}

.ic-windows {
    display: block;
    width: 1.5vw;
    height: 1.5vw;
    background-color: black;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z"/></svg>');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
}

/*[END] Brands icons */


/*[START] Loading skeleton styles */
h6.loading,
p.loading,
farmanova-order-overview .total-detail.loading {
    position: relative;
    color: transparent;
}

h6.loading::before,
p.loading::before,
farmanova-order-overview .total-detail.loading::before {
    content: " ";
    width: 80%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: .5vw;
    height: var(--loading-text-height);
    animation: skeleton-loading-animation .5s linear infinite alternate;
}

@keyframes skeleton-loading-animation {
    0% {
        background-color: #33518a33;
    }

    100% {
        background-color: #1b3a774f;
    }
}

@keyframes loading-horizontal {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/*[END] Loading skeleton styles */