#divAppRegister
{
    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;
}

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

#divAppRegister #divRegisterPopup
{
    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;
	min-height:420px;
    left:50%;
    opacity:0;
	overflow-y:auto;
	padding:30px;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	transition:transform 0.25s, height 0.3s;
	width:480px;
}

#divAppRegister.register #divRegisterPopup
{
    min-height:650px;
}

#divAppRegister.otpVerification #divRegisterPopup
{
    min-height:368px;
}

#divAppRegister.show #divRegisterPopup
{
    animation-duration:0.25s;
	animation-name:showRegister;
	opacity:1;
	max-height: calc(100% - 100px);
}

#divAppRegister #h3RegisterHeading
{
    height:40px;
	line-height:40px;
    margin-bottom:15px;
}

#divAppRegister #h3RegisterHeading: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;
}

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

#divAppRegister #btnCloseRegisterPopup: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;
}

#divAppRegister #btnCloseRegisterPopup: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;
}

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

/* REGISTRATION FORM */
#divAppRegister .divRegister
{
	display:none;
}

#divAppRegister.register .divRegister
{
	display:block;
}

#divAppRegister #txtRegFirstName,
#divAppRegister #txtRegLastName,
#divAppRegister #txtRegMobileNumber,
#divAppRegister #txtRegEmail,
#divAppRegister #txtRegIdNumber,
#divAppRegister #txtRegUsername,
#divAppRegister #txtRegPassword
{
	clear:both;
	margin-top:10px;
	width:100%;
}

#divAppRegister .divOtpInfo1
{
	clear:both;
	font-size:14px;
	padding-top:30px;
}

#divAppRegister #btnRegisterNext
{
	margin-top:30px;
	width:100%;
}

/* OTP VERIFICATION */
#divAppRegister .divOtpVerification
{
	display:none;
}

#divAppRegister.otpVerification .divOtpVerification
{
	display:block;
}

#divAppRegister .divOtpInfo2
{
	font-size:14px;
	padding-top:10px;
}

#divAppRegister #txtRegEnterOtp
{
	clear:both;
	margin:10px 0px 20px;
	text-align:center;
	width:100%;
}

#divAppRegister #btnResendRegOtp
{
	clear:both;
	display:block;
	margin:0 auto 20px;
	width:auto;
}

#divAppRegister #chkRegAgreeTerms
{
	clear:both;
}

#divAppRegister #btnRegBack
{
	clear:both;
	margin:30px 15px 0px 0px;
	width:calc(50% - 15px);
}

#divAppRegister #btnRegSignUp
{
	float:right;
	margin:30px 0px 0px 15px;
	width:calc(50% - 15px);
}

#divAppRegister #divRegisterLogin
{
	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);
}

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

#divAppRegister #divRegisterLogin:before
{
	color:#888b90;
	content:"Already have an account?";
	margin-right:5px;
	text-shadow:none;
}

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

#divAppRegister #divRegNeedHelp
{
	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);
}

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

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

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

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

/* MEDIA QUERIES */
@media (max-height: 520px)
{
    #divAppRegister #divRegisterPopup
    {        
        top:20px;
		transform:translate(-50%, 0%);
    }
}

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

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

	#divAppRegister #divRegisterPopup, #divAppRegister.register #divRegisterPopup, #divAppRegister.otpVerification #divRegisterPopup
    {
        box-shadow:none;
        border-radius:0px;
        height:calc(100% - 40px);
		max-height: unset;
        left:0%;
		opacity:1;
        overflow-y:auto;
		padding:20px;
        top:0%;
        transform:translate(0%, 0%);
        width:calc(100% - 40px);
    }

	#divAppRegister.show #divRegisterPopup
	{
		animation:none;
	}

	#divAppRegister #btnCloseRegisterPopup
	{
		right:15px;
		top:15px;
	}

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

@media (max-width: 420px)
{
    #divAppRegister #divRegisterPopup, #divAppRegister.register #divRegisterPopup, #divAppRegister.otpVerification #divRegisterPopup
    {
        height:calc(100% - 30px);
        padding:15px;
        width:calc(100% - 30px);
    }

	#divAppRegister #btnCloseRegisterPopup
	{
		right:10px;
		top:10px;
	}

	#divAppRegister #btnRegBack
	{
		margin:30px 10px 0px 0px;
		width:calc(50% - 10px);
	}

	#divAppRegister #btnRegSignUp
	{
		margin:30px 0px 0px 10px;
		width:calc(50% - 10px);
	}
}

.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;
}

/* OTP Timer */
#divAppRegister .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;
}

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

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

/* Resend Button Disabled State */
#divAppRegister #btnResendRegOtp.disabled {
    background-color: #3f4656;
    color: #888b90;
    cursor: not-allowed;
    opacity: 0.7;
}