// Global
:root {
    scroll-behavior: smooth;
    font-size: $font-size-root;

    // Disable smooth scroll when the user has set "prefers-reduced-motion"
    @media screen and (prefers-reduced-motion: reduce) {
        scroll-behavior: auto;
    }
}

::-ms-reveal {
    display: none;
}

::selection {
    background-color: var(--template-primary-color);
    color: var(--template-primary-contrast-color);
}

html {
    background-color: $white;
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
    font-style: var(--neoteric-font-style-normal, normal);

    &.tmpl-component {
        min-height: 0;
    }
}

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

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
    font-family: var(--neoteric-font-family-headings, $font-family-sans-serif);
    font-weight: var(--neoteric-font-weight-headings, $font-weight-bold);
    font-style: var(--neoteric-font-style-normal, $headings-font-style);
    margin-bottom: 1rem;
}

p {
    margin-bottom: 2rem;
}

.display-1 {
    font-size: clamp(2.7rem, 8vw, 5.5rem);
}

.display-2 {
    font-size: clamp(2.3rem, 7vw, 4.5rem);
}

.display-3 {
    font-size: clamp(1.9rem, 6vw, 3.5rem);
}

.display-4 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

.lead {
    font-size: clamp(1.1rem, 3vw, 1.25rem);
}

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

.text-color-primary {
    color: var(--template-primary-color);
}

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

a {
    color: var(--template-link-color);
    text-decoration: none;

    &:not(.btn) {
        transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
    }

    &:not([class]):hover,
    &:not([class]):focus {
        color: var(--template-link-hover-color);
    }

    &.navbar-brand {
        color: var(--neoteric-color-brand);
    }
}

.com-content-article {

    ol,
    ul {
        overflow: hidden;
    }
}

.com-content-category__pagination {
    margin-bottom: $neoteric-grid-gutter;
}

small,
.small {
    font-size: $font-size-sm;
}

dd {
    padding: 0;
    word-wrap: break-word;
}

th dd {
    font-weight: var(--neoteric-font-weight-normal, $font-weight-normal);
}

.com-contact__thumbnail {
    text-align: left;
}

@include media-breakpoint-up(xl) {
    dl.dl-horizontal {
        display: grid;
        grid-template-columns: auto 1fr;

        dt {
            grid-column-start: 1;
            grid-column-end: 2;
        }

        dd {
            grid-column-start: 2;
            grid-column-end: 3;
            padding: 0 0 0 $neoteric-grid-gutter;
            margin-bottom: 0;
        }
    }

    .com-contact__container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, auto);
        grid-gap: 1rem;
        margin-bottom: $neoteric-grid-gutter;

        h3 {
            grid-column: 1 / 5;
        }

        .com-contact__thumbnail {
            grid-column: 3 / 5;
            grid-row: 2 / 5;
            margin-bottom: $neoteric-grid-gutter;
            text-align: right;
        }

        .com-contact__position {
            grid-column: 1 / 3;
            grid-row: 2 / 3;
        }

        .com-contact__info {
            grid-column: 1 / 3;
            grid-row: 3 / 4;
        }
    }

    .com-users-profile {
        dt {
            min-width: 180px;
        }
    }
}

figure {
    margin: 0 0 ($neoteric-grid-gutter);

    &.float-start {
        margin-right: $neoteric-grid-gutter;
    }

    &.float-end {
        margin-left: $neoteric-grid-gutter;
    }
}

figcaption {
    font-size: .9em;
    color: $gray-600;
}

.mod-menu {
    flex-direction: column;
}

// meter element
meter {
    width: 100%;
}

.pagenavigation,
.pager {
    clear: both;

    .pagination {
        justify-content: space-between;
        padding: 0;
        margin: $neoteric-grid-gutter 0;

        .next:only-child {
            margin-left: auto;
        }
    }
}

.page-link {
    color: var(--template-link-color);

    &:hover {
        color: var(--template-link-color);
    }
}

.active>.page-link {
    color: var(--pagination-active-color);

    &:hover {
        color: var(--pagination-active-hover-color, var(--pagination-active-color));
    }
}

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

[dir="rtl"] li.next .page-link {
    border-top-left-radius: .25rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: .25rem;
}

[dir="rtl"] li.previous .page-link {
    border-top-left-radius: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: 0;
}

.article-index {
    .toclink.active {
        color: currentColor;
    }
}

.top-bar-content {
    background-color: var(--template-topbar-bg);
    color: var(--template-topbar-color);
    border-bottom-color: var(--template-topbar-border-color);
    border-bottom-width: 1px;
    border-bottom-style: solid;

    a.text-color-inherit,
    .mod-list a {
        color: var(--template-topbar-color);
        opacity: 1;

        &:hover,
        &:focus,
        &:active {
            color: var(--template-topbar-color);
        }

        &:hover {
            opacity: 0.9;
        }
    }

    .mod-inline {
        padding: 0.4rem 0;
    }
}

@include media-breakpoint-up(md) {
    .top-bar-content {
        .top-right {
            .mod-inline:not(:last-child) {
                border-right: 1px solid rgba(255, 255, 255, 0.6);
                padding-right: 1rem;
            }
        }

        .top-left {
            .mod-inline:not(:first-child) {
                border-left: 1px solid rgba(255, 255, 255, 0.6);
                padding-left: 1rem;
            }
        }
    }
}

// Bootstrap 4 b/c
.sr-only {
    @extend .visually-hidden;
}

// Offcanvas position
.offcanvas-header {
    border-bottom: 1px solid var(--gray-300);
}

.block-offcanvas {
    .offcanvas-header {
        background-color: var(--template-offcanvas-header-bg, #092143);
        color: var(--template-offcanvas-header-color, #fff);
        border-bottom: none;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.17) -3px 3px 9px 0px;
    }

    .offcanvas-body {
        padding: 0;
    }
}

.header-content {
    background-color: var(--white, $white);
}

.header-is-sticky {
    .header-content {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
}

.header-main {
    background-color: var(--template-header-bg, #092143);
    color: var(--template-header-color, #fff);

    .container-inner {
        position: relative;
        padding: 1.2rem 0;
        transition: padding 0.2s ease;
    }
}

.header-search-container {
    .awesomplete {
        display: block;
        flex-grow: 1;

        &>input {
            max-width: none;
        }

    }
}

@include media-breakpoint-down(lg) {
    .header-search-container {
        position: absolute;
        left: auto;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        background-color: var(--template-header-bg, #092143);
        color: var(--template-header-color, #fff);
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        z-index: 380;
        transition: opacity 0.1s linear, visibility 0.1s linear, width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

        .header-search-inner {
            height: 100%;
        }
    }

    .header-search-open {
        .header-search-container {
            visibility: visible;
            pointer-events: unset;
            opacity: 1;
            width: 100%;
        }
    }
}

.link-inherit-color {
    color: currentColor;

    &:hover,
    &:focus,
    &:active {
        color: currentColor;
    }
}

@include media-breakpoint-up(lg) {
    .header-main {
        .container-inner {
            padding: 2rem 0;
        }
    }

    .header-is-sticky {
        .header-main {
            .container-inner {
                padding: 1.2rem 0;
            }
        }
    }
}

select.vm-customfield-choice,
select.normal-choice,
.normal-choice-wrapper>select {
    display: none;
}

input[type="number"].quantity-input {
    -moz-appearance: textfield;
    appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

.main-content-area {
    background-color: var(--template-main-content-area-bg, transparent);
}

.main-section {
    padding-top: 3rem;
}

.mega-menu-container {
    --megamenu-border-color: var(--template-megamenu-border-color, #ddd);
    --megamenu-bg: var(--template-megamenu-bg, #fff);
    border-top: 1px solid var(--megamenu-border-color);
    border-bottom: 1px solid var(--megamenu-border-color);
    background-color: var(--megamenu-bg);

    .mod-vmcategory-dropdown+.mod-megamenu {
        padding-left: 0.9rem;
    }
}

.breadcrumbs-section {
    background-color: var(--breadcrumb-section-bg);
    color: var(--breadcrumb-section-color);
    border-bottom: 1px solid var(--breadcrumb-section-border-color);

    .mod-breadcrumbs {
        margin: 0;
        background-color: transparent;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    a {
        text-decoration: none;
        color: var(--breadcrumb-section-link-color, inherit);

        &:hover {
            text-decoration: none;
            color: var(--breadcrumb-section-link-hover-color, var(--template-link-color));
        }
    }

    .mod-breadcrumbs__item {
        &+.breadcrumb-item {
            &:before {
                font-family: 'VP-Prime', "Roboto", sans-serif !important;
                content: "\e923";
                color: var(--breadcrumb-section-separator-color);
            }
        }

        &.active {
            color: var(--breadcrumb-section-item-active-color, inherit);
        }
    }
}

@include media-breakpoint-down(sm) {
    .breadcrumbs-section {
        .breadcrumbs-inner {
            &.d-flex {
                .mod-position-breadcrumbs {
                    flex-shrink: 1;
                    overflow: hidden;
                }
            }
        }

        .mod-breadcrumbs__wrapper {
            overflow-x: auto;
        }

        .breadcrumb {
            flex-wrap: unset;
            white-space: nowrap;

            .breadcrumb-item:not(:first-child):not(:last-child) {
                overflow: hidden;
                text-overflow: ellipsis;
                visibility: hidden;
                width: 0;
                padding: 0;
            }

            .mod-breadcrumbs__divider,
            .mod-breadcrumbs__here {
                &+.breadcrumb-item {
                    overflow: unset !important;
                    text-overflow: unset !important;
                    visibility: unset !important;
                    width: unset !important;
                    padding: unset !important;
                }
            }

            .breadcrumb-item:last-child:not(:first-child) {
                overflow: hidden;
                text-overflow: ellipsis;

                &:before {
                    font-family: "VP-Prime", "Roboto", sans-serif !important;
                    content: "\e923\2004...\2004\e923";
                    color: var(--breadcrumb-section-separator-color);
                }
            }

            .mod-breadcrumbs__here+.breadcrumb-item:last-child {
                &:before {
                    content: none;
                }
            }
        }
    }
}

@include media-breakpoint-down(lg) {
    .breadcrumbs-section {
        border-top: 1px solid var(--breadcrumb-section-border-color);
    }
}

.separator-line {
    height: 1px;
    border-bottom: 1px solid var(--gray-200);
}

.separator-line-offcanvas {
    border-bottom-color: var(--gray-300);
}

.tmpl-component {
    padding: 2rem;

    &.com-vmessentials.view-quickview {
        padding: 0;
    }
}

.glightbox-clean {
    &.modal-link {
        .gslide-external {
            border-radius: 0;
            position: relative;
        }

        .iframe-loader {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(255, 255, 255, 0.6);
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            transition: all 0.3s ease-in;
            will-change: opacity;
        }

        .iframe-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 25px;
            width: 25px;
            -webkit-animation: loaderSpin 0.8s infinite linear;
            animation: loaderSpin 0.8s infinite linear;
            border: 2px solid #333;
            border-right-color: transparent;
            border-radius: 50%;
        }

        .iframe-loading {
            .iframe-loader {
                opacity: 1;
                visibility: visible;
                pointer-events: initial;
            }
        }
    }
}

@-webkit-keyframes loaderSpin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loaderSpin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media (min-width: 769px) {
    .glightbox-clean {
        &.modal-link {
            .goverlay {
                background: #000 !important;
                opacity: 0.5 !important;
            }
        }
    }
}

.link-body {
    text-decoration: none;
    color: var(--body-color, inherit);

    &:hover {
        text-decoration: none;
    }

    &:hover,
    &:active,
    &:focus {
        color: var(--gray-600);
    }
}

.link-body-invert {
    text-decoration: none;
    color: var(--gray-600);

    &:hover {
        text-decoration: none;
    }

    &:hover,
    &:active,
    &:focus {
        color: var(--body-color);
    }
}

.tns-initial-container {
    display: none;

    &.tns-slider {
        display: block;
    }
}

.has-danger {
    .chosen-container.chosen-container-single {
        .chosen-single {
            @extend .invalid;
        }
    }
}

.page-header {
    h1 {
        position: relative;
        padding-bottom: 0.8rem;
        margin-bottom: 2.5rem;
        text-transform: uppercase;
        font-size: 2rem;

        &:after {
            content: "";
            position: absolute;
            top: 100%;
            left: 0;
            transform: translate(0, -100%);
            height: 3px;
            background-color: var(--template-primary-color);
            width: 3rem;
        }
    }

    h2 {
        margin-bottom: 1rem;
    }

    &.page-header-center {
        h1 {
            &:after {
                left: 50%;
                transform: translate(-50%, -100%);
                width: 4rem;
            }
        }
    }

    &.page-header-no-decoration {
        h1 {
            padding-bottom: 0;

            &:after {
                display: none;
            }
        }
    }

    a {
        color: inherit;

        &:hover,
        &:focus,
        &:active {
            color: inherit;
        }
    }
}

.sub-heading {
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    font-size: 1.5rem;
}

#system-message-container {
    &>* {
        margin-bottom: 2rem;
    }
}

@include media-breakpoint-up(md) {

    .page-container-box,
    .com-users-registration,
    .com-users-login,
    .com-users-remind,
    .com-users-reset {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
        border: 1px solid var(--gray-200);
        padding: 1.5rem 2rem;
    }
}

.mod-login__options {
    .icon-register {
        display: none;
    }
}

.red,
.star,
.asterisk {
    color: #ff4c0e;
}

.offcanvas-registration,
.offcanvas-logout {
    i {
        color: var(--gray-200);
        font-size: 6rem;
        margin-bottom: 1.5rem;
    }
}

.btn-remove {
    display: inline-block;
    --webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.1rem 0.3rem;
    font-weight: normal;
    text-align: center;
    opacity: 0.6;
    font-size: 1.5rem;
    line-height: 1;
    transition: opacity 0.15s ease-in;

    &:hover {
        opacity: 1;
    }
}

.jewel-group {
    display: inline-block;
    position: relative;
}

.jewel {
    position: absolute;
    top: -0.4rem;
    right: -0.8rem;
    background-color: var(--template-primary-color);
    color: var(--white);
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    font-size: 0.7rem;
    line-height: 1.1rem;
    text-align: center;
}

@include media-breakpoint-down(lg) {
    .footer-toolbar {
        background-color: var(--gray-100);
        border-top: 1px solid var(--gray-200);
        z-index: 500;
        color: var(--body-color);
        height: fit-content;

        &>* {
            margin: 0.4rem 0;
        }
    }

    .is-ios {
        .footer-toolbar {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

@include media-breakpoint-up(lg) {
    .header-right-lg.fixed-bottom {
        position: static !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        gap: 1rem;
        z-index: inherit;

        &> :last-child {
            .btn-icon {
                padding-right: 0;
            }
        }

        .jewel-group {
            .vpi-lg {
                font-size: 2rem;
            }
        }
    }
}

.mod-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 0.8rem;
}

.mod-inline-title {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    line-height: inherit;
}

.top-bar {
    .dropdown-toggle {
        &::after {
            border: none;
            margin: 0;
            font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
            font-weight: 900;
            display: inline-block;
            content: "\f078";
            margin: 0;
            vertical-align: middle;
            font-size: 0.8rem;
            color: inherit;
        }
    }

    .dropdown-menu,
    ul.lang-block.dropdown-menu {
        --dropdown-border-radius: 0;

        &>li {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
}

.mod-badge {
    --mod-badge-bg: #ff0000;
    --mod-badge-color: #ffffff display: inline-block;
    padding: 0.5rem 0.7rem;
    background-color: var(--mod-badge-bg);
    color: var(--mod-badge-color);
    text-align: center;
    line-height: 1;
    font-size: 0.9rem;
}

.main-top-vertical-section,
.main-top-horizontal-section,
.main-bottom-vertical-section,
.main-bottom-horizontal-section {
    margin: 4rem 0 1rem;
}

.content-top-vertical-section,
.content-top-horizontal-section,
.content-bottom-vertical-section,
.content-bottom-horizontal-section {
    margin: 3rem 0 0;
}

.header-group,
.mod-header-group {
    margin-bottom: 2.5rem;

    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

.mod-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: 0.6rem;
    margin-bottom: 1rem;

    .mod-title {
        margin: 0;
        padding: 0;
        text-transform: uppercase;
        font-size: 2rem;
    }
}

.mod-header-group {
    &>.mod-header:last-child {
        margin-bottom: 0;
    }
}

.mod-subtitle {
    color: var(--gray-600);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    line-height: 1.2;
}

.vertical-module-section {
    .mod-header-group {
        text-align: center;
    }
}

aside,
.bottom-section {
    .mod-header-group {
        margin-bottom: 1.5rem;
    }

    .mod-header {
        margin-bottom: 1rem;

        .mod-title {
            font-size: 1.2rem;
        }
    }

    .mod-subtitle {
        font-size: 1rem;
    }
}

.utility-wide-section {
    background-color: var(--template-utility-wide-section-bg, transparent);
    border-top: 1px solid var(--template-utility-wide-section-border-top-color, transparent);
    border-bottom: 1px solid var(--template-utility-wide-section-border-bottom-color, transparent);
}

.utility-vertical-section {
    background-color: var(--template-utility-vertical-section-bg, transparent);
    border-top: 1px solid var(--template-utility-vertical-section-border-top-color, transparent);
    border-bottom: 1px solid var(--template-utility-vertical-section-border-bottom-color, transparent);
}

.utility-horizontal-section {
    background-color: var(--template-utility-horizontal-section-bg, transparent);
    border-top: 1px solid var(--template-utility-horizontal-section-border-top-color, transparent);
    border-bottom: 1px solid var(--template-utility-horizontal-section-border-bottom-color, transparent);

    .container-inner {
        padding: 5rem 0;
    }

    .mod-title {
        font-size: 1.5rem;
    }
}

.bottom-slider-section {
    background-color: var(--template-bottom-slider-section-bg, transparent);
    border-top: 1px solid var(--template-bottom-slider-section-border-top-color, transparent);
    border-bottom: 1px solid var(--template-bottom-slider-section-border-bottom-color, transparent);
    padding: 1rem 0;
}

.bottom-section {
    color: var(--template-bottom-section-color);
    background-color: var(--template-bottom-section-bg, transparent);
    border-top: 1px solid var(--template-bottom-section-border-top-color, transparent);
    border-bottom: 1px solid var(--template-bottom-section-border-bottom-color, transparent);

    .container-inner {
        padding: 3.5rem 0 0.5rem;
    }

    .mod-header {
        margin-bottom: 1.5rem;
    }

    .mod-title {
        color: var(--template-bottom-section-title-color);
    }

    a {
        color: var(--template-bottom-section-link-color);

        &:active {
            color: var(--template-bottom-section-link-color);
        }

        &:hover,
        &:focus {
            text-decoration: none;
            color: var(--template-bottom-section-link-hover-color);
        }
    }
}

.mod-block-header {
    .mod-title {
        flex-grow: 1;
    }
}

div.mod-languages {
    ul.lang-block {
        &>li {
            padding: 0.25rem 0 !important;
        }
    }
}

.top-bar-content {
    .top-left {
        .mod-inline {
            &:first-child {
                .dropdown-toggle {
                    padding-left: 0;
                }
            }
        }
    }
}

dl.article-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1rem;
}

dt.article-info-term {
    @extend .visually-hidden;
}

@include media-breakpoint-down(lg) {
    body {
        padding-bottom: 3rem;
    }
}

.mod-megamenu {
    flex-grow: 1;
}

.utility-wide-section,
.utility-vertical-section,
.utility-horizontal-section {
    .mod-custom {
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }
}

.utility-wide-section {
    .mod-custom {
        background-size: cover;
        background-attachment: fixed;
    }
}

.banner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem;
}

.banner-body {
    display: inline-block;
}

.banner-contents {
    position: relative;
    display: inline-block;
    padding: 4rem 5rem;
    background-color: var(--template-banner-bg, rgba(255, 255, 255, 0.9));
    color: var(--template-banner-color, var(--body-color));
    text-align: center;
    border-radius: 0.3rem;
}

.banner-title {
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.banner-subtitle {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--template-primary-color);
}

.zoom-on-hover {
    transition: transform 1s cubic-bezier(0, 0, 0.44, 1.18);

    &:hover {
        transform: scale(1.09);
    }
}

.promo-banner {
    position: relative;
    background-color: var(--promo-banner-bg);
    aspect-ratio: var(--promo-banner-aspect-ratio);
    overflow: hidden;
    margin-bottom: 3rem;
}

.promo-banner-body {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: start;
}

.promo-banner-image {
    width: 100%;
    height: auto;
    transition: transform 1s cubic-bezier(0, 0, 0.44, 1.18);
}

.promo-banner-content {
    padding: 3rem;
}

.promo-banner-subtitle {
    color: var(--template-primary-color);
    font-weight: 600;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
}

.promo-banner-title {
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.promo-banner-text {
    color: var(--secondary);
    margin-bottom: 1.4rem;
}

.promo-banner {
    &:hover {
        .promo-banner-image {
            transform: scale(1.09);
        }
    }
}

.plg_system_webauthn_login_button {
    svg {
        width: 20px;
        margin: 3px;
    }
}

@include media-breakpoint-down(lg) {
    .promo-banner-title {
        font-size: 4vw;
    }

    .promo-banner-subtitle {
        font-size: 2.5vw;
    }
}