@charset "utf-8";
/* CSS Document */
	* {margin:0; padding:0; outline:none;}
	:root {
		--progBarHeight :4px;
		--transition: all .75s ease;
		--purple: #990099;
	}
	
	.body-style {
		opacity:0;
		background-position:top;
		background-size:cover;
		background: rgba(0,0,51,1);
		background: url("../images/Quantum-Clearing-Method_bg.jpg") top center no-repeat;
		background-image: linear-gradient(315deg, rgba(51,0,102,.8), rgba(0,0,0,.1)), url("../images/Quantum-Clearing-Method_bg.jpg");
		text-rendering: auto;}
		
	.fade-in {
	  animation: fadeIn .75s ease-in forwards;
	  opacity: 0;
	}
	
	@keyframes fadeIn {
	  0% {
		opacity: 0;
	  }
	  100% {
		opacity: 1;
	  }
	}
	.progress-container, #proBar, #header, #status-bar, #message  #nav, #mainBody, #wrapper, #footer {max-width:100vw; overflow-x:hidden;}
/* progress Bar */
	.progress-container {
		position: fixed;
		top: 0;
		z-index: 200;
		width: 100%;
		background-color: #ccc;
		height: var(--progBarHeight);
		display: block;
	}
	.progress-bar {
		width: 0%;
		display: block;
		height: inherit;
	}
	#status-bar {
		width: 100%;
		padding:10px 0;
		height:auto;
	}

	#message {display:flex; padding:2px 10px; height:auto;}
	#subStatus, #modules, #charStats {text-align:center; line-height:1.4em; height:auto;}

	#header, #sp-header {background-color:rgba(51,0,153,.05); position:relative; height:auto; transition:background-color .1s ease, height .75s ease, padding .75s ease, top .75s ease; padding:25px 0; z-index:500;}
	#header.sticky {background-color:rgba(0,0,0,1); position:fixed; top:0; width:100%; height:auto; padding:5px 0;}
	#header.sticky.hide {top:-100px !important;}
	.spacer {height:100px;}
	
/* menu */
	nav {text-align:right; }
	nav .navbar-nav {position:relative; float:right;}
	.navbar-expand-lg {justify-content: flex-end !important;}
	.navbar-brand img {width:80%; height:auto; transition:all .75s ease;}
	.sticky .navbar-brand img {width:50%; height:auto; }
	button.navbar-toggler {background-color:#333;}
	.navbar-toggler-icon {background-color:red;}
	.navbar-nav li {position:relative;}
	.navbar-nav li:not(:last-child) {margin-right:40px;}
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right: 0;
		padding-left: 0;
	}
	.nav-item a {
		font-family:"Arial Narrow", Arial, sans-serif;
		font-weight:500;
		font-size:1.1em;
		letter-spacing: 0.5px;
		color:#bbb;
		background-color:transparent;
		padding:2px 0;
		text-transform:uppercase;
		margin:5px auto;
		border:2px solid transparent;
		transition: all .75s ease;}
	.nav-item a:hover {color:white;}
	.nav-item a.disabled {opacity:.5; border:2px solid transparent; color:#ddd;}
	.nav-item.active a {color:white !important;}
	.nav-item.active a:before {
		content: "";
		position: absolute;
		top: 85%;
		width: 100%;
		left: 0;
		height: 3px;
		border-radius: 2px;
		background: var(--purple);
		  /*background: linear-gradient(90deg, rgba(51,153,204,1) 0%, rgba(51,153,204,1) 30%, rgba(102,102,153,1) 70%);
*/	}
	.nav-item a.highlight {background-color: var(--purple); padding:2px 10px !important; color:#eee;}
	.nav-item a.highlight:hover {color:white; border:2px solid white;}
	.dropdown-menu.show {z-index:100 !important;}
	
/* main */
	#mainBody {max-height:650px; }
	#main .container { color:white;padding:30px 60px; z-index:100;}
	#wrapper {position:relative; background-color:grey; max-width:100vw; overflow-x:hidden; }
	#panel-main {position:relative; max-width:100%; margin:auto; z-index:1; overflow-x:none; overflow-y:scroll; max-height:650px;}
	#panel-left, #panel-main, #panel-right {transition:all .75s ease; min-height:100px;  }
	#panel-left, #panel-right {position:absolute; top:0; width:320px; max-width:320px; z-index:50;}
	#panel-left {left:-320px;}
	#panel-right {right:-320px;}
	#panel-left.show {left:0px; z-index:150;}
	#panel-right.show {right:0px; z-index:150;}
	#panel-left .panel-inner, #panel-right .panel-inner {opacity:1; transition: var(--transition);}
	#panel-left:hover .panel-inner, #panel-right:hover .panel-inner {opacity:1;}
	.panel-inner {max-height:645px; overflow-y:scroll;}
	.arrow-left-icon {mask: url(../images/arrow-alt-circle-left-solid.svg); }
	.arrow-right-icon {mask: url(../images/arrow-alt-circle-right-solid.svg);}
	.icon {
		position:relative;
		display: inline-block;
		width: 100%;
		height:100%;
		mask-size: cover;
		z-index:200;
		transition: var(--transition);
	}
	.icon.arrow-left-icon, .icon.arrow-right-icon { transform:rotate(180deg);}
	.show .icon.arrow-left-icon, .show .icon.arrow-right-icon {transform:rotate(0deg);}
	.slide {position:absolute; top:5px; width:30px; height:30px; z-index:100;}
	.show #slide-left {right:5px;}
	.show #slide-right {left:5px;}
	#slide-left {right:-21px; transition: var(--transition);}
	#slide-right {left:-21px; transition: var(--transition);}
	.panel-inner h2 {display:block; padding:3px 0 3px; text-transform:uppercase;}  

	

/* content */
	#mainWrapper {text-align:justify; margin:50px 25px;}
	.v1, .v2, .level1 .v2 {height:0; width:100%; font-size:0%; opacity:0; visibility:hidden; transition: all .7s ease;}
	.level1 .v1, .level2 .v1, .level2 .v2 {height:auto; width:auto; font-size:100%; opacity:1; visibility:visible;}
	a {color:var(--purple);}
	a:hover {color:#C9F;}
	

/* Settings */
	.btn-group[aria-label="themeGroup"] div {width:50% !important; padding:0 5px !important;}
	a.theme.btn, a.theme.btn.active, a.theme.btn:focus {display:inline-block; width:100% !important;}
	a.theme.btn.disabled {opacity:.3;}
	#categoryMenu {display:block; width:100%;}
	#panel-right .setting-item, #categoryMenu div {
		line-height:1.5;
		padding: .375rem .75rem;
		font-size: 1rem;
		font-weight:bold;
		margin:5px;
		text-transform:uppercase;
		width:auto;
	}
  
	.capitalize {text-transform:capitalize;}
	.noCapitals {text-transform:lowercase;}
	
/* footer */
	#footer {background-color:#000; color:white; padding:20px 0 !important;}
	.copyright, .credit {font-weight:600; color:white; text-align:center;}
	
	
/* global class */
	a.highlight {
		-webkit-border-radius: 5px;
		-moz-border-radius:5px;
		border-radius:5px;}
	#header.sticky, #footer {box-shadow: 0 0 25px rgba(0,0,255,.85);}
  
@media screen and (min-width: 576px) {
	#panel-main {max-width:90%;}
	#panel-left, #panel-right {position:absolute; top:0; width:320px; z-index:50;}
	#panel-left {left:-315px;}
	#panel-right {right:-315px;}
	#slide-left {right:-35px;}
	#slide-right {left:-35px;}

}

@media screen and (min-width: 768px) {
	#panel-main {max-width:80%;}
	#mainWrapper {margin: 50px 40px;}
/*  #subStatus, #charStats {
	display: inline-block;
	width: 50%;
  }
  #modules {display:block; width:100%;}
	#subStatus {float:left; text-align: left;}
	#modules {float:none; text-align:center;}
	#charStats {float:right; text-align:right;}	*/
	
}

@media screen and (min-width: 992px) {
	
	#mainWrapper {margin: 50px 80px;}
	#subStatus {text-align:left;}
	#charStats {text-align:right;}
	/*#subStatus, #modules, #charStats {
	  display: inline-block;
	  width: 33%;
	}
	  #subStatus {text-align:left;}
	  #modules {text-align:center;}
	  #charStats { text-align:right;}	
*/	
	.copyright {text-align:left;}
	.credit {text-align:right;}

	
}

@media screen and (min-width: 1200px) {
	#panel-main {max-width:58%;}
	#mainWrapper {margin: 50px 80px;}
	
	
}

@media screen and (min-width: 1300px) {
	#panel-left .panel-inner, #panel-right .panel-inner {opacity:.3;}
	
}