/* Fonts */
.nui-link-default {
    color: var(--nui-coal, rgba(26, 26, 26, 1));
    cursor:pointer;
}

.nui-link-small-default {
    color: var(--nui-coal, rgba(26, 26, 26, 1));
}

.link-extra-small-default {
    color: var(--nui-coal, rgba(26, 26, 26, 1));
}

@media (min-width: 960px) {
    /*Custom non nui fontsize for landingpage*/
    .loyl-font--heading-custom-extra-large-desktop-mobile {
        font-family: var(--nui-heading-extralarge-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif);
        font-size: var(--nui-space-6, 6rem);
        font-weight: var(--nui-heading-extralarge-font-weight, 500);
        letter-spacing: var(--nui-heading-extralarge-letter-spacing, 0.133rem);
        line-height: var(--nui-space-9, 9rem);
        text-decoration: var(--nui-heading-extralarge-text-decoration, none);
        text-transform: var(--nui-heading-extralarge-text-transform, uppercase);
    }

    /*NUI Heading extra large in desktop view*/
    .loyl-font--heading-extra-large-desktop-mobile {
        font-family: var(--nui-heading-extralarge-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif);
        font-size: var(--nui-heading-extralarge-font-size, 5rem);
        font-weight: var(--nui-heading-extralarge-font-weight, 500);
        letter-spacing: var(--nui-heading-extralarge-letter-spacing, 0.133rem);
        line-height: var(--nui-heading-extralarge-line-height, 6rem);
        text-decoration: var(--nui-heading-extralarge-text-decoration, none);
        text-transform: var(--nui-heading-extralarge-text-transform, uppercase);
    }

    /*Custom non NUI copy large in desktop view*/
    .loyl-font--copy-custom-large-desktop-mobile {
        font-family: var(--nui-copy-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif);
        font-size: var(--nui-heading-large-font-size, 4rem);
        font-weight: var(--nui-copy-font-weight, 400);
        letter-spacing: var(--nui-heading-large-letter-spacing, 0.133rem);
        line-height: var(--nui-space-7, 7rem);
        text-decoration: var(--nui-copy-text-decoration, none);
        text-transform: var(--nui-copy-text-transform, inherit);
    }
}

@media (max-width: 959px) {
    /*Custom non nui fontsize for landingpage mobile view*/
    .loyl-font--heading-custom-extra-large-desktop-mobile {
        font-family: var(--nui-heading-large-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif);
        font-size: var(--nui-heading-large-font-size, 4rem);
        font-weight: var(--nui-heading-large-font-weight, 500);
        letter-spacing: var(--nui-heading-large-letter-spacing, 0.133rem);
        line-height: var(--nui-heading-large-line-height, 5rem);
        text-decoration: var(--nui-heading-large-text-decoration, none);
        text-transform: var(--nui-heading-large-text-transform, uppercase);
    }

    /*NUI Heading extra large in mobile view*/
    .loyl-font--heading-extra-large-desktop-mobile {
        font-family: var(--nui-heading-large-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif);
        font-size: var(--nui-heading-large-font-size, 4rem);
        font-weight: var(--nui-heading-large-font-weight, 500);
        letter-spacing: var(--nui-heading-large-letter-spacing, 0.133rem);
        line-height: var(--nui-heading-large-line-height, 5rem);
        text-decoration: var(--nui-heading-large-text-decoration, none);
        text-transform: var(--nui-heading-large-text-transform, uppercase);
    }

    /*Custom non NUI copy large in mobile view*/
    .loyl-font--copy-custom-large-desktop-mobile {
        font-family: var(--nui-copy-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif);
        font-size: var(--nui-copy-font-size, 2.667rem);
        font-weight: var(--nui-copy-font-weight, 400);
        letter-spacing: var(--nui-copy-letter-spacing, 0.133rem);
        line-height: var(--nui-copy-line-height, 3.667rem);
        text-decoration: var(--nui-copy-text-decoration, none);
        text-transform: var(--nui-copy-text-transform, inherit);
    }
}

/* Margin */

.loyl-space-m-2 {
    margin: var(--nui-space-2, 2rem);
}

.loyl-space-m-3 {
    margin: var(--nui-space-3, 3rem);
}

/* Margin-Top */

.loyl-space-mt-1 {
    margin-top: var(--nui-space-1, 0.375rem);
}

.loyl-space-mt-2 {
    margin-top: var(--nui-space-2, 2rem);
}

.loyl-space-mt-3 {
    margin-top: var(--nui-space-3, 3rem);
}

.loyl-space-mt-4 {
    margin-top: var(--nui-space-4, 4rem);
}

.loyl-space-mt-5 {
    margin-top: var(--nui-space-5, 5rem);
}

.loyl-space-mt-6 {
    margin-top: var(--nui-space-6, 6rem);
}

.loyl-space-mt-7 {
    margin-top: var(--nui-space-7, 7rem);
}

.loyl-space-mt-8 {
    margin-top: var(--nui-space-8, 8rem);
}

.loyl-space-mt-10 {
    margin-top: var(--nui-space-10, 10rem);

}


/* Margin-bottom */

.loyl-space-mb-1 {
    margin-bottom: var(--nui-space-1, 0.375rem);
}

.loyl-space-mb-2 {
    margin-bottom: var(--nui-space-2, 2rem);
}

.loyl-space-mb-3 {
    margin-bottom: var(--nui-space-3, 3rem);
}

.loyl-space-mb-4 {
    margin-bottom: var(--nui-space-4, 4rem);
}

.loyl-space-mb-5 {
    margin-bottom: var(--nui-space-5, 5rem);
}

.loyl-space-mb-6 {
    margin-bottom: var(--nui-space-6, 6rem);
}

.loyl-space-mb-7 {
    margin-bottom: var(--nui-space-7, 7rem);
}

.loyl-space-mb-10 {
    margin-bottom: var(--nui-space-10, 10rem);
}

.loyl-space-mb-12 {
    margin-bottom: var(--nui-space-12, 12rem);
}

/* Margin-left */

.loyl-space-ml-1 {
    margin-left: var(--nui-space-1, 0.375rem);
}

.loyl-space-ml-2 {
    margin-left: var(--nui-space-2, 2rem);
}

.loyl-space-ml-3 {
    margin-left: var(--nui-space-3, 3rem);
}

.loyl-space-ml-4 {
    margin-left: var(--nui-space-4, 4rem);
}

.loyl-space-ml-10 {
    margin-left: var(--nui-space-10, 10rem);
}

/* Margin-right */

.loyl-space-mr-1 {
    margin-right: var(--nui-space-1, 0.375rem);
}

.loyl-space-mr-2 {
    margin-right: var(--nui-space-2, 2rem);
}

.loyl-space-mr-3 {
    margin-right: var(--nui-space-3, 3rem);
}

.loyl-space-mr-4 {
    margin-right: var(--nui-space-4, 4rem);
}

/* Padding */
.loyl-space-p-2 {
    padding: var(--nui-space-2, 2rem);
}

.loyl-space-p-3 {
    padding: var(--nui-space-3, 3rem);
}

/* Padding-top */


.loyl-space-pt-1 {
    padding-top: var(--nui-space-1, 0.375rem);
}

.loyl-space-pt-2 {
    padding-top: var(--nui-space-2, 2rem);
}

.loyl-space-pt-3 {
    padding-top: var(--nui-space-3, 3rem);
}

.loyl-space-pt-4 {
    padding-top: var(--nui-space-4, 4rem);
}

/* Padding-left */

.loyl-space-pl-1 {
    padding-left: var(--nui-space-1, 0.375rem);
}

.loyl-space-pl-2 {
    padding-left: var(--nui-space-2, 2rem);
}

.loyl-space-pl-3 {
    padding-left: var(--nui-space-3, 3rem);
}

.loyl-space-pl-4 {
    padding-left: var(--nui-space-4, 4rem);
}

/* Padding-right */

.loyl-space-pr-1 {
    padding-right: var(--nui-space-1, 0.375rem);
}

.loyl-space-pr-2 {
    padding-right: var(--nui-space-2, 2rem);
}

.loyl-space-pr-3 {
    padding-right: var(--nui-space-3, 3rem);
}

.loyl-space-pr-4 {
    padding-right: var(--nui-space-4, 4rem);
}


/* Padding-bottom */


.loyl-space-pb-1 {
    padding-bottom: var(--nui-space-1, 0.375rem);
}

.loyl-space-pb-2 {
    padding-bottom: var(--nui-space-2, 2rem);
}

.loyl-space-pb-3 {
    padding-bottom: var(--nui-space-3, 3rem);
}

.loyl-space-pb-4 {
    padding-bottom: var(--nui-space-4, 4rem);
}

.loyl-space-pb-05 {
    padding-bottom: 3px;
}

/* Padding PDP / PDS*/

@media (max-width: 959px) {
    .loyl-space-p-pdp{
        padding: calc(var(--nui-space-1, 0.375rem) * 7) calc(var(--nui-space-1, 0.375rem) * 3) !important;
    }
}

@media (min-width: 960px) {
    .loyl-space-p-pdp {
        padding: calc(var(--nui-space-1, 0.375rem) * 12) calc(var(--nui-space-1, 0.375rem) * 32) !important;
    }
}

@media (min-width: 1160px) {
    .loyl-space-p-pdp {
        padding: calc(var(--nui-space-1, 0.375rem) * 12) 232px !important;
    }
}

@media (min-width: 1360px) {
    .loyl-space-p-pdp {
        padding: calc(var(--nui-space-1, 0.375rem) * 12) 272px !important;
    }
}

@media (min-width: 1660px) {
    .loyl-space-p-pdp {
        padding: calc(var(--nui-space-1, 0.375rem) * 12) 332px !important;
    }
}

@media (min-width: 1920px) {
    .loyl-space-p-pdp {
        padding: calc(var(--nui-space-1, 0.375rem) * 12) calc(var(--nui-space-1, 0.375rem) * 64) !important;
    }
}

/* beyond colors */

.loyl-beyond-color-primary-BRONZE, .loyl-beyond-color-primary-bronze {
    color: #9D5327 !important;
}

.loyl-beyond-color-primary-SILVER, .loyl-beyond-color-primary-silver {
    color: #6C6765 !important;
}

.loyl-beyond-color-primary-GOLD, .loyl-beyond-color-primary-gold {
    color: #9E5B05 !important;
}

.loyl-beyond-color-primary-PLATIN, .loyl-beyond-color-primary-platin {
    color: #845D68 !important;
}

.loyl-beyond-color-secondary-BRONZE, .loyl-beyond-color-secondary-bronze {
    background-color: #D3A389 !important;
}

.loyl-beyond-color-secondary-SILVER, .loyl-beyond-color-secondary-silver {
    background-color: #E0DFDE !important;
}

.loyl-beyond-color-secondary-GOLD, .loyl-beyond-color-secondary-gold {
    background-color: #F2C97C !important;
}

.loyl-beyond-color-secondary-PLATIN, .loyl-beyond-color-secondary-platin {
    background-color: #E2C9D0 !important;
}

.loyl-beyond-gradient-BRONZE, .loyl-beyond-gradient-bronze {
    background: linear-gradient(111deg, #936744 0%, #AE5F43 100%) !important;
}

.loyl-beyond-gradient-SILVER, .loyl-beyond-gradient-silver {
    background: linear-gradient(111deg, #7B6C6B 0%, #816A69 100%) !important;
}

.loyl-beyond-gradient-GOLD, .loyl-beyond-gradient-gold {
    background: linear-gradient(111deg, #B46000 0%, #C15628 100%) !important;
}

.loyl-beyond-gradient-PLATIN, .loyl-beyond-gradient-platin {
    background: linear-gradient(111deg, #625058 0%, #8D5157 100%) !important;
}

.loyl-beyond-color-checkered-BRONZE, .loyl-beyond-color-checkered-bronze {
    background-image: linear-gradient(45deg, #D3A389 25%, transparent 25%, transparent 75%, #D3A389 75%, #D3A389),
    linear-gradient(45deg, #D3A389 25%, transparent 25%, transparent 75%, #D3A389 75%, #D3A389) !important;
}

.loyl-beyond-color-checkered-SILVER, .loyl-beyond-color-checkered-silver {
    background-image: linear-gradient(45deg, #CAC8C8 25%, transparent 25%, transparent 75%, #CAC8C8 75%, #CAC8C8),
    linear-gradient(45deg, #CAC8C8 25%, transparent 25%, transparent 75%, #CAC8C8 75%, #CAC8C8) !important;
}

.loyl-beyond-color-checkered-GOLD, .loyl-beyond-color-checkered-gold {
    background-image: linear-gradient(45deg, #F1CFA6 25%, transparent 25%, transparent 75%, #F1CFA6 75%, #F1CFA6),
    linear-gradient(45deg, #F1CFA6 25%, transparent 25%, transparent 75%, #F1CFA6 75%, #F1CFA6) !important;
}

.loyl-beyond-color-checkered-PLATIN, .loyl-beyond-color-checkered-platin {
    background-image: linear-gradient(45deg, #E2C9D0 25%, transparent 25%, transparent 75%, #E2C9D0 75%, #E2C9D0),
    linear-gradient(45deg, #E2C9D0 25%, transparent 25%, transparent 75%, #E2C9D0 75%, #E2C9D0) !important;
}

/* NUI colors */

.loyl-nui-color--secondary-business {
    color: var(--secondary-business, #6C6765);
}

.loyl-nui-color--feedback-error {
    color: var(--feedback-error, #D50000) !important;
}

.loyl-color--error {
    color: var(--nui-error, rgba(213, 0, 0, 1));
}

.loyl-color--coal {
    color: var(--nui-coal, rgba(26, 26, 26, 1)) !important;
}

.loyl-color--success {
    color: var(--nui-success, rgba(65, 117, 5, 1)) !important;
}

.loyl-color--snow {
    color: var(--nui-snow, rgba(255, 255, 255, 1)) !important;
}

.loyl-color--smoke {
    color: var(--nui-smoke, rgba(177, 172, 170, 1)) !important;
}

/* bg colors */

.loyl-bg-color--success-bg {
    background-color: var(--nui-success-bg, rgba(238, 248, 228, 1)) !important;
}

.loyl-bg-color--error-bg {
    background-color: var(--nui-error-bg, rgba(255, 240, 240, 1));
}

.loyl-bg-color--snow {
    background-color: var(--nui-snow, rgba(255, 255, 255, 1)) !important;
}

.loyl-bg-color--concrete {
    background-color: var(--nui-concrete, rgba(244,242,242, 1)) !important;
}

.loyl-bg-color--alabaster {
    background-color: var(--nui-alabaster, rgba(250,248,247,1)) !important;
}

/* text styles*/
.loyl-text-center {
    text-align: center;
}

/* width & height */
.loyl-width-100 {
    width: 100% !important;
}

/* button styles*/

@media (max-width: 559px) {
    .loyl-button--mobile-full-width {
        width: 100% !important;
    }
}

/* img */

img, svg {
    display: unset;
}

/* Success & Failure Message */

.loyl-success-message-box {
    width: 100%;
    height: auto;
    padding: var(--nui-space-3, 3rem);
    background-color: var(--nui-success-bg, rgba(238, 248, 228, 1));
}

.loyl-failure-message-box {
    text-align: left;
    padding: calc(var(--nui-space-1, 0.375rem) * 3);
    margin-bottom: calc(var(--nui-space-1, 0.375rem) * 4);
    display: none;
}

/* Legal Form Control Checkbox */

.loyl-form-control {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .5px;
    position: relative;
    display: block;
    font-size: var(--nui-copy-font-size, 2.667rem);
    font-family: var(var(--nui-copy-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif));
    font-weight: var(--nui-copy-font-weight, 400);
    color: var(--nui-coal, rgba(26, 26, 26, 1));
}

.loyl-form-control--checkbox, .loyl-form-control--radio {
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.loyl-form-control--checkbox .loyl-form-control-field--checkbox:not(:checked),
.loyl-form-control--checkbox .loyl-form-control-field--checkbox:checked {
    position: absolute;
    height: 2rem;
    width: 2rem;
    top: 2px;
    left: 1px;
}

.loyl-form-control--checkbox .loyl-form-control-field--checkbox:not(:checked) + .loyl-form-control-label,
.loyl-form-control--checkbox .loyl-form-control-field--checkbox:checked + .loyl-form-control-label {
    cursor: pointer;
    padding: var(--nui-space-1) 0 var(--nui-space-1) calc(var(--nui-space-1) * 5);
    font-family: var(--nui-copy-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .5px;
}

.loyl-form-control--checkbox .loyl-form-control-field--checkbox:checked + .loyl-form-control-label,
.loyl-form-control--checkbox .loyl-form-control-field--checkbox:checked + .loyl-form-control-label .loyl-form-control-label-more-info,
.loyl-form-control--checkbox .loyl-form-control-field--checkbox:checked + .loyl-form-control-label .loyl-tooltip--button {
    font-family: var(--nui-copy-bold-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif) !important;
    font-weight: var(--nui-copy-bold-font-weight, 500) !important;
}

.loyl-form-control-label {
    color: var(--nui-coal, rgba(26, 26, 26, 1));
    font-family: var(--nui-copy-font-family, "Eduard Breuninger", Helvetica, Arial, sans-serif);
    display: inline-block;
    margin-bottom: calc(var(--nui-space-1) / 2);
    padding: 0;
    margin-top: -7px !important;
}

:host .loyl-form-control-label {
    display: inline;
    line-height: 24px;
}

.loyl-form-control--checkbox .loyl-form-control-field--checkbox:not(:checked) + .loyl-form-control-label:before,
.loyl-form-control--checkbox .loyl-form-control-field--checkbox:checked + .loyl-form-control-label:before {
    content: "";
    position: absolute;
    left: 1px;
    top: 2px;
    width: calc(var(--nui-space-1) * 3);
    height: calc(var(--nui-space-1) * 3);
    border: 1px solid var(--nui-coal, rgba(26,26,26,1));
    background: var(--nui-snow, rgba(255, 255, 255, 1));
}

.loyl-form-control--checkbox .loyl-form-control-field--checkbox:not(:checked) + .loyl-form-control-label:hover::before,
.loyl-form-control--checkbox .loyl-form-control-field--checkbox:checked + .loyl-form-control-label:hover::before {
    border: 2px solid var(--nui-coal, rgba(26,26,26,1));
}

.loyl-form-control--checkbox .loyl-form-control-field--checkbox:not(:checked) + .loyl-form-control-label:after {
    content: "";
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    transform-style: preserve-3d;
    transform-origin: center;
}

.loyl-form-control--checkbox .loyl-form-control-field--checkbox:checked + .loyl-form-control-label:after {
    content: "";
    opacity: 1;
    position: absolute;
    left: 3px;
    width: 16px;
    height: 13px;
    top: 0;
    margin-top: 6px;
    transform-origin: center;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transition: transform .2s;
    transition: transform .2s;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.36.38l2.26 1.98-7.07 8.07-2.12 2.19L.38 6.5 2.5 4.38 6.43 8.3z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.36.38l2.26 1.98-7.07 8.07-2.12 2.19L.38 6.5 2.5 4.38 6.43 8.3z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-color: var(--nui-coal, rgba(26, 26, 26, 1));
}

.loyl-form-control--input {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid var(--nui-coal);
    height: 54px;
    width: 328px;
    &.display-uppercase {
        text-transform: uppercase;
    }
}


/* ToolTip Popover*/
.loyl-tooltip {
    position: relative;
    display: inline-block;
}

.loyl-tooltip--button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loyl-tooltip .loyl-tooltip--content {
    visibility: hidden;
    background-color: var(--nui-snow, rgba(255, 255, 255, 1));;
    color: var(--nui-coal, rgba(26, 26, 26, 1));
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    padding: var(--nui-space-2, 2rem);
    border: 1px solid var(--nui-smoke, rgba(177, 172, 170, 1));
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 4px 0;
    width: max-content;
    max-width: 560px;
    transform: translate(-50%, 0px);
}

@media (max-width: 959px) {
    .loyl-tooltip .loyl-tooltip--content {
        max-width: 360px;
    }
}

@media (max-width: 559px) {
    .loyl-tooltip .loyl-tooltip--content {
        max-width: unset;
        width: inherit;
        min-width: 121px;
    }
}

.loyl-tooltip .loyl-tooltip--content::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-bottom: calc(var(--nui-space-1, 0.375rem) * -1.666666666666667);
    margin-left: calc(var(--nui-space-1, 0.375rem) * -0.666666666666667);
    border-width: 7px 7px 0px 7px;;
    border-color: rgba(0, 0, 0, 0);
    border-style: solid;
    border-top-color: #fff;
    pointer-events: none;
}

.loyl-tooltip .loyl-tooltip--content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-bottom: calc(var(--nui-space-1, 0.375rem) * -1.666666666666667);
    margin-left: calc(var(--nui-space-1, 0.375rem) * -0.666666666666667);
    border-width: 8px 8px 0 7px;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: var(--nui-smoke, rgba(177, 172, 170, 1));
    z-index: -1;
    border-style: solid;
    pointer-events: none;
}

.loyl-tooltip:hover .loyl-tooltip--content, .loyl-tooltip:focus-visible .loyl-tooltip--content {
    visibility: visible;
}

.loyl-tooltip:hover .loyl-tooltip--button, .loyl-tooltip:hover .loyl-tooltip--button svg path {
    color: var(--nui-breuninger-red-hover, rgba(186,12,47,1));
    fill: var(--nui-breuninger-red-hover, rgba(186,12,47,1));
}

.loyl-tooltip:hover {
    cursor: pointer;
}

/* Spinner */

.loyl-spinner {
    position: relative;
    width: calc(var(--nui-space-1, 0.375rem) * 7)
}

.loyl-spinner:before {
    content: "";
    display: block;
    padding-top: 100%
}

.loyl-spinner svg {
    transform-origin: center center;
    position: absolute;
    bottom: 0;
    animation: rotate 2s linear infinite
}

.loyl-spinner svg circle {
    stroke: var(--nui-coal, rgba(26, 26, 26, 1));
    fill: rgba(0, 0, 0, 0);
    stroke-width: 2;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite
}

@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: calc(var(--nui-space-1, 0.375rem) * -5.8333333333)
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: calc(var(--nui-space-1, 0.375rem) * -20.6666666667)
    }
}

/* ---- Slider ---- */

.loyl-slider-container {
    position: relative;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.loyl-scrolling-outer-container {
    display: grid;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Deactive scrollbar*/

.loyl-scrolling-outer-container::-webkit-scrollbar, .loyl-scrolling-outer-container:not(:hover)::-webkit-scrollbar {
    display: none;
}

.loyl-scrolling-outer-container, .loyl-scrolling-outer-container:not(:hover) {
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}

.loyl-scrolling-inner-container {
    display: flex;
    justify-content: space-evenly;
}

.loyl-slider-arrow-container {
    display: flex;
    cursor: pointer;
}

@media (pointer: coarse) {
    .loyl-slider-arrow-container {
        display: none;
    }
}

.loyl-slider-content-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto;
    min-width: calc(var(--nui-space-1, 0.375rem) * 11);
    margin: calc(var(--nui-space-1, 0.375rem) * 2.5);
}

.loyl-progress-circle {
    height: calc(var(--nui-space-1, 0.375rem) * 15);
    width: calc(var(--nui-space-1, 0.375rem) * 15);
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
}

.loyl-progress-circle p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-48%, -55%);
    width: 100%;
}

/* Accessibility Utils*/

.loyl-hover-state:hover {
    font-weight: 500 !important;
    text-decoration: none;
}

.large-hit-area {
    position: relative;
    display: inline-block;
}

.large-hit-area::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 24px;
    min-height: 24px;
    pointer-events: none; /* wichtig: unsichtbar für Mausinteraktionen */
}

/* Utils */
.loyl-flex {
    display: flex;
    &.align-items {
        &.center {
            align-items: center;
        }
    }
    &.align-baseline {
        align-items: baseline;
    }
    &.justify-content {
        &.space-between {
            justify-content: space-between
        }
    }
    &.wrap {
        flex-wrap: wrap;
    }

    &.row {
        &.reverse {
            flex-direction: row-reverse;
        }
    }
}


/* A11Y Utils*/

.large-hit-area {
    position: relative;
    display: inline-block;
}

.large-hit-area::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 24px;
    min-height: 24px;
    pointer-events: none; /* wichtig: unsichtbar für Mausinteraktionen */
}