/* up */
@keyframes f-zoomInUp-animated {
    from{
        transform: translate3d(0, 1rem, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes f-zoomInUp-animated-important {
    from{
        transform: translate3d(0, 1rem, 0);
        opacity: 0 !important;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1 !important;
    }
}
/* out up */
@keyframes f-fadeOut-animated {
    to {
        transform: translate3d(0, 1rem, 0);
        opacity: 0;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
}
/* right */
@keyframes f-zoomInRight-animated {
    from{
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
/* out right */
@keyframes f-fadeOutRight-animated {
    to {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
}
/* left */
@keyframes f-zoomInLeft-animated {
    from{
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
/* out left */
@keyframes f-fadeOutLeft-animated {
    to {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
}

a,
button,
.button {
    transition: var(--transition);
}
a, button {
    color: currentColor;
    
}
button,
textarea,
input,
select,
label,
a {
    -webkit-tap-highlight-color: transparent;
}

a:not([class]),
.link {
    text-decoration: underline;
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.25rem;
    text-decoration-skip-ink: none;
    transition: var(--transition);
    text-decoration-color: currentColor;
}
a:not([class]):hover,
.link:hover {
    text-decoration-color: transparent;
}

.link-primary {
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    transition: var(--transition);
}
@media screen and (min-width: 1024px) {
    .link-primary:hover {
        color: var(--color-blue-hover);
    }   
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

body._overlay {
    overflow: hidden;
}
body._overlay .header,
body._overlay .header-catalog {
    padding-right: var(--width-scrollbar, 0);
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.5);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

body._overlay::before {
    pointer-events: all;
    opacity: 1;
}
.main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* container */
.container {
    max-width: calc(var(--container-width) + var(--grid-gap) * 2);
}
.container-full {
    max-width: 100%;
}
.container-right {
    width: 100%;
    padding-right: var(--grid-gap);
    margin-right: auto;
    margin-left: auto;
}
.container-left {
    width: 100%;
    padding-left: var(--grid-gap);
    margin-right: auto;
    margin-left: auto;
}
.container-medium {
    max-width: calc(var(--container-medium-width) + var(--grid-gap) * 2);
    width: 100%;
    padding-right: var(--grid-gap);
    padding-left: var(--grid-gap);
    margin-right: auto;
    margin-left: auto;
}
.container,
.container-full {
    width: 100%;
    padding-right: var(--grid-gap);
    padding-left: var(--grid-gap);
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 1023.5px) {
    .container-right {
        padding-left: var(--grid-gap);
    }
    .container-left {
        padding-right: var(--grid-gap);
    }
}

/* logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--offset-small);
    width: auto;
    max-width: 100%;
    height: var(--height-logo, 100%);
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    font-size: 0.75rem;
    line-height: 1.33;
    text-transform: uppercase;
    font-family: var(--font-title-family, var(--font-family));
}
.logo__icon {
    min-width: var(--size-icon);
    width: var(--size-icon);
    min-height: var(--size-icon);
    height: var(--size-icon);
    color: var(--color-primary);
}
.logo__main {
    min-width: var(--height-logo, 100%);
    width: var(--height-logo, 100%);
    min-height: var(--height-logo, 100%);
    height: var(--height-logo, 100%);
    color: var(--color-blue);
}
.logo svg,
.logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
}
.logo img {
    object-fit: contain;
}
.logo span {
    width: min-content;
}
/**/
.logo_medium {
    --height-logo: 3rem;
}

@media screen and (min-width: 768px) {
    .logo__main {
        display: none;
    }
}

/* icon */
.icon svg {
    transition: var(--transition);
}
@media screen and (min-width: 1024px) {
    .icon:hover svg {
        transform: var(--scale);
    }    
}

/* text-decoration underline */
.tdu,
.tdu-reverse {
    text-decoration: underline;
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.25rem;
    text-decoration-skip-ink: none;
    transition: var(--transition);
}
.tdu {
    text-decoration-color: currentColor;
}
.tdu:hover {
    text-decoration-color: transparent;
}

.tdu-reverse {
    text-decoration-color: transparent;
}
.tdu-reverse:hover {
    text-decoration-color: currentColor;
}

/* section */
.section:not(.section-offindent) {
    padding-bottom: var(--section-offset);
}
.section-big:not(.section-offindent) {
    padding-bottom: var(--section-offset-big);
}
.section-medium:not(.section-offindent) {
    padding-bottom: var(--section-offset-medium);
}
.section-small:not(.section-offindent) {
    padding-bottom: var(--section-offset-small);
}
/* top */
.section-top:not(.section-offindent) {
    padding-top: var(--section-offset);
}
.section-top.section-big:not(.section-offindent) {
    padding-top: var(--section-offset-big);
}
.section-top.section-medium:not(.section-offindent) {
    padding-top: var(--section-offset-medium);
}
.section-top.section-small:not(.section-offindent) {
    padding-top: var(--section-offset-small);
}


.section-fullheight,
.section-fullheight .section__bg,
.section-fullheight .section__bg > .container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.section-test {
    padding: 0.625rem 0;
}
.section__header {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.section__header:not(.section__header-offindent) {
    padding-bottom: var(--section-header-offset);
}
.section__header-small:not(.section__header-offindent) {
    padding-bottom: var(--section-header-offset-small);
}

.section__header-center {
    text-align: center;
}
.section__btns {
    display: flex;
    flex-direction: column;
    gap: var(--offset-extrasmall);
}
.section__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--offset-extrasmall);
}
.section__introtext {
    margin-top: var(--offset-medium);
}
.section__bottom {
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--offset-extrabig);
}
.section__bottom-more .button {
    width: 18.125rem;
}
.section__bg {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.section__bg[class*="bg-"],
.section__bg[style^="background-image:"] {
    padding: var(--section-offset, var(--grid-gap)) 0;
}

@media screen and (min-width: 1280px) {
    .section__grid {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    .section__grid .section__main {
        grid-column: span 2;
    }
    .section__grid .section__btns {
        grid-row: 1/2;
        grid-column: 2/3;
    }
    .section__btns:not(.section__btns-offindent) {
        padding-bottom: var(--section-header-offset);
    }
    .section__btns {
        flex-direction: row;
        align-items: center;
    }
}

@media screen and (max-width: 1279px) {
    .section__grid .section__main {
        padding-bottom: var(--section-header-offset);
    }
}
@media screen and (max-width: 1023.5px) {
    .section__introtext {
        margin-top: var(--offset-extrasmall);
    }
    .section-desktop {
        display: none;
    }
    .section__bottom-more .button {
        --size-btn: 2.5rem;
    }
    .section__introtext {
        margin-top: var(--offset-secondary);
    }
}
@media screen and (max-width: 767px) {
    .section__bottom {
        width: 100%;
        padding-top: 3rem;
        gap: var(--offset-main);
    }
}
@media screen and (max-width: 575px) {
    .example-wrapper {
        --width-card: 100% !important;
    }
    .section__bottom-more,
    .section__bottom-more .button {
        width: 100%;
    }
}

/* img */
.img img {
    user-select: none;
}

/* swiper */
.swiper {
    transition: var(--transition);
    opacity: 0;
}
.swiper.swiper-initialized {
    opacity: 1;
}
.swiper-wrapper {
    align-items: stretch;
}
.swiper-slide {
    height: auto;
}
.swiper-pagination {
    pointer-events: none;
}
.swiper-pagination-bullet {
    pointer-events: all;
}
.swiper-prev {
    transform: scaleX(-1);
}
.swiper-button-lock {
    display: none !important;
}
.swiper-button-disabled {
    opacity: 0.2;
    pointer-events: none !important;
}
@media screen and (max-width: 1920px) {
    .swiper-container {
        padding-left: var(--grid-gap);
        padding-right: var(--grid-gap);
        margin-left: calc(var(--grid-gap) * -1);
        margin-right: calc(var(--grid-gap) * -1);
        width: calc(100% + var(--grid-gap) * 2);
    }
}
@media screen and (max-width: 1023.5px) {
    .swiper-mobile {
        padding-left: var(--grid-gap);
        padding-right: var(--grid-gap);
        margin-left: calc(var(--grid-gap) * -1);
        margin-right: calc(var(--grid-gap) * -1);
        width: calc(100% + var(--grid-gap) * 2);
    }
}

/**/
.overflow-hidden {
    overflow: hidden;
}

/* loader */
@keyframes loader {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes showLoader {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.overlay,
.overlay-item,
.overlay-main {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black-40);
    transition: var(--transition);
    animation: showLoader 0.2s;
}
.overlay .preloader,
.overlay-item .preloader,
.overlay-main .preloader {
    max-width: 100%;
    max-height: 100%;
}

.overlay._hide,
.overlay-item._hide,
.overlay-main._hide {
    opacity: 0;
}
.overlay {
    position: fixed;
    z-index: 40;
    opacity: 0;
    transition: 0.2s all;
}
.overlay._show {
    opacity: 1;
}
.overlay-item {
    position: absolute;
    z-index: 40;
    border-radius: var(--radius);
}
.overlay-main {
    position: fixed;
    z-index: 500;
}

/*
body:not(.overflow-hidden) .overlay-main {
    opacity: 0;
    pointer-events: none;
}
*/

body.overflow-hidden {
    margin-right: var(--width-scrollbar, 0);
}
body.overflow-hidden .header {
    padding-right: var(--width-scrollbar, 0);
    width: calc(100% + var(--width-scrollbar, 0));
}

.preloader {
    width: 2.5rem;
    height: 2.5rem;
    animation: loader 2s infinite;
}
.preloader svg {
    width: 100%;
    height: 100%;
}

/* ya map */
.ymaps-2-1-79-controls__toolbar {
    margin-top: 1rem !important;
}
.ymaps-2-1-79-controls__control_toolbar {
    margin-right: 1rem !important;
}
.ymaps-2-1-79-controls__control_toolbar > *,
.ymaps-2-1-79-zoom__button > * {
    display: none !important;
}
.ymaps-2-1-79-controls__control {
    inset: 5rem 1rem auto auto !important;
}
.ymaps-2-1-79-zoom {
    width: 2rem !important;
    padding: 2rem 0 !important;
    height: 0.75rem !important;
}
.ymaps-2-1-79-controls__control_toolbar,
.ymaps-2-1-79-zoom__button,
.ymaps3x0--button.ymaps3x0--control-button {
    width: 2rem !important;
    height: 2rem !important;
    background-color: var(--color-extralight) !important;
    border-radius: var(--radius-small) !important;
    box-shadow: var(--shadow-hover) !important;
    cursor: pointer;
    background-position: center;
    background-size: 1rem;
    background-repeat: no-repeat;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ymaps-2-1-79-controls__control_toolbar,
.ymaps3x0--geolocation-control {
    background-image: url('../../images/icons/navigation.svg') !important;
}
.ymaps3x0--geolocation-control {
    background-size: 1.25rem 1.25rem !important;
}
.ymaps-2-1-79-zoom__plus,
.ymaps3x0--zoom-control__in {
    background-image: url('../../images/icons/navigation-plus.svg') !important;
}
.ymaps-2-1-79-zoom__minus,
.ymaps3x0--zoom-control__out {
    background-image: url('../../images/icons/navigation-minus.svg') !important;
}

/**/
.ymaps-2-1-79-balloon {
    box-shadow: none !important;
}
.ymaps-2-1-79-balloon__layout {
    background: transparent !important;
}
.ymaps-2-1-79-balloon__content {
    border-radius: var(--radius);
    border: none;
    box-shadow: var(--shadow);
    padding: var(--offset-secondary);
    min-width: 15rem !important;
}
.ymaps-2-1-79-balloon_type_route .ymaps-2-1-79-balloon__close + .ymaps-2-1-79-balloon__content,
.ymaps-2-1-79-balloon__close + .ymaps-2-1-79-balloon__content {
    padding-right: var(--offset-secondary) !important;
    margin-right: 0 !important;
}
.ymaps3x0--map-copyrights,
.ymaps-2-1-79-copyrights-pane {
    display: none !important;
}
.ymaps3x0--zoom-control.ymaps3x0--zoom-control_vertical {
    flex-direction: column;
    gap: 0.5rem;
}
.ymaps3x0--control__background {
    background-color: transparent !important;
    box-shadow: none !important;
}
/**/
.marker-map {
    --size-marker: 2.5rem;
    --size-marker-bullet: 1rem;
    --color-marker-bg: var(--color-opensea);
    --color-marker-border: var(--color-extralight);
    --color-marker: var(--color-extralight);

    width: var(--size-marker);
    height: var(--size-marker);
    transform: translate(calc(var(--size-marker) / -2), calc(var(--size-marker) / -1));
    color: var(--color-marker);
    background-color: var(--color-marker-bg);
    border-radius: var(--radius-extrasmall);
    border: 0.2rem solid var(--color-marker-border);
    box-shadow: 0 0 0.5rem 0 #00569333;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.marker-map svg,
.marker-map img {
    display: block;
    width: var(--size-marker-bullet);
    height: var(--size-marker-bullet);
    transition: var(--transition);
}
/* active */
.marker-map._active {
    --size-marker: 3rem;
    --size-marker-bullet: 1.5rem;
    --color-marker-bg: var(--color-extralight);
    --color-marker: var(--color-opensea);
    z-index: 1;
}

/* izi toast */
html:not(.with-fancybox) .iziToast-wrapper-topRight,
html:not(.with-fancybox) .iziToast-wrapper-topCenter,
html:not(.with-fancybox) .iziToast-wrapper-topLeft {
    top: calc(var(--height-header, 0px) + var(--height-filters-toast, 0px));
}
.iziToast-wrapper-topRight,
.iziToast-wrapper-topCenter,
.iziToast-wrapper-topLeft,
.iziToast-wrapper-topCenter,
.iziToast-wrapper-bottomCenter {
    transition: var(--transition);
}
.iziToast-wrapper-topCenter {
    text-align: left;
}
.iziToast-wrapper-bottomCenter {
    text-align: right;
}
.iziToast {
    border-radius: 0;
    background: transparent;
    border: none;
    border-image: none;
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
    margin: 0;
    padding: 0 !important;
    min-height: 0;
    font-family: var(--font-family);
    transition: var(--transition);
}
.iziToast-card {
    border: none;
    background: none;
}
.iziToast>.iziToast-body {
    background-color: var(--color-black-80);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.iziToast>.iziToast-body .iziToast-title,
.iziToast>.iziToast-body .iziToast-message {
    font-weight: var(--font-regular);
    color: var(--color-text-extralight);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}
.iziToast>.iziToast-body .iziToast-title {
    text-transform: uppercase;
}
.iziToast:after {
    content: none;
}
.iziToast>.iziToast-progressbar>div {
    background: var(--color-extralight);
}
.iziToast>.iziToast-body,
.iziToast>.iziToast-body .iziToast-texts {
    margin: 0;
    padding: 0;
}
.iziToast>.iziToast-body .iziToast-texts {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 3rem;
    padding: var(--offset-secondary);
}
/*
.iziToast-capsule + .iziToast-capsule {
    z-index: -1;
    position: absolute;
    top: 0;
    left: var(--offset-small);
    transform: translateY(10%) scale(0.9);
    width: calc(100% - var(--offset-small) * 2);
    height: 100%;
    transform-origin: right;
}
*/
.iziToast-capsule + .iziToast-capsule {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.iziToast-closing {
    opacity: 0;
}
@media screen and (min-width: 1024px) {
    .iziToast-wrapper {
        padding-right: var(--grid-gap);
        padding-left: var(--grid-gap);
    }
    .iziToast-wrapper-bottomRight,
    .iziToast-wrapper-bottomCenter {
        padding: var(--offset-secondary);
    }
}
@media screen and (max-width: 1023.5px) {
    .iziToast-wrapper {
        padding: var(--offset-extrasmall);
    }
    .iziToast-capsule + .iziToast-capsule {
        transform-origin: center;
    }
}


/* swiper-shadows */
.swiper-shadows {
    position: relative;
}
.swiper-shadows::before,
.swiper-shadows::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 5.5rem;
    pointer-events: none;
    z-index: 2;
    transition: var(--transition);
    opacity: 0;
}
.swiper-shadows._small::before,
.swiper-shadows._small::after {
    width: 3.5rem;
}
.swiper-shadows::before {
    left: 0;
    background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 46.59%);
}
.swiper-shadows::after {
    right: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 46.59%);
}
.swiper-shadows._left::before {
    opacity: 1;
}
.swiper-shadows._right::after {
    opacity: 1;
}

@media screen and (max-width: 575px) {
    .swiper-shadows._left::before,
    .swiper-shadows._right::after {
        opacity: 0;
    }
}

/* fixed-menu */
.fixed-menu {
    z-index: 30;
    position: fixed;
    left: 0;
    bottom: var(--offset-small);
    width: 100%;
    padding: 0 var(--grid-gap);
    overflow: hidden;
    pointer-events: none;
}
.fixed-menu .menu-mobile {
    pointer-events: all;
    transition: 0.75s all ease;
}
.fixed-menu:not(._open) .menu-mobile {
    transform: translateX(calc(var(--grid-gap) * -1 - 80%));
}

@media screen and (min-width: 576px) {
    .fixed-menu {
        display: none;
    }
}

/* hidden */
.hidden {
    display: none !important;
}

@media screen and (min-width: 425px) {
    .hidden-superdesktop {
        display: none !important;
    }
}
@media screen and (min-width: 768px) {
    .hidden-extradesktop {
        display: none !important;
    }    
}
@media screen and (min-width: 1024px) {
    .hidden-desktop {
        display: none !important;
    }
}
@media screen and (min-width: 1280px) {
    .hidden-minidesktop {
        display: none !important;
    }
}
@media screen and (min-width: 1440px) {
    .hidden-microdesktop {
        display: none !important;
    }
}

@media screen and (max-width: 1439px) {
    .hidden-micromobile {
        display: none !important;
    }
}
@media screen and (max-width: 1279px) {
    .hidden-minimobile {
        display: none !important;
    }
}
@media screen and (max-width: 1023.5px) {
    .hidden-mobile {
        display: none !important;
    }
}
@media screen and (max-width: 767px) {
    .hidden-extramobile {
        display: none !important;
    }
}
@media screen and (max-width: 424px) {
    .hidden-supermobile {
        display: none !important;
    }
}



/* datepicker */
/* date */
.air-datepicker-global-container {
    z-index: 99999;
}
.field-date > .datepicker-dropdown {
    left: 50% !important;
    transform: translateX(-50%);
}
.datepicker-dropdown {
    padding-top: var(--offset-extrasmall);
    background-color: var(--color-dark);
    box-shadow: var(--shadow-dropdown);
    z-index: 600;
}
.datepicker-view {
    width: calc(21.4375rem - var(--offset-secondary) * 2);
}
.datepicker-title {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0;
    margin: var(--offset-small) var(--offset-small) 0;
    font-weight: var(--font-semibold);
    font-size: 1.25rem;
    line-height: 1.4;
    min-height: 3.25rem;
    border-bottom: 0.0625rem solid var(--color-grey-purple);
    background-color: transparent;
    box-shadow: none;
}
.datepicker-dropdown .datepicker-picker {
    box-shadow: none;
}
.datepicker-picker {
    border: none;
    border-radius: 0;
    background-color: var(--color-dark);
    border: 0.0625rem solid var(--color-border);
}
.datepicker-header .datepicker-controls .button {
    display: flex;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: currentColor;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
}

.datepicker-header .datepicker-controls {
    padding: 0;
    margin: 0 var(--offset-small);
    border-bottom: 0.0625rem solid var(--color-light-grey);
}
.datepicker-header .datepicker-controls .button:hover {
    background-color: transparent;
}
.datepicker-header .datepicker-controls .button {
    font-weight: var(--font-regular);
}
.datepicker-header .datepicker-controls .button.view-switch {
    text-align: left;
    justify-content: start;
    gap: var(--offset-extrasmall);
    order: -1;
    font-weight: var(--font-semibold);
}
.datepicker-header .datepicker-controls .button.prev-button svg,
.datepicker-header .datepicker-controls .button.next-button svg {
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-width: var(--size-icon);
    width: var(--size-icon);
    min-height: var(--size-icon);
    height: var(--size-icon);
}
.datepicker-header .datepicker-controls .button.prev-button::after {
    transform: scaleX(-1);
}

.datepicker-header .datepicker-controls .button.view-switch::after {
    transform: rotate(90deg);
}
.datepicker-footer {
    box-shadow: none;
    background-color: transparent;
    padding: 0 var(--offset-small) var(--offset-small);
}
.datepicker-footer .datepicker-controls .button {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-text-extralight);
    --btn-border: var(--btn-bg);
    --btn-padding: calc(var(--offset-medium) - 0.125rem);
    --btn-gap: var(--offset-small);
    --size-btn: 2.5rem;
    --btn-radius: 6.25rem;

    min-height: var(--size-btn);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--btn-gap);
    border: 0.0625rem solid var(--btn-border);
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--btn-radius);
    padding: calc(var(--offset-extrasmall) / 2) var(--btn-padding);
    white-space: nowrap;
    position: relative;
    transition: var(--transition);

    font-weight: var(--font-semibold);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}
@media screen and (min-width: 1024px) {
    .datepicker-footer .datepicker-controls .button:hover {
        --btn-bg: var(--color-secondary);
        --btn-color: var(--color-text-muted);
    }
}
.datepicker-footer .datepicker-controls .button:active {
    --btn-bg: var(--color-secondary);
    --btn-color: var(--color-text-muted);
}

.datepicker-main {
    padding: var(--offset-small);
}
.datepicker .days .dow, 
.datepicker-cell {
    min-height: 2.75rem;
    height: 2.75rem;
    max-width: 2.75rem;
    aspect-ratio: 1;
}
.datepicker .dow {
    font-weight: var(--font-semibold);
    font-size: 1rem;
    text-transform: uppercase;
    color: currentColor;
}
.datepicker-cell:not(.day) {
    flex-basis: calc(33% - 0.25rem);
    max-width: calc(33% - 0.25rem);
}

.datepicker span {
    border-radius: 50%;
}
.datepicker-cell.selected, 
.datepicker-cell.selected:hover {
    background-color: var(--color-primary);
}
.datepicker-cell.selected, 
.datepicker-cell.selected:hover {
    font-weight: var(--font-regular);
}
.datepicker-cell:not(.day) {
    height: 2.5rem;
}
.datepicker span {
    border-radius: 6.25rem;
}
.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover,
.datepicker-cell.day.range {
    background-color: var(--color-dark);
}
.datepicker-cell.range-start:not(.range-end) {
    border-radius: 50% 0 0 50%;
    background-color: var(--color-primary);
}
.datepicker-cell.range-end:not(.range-start) {
    border-radius: 0 50% 50% 0;
    background-color: var(--color-primary);
}
.modal-rangepicker .datepicker-dropdown.active {
    position: static !important;
}

@media screen and (max-width: 374px) {
    .datepicker .days .dow, .datepicker-cell {
        min-height: 2rem;
        height: 2rem;
        max-width: 2rem;
    }
    .datepicker-cell:not(.day) {
        height: 2rem;
    }
    .datepicker-view {
        width: auto;
    }
    .datepicker-title {
        font-size: 1rem;
        min-height: 3rem;
    }
}

/* example */
.example-container {
    padding: var(--offset-main);
    border-radius: var(--radius-medium);
    border: 0.0625rem dashed #9747FF;
}

.example-header {
    padding: var(--offset-main);
    border-radius: var(--radius-medium);
}

/* body */
body {
    background-color: var(--color-bg);
    transition: 1s color ease-in-out, 1s background-color ease-in-out;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
.body-sidebar {
    flex-grow: 1;
}
.body-content {
    height: auto;
    display: flex;
    flex-direction: column;
}
.body-header {
    padding: var(--grid-gap) 0;
    background-color: var(--color-bg);
}
.body-lk {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.body-lk .main:not(.main-offindent) {
    padding: var(--grid-gap) 0 0;
}
.body-lk .sidebar-aside {
    align-self: start;
}

@media screen and (min-width: 1024px) {
    .body-sidebar {
        display: grid;
        grid-template-columns: var(--width-sidebar) calc(100% - var(--width-sidebar));
        align-items: stretch;
    }
    .body-content {
        padding-right: var(--offset-secondary);
    }
    .body-header {
        position: sticky;
        top: 0;
        padding: 1.75rem 0 2.25rem;
        z-index: 999;
        margin: 0 -0.0625rem;
        width: calc(100% + 0.125rem);
        transition: var(--transition);
    }
    .body-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, 0.4);
        opacity: 0;
        transition: var(--transition);
    }
    body.overflow-hidden .body-header::before {
        opacity: 1;
    }
}
@media screen and (max-width: 1023.5px) {
    .body-lk .main:not(.main-offindent) {
        padding: var(--offset-small) 0 1.125rem;
    }
}

/* fields */ 
.fields-2 {
    --columns-fields: 2;
}
.fields-3 {
    --columns-fields: 3;
}
.fields-4 {
    --columns-fields: 4;
}

@media screen and (max-width: 1279px) {
    .fields-4 {
        --columns-fields: 3;
    }
}
@media screen and (max-width: 767px) {
    .fields-3,
    .fields-4 {
        --columns-fields: 2;
    }
}
@media screen and (max-width: 575px) {
    .fields-2,
    .fields-3,
    .fields-4 {
        --columns-fields: 1;
    }
}

/* link-circle */
.link-circle {
    --size-image: 3rem;

    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-image);
    width: var(--size-image);
    min-height: var(--size-image);
    height: var(--size-image);
    border-radius: var(--size-image);
    overflow: hidden;
}
.link-circle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}