html {
            height: 100%;
        }

        body {
            font-family: "Outfit", sans-serif;
            height: 100%;
        }

        .bottom-notify-box {
            z-index: -999;
            position: relative;
        }

        #facesContainer {
            padding-right: 15px;
            padding-left: 15px;
        }

        .photo-container {
            height: 100% !important;
            aspect-ratio: 1/1;
        }

        .download-button {
            aspect-ratio: 1/1;
            height: auto !important;
        }

        .top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px !important;
            margin-top: 12px !important;
        }

        .footer {
            position: fixed;
            bottom: 0px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99999;
        }

        .version-number {
            font-weight: 400;
            font-size: 12px;
            color: #bdbdbd;
        }

        h1 {
            font-weight: 600;
            font-size: 20px;
        }

        h2 {
            font-weight: 300;
            font-size: 18px;
        }

        h3 {
            font-weight: 600;
            font-size: 16px;
            color: white;
        }

        h4 {
            font-weight: 600;
            font-size: 14px;
            color: black;
            margin-bottom: 0px;
        }

        h5 {
            font-weight: 400;
            font-size: 12px;
            color: black;
        }


        p {
            font-weight: 300;
            font-size: 16px;
            margin-bottom: 0px;
        }

        .media-buttons {
            position: absolute;
            width: 60px;
            bottom: 15px;
            right: 15px;
        }

        .app-logo {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .notify-area {
            position: absolute;
            bottom: 70px;
            text-align: center;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            color: white;
            z-index: 99;
        }

        .lottie-loader {
            height: 100%;
            position: fixed;
            z-index: 9999999;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none;
        }

        .notify-area .notify-text {
            background-color: #262626a8;
            backdrop-filter: blur(6px);
            padding: 20px;
            padding-bottom: 10px;
            border-radius: 16px;
            margin-bottom: 12px;
            margin-top: 12px;
        }

        .app-body {
            position: absolute;
            padding: 15px;
            width: 100%;
            z-index: 9998;
            padding-bottom: 12px;
            padding-top: 12px;
        }

        .app-footer {
            position: absolute;
            bottom: 0px;
            width: 100%;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            margin-bottom: 13px;
            padding-right: 15px;
            padding-left: 15px;
        }

        .app-footer-ready {
            position: absolute;
            bottom: 0px;
            width: 100%;
            display: block;
            text-align: center;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            padding-right: 15px;
            padding-left: 15px;
        }

        .blackbar {
            background-color: var(--primary-mobile-color);
            padding-top: 15px;
            width: 100%;
            padding-bottom: 8px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .blackbar h3 {
            color: var(--primary-mobile-font-color) !important;
        }

        a {
            color: var(--primary-mobile-color) !important;
            text-decoration: underline;
        }

        a span {
            color: black !important;
        }

        .primary-button {
            color: var(--primary-mobile-font-color) !important;
        }

        .app-top-blur {
            height: 300px;
            width: 100%;
            position: absolute;
            top: 0px;
            z-index: 0;
            backdrop-filter: blur(0px);
            background: #ffffff5e;
            mask-image: linear-gradient(to bottom, black 20%, transparent 70%);
        }

        .app-footer-blur {
            height: 300px;
            width: 100%;
            position: absolute;
            bottom: 0px;
            z-index: 0;
            backdrop-filter: blur(0px);
            background: #00000067;
            mask-image: linear-gradient(to top, black 20%, transparent 70%);
        }

        .slide-background::before {
            background: url("/images/placeholder1.png");
            background-size: cover;
            content: " ";
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0.6;
            background-repeat: no-repeat;
            background-size: cover !important;
            background-position: center;
        }

        .app-body-black-bg {
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #000000;
            z-index: -1;
        }

        .text-purple {
            color: #8c52ff;
        }

        .profile-tab {
            width: 45px;
            height: 45px;
        }

        .history-list {
            margin-top: 20px;
        }

        @media screen and (max-height: 585px) {
            .mobile-body {
                margin-top: -25px;
            }

            .mobile-body {
                margin-top: -25px;
            }

            .mobile-body h1 {
                font-size: 16px;
            }

            .mobile-body h2 {
                font-size: 14px;
            }
        }

        input[type="checkbox"] {
            width: 20px;
            height: 20px;
        }

        input[type="checkbox"]:checked+label::before {
            content: "";
            display: block;
            position: absolute;
            text-align: center;
            height: 20px;
            width: 20px;
            left: 0;
            top: 5px;
            background-color: var(--primary-mobile-color) !important;
            font-family: "Montserrat";
            border-radius: 2px;
            border: 1px solid rgb(150 150 150 / 30%);
        }

        input[type="checkbox"]:checked+label::after {
            content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
            display: block;
            position: absolute;
            left: 3px;
            top: 3px;
        }

        .custom-button {
            background-color: var(--primary-mobile-color);
            padding-top: 10px;
            width: 100%;
            padding-bottom: 8px;
            border-radius: 8px;
            margin-top: 15px;
            border: none;
        }

        .custom-download-detail-button {
            border-radius: 0;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(45deg, #484848, #6e6e6e);
            padding-top: 10px;
            width: 100%;
            border: none;
        }

        .cart-count {
            background-color: #fa4444e8;
            color: white;
            padding: 3px;
            border-radius: 90px;
            padding-right: 9px;
            padding-left: 9px;
        }

        .swal2-container {
            z-index: 9999999;
            background: rgba(0, 0, 0, 0.156) !important;
            backdrop-filter: blur(3px);
            transition: all 0.3s ease;
        }

        .swal2-popup {
            display: grid;
            border-radius: 21px;
            width: 300px;
            padding-bottom: 41px;
        }

        .active-result-tab {
            width: 100%;
            text-align: center;
            padding: 9px;
            background: var(--primary-mobile-color);
            color: white;
            border-radius: 10px;
        }

        .result-tab {
            width: 100%;
            text-align: center;
        }

        .photo-checkbox {
            accent-color: var(--primary-mobile-color);
        }

        .inner-modal {
            height: 100%;
            background: white;
            width: 100%;
            z-index: 9999;
            bottom: 0px;
            /* border-radius: 11px;
    box-shadow: 0 0 80px 4px #00000078; */
        }

        .modal-frame {
            height: 100%;
            width: 100%;
            z-index: 9999;
            position: fixed;
            bottom: 0px;
            /* padding: 15px; */
            display: none;
        }

        #paytriframe {
            overflow: scroll !important;
            height: 100% !important;
            z-index: 99999999;
            padding-bottom: 120px;
            position: absolute;
        }

        .loader-circle {
            position: relative;
            width: 70px;
            height: 70px;
            display: inline-block;
        }

        .loader-circle:before,
        .loader-circle:after {
            content: "";
            display: block;
            position: absolute;
            border-width: 4px;
            border-style: solid;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            border-color: var(--primary-mobile-color);
            top: 0;
            left: 0;
        }

        .loader-circle:before {
            animation: loader-circle-scale 1s linear 0s infinite;
        }

        .loader-circle:after {
            opacity: 0;
            animation: loader-circle-scale 1s linear 0.5s infinite;
        }

        .start-title {
            color: black;
        }

        .start-desc {
            color: black;
        }

        .otp-title {
            color: black;
        }

        .otp-desc {
            color: black;
        }

        .confirm-title {
            color: black;
        }

        .confirm-desc {
            color: black;
        }

        @keyframes loader-circle-scale {
            0% {
                transform: scale(0);
                opacity: 0;
            }

            50% {
                transform: scale(0.7);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 0;
            }
        }