:root {
    --font-title-size: 220%;
    --font-sub-title-size: 180%;
    --font-large-header-size: 140%;
    --font-header-size: 110%;
    --font-bread-size: 100%;
    --font-detail-size: 90%;
    --font-small-size: 80%;
    --font-x-small-size: 60%;
    --color-text-light: #FFFFFF;
    --spacer: 1rem;
    --border-radius: 4px;
    --circle-xl: 80vmax;
    --circle-lg: 50vmax;
    --circle-md: 35vmax;
    --circle-sm: 25vmax;
    --circle-xs: 15vmax;
    --shot-radius: 22px;
    --shot-bezel: 8px;
    --shot-shadow: 0 14px 28px rgba(12,20,33,.18), 0 6px 12px rgba(12,20,33,.10);
 
    --nav-offset: 72px;
}



body > .ie-not-supported {
    position: fixed;
    top: 0;
    font-size: var(--font-large-header-size);
    font-weight: bold;
    z-index: 1100;
}

.modal {
    z-index: 1050;
}

body > #alert-container > .alert {
    z-index: 1200;
    position: fixed;
    width: 100%;
    top: 0;
}

* {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}

.selectable, .selectable * {
    user-select: text;
    -ms-user-select: text;
    -moz-user-select: text;
}

.fs-title {
    font-size: var(--font-title-size);
}

.fs-sub-title {
    font-size: var(--font-sub-title-size);
}

.fs-large-header {
    font-size: var(--font-large-header-size);
}

.fs-header {
    font-size: var(--font-header-size);
}

.fs-bread {
    font-size: var(--font-bread-size);
}

.fs-detail {
    font-size: var(--font-detail-size);
}

.fs-small {
    font-size: var(--font-small-size);
}

.fs-x-small {
    font-size: var(--font-x-small-size);
}

.fa.fa-angle-left {
    color: #d3d3d3;
    font-size: 30px;
}

.cursor-pointer {
    cursor: pointer;
}

.text-gray {
    color: #d3d3d3 !important;
}

.text-tealish {
    color: var(--base-color) !important;
}

.page {
    display: none;
}

    .page.active {
        display: block;
    }

.home-content {
    /*background-image: url("content/Mask Group 3.png");*/
    background-repeat: no-repeat;
    background-size: 100% 28rem;
    color: #68759E !important;
}

.header {
    font-size: var(--font-sub-title-size);
    font-weight: 600;
}

.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

.mwp-320 {
    max-width: 375px !important;
}

.h-10 {
    height: 10% !important;
}

.vertical-align-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    color: black;
}

.phone-image {
    display: none;
    height: auto;
}

.phone-image-2 {
    height: auto;
    width: 12rem;
}

.home-content .adjust {
    height: 0;
}

.justify-content-center {
    text-align: center;
}

.home-content a {
    text-decoration: none;
}

.home-content-text > .line-1 {
    font-size: 600%;
    font-weight: 500;
    line-height: 80%;
}

.home-content-text > .line-2 {
    font-size: 200%;
}

.home-content-text > .line-3 {
    font-size: var(--font-bread-size);
}

.about-content .padding-1 {
    height: 5rem;
}

.about-content .padding-2 {
    height: 1.5rem;
}

.about-content .padding-3 {
    height: 2rem;
}

.about-content .padding-4 {
    height: 2rem;
}

.about-content .padding-5 {
    height: 8rem;
}

.about-content .icon {
    width: 5rem;
}

.about-content .detail > div {
    max-width: 18rem; 
    width: 100%; 
    min-height: 12rem; 
    height: auto; 
    margin: 0 auto 2rem;
    padding: 1.5rem;
    background-color: var(--white);
    color: var(--color-text);
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
}

.about-content .detail .icon {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1rem;
    fill: var(--color-primary);
}

.about-content .detail .line-1 {
    font-size: var(--font-header-size);
    color: var(--color-heading);
    margin: 0.5rem 0 1rem;
    line-height: 1.2;
}

.about-content .detail .line-2 {
    font-size: var(--font-detail-size);
    color: var(--color-text);
    line-height: 1.5;
}

.link {
    color: #3d3b64;
}

.features-content {
    /*background-image: url("content/Mask Group 2-p1.png"), url("content/Mask Group 2-p2.png");*/
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left bottom;
    background-size: 100% calc(100% - 5rem), 100% calc(5rem + 0.05%);
    padding: 2rem;
}

    .features-content .detail {
        margin-bottom: 2rem;
    }

        .features-content .detail .icon {
            display: inline-block;
            vertical-align: middle;
            width: 5rem;
            height: 5rem;
            margin-right: 1rem;
            border-radius: 50%;
            background-color: #fff;
        }

        .features-content .detail h3 {
            display: inline-block;
            vertical-align: middle;
            font-weight: 600;
            color: var(--color-primary);
            margin: 0;
        }

        .features-content .detail p {
            display: inline-block;
            vertical-align: middle;
            color: #000;
            margin: 0 0 0 1rem;
            max-width: calc(100% - 6rem);
            line-height: 1.6;
        }

    .features-content .padding-1 {
        height: 4rem;
    }

    .features-content .padding-2 {
        height: 2rem;
    }

    .features-content .padding-3 {
        height: 4rem;
    }

    .features-content .padding-4 {
        height: 4rem;
    }

    .features-content .padding-5 {
        height: 5rem;
    }

    .features-content .detail .line-1 {
        text-transform: uppercase;
        font-size: var(--font-header-size);
        font-weight: 600;
    }

    .features-content .detail .line-2 {
        font-size: var(--font-detail-size);
    }

.screenshots-content {
    --shot-radius: 22px;
    --shot-bezel: 8px;
    --shot-shadow: 0 14px 28px rgba(12,20,33,.18), 0 6px 12px rgba(12,20,33,.10);
}

    .screenshots-content .padding-1 {
        height: 6rem;
    }

    .screenshots-content .padding-2 {
        height: 2rem;
    }

    .screenshots-content .padding-3 {
        height: 3rem;
    }

    .screenshots-content .screenshot {
        display: block;
        width: 100%;
        max-width: clamp(220px, 18vw, 320px);
        height: auto;
        margin: 0 auto;
        box-sizing: border-box;
        padding: var(--shot-bezel);
        background: rgba(0, 0, 0, .55);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: calc(var(--shot-radius) + var(--shot-bezel));
        outline: none;
        box-shadow: var(--shot-shadow);
        backface-visibility: hidden;
        transform: translateZ(0);
        filter: contrast(1.02) saturate(1.05);
    }
    .screenshots-content .carousel .slick-slide.mx-3 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }
@media (max-width: 575.98px) {
    .screenshots-content {
        --shot-radius: 18px;
        --shot-bezel: 6px;
    }

        .screenshots-content .screenshot {
            max-width: min(86vw, 260px);
        }

        .screenshots-content .carousel .slick-slide.mx-3 {
            margin-left: .35rem !important;
            margin-right: .35rem !important;
        }
}
    .screenshots-content .carousel {
        position: relative;
        overflow: hidden;
        mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
    }

    .contact-content .strange-line {
        background-color: var(--base-color);
        height: 2px;
        width: 3.6rem;
    }

    .contact-content .bread {
        font-size: var(--font-bread-size);
    }

    .contact-content .details {
        background-color: white;
        font-size: var(--font-small-size);
        width: 100%;
        height: 16.5rem;
    }

        .contact-content .details .text {
            user-select: text;
            -ms-user-select: text;
        }

    .contact-content .contact-form {
        width: 100%;
        height: 16.5rem;
    }

        .contact-content .contact-form ::placeholder {
            color: var(--gray-ish);
            font-size: var(--font-detail-size);
        }

        .contact-content .contact-form > div {
            background-color: white;
        }

        .contact-content .contact-form textarea {
            height: calc(16.5rem - 5.5rem);
            resize: none;
        }

    .contact-content .padding-1 {
        height: 2rem;
    }

    .contact-content .padding-2 {
        height: 1rem;
    }

    .contact-content .padding-3 {
        height: 3rem;
    }

    .contact-content .padding-4 {
        height: 2rem;
    }

    .contact-content .padding-5 {
        height: 3rem;
    }

    .contact-content .icon {
        width: 1rem;
    }

    .contact-content .send-message {
        background-color: var(--white);
        color: var(--shaffle-green);
        border-radius: 5px;
        font-size: var(--font-detail-size);
        font-weight: bold;
        cursor: pointer;
    }

.footer-content {
    background-color: var(--color-primary);
    height: 11rem;
}

    .footer-content .bread {
        color: white;
        font-size: var(--font-bread-size);
    }

    .footer-content .fa {
        color: white;
    }

.absolute-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
}

    .absolute-menu .navbar-nav .nav-link {
        color: var(--color-text-light) !important;
    }

    .absolute-menu .navbar-brand {
        font-size: var(--font-title-size);
    }

    .absolute-menu .navbar-toggler {
        left: 0;
        background-color: var(--color-primary) !important;
        margin-left: auto;
    }

    .absolute-menu .navbar-toggler-icon {
        height: 3.5rem;
        width: 3.5rem;
        filter: brightness(0) invert(1);
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 154, 166, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 4h22M4 12h16M4 19h8'/%3E%3C/svg%3E");
    }

    .absolute-menu .navbar-collapse {
        background-color: var(--color-primary);
    }

    .absolute-menu.at-top .navbar-collapse a.nav-item {
        cursor: pointer;
        color: #68759E !important;
        font-weight: 800;
    }

#login-page .title-image {
    height: auto;
    width: 12rem;
}

#login-page .login-content {
    /*background-image: url("content/Mask Group 3.png");*/
    background-repeat: no-repeat;
    background-size: 100% 28rem;
}

.submit {
    font-weight: bold;
    border-radius: 5px;
    background: white;
}

    .submit.disabled {
        background: linear-gradient(to right, var(--base-color-grayscale), rgba(133, 133, 133, 0.45));
    }

#login-page .recover-acc {
    border-radius: 6em;
    background: linear-gradient(to right, var(--base-color), rgba(0, 154, 166, 0.45));
}

#login-page .login-form ::placeholder {
    color: var(--gray-ish);
    font-size: var(--font-small-size);
}

#login-page .phone-image {
    width: 24rem;
    margin: auto;
}

#login-page .login-close {
    color: black;
}

    #login-page .login-close:hover {
        text-decoration: none;
        cursor: pointer;
    }

.tight-background {
    /*background-image: url("content/Mask Group 4.png");*/
    background-repeat: no-repeat;
    background-size: 100rem 24rem;
}

#account-page .edit-account input.form-control {
    color: var(--shaffle-text); 
    background-color: transparent;
}
#account-page form.help {
    max-width: 60rem;
    margin: 0;
    padding: 2rem 1rem;
}
#account-page .edit-account input.form-control[readonly] {
    background-color: transparent;
}
    #account-page form.help .form-control {
        width: 100%;
        max-width: 100%;
        height: 14rem;
        box-sizing: border-box;
    }

    #account-page form.help .row.justify-content-center {
        max-width: 80rem;
        margin: 1rem auto 0;
    }

#account-page form.limit-size {
    max-width: 32rem;
}

#account-page form.edit-account .form-group label {
    width: 8rem;
}

#account-page form.edit-account .form-group input {
    min-width: 8rem;
}

#account-page .active {
    color: var(--base-color) !important;
    font-weight: 600;
}

#account-page .side-menu {
    float: left;
    width: 16rem;
    height: 100vh;
    border-right: 1px solid #000;
}

#account-page .fixed-bottom.account-menu {
    border-top: 1px solid var(--base-color);
    background-color: white;
}

#account-page a {
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
}

#account-page .active a {
    color: var(--base-color);
}

#account-page .fs-large-header {
    color: var(--base-color);
}

#account-page form .save-button {
    color: var(--shaffle-green);
    background-color: var(--white);
    border-radius: 5px;
}

    #account-page form .save-button.disabled {
        opacity: .5;
        cursor: initial;
    }

#account-page .help textarea {
    height: 14rem;
    resize: none;
}

#account-page .form-container {
    padding-bottom: 11rem;
}

    #account-page .form-container form.receipts .receipt {
        border-bottom: solid var(--base-color) 1px;
    }

form.receipts .product-row {
    border-bottom: solid var(--base-color) 1px;
}

form.receipts .total {
    border-top: solid var(--base-color) 1px;
}

form.receipts .quantity {
    width: 1.4rem;
}

form.receipts .product-row i {
    color: #a2a2a2 !important;
    font-size: var(--font-small-size);
}

#account-page form.change-password .form-group label {
    width: 11rem;
    margin-left: 0;
    padding-left: 0
}

#account-page form.change-password .form-group input {
    min-width: 8rem;
}

form.cards .card-display {
    background-image: url(content/card/creditcard.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    width: 50%;
}

    form.cards .card-display.card-type-amex {
        background-image: url('content/card/amex.png');
    }

    form.cards .card-display.card-type-discover {
        background-image: url('content/card/discover.png');
    }

    form.cards .card-display.card-type-maestro {
        background-image: url('content/card/maestro.png');
    }

    form.cards .card-display.card-type-mastercard {
        background-image: url('content/card/mastercard.png');
    }

    form.cards .card-display.card-type-visa {
        background-image: url('content/card/visa.png');
    }

#account-page form.cards > div.card-input label {
    width: 10rem;
    margin-bottom: 0;
}

.card-name.last-four::before {
    content: "****    ****    ****    ";
    position: relative;
}

form.cards .card-display .default-indicator::before {
    content: "Use this as default";
}

form.cards .card-display .default-indicator.default-card::before {
    content: "Default";
    cursor: initial;
}

form.cards .card-display .default-indicator.default-card::after {
    content: "      ";
    background-image: url('content/card/checked.png');
    background-repeat: no-repeat;
    background-position: right center;
}

form.cards .card-display {
    width: 16rem;
    height: 10rem;
    margin-right: 1rem;
    margin-left: 1rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

    form.cards .card-display .default-indicator {
        margin-top: .5rem;
        margin-right: 1rem;
    }

        form.cards .card-display .default-indicator.default-card::after {
            background-size: 1rem auto;
        }

    form.cards .card-display .card-expire {
        margin-left: 2rem;
    }

    form.cards .card-display .card-name {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

        form.cards .card-display .card-name.last-four::before {
            top: 0.20rem;
        }

#account-page form.delete-account .confirm-button {
    background-color: var(--white);
    border-radius: 5px;
    color: var(--shaffle-green);
}

    #account-page form.delete-account .confirm-button.disabled {
        opacity: .5;
        cursor: initial;
    }

#email-verification-page {
    height: 28rem;
}

#transaction-page {
    height: 26.5rem;
}

    #transaction-page .receipt-container {
        width: 28rem !important;
    }

#please-wait-modal, #external-site-modal {
    background-color: rgba(0, 0, 0, 0.3);
}

/* ---------- RESPONSIVE ---------- */

@media (min-width: 400px) {
    .absolute-menu.at-top {
        padding-top: 1.5rem;
        margin-left: 1rem;
        margin-right: -1rem;
    }

        .absolute-menu.at-top .navbar-collapse {
            background-color: transparent;
        }

            .absolute-menu.at-top .navbar-collapse a.nav-item {
                color: #68759E;
                font-weight: 800;
            }

        .absolute-menu.at-top .login-button,
        .absolute-menu.at-top .signout-button {
            background-color: white;
            border-radius: 4rem;
            color: black !important;
            padding-left: 2rem;
            padding-right: 2rem;
            margin-left: 1rem;
            margin-right: 1rem;
            text-align: center;
        }

    .home-content .phone-image {
        display: block;
        width: 12rem;
    }

    .home-content {
        background-size: 100% 24rem;
    }

        .home-content .adjust {
            height: 3rem;
        }

    .features-content {
        background-size: 100% calc(100% - 7rem), 100% calc(7rem + 0.05%);
    }

    #account-page .side-menu {
        width: 16rem;
        height: 78vh;
        border-right: 1px solid #000;
        background: transparent;
        box-sizing: border-box;
        padding: 0;
    }

    #account-page .account-content {
        box-sizing: border-box;
    }

    #account-page::after {
        content: "";
        display: table;
        clear: both;
    }

    #account-page .side-menu li,
    #account-page .side-menu a {
        margin: 0;
        color: var(--shaffle-muted);
        color: #ffffff;
        text-decoration: none;
    }

    #account-page .side-menu .active {
        font-weight: 600;
        color: var(--base-color);
    }
}
#account-page .side-menu a:not(.active):hover {
    color: #ffffff;
}
#account-page .fs-large-header {
    color: var(--base-color);
}
@media (min-width: 768px) {
    .absolute-menu.at-top {
        padding-top: .8125rem;
        padding-right: 2rem;
        margin-left: 0;
        margin-right: 0;
        padding-right: 2rem;
    }

    .home-content .phone-image {
        width: 18rem;
    }

    .home-content .adjust {
        height: 5rem;
    }

    .home-content {
        background-size: 100% 32rem;
    }

    .about-content .header-padding-1 {
        height: 2rem;
    }

    .features-content {
        background-size: 100% calc(100% - 11rem), 100% calc(11rem + 0.05%);
    }

    .screenshots-content .carousel:after,
    .screenshots-content .carousel:before {
        width: 10rem;
    }

    .contact-content .details {
        width: initial;
    }

    .contact-content .contact-form {
        width: initial;
    }

    #account-page .form-container form.receipts .date {
        width: 16rem;
    }

    #account-page form.cards {
        max-width: calc(100vw - 28rem);
        font-size: 75%;
    }

        #account-page form.cards .card-display {
            width: 12rem;
            height: 7.5rem;
            margin-right: .75rem;
            margin-left: .75rem;
            margin-top: .375rem;
            margin-bottom: .375rem;
        }

            #account-page form.cards .card-display .default-indicator {
                color: black;
                margin-top: .375rem;
                margin-right: .75rem;
            }

                #account-page form.cards .card-display .default-indicator.default-card::after {
                    background-size: .75rem auto;
                }

            #account-page form.cards .card-display .card-expire {
                color: #3d3b64;
                margin-left: 1.5rem;
            }

            #account-page form.cards .card-display .card-name {
                color: #3d3b64;
                margin-top: 1.5rem;
                margin-bottom: 1.5rem;
            }

                #account-page form.cards .card-display .card-name.last-four::before {
                    top: 0.15rem;
                }
}

.mobil-style-google {
    padding-top: 0vmin;
    padding-bottom: 0vmin;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .home-content .phone-image,
    .features-content .phone-image {
        display: block;
        width: 24rem;
    }

    .home-content adjust {
        height: 6rem;
    }

    .home-content {
        background-size: 100% 45rem;
    }

    .about-content .padding-4 {
        display: none;
    }

    .features-content {
        background-size: 100% calc(100% - 18rem), 100% calc(18rem + 0.06%);
    }

    .screenshots-content .carousel:after,
    .screenshots-content .carousel:before {
        width: 12rem;
    }

    #account-page form.cards {
        font-size: 100%;
    }

        #account-page form.cards .card-display {
            width: 16rem;
            height: 10rem;
            margin-right: 1rem;
            margin-left: 1rem;
            margin-top: .5rem;
            margin-bottom: .5rem;
        }

            #account-page form.cards .card-display .default-indicator {
                margin-top: .5rem;
                margin-right: 1rem;
            }

                #account-page form.cards .card-display .default-indicator.default-card::after {
                    background-size: 1rem auto;
                }

            #account-page form.cards .card-display .card-expire {
                margin-left: 2rem;
            }

            #account-page form.cards .card-display .card-name {
                margin-top: 2rem;
                margin-bottom: 2rem;
            }

                #account-page form.cards .card-display .card-name.last-four::before {
                    top: 0.20rem;
                }
}

@media (min-width: 1200px) {
    .tight-background {
        background-size: cover 24rem;
    }
}

@media (max-width: 990px) {
    .mobil-style-downloads {
        margin: auto;
        display: grid;
    }

    .mobil-style-google {
        padding-top: 5vmin;
        padding-bottom: 5vmin;
    }

    .mobil-last-button {
        padding-bottom: 8vmin;
    }
}

@media (min-width: 1618px) {
    .tight-background {
        background-size: 100% 24rem;
    }
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

#external-site-modal iframe {
    width: 100%;
    height: 80vh;
    border: none;
}

/* --nav-offset adjustments via breakpoints */
@media (min-width: 576px) {
    :root {
        --nav-offset: 88px;
    }
}

@media (min-width: 768px) {
    :root {
        --nav-offset: 96px;
    }
}

@media (min-width: 992px) {
    :root {
        --nav-offset: 104px;
    }
}

body {
    padding-top: 0 !important;
}

.home-content {
    padding-top: calc(var(--nav-offset) + 1rem) !important;
    scroll-margin-top: var(--nav-offset);
}

   
/* Single, canonical base for mobil-style-downloads */
.mobil-style-downloads {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.loader {
    border: 16px solid rgba(var(--color-primary-rgb), .15);
    border-radius: 50%;
    border-top: 16px solid var(--color-primary);
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    float: none;
    margin: 0 auto;
}


.img.phone-image,
.home-content img.phone-image,
.features-content img.phone-image,
#login-page img.phone-image {
    display: block;
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--shot-bezel);
    background: rgba(0, 0, 0, .55) !important;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: calc(var(--shot-radius) + var(--shot-bezel)) !important;
    outline: none !important;
    box-shadow: var(--shot-shadow) !important;
    backface-visibility: hidden;
    transform: translateZ(0);
    filter: contrast(1.02) saturate(1.05);
}

@media (max-width: 420px) {
    img.phone-image,
    .home-content img.phone-image,
    .features-content img.phone-image,
    #login-page img.phone-image {
        padding: max(6px, var(--shot-bezel));
    }
}
@media (min-width: 576px) {
    .home-content img.phone-image {
        width: 10rem;
    }
}

@media (min-width: 768px) {
    .home-content img.phone-image {
        width: 15rem;
    }
}

@media (min-width: 992px) {
    .home-content img.phone-image {
        width: 20rem;
    }

    .features-content img.phone-image {
        width: 20rem;
    }
}

img.phone-image,
img.phone-image-2 {
    border-radius: calc(var(--shot-radius) + var(--shot-bezel)) !important;
}


.home-content .mobil-style-downloads.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.home-content .mobil-style-downloads a.store-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    background: #000;
    color: #fff !important;
    border-radius: 4rem;
    padding: .6rem 1.25rem;
    min-height: 3.25rem;
    text-decoration: none !important;
    line-height: 1;
}

    .home-content .mobil-style-downloads a.store-button > .row {
        display: contents !important;
    }

    .home-content .mobil-style-downloads a.store-button .col-auto {
        margin: 0;
        padding: 0;
        flex: 0 0 auto;
    }

        .home-content .mobil-style-downloads a.store-button .col-auto:first-child {
            display: flex;
            align-items: center;
        }

        .home-content .mobil-style-downloads a.store-button .col-auto:last-child {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.15;
            min-width: max-content;
        }

    .home-content .mobil-style-downloads a.store-button .store-icon,
    .home-content .mobil-style-downloads a.store-button .store-icon2 {
        display: block;
        width: 1.6rem;
        height: auto;
    }

    .home-content .mobil-style-downloads a.store-button .line-1 {
        font-size: var(--font-detail-size);
    }

    .home-content .mobil-style-downloads a.store-button .line-2 {
        font-size: var(--font-header-size);
        font-weight: 600;
        line-height: 1.05;
    }

@media (max-width: 575.98px) {
    .home-content .mobil-style-downloads {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: .85rem;
    }

        .home-content .mobil-style-downloads a.store-button {
            width: min(22rem, 92vw);
            padding: .55rem 1rem;
            gap: .7rem;
        }

    .home-content img.phone-image {
        display: none !important;
    }

    .home-content .mobil-style-downloads .w-10 {
        display: none !important;
    }
}

#login-page img.phone-image {
    width: clamp(10rem, 18vw, 15rem);
    margin: 0 auto;
    margin-top: clamp(3rem, 12vh, 8rem);
}

@media (max-width: 575.98px) {
    #login-page img.phone-image {
        margin-top: 1rem;
    }
}

@media (max-width: 420px) {
    :root {
        --font-title-size: 190%;
        --font-sub-title-size: 160%;
        --font-large-header-size: 125%;
        --font-header-size: 106%;
        --font-bread-size: 98%;
        --font-detail-size: 90%;
        --font-small-size: 82%;
        --font-x-small-size: 70%;
        --shot-radius: 18px;
        --shot-bezel: 6px;
    }
}

@media (max-width: 360px) {
    :root {
        --font-title-size: 180%;
        --font-sub-title-size: 150%;
        --font-large-header-size: 120%;
        --font-header-size: 104%;
        --font-bread-size: 96%;
        --font-detail-size: 88%;
        --font-small-size: 78%;
        --font-x-small-size: 68%;
        --shot-radius: 16px;
        --shot-bezel: 6px;
    }
}

@media (max-width: 320px) {
    :root {
        --font-title-size: 170%;
        --font-sub-title-size: 140%;
        --font-large-header-size: 115%;
        --font-header-size: 102%;
        --font-bread-size: 94%;
        --font-detail-size: 86%;
        --font-small-size: 76%;
        --font-x-small-size: 66%;
        --shot-radius: 14px;
        --shot-bezel: 5px;
    }
}
@media (max-width: 575.98px) {
    .store-button,
    .home-content .mobil-style-downloads a.store-button {
        width: min(18rem, 90vw);
        padding: .45rem .9rem;
        gap: .5rem;
        min-height: 2.6rem;
        border-radius: 2rem;
    }

        .store-button .line-1,
        .home-content .mobil-style-downloads a.store-button .line-1 {
            font-size: var(--font-small-size);
        }

        .store-button .line-2,
        .home-content .mobil-style-downloads a.store-button .line-2 {
            font-size: var(--font-detail-size);
            font-weight: 600;
        }

        .store-button .store-icon,
        .home-content .mobil-style-downloads a.store-button .store-icon {
            width: 1.2rem;
        }
}
@media (max-width: 575.98px) {
    .features-content .detail {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 2rem;
    }

        .features-content .detail .icon {
            margin: 0 0 1rem 0;
            display: block;
        }

        .features-content .detail .line-1,
        .features-content .detail .line-2 {
            display: block;
            margin: 0.3rem 0;
            max-width: 90%;
        }
}
.absolute-menu .navbar-collapse.show,
.absolute-menu .navbar-collapse.collapsing {
    background-color: var(--color-primary) !important;
}

    .absolute-menu .navbar-collapse.show .navbar-nav,
    .absolute-menu .navbar-collapse.collapsing .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: .4rem;
        padding: .5rem .75rem;
    }

        .absolute-menu .navbar-collapse.show .navbar-nav .nav-link:not(.login-button),
        .absolute-menu .navbar-collapse.collapsing .navbar-nav .nav-link:not(.login-button) {
            color: var(--color-text-light) !important;
        }

        .absolute-menu .navbar-collapse.show .navbar-nav .login-button,
        .absolute-menu .navbar-collapse.collapsing .navbar-nav .login-button {
            align-self: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: .5rem 1rem;
            border-radius: 999px;
            background: #fff !important;
            color: var(--color-primary) !important;
            font-weight: 600;
        }
:root {
    --shaffle-bg: #000C19;
    --shaffle-text: #FFFFFF;
    --shaffle-muted: #A8ADB3;
    --shaffle-border: #FEFEFE;
    --shaffle-button-bg: #0AA353;
    --shaffle-button-text: #FFFFFF;
    --color-primary: var(--shaffle-button-bg);
    --color-primary-rgb: 10, 163, 83;
    --bg-light-primary: var(--shaffle-bg);
    --color-text: var(--shaffle-text);
    --color-heading: var(--shaffle-text);
    --color-text-light: #FFFFFF;
    --white: #FFFFFF;
    --gray-ish: var(--shaffle-muted);
    --base-color: var(--shaffle-button-bg);
    --base-color-grayscale: var(--shaffle-muted);
    --shaffle-green: var(--shaffle-button-bg);
}

body,
.bg-lova-gray {
    background-color: var(--shaffle-bg) !important;
    color: var(--shaffle-text) !important;
    background-image: none !important;
}

.home-content {
    background-color: var(--shaffle-bg) !important;
    color: var(--shaffle-text) !important;
}

.home-content-text > .line-1,
.home-content-text > .line-2 {
    color: var(--shaffle-text) !important;
}

.home-content-text > .line-3,
.home-content-text > .line-3 div {
    color: var(--shaffle-muted) !important;
}

.about-content,
.features-content,
.screenshots-content,
.contact-content {
    background-color: var(--shaffle-bg) !important;
    color: var(--shaffle-text) !important;
}

    .text-lova-purple,
    .text-lova-green,
    .about-content .header,
    .features-content .header,
    .screenshots-content .header,
    .contact-content .header {
        color: var(--shaffle-text) !important;
    }

    .bread,
    .about-content,
    .features-content .detail .line-2,
    .contact-content .bread {
        color: var(--shaffle-muted) !important;
    }

        .about-content .detail > div,
        .contact-content .details,
        .contact-content .contact-form > div {
            background-color: #020c17;
            border: 1px solid var(--shaffle-border);
            color: var(--shaffle-text);
        }

a,
.link {
    color: var(--shaffle-button-bg);
}

    a:hover,
    .link:hover {
        color: #0cc96a;
    }

.absolute-menu .navbar-brand {
    color: var(--shaffle-button-bg) !important; 
}

.absolute-menu .navbar-nav .nav-link:not(.login-button) {
    color: var(--shaffle-button-bg) !important;
}

.absolute-menu.at-top .navbar-collapse a.nav-item:not(.login-button) {
    color: var(--shaffle-button-bg) !important;
    font-weight: 800;
}

.absolute-menu .navbar-nav .login-button.nav-link {
    background-color: var(--shaffle-button-bg) !important;
    color: var(--shaffle-button-text) !important;
    border-radius: 999px;
}

.absolute-menu .navbar-collapse.show,
.absolute-menu .navbar-collapse.collapsing {
    background-color: var(--shaffle-bg) !important;
}

    .absolute-menu .navbar-collapse.show .navbar-nav .nav-link:not(.login-button),
    .absolute-menu .navbar-collapse.collapsing .navbar-nav .nav-link:not(.login-button) {
        color: var(--shaffle-button-bg) !important;
    }

    .absolute-menu .navbar-collapse.show .navbar-nav .login-button.nav-link,
    .absolute-menu .navbar-collapse.collapsing .navbar-nav .login-button.nav-link {
        background-color: var(--shaffle-button-bg) !important;
        color: var(--shaffle-button-text) !important;
    }

.absolute-menu .navbar-toggler {
    background-color: var(--shaffle-button-bg) !important;
}

a.store-button {
    background-color: var(--shaffle-button-bg) !important;
    color: #FFFFFF !important;
}

.home-content .store-button,
.home-content .mobil-style-downloads a.store-button {
    background-color: var(--shaffle-button-bg) !important;
    color: #FFFFFF !important;
}

input,
textarea,
select,
.form-control {
    background-color: transparent;
    color: var(--shaffle-text);
    border: 1px solid var(--shaffle-border);
}

    input:focus,
    textarea:focus,
    select:focus,
    .form-control:focus {
        background-color: transparent;
        color: var(--shaffle-text);
        border-color: var(--shaffle-button-bg);
        box-shadow: none;
    }

    .form-control::placeholder,
    #login-page .login-form ::placeholder,
    .contact-content .contact-form ::placeholder {
        color: var(--shaffle-muted);
        opacity: 1;
    }

#login-page .login-content {
    background-color: var(--shaffle-bg) !important;
}

#login-page .login-close {
    color: var(--shaffle-text) !important;
}

button,
.btn,
.submit,
.contact-content .send-message,
#login-page .recover-acc,
#account-page form .save-button,
#account-page form.delete-account .confirm-button {
    background-color: var(--shaffle-button-bg) !important;
    color: var(--shaffle-button-text) !important;
    border-color: var(--shaffle-button-bg) !important;
}

    button:hover,
    .btn:hover,
    .submit:hover,
    .contact-content .send-message:hover,
    #login-page .recover-acc:hover,
    #account-page form .save-button:hover,
    #account-page form.delete-account .confirm-button:hover {
        background-color: #0cc96a !important;
        border-color: #0cc96a !important;
    }

    .submit.disabled,
    #account-page form .save-button.disabled,
    #account-page form.delete-account .confirm-button.disabled {
        background: var(--shaffle-muted) !important;
        border-color: var(--shaffle-muted) !important;
        color: var(--shaffle-bg) !important;
        opacity: 0.8;
        cursor: default;
    }


.footer-content {
    background-color: var(--shaffle-bg) !important;
}

    .footer-content .bread {
        color: var(--shaffle-muted) !important;
    }


.loader {
    border: 16px solid rgba(10, 163, 83, 0.15);
    border-top: 16px solid var(--shaffle-button-bg);
}


#account-page .side-menu,
#account-page .fixed-bottom.account-menu,
form.receipts .product-row,
form.receipts .total,
#account-page .form-container form.receipts .receipt {
    border-color: var(--shaffle-border) !important;
}

body,
.mulish,
.mulish-fontsetter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.text-shaffle-muted {
    color: #A8ADB3 !important;
    font-weight: 500;
}

.text-shaffle-accent {
    color: #0AA353 !important;
    font-weight: 500;
}
.absolute-menu .navbar-toggler {
    background-color: var(--shaffle-button-bg) !important; 
    border: none;
    border-radius: 999px;
    padding: .25rem .55rem;
}

.absolute-menu .navbar-toggler-icon {
    color: var(--shaffle-button-bg);        
    filter: none;                          
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 6h22M4 14h22M4 22h22'/%3E%3C/svg%3E");
}
.absolute-menu .navbar-nav .login-button.nav-link,
.absolute-menu.at-top .navbar-nav .login-button.nav-link {
    color: #ffffff !important;
}
.forgotten-password {
    color: #ffffff !important;
    font-size: 0.95rem; 
    font-weight: 600; 
    text-decoration: none;
    transition: color .14s ease, text-decoration-color .14s ease;
}

    .forgotten-password:hover,
    .forgotten-password:focus-visible {
        color: var(--shaffle-store-button-bg-hover) !important;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 2px;
        outline: none;
    }

#login-page .login-div {
    background-color: #000C19 !important;
    background-image: none !important;
}

#login-page .login-box {
    position: relative;
    overflow: hidden;
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 2.5rem 3rem;
    background-color: #000C19;
}

    #login-page .login-box::before,
    #login-page .login-box::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        background-image: url("content/shaffle_symbol.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.08;
        pointer-events: none;
    }

    #login-page .login-box::before {
        top: -80px;
        right: -60px;
    }

    #login-page .login-box::after {
        bottom: -120px;
        left: -120px;
        transform: rotate(15deg);
    }

@media (max-width: 576px) {
    #login-page .login-box {
        padding: 1.5rem 1.75rem;
    }
}

.about-content .detail {
    display: flex;
}

    .about-content .detail > div {
        max-width: 18rem;
        width: 100%;
        min-height: 12rem;
        height: 100%;
        margin: 0 auto 2rem;
        padding: 1.5rem;
        color: var(--color-text);
        border-radius: 8px;
        text-align: center;
        box-sizing: border-box;
    }

.home-content-text {
    position: relative;
}

.home-hero-logo {
    display: none;
    position: absolute;
    top: 18%;
    transform: translateY(-50%);
    width: 7.5rem;
    height: auto;
    pointer-events: none;
}

@media (min-width: 992px) {
    .home-hero-logo {
        display: block;
        left: 16%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .home-hero-logo {
        left: 9%;
    }
}

@media (max-width: 575.98px) {
    .home-hero-logo {
        display: none !important;
    }
}
.home-content .mobil-style-downloads {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

    .home-content .mobil-style-downloads .w-10 {
        display: none !important;
    }

@media (min-width: 576px) {
    .home-content .mobil-style-downloads a.store-button {
        width: 12.5rem; 
        justify-content: center; 
    }
}

body {
    position: relative; 
}

    body::before,
    body::after {
        content: "";
        position: fixed;
        width: clamp(260px, 35vw, 360px);
        height: clamp(260px, 35vw, 360px);
        background-image: url("content/shaffle_symbol.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.08; 
        pointer-events: none; 
        z-index: 0;
    }

    body::before {
        top: -120px;
        left: -60px;
    }

    body::after {
        bottom: -160px;
        right: -90px;
        transform: rotate(18deg);
    }


.home-content,
.about-content,
.features-content,
.screenshots-content,
.contact-content,
#login-page .login-content,
#account-page .account-content,
#email-verification-page,
#transaction-page {
    background-color: transparent !important;
}


#common-page,
#login-page,
#account-page,
#email-verification-page {
    position: relative;
    z-index: 1;
}

a.store-button,
a.store-pill,
.home-content .store-button,
.home-content .store-pill,
.home-content .mobil-style-downloads a.store-button,
.home-content .mobil-style-downloads a.store-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    border-radius: 4rem;
    padding: .6rem 1.25rem;
    min-height: 3.25rem;
    background-color: var(--shaffle-store-button-bg) !important;
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    background-image: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,0));
    background-blend-mode: overlay;
    transition: background-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

    a.store-button > .row,
    a.store-pill > .row {
        display: contents !important;
    }

    a.store-button > div,
    a.store-pill > div {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        color: inherit !important;
    }

    a.store-button .col-auto,
    a.store-pill .col-auto {
        margin: 0;
        padding: 0;
        flex: 0 0 auto;
    }

        a.store-button .col-auto:last-child,
        a.store-pill .col-auto:last-child {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.15;
            min-width: max-content;
        }

    a.store-button .line-1,
    a.store-pill .line-1 {
        font-size: var(--font-detail-size);
        font-weight: 500;
        opacity: .92;
        margin: 0;
    }

    a.store-button .line-2,
    a.store-pill .line-2 {
        font-size: calc(var(--font-header-size) * 0.96);
        font-weight: 600;
        letter-spacing: .2px;
        opacity: .96;
        margin: 0;
    }

    a.store-button .store-icon,
    a.store-button .store-icon2,
    a.store-pill .store-icon,
    a.store-pill .store-icon2 {
        display: block;
        width: 1.6rem;
        height: auto;
    }

    a.store-button:hover,
    a.store-button:focus-visible,
    a.store-pill:hover,
    a.store-pill:focus-visible {
        background-color: var(--shaffle-store-button-bg-hover) !important;
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(0,0,0,.26);
        outline: none;
    }

    a.store-button:active,
    a.store-pill:active {
        background-color: var(--shaffle-store-button-bg-active) !important;
        transform: translateY(0);
        box-shadow: 0 8px 18px rgba(0,0,0,.18);
    }

@media (max-width: 575.98px) {
    a.store-button,
    a.store-pill,
    .home-content .mobil-style-downloads a.store-button,
    .home-content .mobil-style-downloads a.store-pill {
        width: min(18rem, 90vw);
        padding: .45rem .9rem;
        gap: .5rem;
        min-height: 2.6rem;
        border-radius: 2rem;
    }

        a.store-button .line-1,
        a.store-pill .line-1 {
            font-size: var(--font-small-size);
            font-weight: 500;
        }

        a.store-button .line-2,
        a.store-pill .line-2 {
            font-size: var(--font-detail-size);
            font-weight: 600;
        }

        a.store-button .store-icon,
        a.store-button .store-icon2,
        a.store-pill .store-icon,
        a.store-pill .store-icon2 {
            width: 1.2rem;
        }
}

.absolute-menu .navbar-nav .nav-link:not(.login-button)::after,
.absolute-menu.at-top .navbar-collapse a.nav-item:not(.login-button)::after {
    content: none !important;
    display: none !important;
}

.absolute-menu .navbar-nav .nav-link:not(.login-button),
.absolute-menu.at-top .navbar-collapse a.nav-item:not(.login-button) {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .55rem .9rem;
    border-radius: 999px;
    text-decoration: none !important;
    box-sizing: border-box;
    border: 1px solid transparent; 
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}


    .absolute-menu .navbar-nav .nav-link:not(.login-button):hover,
    .absolute-menu .navbar-nav .nav-link:not(.login-button):focus-visible,
    .absolute-menu.at-top .navbar-collapse a.nav-item:not(.login-button):hover,
    .absolute-menu.at-top .navbar-collapse a.nav-item:not(.login-button):focus-visible {
        background-color: rgba(var(--color-primary-rgb), .22); 
        border: 1px solid rgba(255,255,255,.14); 
        box-shadow: 0 10px 20px rgba(0,0,0,.18);
        color: #ffffff !important; 
        outline: none;
    }


    .absolute-menu .navbar-nav .nav-link:not(.login-button):active,
    .absolute-menu.at-top .navbar-collapse a.nav-item:not(.login-button):active {
        background-color: rgba(var(--color-primary-rgb), .22);
    }

.absolute-menu .navbar-collapse.show .navbar-nav .nav-link:not(.login-button),
.absolute-menu .navbar-collapse.collapsing .navbar-nav .nav-link:not(.login-button) {
    width: 100%;
    justify-content: flex-start;
    border-radius: 12px;
}

.absolute-menu .navbar-nav .login-button.nav-link:active {
    background-color: var(--shaffle-store-button-bg-active) !important;
    border-color: var(--shaffle-store-button-bg-active) !important;
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.home-content .mobil-style-downloads a.store-button:hover,
.home-content .mobil-style-downloads a.store-pill:hover,
.home-content a.store-button:hover,
.home-content a.store-pill:hover {
    background-color: var(--shaffle-store-button-bg-hover) !important;
}

.home-content .mobil-style-downloads a.store-button:active,
.home-content .mobil-style-downloads a.store-pill:active,
.home-content a.store-button:active,
.home-content a.store-pill:active {
    background-color: var(--shaffle-store-button-bg-active) !important;
}
:root {
    --shaffle-button-bg: #0AA353;
    --shaffle-store-button-bg: var(--shaffle-button-bg);
    --shaffle-store-button-bg-hover: #0cc96a;
    --shaffle-store-button-bg-active: #0bb765;
}

a.store-button,
a.store-pill,
.home-content .store-button,
.home-content .store-pill,
.home-content .mobil-style-downloads a.store-button,
.home-content .mobil-style-downloads a.store-pill {
    background-color: var(--shaffle-store-button-bg) !important;
}

    a.store-button:hover,
    a.store-button:focus-visible,
    a.store-pill:hover,
    a.store-pill:focus-visible {
        background-color: var(--shaffle-store-button-bg-hover) !important;
    }

    a.store-button:active,
    a.store-pill:active {
        background-color: var(--shaffle-store-button-bg-active) !important;
    }
#please-wait-modal .modal-dialog {
    max-width: none;
    width: auto;
}

#please-wait-modal .modal-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#please-wait-modal .modal-header,
#please-wait-modal .modal-footer {
    display: none !important;
}

#please-wait-modal .modal-body {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px; 
}
:root {
    --login-phone-radius: 54px;
    --login-phone-bezel: 18px;
    --login-phone-outline: rgba(255,255,255,.22);
    --login-mark-opacity: .06;
    --login-mark-size: clamp(320px, 78%, 520px);
}

#login-page .login-div {
    background: transparent !important;
}

#login-page .login-box {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: clamp(320px, 28vw, 420px);
    max-width: calc(100vw - 2rem);
    margin: 0 auto;
    border: var(--login-phone-bezel) solid transparent;
    border-radius: var(--login-phone-radius);
    background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%) padding-box, linear-gradient(180deg, #061321 0%, #000C19 100%) padding-box, #000C19 border-box;
    box-shadow: 0 28px 70px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.18), 0 0 0 1px var(--login-phone-outline);
    padding: 2.2rem 2rem 2rem;
    min-height: clamp(520px, 72vh, 720px);
}

    #login-page .login-box::before,
    #login-page .login-box::after {
        content: "";
        position: absolute;
        width: var(--login-mark-size);
        height: var(--login-mark-size);
        background-image: url("content/shaffle_symbol.png");
        background-repeat: no-repeat;
        background-size: contain;
        opacity: var(--login-mark-opacity);
        pointer-events: none;
        z-index: 0;
    }

    #login-page .login-box::before {
        top: -62%;
        right: -58%;
        transform: rotate(14deg);
    }

    #login-page .login-box::after {
        bottom: -70%;
        left: -62%;
        transform: rotate(18deg);
    }

    #login-page .login-box > * {
        position: relative;
        z-index: 1;
    }

@media (max-width: 576px) {
    :root {
        --login-phone-radius: 48px;
        --login-phone-bezel: 14px;
    }

    #login-page .login-box {
        padding: 1.6rem 1.4rem 1.4rem;
        min-height: min(680px, 86vh);
    }
}
:root {
    --login-mark-opacity: .10;
    --login-mark-size: clamp(360px, 92%, 560px);
}

#login-page .login-box::before,
#login-page .login-box::after {
    width: var(--login-mark-size) !important;
    height: var(--login-mark-size) !important;
    opacity: var(--login-mark-opacity) !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    mix-blend-mode: screen;
    filter: brightness(1.12) saturate(1.08);
}

#login-page .login-box::before {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: translate(48%, -48%) rotate(14deg) !important;
}

#login-page .login-box::after {
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    right: auto !important;
    transform: translate(-52%, 52%) rotate(18deg) !important;
}