:root {
        --body-bkg:  #2194D2;
        --body-text: #ffffff;
        --form-bkg:  #f2f6f8;
        --form-text: #000000;
        --press-bkg:  #1184C2;
    }

    html, body					{font-size:11pt; background:var(--body-bkg) !important; color:var(--body-text) !important; padding:0px !important; box-sizing:border-box;}
	body						{overflow:hidden;}

	body>.flex>div				{width:50%; flex-grow:0; flex-shrink:0; height:100vh;}
	body>.flex>div.pnl-signin	{position:relative; padding:20vh 15vw; background-color:var(--form-bkg); color:var(--form-text); z-index:1;}
	body>.flex>div.pnl-info		{position:relative; padding:20vh 15vw;}


	.lori-logo					{height:16px; display:inline-block; margin-bottom:-3px; margin-right:2px;}
	.bkg-icon					{position:absolute; display:inline-block; opacity:0.07; color:#000; font-size:230px; bottom:20px; left:-50px; transform: rotate(-10deg); z-index:-5;}
	.bkg-image					{position:absolute; left:-3vw; bottom:2vh; width:45vw; opacity:0.4;}

	.lbl-welcome				{opacity:0.8; letter-spacing:1.7px;}
	.lbl-app-name				{font-size:3rem; font-weight:bold; letter-spacing:-2px; margin-top:-6px;}

	.pnl-poweredby				{position:absolute; top:calc(100vh - 55px); left:0px; width:100%; text-align:center; z-index:2;}
	.img-poweredby				{height:26px; background-color:#fff; padding:6px 20px; border-radius:20px; display:inline-block;}
	.lbl-copyright				{font-size:0.7rem; color:#555; mix-blend-mode: multiply; z-index:2;}


	.pnl-google-account				{width:100%; max-width:300px; padding:10px 0 80px 0;}
	.pnl-google-account.expanded	{padding:30px 0 50px 0;}
	.pnl-google-account	.btn-google	{text-decoration:none; width:100%; text-align:center; padding:10px 25px; 
									 background-color:var(--body-bkg); color:var(--body-text); border:none !important; border-radius:6px;}

	body>.flex>div.pnl-signin form	{width:100%; max-width:300px;}
	.pnl-expandable					{padding:0; height:0px; overflow:hidden;}
	.pnl-expandable.expanded		{padding:10px 0 0 0; height:300px;}

	.btn-expand.expanded			{transform:rotate(180deg); display:none;}

	.form-group						{display: block; position: relative; margin-bottom: 7px;}	
	.form-control					{font-weight:700; color:#000; width:100%; padding:9px 12px; margin-top:2px; border-radius:4px; border:1px solid #bbb; 
									 background-color: #ffffff; -webkit-appearance: none; -moz-appearance: none; }

	.form-control.icon-left			{padding-left: 36px;}
	.form-control.icon-left+span.fa {color: #ccc;position: absolute;left: 10px;bottom: 9px;}

	.btn-show-password, 
	.btn-hide-password				{color: #aaa; position: absolute; right: 10px; bottom: 9px; }

	#pnl-loading #loading-text		{color:#222 !important;}


/* ------------------------------------------------------------------------------------ */
	.pnl-remember										{margin:15px 0; line-height:20px;}
	 input[type=checkbox].form-control.fa				{position:relative; border-width:1px; border-color:#888; border-radius:3px; max-width:20px; padding:0; margin:0; 
														 width:20px; height:20px; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased;}
	 input[type=checkbox].form-control.fa+span			{display:inline-block; line-height:20px;}

	 input[type=checkbox].form-control.fa:after			{position:absolute; top:0px; left:0px; display:inline-block; font-weight:bold; content:" "; text-align:center; 
														 font-size:12pt; color:#000; width:18px; height:18px; line-height:18px !important;}
	 input[type=checkbox].form-control.fa:focus:after	{color:#0077dd; }
	 input[type=checkbox].form-control.fa:checked:after	{font: normal normal normal 14px/1 FontAwesome; ; content:"\f00c"; font-weight:bold; display:inline-block; }

	 input[type=submit]:focus,
	 .google-signin:focus,
	 .form-control:focus			{border-color:#389FED !important; outline:0;
									-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) !important;
									 box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) !important}


/* ------------------------------------------------------------------------------------ */
	.btn-signin								{display:inline-block; width:100%; padding:10px 20px; background-color:#000; color:#fff; border:none; border-radius:6px;}

	.lnk-forgot								{padding-bottom:2px; border-bottom:1px dotted #888;}

	@media all and (min-width:500px) {
		.lbl-qa, .lbl-staging				{position:absolute; top:100px; left:calc(50% - 20px); transform:rotate(90deg); line-height:20px; font-size:0.8rem; padding:5px 10px; 
											 background-color:#b90000; color:#fff; border-radius:8px 8px 0 0; z-index:20;}
	}

	@media all and (max-width:500px) {
		body								{overflow:hidden;}
		body>.flex							{flex-direction:column;}
		body>.flex>div						{width:100%; flex-grow:0; flex-shrink:0;}
		body>.flex>div.pnl-signin			{height:calc(100vh - 120px); padding:4vh 10vw 0px 10vw;}
		body>.flex>div.pnl-info				{position:relative; height:120px; padding:4vh 10vw 6vh 10vw;} 
		body>.flex>div.pnl-info hr			{position:absolute; left:0px; bottom:0px; width:100%; height:16px; margin:0; padding:0; 
											 background-color:var(--form-bkg); border:none; border-radius:16px 16px 0 0;} 

		.bkg-image							{position:absolute; top:-30px; right:-30px; left:initial; width:auto; height:30vh; transform:scaleX(-1); opacity:0.6;}

		.lbl-app-name						{font-size:2.0rem; letter-spacing:-1px; }
		.pnl-poweredby						{top:calc(100vh - 52px); }
		.img-poweredby						{height:22px; padding:5px 20px; }

		.pnl-google-account,
		body>.flex>div.pnl-signin form		{width:100%; max-width:100%; padding-right:0}

		.lbl-qa, .lbl-staging				{position:absolute; top:75px; right:40px; line-height:20px; font-size:0.8rem; padding:5px 10px; background-color:#b90000; color:#fff; border-radius:8px 8px 0 0;}
	}

	@media all and (min-width:501px) and (max-width:1400px) {
		body>.flex>div.pnl-info				{padding:20vh 12vw;}
		body>.flex>div.pnl-signin			{padding:20vh 12vw;}
	}