/* Main start */
BODY,
HTML {
    font-family: RocheSans, sans-serif;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 200;
    color: var(--wp--preset--color--base-gray-900);
    padding: 0;
    margin: 0;
    min-width: 375px;
    overflow-wrap: anywhere;
}

body {
    display: flex;
    flex-direction: column;
}

body.block-overflow {
    overflow: hidden;
}

main {
    flex: 1 0 auto;
}

* {
    box-sizing: border-box;
}

sup {
    font-size: .5em;
    line-height: 0;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.container {
    box-sizing: border-box;
}

@media screen and  (min-width: 1400px) {
    .container {
        box-sizing: border-box;
        max-width: 1250px;
    }
}

p {
    font-weight: 200;
}

.box > *:first-child {
    margin-top: 0;
}

.box > *:last-child {
    margin-bottom: 0;
}

.text-small {
    font-size: 0.9em;
}

h1 .icon,
h2 .icon,
h3 .icon,
.l4 .icon,
.l5 .icon,
.l6 .icon {
    vertical-align: middle;
    margin-top: -.2em;
}

.l4 {
    font-size: 1.5em;
    line-height: 1.3;
    font-weight: 200;
    margin-bottom: .7em;
}

.l5 {
    font-size: 1.2em;
    line-height: 1.3;
    font-weight: normal;
    margin-bottom: .7em;
}

.l6 {
    font-size: 1em;
    line-height: 1.3;
    font-weight: normal;
    margin-bottom: .7em;
}

.l-small-emphasized {
    font-size: 0.6em;
    line-height: 1.2em;
}

.l-emphasized {
    font-size: .8em;
    line-height: 1.3;
    font-weight: 400;
}

.d-label {
    font-size: .8em;
    line-height: 1.3;
    font-weight: 200;
}

.l-label {
    font-size: .7em;
    line-height: 1.3;
    font-weight: 200;
}

.body-small {
    font-size: .9em;
    line-height: 1.2;
}

.footnote {
    font-size: 0.7em;
}

.divider-10 {
    display: block;
    padding: 10px 0;
}

.divider-20 {
    display: block;
    padding: 20px 0;
}

.divider-30 {
    display: block;
    padding: 30px 0;
}

.link-overlay {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.button {
    font-size: 1em;
    text-align: center;
    min-height: 54px;
    padding: 12px 20px;
    color: white;
    background-color: var(--wp--preset--color--primary-blue-900);
    border: 1px solid transparent;
    font-family: RocheSans, sans-serif;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    width: fit-content;
    justify-content: center;
}

.button .icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.button.button-external-link .icon {
    mask-image: url("../images/icons-basic/Outline/external-link.svg");
    mask-repeat: no-repeat;
    background-color: white;
    background-position: center;
}

.button:hover {
    background-color: var(--wp--preset--color--primary-blue-600);
}

.button:disabled {
    color: var(--wp--preset--color--base-gray-500);
    background-color: var(--wp--preset--color--base-gray-200);
    cursor: default;
}

.button.button-secondary {
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--primary-blue-900);
    color: var(--wp--preset--color--primary-blue-900);
}

.button.button-secondary:hover {
    border-color: var(--wp--preset--color--primary-blue-600);
    color: var(--wp--preset--color--primary-blue-600);
}

.button.button-secondary:disabled {
    color: var(--wp--preset--color--base-gray-500);
    border-color: var(--wp--preset--color--base-gray-200);
    cursor: default;
}

.button.button-tertiary {
    background-color: transparent;
    color: var(--wp--preset--color--primary-blue-900);
}

.button.button-tertiary:hover {
    background-color: var(--wp--preset--color--primary-blue-100);
}

.button.button-tertiary:disabled {
    color: var(--wp--preset--color--base-gray-500);
    cursor: default;
}

/*  */

/* Blocks start */

.block-container {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.block-container-big {
    padding: 96px 0;
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.bg-gray-neutral-blue {
    background: var(--wp--gradient--gray-neutral-blue);
}

.bg-lightpurple-lightblue-peach {
    background: var(--wp--gradient--lightpurple-lightblue-peach);
}

.bg-gray-easy {
    background: var(--wp--preset--color--base-gray-50);
}

.bg-blue-gray-white {
    background: var(--wp--gradient--blue-gray-white);
}

.bg-blue-orange {
    background: var(--gradient-blue-orange);
}

@media (max-width: 991.98px) {
    .block-container-big {
        padding: 80px 0;
    }
    .block-container {
        padding: 30px 0;
        gap: 30px;
    }
}
@media (max-width: 767.98px) {
    .block-container-big {
        padding: 60px 0;
        gap: 50px;
    }
}
@media (max-width: 575.98px) {
    .block-container-big {
        padding: 40px 0;
        gap: 30px;
    }
    .block-container {
        padding: 20px 0;
        gap: 20px;
    }
}

.icon-40-40 {
    max-width: 40px;
    max-height: 40px;
}

.tag {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary-blue-600);
    border: 1px solid var(--wp--preset--color--primary-blue-600);
    display: inline-block;
    border-radius: 20px;
    padding: 4px 8px;
    line-height: 1em;
    font-weight: normal;
    text-decoration: none;
    position: relative;
    letter-spacing: .03em;
}

.tag.active {
    background-color: var(--wp--preset--color--primary-blue-600);
    border: 1px solid var(--wp--preset--color--primary-blue-600);
    color: white;
}

.tag:hover {
    color: var(--wp--preset--color--primary-blue-400);
    border: 1px solid var(--wp--preset--color--primary-blue-400);
}

.tag:disabled {
    color: var(--wp--preset--color--base-gray-500);
    border: 1px solid var(--wp--preset--color--base-gray-100);
    background-color: var(--wp--preset--color--base-gray-100);
}

/* Blocks end */

/* Header start */

header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 100;
    border-bottom: 1px solid var(--wp--preset--color--base-gray-100);
    max-height: 100%;
}

header .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
}

.brand-area {
    display: flex;
    align-items: center;
    gap: 35px;
}

.logo-roche {
    height: 32px;
}

.icon-divider {
    height: 16px;
    width: 1px;
    background-color: var(--wp--preset--color--base-gray-300);
}

.logo-medroche {
    height: 42px;
}

.nav-search {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    line-height: 0;
}

.utilities-area .search {
    line-height: 0;
}

.utilities-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px
}

.user-avatar {
    height: 40px;
    width: 40px;
    background-color: var(--wp--preset--color--primary-blue-50);
    border-radius: 20px;
    position: relative;
}

.user-avatar .icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    mask-image: url("../images/icons-basic/Outline/user.svg");
    mask-repeat: no-repeat;
    background-color: var(--wp--preset--color--primary-blue-600);
    mask-position: center;
}

.user-avatar.guest {
    background-color: var(--wp--preset--color--base-gray-100);
}

.user-avatar.guest .icon {
    mask-image: url("../images/icons-basic/Outline/logon.svg");
    background-color: var(--wp--preset--color--base-gray-600);
}

.user-avatar:hover {
    background-color: var(--wp--preset--color--primary-blue-50);
}

.user-avatar:hover .icon {
    background-color: var(--wp--preset--color--primary-blue-600);
}

.user-avatar .user-menu {
    position: absolute;
    display: none;
    flex-direction: column;
    background-color: white;
    right: 0;
    top: 40px;
    box-shadow: 0px 16px 32px rgba(194, 186, 181, 0.12), 0px 8px 16px rgba(84, 79, 79, 0.12);
    width: max-content;
    z-index: 20;
}

.user-avatar:hover .user-menu {
    display: flex;
}

.user-avatar .user-menu-item {
    display: flex;
    flex-shrink: 0;
    width: 100%;
}

.user-avatar .user-menu-item a {
    display: block;
    padding: 10px 20px;
    font-size: 0.8em;
    font-weight: normal;
    color: var(--wp--preset--color--base-gray-700);
    text-decoration: none;
    width: 100%;
}

.user-avatar .user-menu-item a:hover {
    color: var(--wp--preset--color--primary-blue-600);
    background-color: var(--wp--preset--color--primary-blue-50);
}

header .burger {
    line-height: 0;
    display: none;
}

header .menu-burger {
    background-image: url("../images/icons-basic/Outline/menu.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    height: 40px;
    width: 40px;
    cursor: pointer;
}

header .menu-burger.opened {
    background-image: url("../images/icons-basic/Outline/close.svg");
}

header .navigation-area {
    display: flex;
    flex-direction: row;
    gap: 40px;
    position: relative;
}

header .navigation-area .nav-link {
    font-size: 0.8em;
    font-weight: normal;
    color: var(--wp--preset--color--base-gray-700);
    text-decoration: none;
    display: block;
    padding: 12px 0 10px;
    border-bottom: 2px solid white;
}

header .navigation-area .nav-link:hover {
    border-bottom: 2px solid var(--wp--preset--color--primary-blue-900);
}

header .navigation-area .has-sub-menu:hover .nav-item-sub-menu {
    display: flex;
}

header .navigation-area .nav-item-sub-menu {
    background-color: white;
    position: absolute;
    left: 0;
    top: 48px;
    box-shadow: 0px 16px 32px rgba(194, 186, 181, 0.12), 0px 8px 16px rgba(84, 79, 79, 0.12);
    flex-direction: row;
    width: 100%;
    padding: 20px;
    display: none;
}

header .navigation-area .nav-item-sub-menu .nav-item-sub-menu-column {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.nav-item-sub-menu-item {
    font-size: .9em;
    line-height: 1.2;
    padding: 12px 10px;
    color: var(--wp--preset--color--base-gray-900);
    text-decoration: none;
    display: block;
}

.nav-item-sub-menu-item.big {
    font-size: 1em;
    font-weight: 400;
}

.nav-item-sub-menu-item:hover {
    color: var(--wp--preset--color--primary-blue-600);
}

header .navigation-area .nav-link.active {
    color: var(--wp--preset--color--primary-blue-900);
    border-bottom: 2px solid var(--wp--preset--color--primary-blue-900);
}

@media (max-width: 991.98px) {
    header .burger {
        display: block;
    }

    header .navigation-area {
        display: none;
    }


    header .navigation-area.opened {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    header .navigation-area .nav-link {
        font-size: 1em;
    }

    header .navigation-area .nav-item:not(:last-child) {
        border-bottom: 1px solid var(--wp--preset--color--base-gray-300);
    }

    header .navigation-area .nav-item .nav-link {
        border: none;
    }

    header .navigation-area .has-sub-menu:hover .nav-item-sub-menu {
        display: none;
    }
    header .navigation-area .nav-link:hover {
        color: var(--wp--preset--color--primary-blue-600);
    }

    header .navigation-area .has-sub-menu .nav-link {
        max-width: calc(100% - 50px);
        display: inline-block;
    }

    header .navigation-area .has-sub-menu {
        position: relative;
    }

    header .navigation-area .has-sub-menu::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 50px;
        width: 40px;
        mask-image: url("../images/icons-basic/Outline/chevron_down.svg");
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: var(--wp--preset--color--base-gray-600);
        display: block;
    }

    header .navigation-area .has-sub-menu.opened::after {
        mask-image: url("../images/icons-basic/Outline/chevron_up.svg");
    }

    header .navigation-area .has-sub-menu.opened .nav-item-sub-menu {
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 0;
        box-shadow: none;
        top: auto;
        background-color: transparent;
    }

    header .navigation-area .has-sub-menu.opened .nav-item-sub-menu-item {
        padding-left: 0;
    }

    header .navigation-area .nav-item {
        cursor: pointer;
    }

    header.opened {
        height: 100%;
        background-color: white;
        z-index: 1000000;
        display: flex
;
        position: fixed;
        width: 100%;
    }

    header.opened .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    header.opened .container .top {
        box-shadow: 0px 1px 1px rgba(194, 186, 181, 0.12);
    }

    header.opened .container .bottom {
        overflow: auto;
    }


    header.opened .container > div {
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        padding-right: calc(var(--bs-gutter-x) * 0.5);
    }
}

@media (max-width: 767.98px) {
    header .top .logo-roche,
    header .top .brand-area .icon-divider {
        display: none;
    }

    header .top .brand-area {
        gap: 0;
    }

    header .top {
        padding: 10px 0;
    }
}

/* Header end */

/* Grids start */

.grid-100 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 32px;
}

.grid-66-33 {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Соотношение 66%/33% */
    gap: 32px;
}

.grid-50-50 {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
}

.grid-66-33 > *,
.grid-50-50 > * {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .grid-50-50 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-66-33 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Grids end */


/* Footer start */

footer {
    border-top: 2px solid var(--wp--preset--color--primary-blue-900);
    padding: 48px 0;
    background: var(--wp--gradient--blue-gray-white);
    flex-shrink: 0;
}

footer > .container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

footer .footer-navigation-area {
    display: flex;
    flex-direction: row;
    gap: 40px;
    flex-wrap: wrap;
    row-gap: 15px;
}

footer .footer-navigation-area .nav-link {
    color: var(--wp--preset--color--base-gray-700);
    text-decoration: none;
    font-weight: normal;
}

footer hr {
    height: 1px;
    width: 100%;
    background-color: var(--wp--preset--color--base-gray-300);
    border: none;
}

footer .footer-subnavigation-area {
    display: flex;
    flex-direction: row;
    gap: 40px;
    flex-wrap: wrap;
    row-gap: 15px;
}

footer .footer-subnavigation-area .nav-link {
    color: var(--wp--preset--color--base-gray-700);
    text-decoration: none;
    font-weight: normal;
    font-size: .8em;
}

footer .footnote {
    font-size: 0.7em;
}

footer .meta-info {
    font-size: 0.8em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

@media (max-width: 575.98px) {
    footer > .container {
        gap: 25px;
    }
    footer .footer-navigation-area {
        flex-direction: column;
        align-items: stretch;
    }
    footer .footer-subnavigation-area {
        flex-direction: column;
        align-items: stretch;
    }
    footer .meta-info {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Footer end */

/* Popups start */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9997;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: auto;
    max-height: 100vh;
    padding: 25px;
    box-sizing: border-box;
}

.popup .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(32, 32, 32, 0.6);
    z-index: 9998;
}

.popup.opened {
    opacity: 1;
    visibility: visible;
    display: flex !important;
}

.popup-container {
    width: 100%;
    max-width: 460px;
    background-color: white;
    z-index: 9999;
    padding: 24px;
    box-sizing: border-box;
}

.popup-container > *:first-child {
    margin-top: 0;
}

.popup-container > *:last-child {
    margin-bottom: 0;
}

.popup.popup-big .popup-container {
    max-width: 740px;
}

.popup .popup-container .buttons {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.popup .popup-container .button {
    font-size: .9rem;
}

.popup .popup-container p {
    color: var(--wp--preset--color--base-gray-700);
}

@media (max-width: 575.98px) {

    .popup {
        align-items: start;
    }

    .popup .popup-container .buttons {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        gap: 15px;
    }

    .popup .popup-container .buttons .button {
        width: 100%;
    }
}

/* Popups end */

@media (max-width: 1399.98px) {}
@media (max-width: 1199.98px) {}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}