body {font-family: Arial;}

/* Style the tab */
.login-main, .register-main { text-align: center; }
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.login-register-demo .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    width: 50%;
}

/* Change background color of buttons on hover */
.login-register-demo .tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.login-register-demo .tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.login-register-demo .tabcontent {
    display: none;
    padding: 6px 12px 25px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Popup container - can be anything you want */
.login-register-demo .popup, .login-register-demo .popup-success, .login-register-demo .popup-register, .login-register-demo .popup-success-register {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 60%;
    margin: 0 auto;
}
.login-register-demo .popup-success, .login-register-demo .popup-success-register { width: 40%; }

/* The actual popup */
.login-register-demo .popup .popuptext, .login-register-demo .popup-success .popuptext-success,
.login-register-demo .popup-register .popuptext-register, .login-register-demo .popup-success-register .popuptext-success-register {
    visibility: hidden;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 40px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.login-register-demo .popuptext-main{
    background-color: #2a2d35;
    padding: 40px;
    max-width: fit-content;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}

.login-register-demo .button, .login-register-demo .register-button, .login-register-demo .check-auth-status, .login-register-demo .validate-login-auth, .login-register-demo .check-register-auth-status { padding: 10px; font-size: 15px; cursor: pointer; }
.login-register-demo .validate-login-auth { display: none; }
.login-register-demo .response-data { margin-top:20px; }
.login-register-demo .orange { color: orange; }
.login-register-demo .popup-success .popuptext-success { width: 90%; }

/* Toggle this class - hide and show the popup */
.login-register-demo .popup .show, .login-register-demo .popup-success .show,
.login-register-demo .popup-register .show, .login-register-demo .popup-success-register .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

.login-register-demo span.icon {
    position: static;
    height: 50px;
    margin-bottom: 15px;
}

.login-register-demo svg {
    height: 50px;
    object-fit: contain;
}

.login-register-demo .auth-methods-list {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.login-register-demo .push-authentication, .login-register-demo .magic-link-login-email, .login-register-demo .web-authn {
	cursor: pointer;
	flex-direction: column;
    display: flex;
    width: 300px;
    text-align: center;
    background-color: #434857;
    padding: 20px;
}

.login-register-demo .popuptext h2, .login-register-demo .popuptext-success h2,
.login-register-demo .popuptext-register h2, .login-register-demo .popuptext-success-register h2 {
    margin-top: 0;
}

.login-register-demo { padding: 10% 0; }
.login-register-form { width: 40%; margin: 0 auto; }
.login-register-demo .error { color: red; font-size: 13px; }
.login-register-demo .qr-code-image-show .error { color: red; font-size: 16px; margin-top: 20px; }
.login-register-demo .success { color: green; font-size: 13px; }
.login-register-demo .authenticator-response .show_qr { color: #fff; cursor: pointer; }
.login-register-demo .qr-code-image-show { display:none; }
.login-register-demo .hide-popup-qrcode-btn { text-align: right; margin-bottom: 20px; display: block; cursor: pointer; }

#container {
    width: 100%;
    height: 100%;
    position: absolute;
    visibility:hidden;
    display:none;
    background-color: rgba(22,22,22,0.5);
}

#container:target {
    visibility: visible;
    display: block;
}

.reveal-modal {
    background:#e1e1e1;
    margin: 0 auto;
    width:160px;
    position:relative;
    z-index:41;
    top: 25%;
    padding:30px;
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.4);
    box-shadow:0 0 10px rgba(0,0,0,0.4);
}

.login-register-demo-main{
	width: 100%;
    height: 100%;

}
.login-register-demo .popup:after, .login-register-demo .popup-success:after,
.login-register-demo .popup-register:after, .login-register-demo .popup-success-register:after{
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    background: #000;
    opacity: 0.7;
    width: 100%;
    height: 100%;
    z-index: 9;
}
.login-register-demo .popup .popuptext, .login-register-demo .popup-success .popuptext-success,
.login-register-demo .popup-register .popuptext-register, .login-register-demo .popup-success-register .popuptext-success-register {
    z-index: 99;
}

.login-register-demo .popup, .login-register-demo .popup-success,
.login-register-demo .popup-register, .login-register-demo .popup-success-register { display:none; }
.login-register-demo .authenticator-response-first img {
    width: 100%;
}

.login-register-demo .popuptext-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 5px;
}

.login-register-demo .popuptext-close svg {
    width: 24px;
    fill: #fff;
    height: 24px;
}

@media only screen and (max-width: 991px) {
    .login-register-demo .popuptext-main {
        padding: 40px 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        max-height: 100%;
        overflow: auto;
    }
    .login-register-demo .popup .popuptext, .login-register-demo .popup-success .popuptext-success,
    .login-register-demo .popup-register .popuptext-register, .login-register-demo .popup-success-register .popuptext-success-register{
        padding: 20px;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
}

@media only screen and (max-width: 767px) {
    .login-register-demo .popup .popuptext, .login-register-demo .popup-success .popuptext-success,
    .login-register-demo .popup-register .popuptext-register, .login-register-demo .popup-success-register .popuptext-success-register{
        height: 100%;
    }
    .login-register-demo .auth-methods-list {
        display: block;
    }
    .login-register-demo .auth-method {
        margin-bottom: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    .login-register-demo .auth-method:last-child {
        margin-bottom: 0;
    }
    .login-register-demo .login-register-form {
        width: 100%;
    }
}