* {
                font-family: 'Reem Kufi', sans-serif;
            }
            body {background-color: white;}
            h1   {color: black; font-weight:bolder;}
            p    {color: black;}

            body.i18n-loading .center {
                opacity: 0;
            }

            .loading-indicator {
                display: none;
                position: fixed;
                inset: 0;
                align-items: center;
                justify-content: center;
                background-color: white;
                z-index: 1000;
            }

            body.i18n-loading .loading-indicator {
                display: flex;
            }

            .loading-spinner {
                display: inline-block;
                width: 36px;
                height: 36px;
                border: 4px solid #d9d9d9;
                border-top-color: #4a4a4a;
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
            }

            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }

            .center {margin:auto; width:80%; text-align:center; transition: opacity 0.15s ease-in;}
            @media only screen and (min-width: 992px) {
                .center {margin:auto; width:50%}
            }

            .submit {
              width: 100%;
              border-radius: 5px;
              border: none;
              padding: 6px 10px;
              font-size: 28px;
              cursor: pointer;
              background-color: green;
              color: white;
              font-family: inherit;
              position: relative;
            }

            .submit:hover:enabled {
              background-color: darkgreen;
            }

            .submit.loading {
              color: transparent !important;
            }

            .submit.loading[disabled] {
              background-color: green;
              border: none;
            }

            .submit.loading::after {
              content: "";
              position: absolute;
              left: 50%;
              top: 50%;
              width: 24px;
              height: 24px;
              margin-left: -12px;
              margin-top: -12px;
              border: 3px solid rgba(255, 255, 255, 0.45);
              border-top-color: #ffffff;
              border-radius: 50%;
              animation: spin 0.8s linear infinite;
            }

            .gender {
                display: inline-block;
                margin: auto;
                width: 80%;
                border-radius: 5px;
                border: none;
                padding: 6px 10px;
                font-size: 20px;
                cursor: pointer;
                background-color: lightblue;
                color: white;
                font-family: inherit;
                margin:10px;
                color: black;
            }

            .gender:hover {
              background-color: darkblue;
              color: white;
            }

            .gender-selected {
                background-color: darkblue !important;
                color: white !important;
            }


            button[disabled]{
                border: 1px solid #999999;
                background-color: #cccccc;
                color: #666666;
            }

            input, textarea, select {
              width: 100%;
              border-radius: 5px;
              margin-bottom: 10px;
              border: 1px solid #ccc;
              box-sizing: border-box;
              padding: 6px 10px;
              background-color: #f2f2f2;
              font-size: 20px;
            }

            .notification {
              margin-top: 10px;
              padding: 10px;
              border-radius: 5px;
              color: white;
              font-weight: bold;
              visibility: hidden;
              min-height: 72px;
              box-sizing: border-box;
            }

            .notification.error {
              background-color: #dc3545;
              border: 1px solid #b02a37;
            }

            .notification.success {
              background-color: #28a745;
              border: 1px solid #1e7e34;
            }

            .privacy-notice {
              width: 100%;
              margin-top: 16px;
              margin-bottom: 8px;
              font-size: 15px;
              font-style: italic;
              color: #333;
              text-align: left;
              line-height: 1.4;
            }

            .privacy-notice a {
              color: #0056b3;
              text-decoration: underline;
            }