@charset "utf-8";

/*********************************
* Guidelines
**********************************/
/*
tag {

	// Position & layout
		-display
		-visibility
		-position
		-top, bottom, left right
		-float
		-flex, flex-direction, align-items, justify-items, gap
		-overflow
		-z-index
		-clear

	// Box model / dimensions
		-width
		-max-width
		-height
		-max-height
		-margin
		-padding
		-box-sizing
		-content

	// Color / effects
		-border
		-outline
		-border-radius
		-background
		-box-shadow
		-opacity

	// Font
		-font
		-color
		-text
		-line-height
		-white-space
		-letter-spacing
		-break-word

	// Animation
		-transition
		-transform
		-animate

	// Other
		-cursor
		-list-*
}
*/

/*********************************
* Variables
**********************************/


/*********************************
* IDs
**********************************/

#header {
	display: inline-block;
	position: sticky;
	z-index: 1000; /* above qTips 15000 */
	min-width: 100%; /* Using 100vw causes a horizontal scrollbar to appear */
	left: 0;
	top: 0;
	right: 0;
}

#header a {
	text-decoration: none;
}

#navigation {
	display: flex;
	justify-content: flex-start;
	position: relative;

	height: 56px;
	padding: 0px var(--ppw-layout-default-padding-x);

	background-color: var(--ppw-header-bg);

	color: var(--ppw-header-color);
}

#logo {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 1 auto;

	height: 100%;
	margin-right: 24px;

	color: white;
	font-weight: 500;
	font-size: 20px;
}

#logo > span {
	color: rgba(255,255,255,0.65);
}

/*********************************
* NAV > TABS
**********************************/

#tabs {
	display: flex;
	flex: 0 1 auto;
	justify-content: flex-start;
	align-items: center;
	z-index: 1010; /* Above qTip */
	bottom: 0px;
	margin: 0px;

	height: 100%;
	padding: 0px;

	font-size: 14px;

	list-style-type: none;
}

#tabs > li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex: 0 1 auto;
	height: 100%;
}

#tabs > li > a {
	display: flex;
	align-items: center;

	padding-right: 12px;
	padding-left: 12px;

	color: var(--ppw-header-color);
	white-space: nowrap;
	line-height: 32px;
}

#tabs > li > a > span {
	margin-right: 6px;
}

#tabs > li.active > a,
#tabs > li:hover > a {
	color: var(--ppw-header-hover-color);
}

#tabs > li.active,
#tabs > li:hover {
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%);
}

#tabs > li.active {
	border-bottom: 4px solid var(--ppw-submenu-bg);
}

#tabs > li > a.disabled {
	opacity: .5;
}

#tabs > li:hover > .menu-down { /* Display the dropdown on hover */
	display: block;
}

/*********************************
* NAV > TAB > MENUS
**********************************/

#tabs .menu-down,
#tabs .menu-right {
	position: absolute;
	display: none;
	background-color: var(--ppw-submenu-bg);
	padding: 8px 0px 8px 0px;
	border-radius: 4px;

	/* SHADOW */
	-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:    0px 2px 3px rgba(0, 0, 0, 0.5);
	box-shadow:         0px 2px 3px rgba(0, 0, 0, 0.5);
}

#tabs .menu-down {
	top: 100%;
}

#tabs .menu-right {
	left: 100%;
	top: 0;
}

/*********************************
* NAV > TAB > MEGA MENU
**********************************/

#tabs ul.recently-viewed {
	--ppw-list-chevron-icon-right: 'arrow_right';
	--ppw-list-chevron-icon-color: rgba(0, 0, 0, 0.65);
}

#tabs ul.recently-viewed > li:hover > .menu-right { /* Display the dropdown on hover */
	display: block;
}

#tabs .menu li:hover {
	background: rgba(0, 0, 0, 0.08); /* var(--ppw-row-highlight-bg); */
	color: var(--ppw-row-highlight-color);
}

#tabs .menu a {
	white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}

#tabs .column-heading {
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	padding: 6px 16px 6px 16px;
	color: rgba(0, 0, 0, 0.65);
}

#tabs .two-column {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

#tabs .two-column > .column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
	white-space: nowrap;
}

#tabs .two-column > .column + .column {
	border-left: rgba(0, 0, 0, 0.12) 1px solid;
}

/*********************************
* NAV > STATUS
**********************************/

#status {
	display: flex;
	align-items: center;
	gap: 16px;

	padding: 0px;
	height: 100%;
	margin: 0 0 0 auto;

	color: #FFF;

	list-style-type: none;
}

#status li {
	display: flex;
	align-items: center;
	position: relative;
	flex: 0 1 auto;

	line-height: 1;
	white-space: nowrap;
}

#status li a {
	vertical-align: middle;
	position: relative;
}

#status span[data-icon] {
	font-size: 24px;
	color: rgba(255, 255, 255, 0.7);
}

/* Background circle default state */
#status li span[data-icon]::after {
	content: '';

	background-color: rgba(255, 255, 255, 0);
	display: inline-block;
	height: 1.5em;
	width: 1.5em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(.25,.25);
	border-radius: 50%;
	transition: all .25s;
}

#status span[data-icon]:hover {
	color: rgba(255, 255, 255, 1);
}

/* Background circle fade in + grow on hover */
#status li span[data-icon]:hover::after {
	background-color: rgba(255, 255, 255, .15);
	transform: translate(-50%, -50%) scale(1,1);
}

#status #profile_icon {
	font-size: 24px;
}

#status .status_count {
	position: absolute;
	top: -4px;
	right: -4px;
	
	padding-top: 1px;
	padding-right: 3px;
	padding-bottom: 1px;
	padding-left: 3px;

	border-radius: 8px;
	background-color: #AE0000;

	color: #FFF;
	font-size: 10px;
	/* font-weight: 600; */ /* Semi-Bold */
	line-height: 10px;
}

#user_full_name {
	margin-right: 8px;
	vertical-align: middle;
}

#profile-options {
	margin: 0;
	padding: 0;

	list-style-type: none;
}

#profile-options > li {
	padding: 12px;
	font-size: 14px;
}

/* #profile-options > li:hover {
	background-color: #b6d6fb;
} */

#profile-options > li > a {
	color: #285497;
}


/*********************************
* SUBNAV
**********************************/

#submenu {
	position: relative;
	overflow-y: hidden;	

	min-height: 6px;
	height: auto !important;
	padding: 0px var(--ppw-layout-default-padding-x);

	background-color: var(--ppw-submenu-bg);
	border-bottom: 1px solid var(--ppw-submenu-bottom-border-color);
}

#submenu:empty {
	display: none;
}

#submenu ul {
	display: flex;

	margin: 0;
	padding: 0;

	font-size: 14px;

	list-style-type: none;
}
#submenu li {
	flex: 0 1 auto;
	padding-right: 20px;
	text-wrap: nowrap;
}

#submenu li a {
	display: block;

	height: 30px;

	line-height: 32px;
	vertical-align: middle;
	color: var(--ppw-submenu-color);
}

#submenu li.active a {
	font-weight: var(--ppw-submenu-active-weight); /* Semi-Bold */
}

#submenu li.active a, 
#submenu li:hover a {
	color: var(--ppw-submenu-hover-color);
}

/*********************************
* TOOLBAR
**********************************/

#toolbar {
	display: flex;
	align-items: center;
	overflow: hidden;

	padding: 2px var(--ppw-layout-default-padding-x);

	border-bottom: 1px solid var(--ppw-toolbar-bottom-border-color);
	background-color: var(--ppw-toolbar-bg);
	
}

#toolbar:empty {
	display: none;
}

#toolbar .mtl-switch label {
	font-size: 12px;
	font-weight: 500;
}

#toolbar .mtl-switch label .lever {
	margin: 0px 4px;
}

/*********************************
* INFOBAR
**********************************/

#infobar {
	clear: both;
	overflow: hidden;
	
	min-height: 32px;
	padding: 0px var(--ppw-layout-default-padding-x);

	background-color: var(--ppw-infobar-bg);
	border-bottom: var(--ppw-infobar-bottom-border-width) solid var(--ppw-infobar-bottom-border-color);

	font-size: 12px;
	color: var(--ppw-infobar-color);
	vertical-align: middle;
	line-height: 32px;
}

#infobar .historyLink {
	font-size: 24px;
	vertical-align: middle;

	cursor: pointer;
}


/*********************************
* PROGRESS BAR
**********************************/
/* Source: https://codepen.io/tmac/pen/QgVRKb */

#global-progress {
	position: absolute;
}

.simple-progress-bar {
	height: 4px;
	background-color: rgba(5, 114, 206, 0.2);
	width: 100%;
	overflow: hidden;
}

.simple-progress-bar-value {
	width: 100%;
	height: 100%;
	background-color: rgb(5, 114, 206);
	animation: indeterminateAnimation 1s infinite linear;
	transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
	0% {
		transform:  translateX(0) scaleX(0);
	}
	40% {
		transform:  translateX(0) scaleX(0.4);
	}
	100% {
		transform:  translateX(100%) scaleX(0.5);
	}
}