/*****************************************************************/
/*					    	Variables							 */
/*****************************************************************/
:root {
	--clr-main:					navy;
	--clr-tint:					lightblue;
	--clr-text:					black;
	--clr-text-medium:			gray;
	--nav-fontsize:				10pt;
	--clr-hamburger:			white;
	--clr-header:				#ccc2b5;
	--clr-timeslot:				#f0f0f0;
	--timeslot-font-size:		9pt;
	--clr-invitation:			#63862c;	/* Color used to indicate a One-on-One time slot is associated with an Invitation. */
	--clr-one-on-one:			#81ad3c;	/* Color used to indicate a time slot is for a confirmed One-on-One meeting. */
	--selected-item-opacity:	0.6;		/* Opacity used to indicate a div is 'hover', 'focus', 'selected'. */
}

/*****************************************************************/
/*						Standard Stuff							 */
/*****************************************************************/

*, *:after, *:before {
	-webkit-box-sizing:	border-box;
	-moz-box-sizing:	border-box;
	box-sizing:			border-box;
}

body {
	margin-top: 0;
}

/*****************************************************************/
/*						Navigation Bar							 */
/*****************************************************************/
/* Get the header and the nav bar to stick to the top of the page. */
div.header-container {
	position: sticky;
	top: 0;
	z-index: 1500;
}

/* By default the Please Wait icon is hidden. */
.please-wait {
	visibility: hidden;
}

/* Define the header to be displayed above (next to) the nav. */
header {
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  column-gap: 0.5em;
  padding: 6px;
  background-color: var(--clr-header);
}

/* Format the header text. */
header .page-header {
  color: var(--clr-text);
  font-weight: bold;
  font-size: 14pt;
  Aflex: 1;
}

header div.loggedin-companyname {
	flex-grow: 1;
	font-size: 1em;
	Atext-align: center;
	font-weight: bold;
	flex-grow: 1;
}

/* Format the name of the logged in client. */
header div.loggedin-clientname {
  font-size: 0.85em;
  font-weight: normal;
  margin-left: auto;
}

header div.showclientlist {
	Aflex: 1;
	text-align: right;
	margin-left: auto;
}

.navbar.vertical-nav header div.loggedin-username,
.navbar.vertical-nav header div.loggedin-companyname,
.navbar.vertical-nav header div.loggedin-clientname {
  display: none;
}

/* Format the name of the logged in user. */
.loggedin-username {
  font-size: 0.85em;
  font-weight: normal;
}

nav .loggedin-username {
  font-size: 1.05em;
  font-weight: normal;
  margin-left: auto;
}

/* Format the name of the logged in client. */
div.loggedin-username,
div.loggedin-clientname {
  font-size: 1.05em;
  font-weight: normal;
  Amargin-left: auto;
  flex: 1;
}

/* Format the name of the logged in user and client. */
nav .loggedin-username,
nav .loggedin-clientname {
  margin-left: unset;
}

/* Adjust the placement of the logout link to be at the right edge of the window. */
header .logout-user {
	padding-right: 0.5em;
	padding-left: 2.0em;
	font-size: 0.8em;
}

header .logout-user a:visited {
	color: inherit;
}

.navbar nav .logout-user {
	display: none;
}

.navbar.vertical-nav nav .logout-user {
	display: flex;
}

.navbar.vertical-nav header .logout-user {
	display: none;
}

/* Adjust the placement of the login link to be at the right edge of the window. */
header .login-user {
	padding-right: 0.5em;
	padding-left: 2.0em;
	font-size: 0.8em;
}

header .login-user a:visited {
	color: inherit;
}

.navbar nav .login-user {
	display: none;
}

.navbar.vertical-nav nav .login-user {
	display: flex;
}

.navbar.vertical-nav header .login-user {
	display: none;
}

.navbar.vertical-nav navcontent nav div:nth-child(last) {
	padding-bottom: 0.25em;
}

/* Define the hamburger. */
hamburger {
  background: transparent;
  width: max-content;
  padding: 2px;
  display: none;
  Aflex: 1;
}

/* Construction of the hamburger */
hamburger label {
  display: grid;
  row-gap: 3px;
  width: max-content;
}

/* Construction of the internals of the hamburger */
hamburger label span {
  background: var(--clr-hamburger);
  height: 3px;
  width: 1.5em;
  display: block;
  border-radius: 3px;
  position: relative;
  padding-bottom: 0px;
}

/* Display the hamburger when showing the vertical nav. */
.navbar.vertical-nav hamburger {
  display: block;
}

/* Do not display the hamburger when showing the horizontal nav. */
hamburger {
  display: none;
}

/* Define the root of the nav. */
.navbar nav {
	display: flex;
	color: white;
	Agrid-template-columns: max-content;
	align-items: center;
	row-gap: 0.35em;
	font-size: var(--nav-fontsize);
	font-weight: bold;
	background-color: var(--clr-main);
	Awidth: max-content;
	Agrid-auto-rows: max-content;
	flex-direction: row;
}

.navbar nav a {
	font-size: var(--nav-fontsize);
}

.navbar.vertical-nav nav {
	align-items: start;
	width: max-content;
	flex-direction: column;
	font-weight: normal;
}

.navbar.vertical-nav nav > div {
	border: none;
	width: 100%;
	align-items: start;
}

navcontent {
  position: relative;
}

/* Display the vertical nav. */
.navbar.vertical-nav navcontent nav {
	opacity: 1;
	transform: scale(0, 1);
	transition: transform var(--animation-time-navbar) ease-in-out;
	AAAtransition: transform 400ms ease-in-out;
	transform-origin: left;
	position: absolute;
	padding: .25em;
	padding-right: 0.5em;
	padding-left: 0.5em;
    min-height: 88vh;
	flex-direction: column;
}

.navbar.vertical-nav navcontent nav .nav-item {
	padding-left: 0;
	padding-right: 0;
}

.navbar.vertical-nav navcontent nav .nav-item img {
	display: none;
}

.navbar.vertical-nav navcontent nav div.event-logo {
	padding-bottom: .25em;
}

.navbar.vertical-nav navcontent nav img.event-logo {
	max-width: 180px;
}

/* By default, hide the nav background. */
.navbar.vertical-nav navcontent .nav-background {
	background: blue;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 140px;
	transform: scale(0, 1);
	transition: transform var(--animation-time-navbar) ease-in-out;
	transform-origin: left;
	position: absolute;
	padding: .25em;
	padding-left: .5em;
}

/* Setup the nav item divs so we can display the img and the link. */
nav > div {
	display: flex;
	align-items: center;
	column-gap: 0.25em;
	border-right: 1px solid var(--clr-tint);
	min-height: 2.75em;
}

nav > div a {
	cursor:	pointer;
	Afont-size: var(--nav-fontsize);
	Afont-weight: bold;
}

navcontent nav .nav-item {
	Adisplay: grid;
	display: flex;
	align-items: center;
    column-gap: .2em;
	white-space: nowrap;
	padding-left: 1em;
	padding-right: 1em;
}

.navbar.vertical-nav nav > div {
	border-right: none;
	min-height: 1.25em;
}

navcontent nav .nav-item {
	Agrid-template-columns: max-content 1fr auto;
}

navcontent nav .nav-item .nav-img {
	Aheight: 3em;
}

.navbar navcontent nav div.refresh-schedule {
	display: none;
}

.navbar.vertical-nav navcontent nav div.refresh-schedule {
	display: flex;
}

.navbar.vertical-nav navcontent nav .nav-item .nav-img {
	display: none;
}

navcontent nav .nav-item .nav-img img {
	height: 2.0em;
}

.navbar.vertical-nav navcontent nav .nav-item .nav-arrow {
	display: block;
	padding-left: 2em;
	text-align: right;
	flex: 1;
}

navcontent nav .nav-item .nav-arrow {
	display: none;
}

/* Move the Client name to the bottom of the Client Info section. */
.navbar.vertical-nav navcontent nav .loggedin-user-info {
	margin-top: auto;
}

/* Customize the links in the nav items. */
nav div a {
	color: white;
	text-decoration: none;
	flex-grow: 1;
}

/* Do not display the .nav-toggle checkbox. */
.nav-toggle {
  display: none;
}

/* Display the vertical nav when the .nav-toggle checkbox is checked. */
.nav-toggle:checked ~ div nav {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform var(--animation-time-navbar) ease-in-out;
  transform-origin: left;
}

.navbar.vertical-nav navcontent .nav-toggle:checked ~ .nav-background {
	opacity: 1;
	transform: scale(1, 1);
	transition: transform var(--animation-time-navbar) ease-in-out;
	transform-origin: left;
}

navcontent .current_client_info {
	display: none;
	padding: 0;
	margin: 0;
	border: none;
}

.navbar.vertical-nav navcontent .current_client_info {
	display: flex;
	min-height: 160px;
	background: var(--clr-main);
	border-bottom: 1px solid white;
	padding-bottom: 4px;
	margin-top: 4px;
	margin-bottom: 4px;
	align-items: unset;
	flex-direction: column;
	row-gap: 0.5em;
}

.navbar.vertical-nav navcontent div.current_client_info div:hover,
.navbar.vertical-nav navcontent div.current_client_info:hover {
	background: unset;
	opacity: 1;
}

.navbar.vertical-nav navcontent .current_user_info {
	Amin-height: 200px;
	background: var(--clr-main);
	border-bottom: 1px solid white;
	padding-bottom: 4px;
	margin-top: 14px;
	margin-bottom: 4px;
	align-items: unset;
	flex-direction: column;
	row-gap: 0.5em;
}

/* Fully display the nav when in horizontal view. */
navcontent nav {
  opacity: 1;
  transform: scale(1, 1);
}

/* Place a divider between each nav item: left border on odd items except the first item. */
Anavcontent.horizontal-nav nav >  div:nth-child(1n + 2) {
	border-left: 2px solid var(--clr-tint);
	border-right: 2px solid var(--clr-tint);
}

navcontent nav > div a {
	AAApadding-left: 4px;
	AAApadding-right: 4px;
}
/* Hovering over a nav item alters the appearance of the nav item. */
navcontent nav > div:hover {
	background-color: var(--clr-tint);
	Aopacity: 0.6;
}

navcontent nav > div a:hover {
	Abackground-color: var(--clr-tint);
	opacity: 1 !important;
	color: white !important;
}

/* Make the horizontal nav fill the width of the window. */
navcontent.horizontal-nav div {
  width: 100%;
  background-color: var(--clr-main);
}

.navbar.vertical-nav navcontent .nav-footer {
	margin-top:		auto;
}

nav .nav-with-submenu .nav-item {
	Afont-weight: bold;
}

nav .nav-with-submenu:hover,
nav .nav-with-submenu:focus
 {
	opacity: 1;
}

nav .nav-with-submenu .nav-item {
    Apadding-left: 4px;
    Apadding-right: 4px;
	cursor: pointer;
}

.navbar.vertical-nav nav .nav-with-submenu .nav-item {
	grid-template-columns: max-content 1fr;
	Apadding-left: 4px;
	Apadding-right: 4px;
}

nav .nav-submenu {
	display: none;
	position: absolute;
	top: 100%;
	background: var(--clr-main);
    flex-direction: column;
}

.navbar.vertical-nav nav .nav-submenu {
	position: inherit;
	top: unset;
}

nav .nav-submenu > div {
	border-bottom: 1px solid var(--clr-tint);
	padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.25em;
    padding-right: 0.5em;}

nav .nav-submenu > div:nth-child(first) {
	border-top: 1px solid var(--clr-tint);
}

.navbar.vertical-nav nav .nav-submenu > div {
	border-bottom: none;
	padding: 0.2em;
	padding-left: 0.75em;
}

nav .nav-submenu > div:hover {
	background: var(--clr-tint);
}

Anav .nav-submenu-toggle:checked ~ .nav-submenu {
	display: flex;
	padding-top: 0;
}

nav .nav-with-submenu.expanded .nav-submenu {
	display: flex;
	padding-top: 0;
}

.Anavbar.vertical-nav nav .nav-submenu-toggle:checked ~ .nav-submenu {
	padding-top: 0.5em;
}

.navbar.vertical-nav nav .nav-with-submenu.expanded .nav-submenu {
	padding-top: 0.5em;
}


nav .nav-with-submenu.expanded {
	background: var(--clr-main);
}

nav .nav-with-submenu.expanded .nav-item {
	flex-wrap: wrap;
}

.navbar.vertical-nav nav .nav-with-submenu.expanded .nav-submenu {
	width: 100%;
}

nav .nav-downarrow {
	text-align: right;
	flex: 1;
}

nav .nav-submenu-item .nav-item {
	display: inline-flex;
	column-gap: 1em;
}

nav .nav-submenu-item .nav-img {
	width: 1.5em;

}

nav .credits {
	display: none;
}

.credits:hover {
	background: inherit;
}

.navbar.vertical-nav nav .credits {
	display: inherit;
	align-items: center;
	margin-bottom: 4px;
}

.navbar.vertical-nav nav .credits a {
	flex-grow: 0;
	padding: 0;
}

.navbar.vertical-nav navcontent nav .credits .nav-item .nav-img,
.navbar.vertical-nav navcontent nav .credits .nav-item .nav-img img {
	display: inherit;
}

nav .copyright {
	margin-top: 0;
	text-transform: none;
	white-space: nowrap;
	flex: 1;
	font-size: 7pt;
	text-align: right;
}

nav .copyright a {
	font-size: 7pt;
	padding-left: 0;
	padding-right: 0;
}

.navbar nav .current_page {
	background-color: var(--clr-tint);
}

/* The Tracks that a Client is in for the Event. */
.navbar .event-tracks {
	font-size: 0.6em;
	font-weight: normal;
}