#divAppLogin
{
    background-color:rgba(0, 0, 0, 0.75);
    display:none;
    height:100%;
    left:0%;
    opacity:0;
    position:fixed;
    top:0%;
    width:100%;
    z-index:20;
}

#divAppLogin.show
{
    animation-duration:0.25s;
	animation-name:showLogin;
	display:block;
	opacity:1;
}

#divAppLogin #divLoginPopup
{
    background-color:#1b1c20;
    border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 50px #000000;
	height: auto;
    left:50%;
    opacity:0;
	overflow:hidden;
	padding:30px;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	transition:transform 0.25s;
	width:480px;
}

#divAppLogin.resetPassword1 #divLoginPopup
{
    height:262px;
}

#divAppLogin.resetPassword2 #divLoginPopup
{
    height:342px;
}

#divAppLogin.newPassword #divLoginPopup
{
    height:480px;
}

#divAppLogin.show #divLoginPopup
{
    animation-duration:0.25s;
	animation-name:showLogin;
	opacity:1;
}

#divAppLogin #h3PopupHeading
{
    height:40px;
	line-height:40px;
    margin-bottom:15px;
}

#divAppLogin #h3PopupHeading:before
{
	background-image:url('../images/icons/playLogo.svg');
    background-position:center left;
	background-repeat:no-repeat;
    background-size:80%;
	content:"";
	float:left;
	height:40px;
	line-height:40px;
	margin-right:5px;
	opacity:0.5;
    width:40px;
}

#divAppLogin #btnClosePopup
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
}

#divAppLogin #btnClosePopup:before
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppLogin #btnClosePopup:after
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppLogin #btnClosePopup:hover:before, #divAppLogin #btnClosePopup:focus:before, #divAppLogin #btnClosePopup:hover:after, #divAppLogin #btnClosePopup:focus:after
{
    background-color:#fbd3ff;
    box-shadow:0px 0px 5px #e600ff;
}

/* LOGIN */
#divAppLogin .divLogin
{
	display:none;
}

#divAppLogin.login .divLogin
{
	display:block;
}

#divAppLogin #txtUsernameEmail, #divAppLogin #txtLoginPassword
{
	margin-top:10px;
}

#divAppLogin #agreeTerms {
    color: #888b90;
    font-size: 13.5px;
    line-height: 18px;
    text-align: center;
    padding-top: 20px;
}

#divAppLogin #agreeTerms a {
    color: #888b90;
    transition: color 0.25s, text-shadow 0.25s;
}

#divAppLogin #agreeTerms a:hover, #divAppLogin #agreeTerms a:focus {
    color: #cffdff;
    text-shadow: 0px 0px 5px #01eff9;
}

#divAppLogin #divForgotPassword
{
	color:#ffffff;
	cursor:pointer;
	float:right;
	font-size:15px;
	line-height:30px;
	margin-top:10px;
	text-decoration:underline;
	transition:text-shadow 0.25s;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#divAppLogin #divForgotPassword:hover
{
	text-shadow:0px 0px 5px #01eff9;
}

#divAppLogin #btnSignIn
{
	clear:both;
	margin-top:20px;
	width:100%;
}

/* RESET PASSWORD 1 */
#divAppLogin .divResetPassword1
{
	display:none;
}

#divAppLogin.resetPassword1 .divResetPassword1
{
	display:block;
}

#divAppLogin #txtResetUsername
{
	width:100%;
}

#divAppLogin #btnSmsResetLink
{
	margin-top:30px;
	width:100%;
}

/* UPDATE PASSWORD AFTER SMS OTP */

#divAppLogin #txtNewPasswordOtp
{
    clear:both;
    margin:10px 0px;
    text-align:center;
    width:100%;
}

#divAppLogin #txtNewPassword
{
    margin-top:10px;
}

#divAppLogin #btnUpdatePassword
{
    clear:both;
    margin-top:10px;
    width:100%;
}

#divAppLogin.newPassword .divNewPassword
{
    display:block;
}

#divAppLogin .divNewPassword
{
    display:none;
}

#divAppLogin #btnUpdatePassword
{
    margin-top:30px;
    width:100%;
}

#divAppLogin #btnResetPassword, #divAppLogin #btnUpdatePassword
{
    clear:both;
    margin-top:30px;
    width:100%;
}

/* RESET PASSWORD 2 */
#divAppLogin .divResetPassword2
{
	display:none;
}

#divAppLogin.resetPassword2 .divResetPassword2
{
	display:block;
}

#divAppLogin #txtResetEmail
{
	float:left;
	width:calc(100% - 130px);
}

#divAppLogin #btnSendOtpEmail
{
	float:right;
	margin-top:20px;
}

#divAppLogin #txtResetOtp
{
	clear:both;
	margin:10px 0px;
	width:100%;
}

#divAppLogin #txtResetNewPassword
{
	clear:both;
	margin-top:10px;
	width:100%;
}

#divAppLogin #btnResetPassword
{
	clear:both;
	margin-top:30px;
	width:100%;
}

/* OTP TIMER */
#divAppLogin .otp-timer
{
	background-color:rgba(255, 255, 255, 0.1);
	border-radius:5px;
	clear:both;
	color:#01eff9;
	font-size:14px;
	margin:15px 0px 10px;
	padding:10px 15px;
	text-align:center;
}

#divAppLogin .otp-timer.warning
{
	background-color:rgba(255, 193, 7, 0.15);
	color:#ffc107;
}

#divAppLogin .otp-timer.expired
{
	background-color:rgba(255, 68, 68, 0.15);
	color:#ff4444;
}

#divAppLogin #btnResendSmsOtp
{
	clear:both;
	display:block;
	margin:0 auto 15px;
	width:auto;
}

#divAppLogin #btnResendSmsOtp.disabled
{
	background-color:#3f4656;
	color:#888b90;
	cursor:not-allowed;
	opacity:0.7;
}

#divAppLogin #divLoginRegister
{
	color:#fbd3ff;
	cursor:pointer;
	float:left;
	font-size:14px;
	margin-top:15px;
	text-shadow:0px 0px 5px #e600ff;
	transition:text-shadow 0.25s;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#divAppLogin.newPassword #divLoginRegister
{
	display:none;
}

#divAppLogin #divLoginRegister:hover, #divAppLogin #divLoginRegister:focus
{
	text-shadow:0px 0px 5px #01eff9;
}

#divAppLogin #divLoginRegister:before
{
	color:#888b90;
	content:"Don't have an account?";
	margin-right:5px;
	text-shadow:none;
}

#divAppLogin.resetPassword1 #divLoginRegister:before, #divAppLogin.resetPassword2 #divLoginRegister:before
{
	content:"Already have an account?";
}

#divAppLogin #divLoginRegister:hover:before, #divAppLogin #divLoginRegister:focus:before
{
	color:#888b90;
	text-shadow:none;
}

#divAppLogin #divNeedHelp
{
	clear:both;
	color:#ffffff;
	cursor:pointer;
	float:left;
	font-size:13px;
	margin-top:-5px;
	transition:text-shadow 0.25s;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#divAppLogin.newPassword #divNeedHelp
{
	margin-top:18px;
}

#divAppLogin #divNeedHelp:hover, #divAppLogin #divNeedHelp:focus
{
	text-shadow:0px 0px 5px #01eff9;
}

#divAppLogin #divNeedHelp:before
{
	color:#888b90;
	content:"Need help?";
	margin-right:5px;
	text-shadow:none;
}

#divAppLogin #divNeedHelp:hover:before, #divAppLogin #divNeedHelp:focus:before
{
	color:#888b90;
	text-shadow:none;
}

/* ANIMATION KEY FRAMES */
@keyframes showLogin
{
	0%   {opacity:0;}
	1%   {opacity:0;}
	100% {opacity:1;}
}

/* MEDIA QUERIES */
@media (max-height: 472px)
{
    #divAppLogin.login #divLoginPopup
    {
        height:calc(100% - 100px);
        overflow-y:auto;
        top:20px;
		transform:translate(-50%, 0%);
    }
}

@media (max-height: 442px)
{
    #divAppLogin.resetPassword2 #divLoginPopup
    {
        height:calc(100% - 100px);
        overflow-y:auto;
        top:20px;
		transform:translate(-50%, 0%);
    }
}

@media (max-height: 362px)
{
    #divAppLogin.resetPassword1 #divLoginPopup
    {
        height:calc(100% - 100px);
        overflow-y:auto;
        top:20px;
		transform:translate(-50%, 0%);
    }
}

@media (max-width: 540px)
{
    #divAppLogin
	{
		display:block;
		opacity:1;
		transform:translate(-100%, 0%);
		transition:transform 0.25s;
	}

	#divAppLogin.show
	{
		animation:none;
		transform:translate(0%, 0%);
	}

	#divAppLogin #divLoginPopup, #divAppLogin.login #divLoginPopup, #divAppLogin.resetPassword1 #divLoginPopup, #divAppLogin.resetPassword2 #divLoginPopup
    {
        box-shadow:none;
        border-radius:0px;
        height:calc(100% - 40px);
        left:0%;
		opacity:1;
        overflow-y:auto;
		padding:20px;
        top:0%;
        transform:translate(0%, 0%);
        width:calc(100% - 40px);
    }

    #divAppLogin #agreeTerms {
        font-size: 11px;
    }

	#divAppLogin.show #divLoginPopup
	{
		animation:none;
	}

	#divAppLogin #btnClosePopup
	{
		right:15px;
		top:15px;
	}

	#divAppLogin #btnClosePopup:before, #divAppLogin #btnClosePopup:after
    {
        background-color:#fbd3ff;
        box-shadow:0px 0px 5px #e600ff;
    }
}

@media (max-width: 420px)
{
    #divAppLogin #divLoginPopup, #divAppLogin.login #divLoginPopup, #divAppLogin.resetPassword1 #divLoginPopup, #divAppLogin.resetPassword2 #divLoginPopup, #divAppLogin.newPassword #divLoginPopup
    {
        height:calc(100% - 30px);
        padding:15px;
        width:calc(100% - 30px);
    }

	#divAppLogin #btnClosePopup
	{
		right:10px;
		top:10px;
	}

	#divAppLogin #txtResetOtp
	{
		margin:10px 0px;
		width:100%;
	}

	#divAppLogin #txtResetNewPassword
	{
		margin-top:10px;
		width:100%;
	}
}

/* PASSKEY LOGIN */
#divAppLogin .divPasskeyLogin
{
	width: 100%;
	margin-bottom: 15px;
}

#divAppLogin .divPasskeyLogin .divider,
#divAppLogin .divQuickLogin .divider
{
	display: flex;
	align-items: center;
	text-align: center;
	color: #888b90;
	font-size: 12px;
	margin: 15px 0 5px 0;
}

#divAppLogin .divPasskeyLogin .divider::before,
#divAppLogin .divPasskeyLogin .divider::after
{
	content: '';
	flex: 1;
	border-bottom: 1px solid #3f4656;
}

#divAppLogin .divPasskeyLogin .divider span
{
	padding: 0 15px;
}

#divAppLogin #btnPasskeyLogin
{
	width: 100%;
	background: linear-gradient(180deg, #2a3040 0%, #1f232d 100%);
	border: 1px solid #3f4656;
	position: relative;
	padding-left: 45px;
}

#divAppLogin #btnPasskeyLogin::before
{
	content: '';
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbd3ff'%3E%3Cpath d='M12 1C8.14 1 5 4.14 5 8c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h1v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-3.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm0 2c2.76 0 5 2.24 5 5 0 1.63-.79 3.07-2 3.97V15h-1v2h-1v-2h-2v2h-1v-2H9v-3.03C7.79 11.07 7 9.63 7 8c0-2.76 2.24-5 5-5zm-1 5a1 1 0 1 0 2 0 1 1 0 0 0-2 0z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

#divAppLogin #btnPasskeyLogin:hover,
#divAppLogin #btnPasskeyLogin:focus
{
	border-color: #fbd3ff;
	box-shadow: 0px 0px 10px rgba(230, 0, 255, 0.3);
}

/* QUICK SIGN-IN CHECKBOX */
#divAppLogin .divQuickSignIn
{
	margin: 10px 0;
}

#divAppLogin .divQuickSignIn label
{
	display: flex;
	align-items: center;
	cursor: pointer;
	color: #888b90;
	font-size: 13px;
	user-select: none;
}

#divAppLogin .divQuickSignIn input[type="checkbox"]
{
	width: 18px;
	height: 18px;
	margin-right: 10px;
	cursor: pointer;
	accent-color: #fbd3ff;
}

#divAppLogin .divQuickSignIn label:hover
{
	color: #ffffff;
}

#divAppLogin .divQuickSignIn label:hover input[type="checkbox"]
{
	box-shadow: 0 0 5px rgba(251, 211, 255, 0.5);
}

.field-error {
    color: #ff4444;
    font-size: 11px;
    height: 0px;
    overflow: hidden;
    padding-left: 5px;
    line-height: 14px;
    transition: height 0.2s ease;
    clear: both;
    width: 100%;
}

.field-error.show {
    height: 14px;
}