/**
 * CSS for Timesheets App wrapper template
 */

/* default links */
a {
	color: rgb(4,90,163);
	text-decoration: none;
	border-bottom: 1px dotted rgb(4,90,163);
}
	a:hover {
		color: rgb(5,66,119);
		text-decoration: none;
		border-bottom: 1px solid rgb(5,66,119);
	}

/* body */
body#ViewWrapper-Timesheets {
	color: white;
}

	/* hide noshell logo container in shell mode */
	body#ViewWrapper-Timesheets:not(.noshell) > h1.noshell {
		display: none;
	}

	/* show noshell logo in noshell mode */
	body#ViewWrapper-Timesheets.noshell > h1.noshell {
		display: block;
		position: fixed;
		z-index: 8;
		left: 0px;
		top: 0px;
		width: 100vw;
		height: 40px;
		background-color: rgb(4,90,163);
	}
		/* logo image */
		body#ViewWrapper-Timesheets.noshell > h1.noshell > img {
			display: inline-block;
			position: relative;
			height: 60%;
			width: auto;
			margin: 8px;
		}

	/* notice container in noshell mode */
	body#ViewWrapper-Timesheets.noshell > main .notice {
		margin-top: 75px;
	}

	/* primary blocks */
	body#ViewWrapper-Timesheets > header,
	body#ViewWrapper-Timesheets > footer {
		display: block;
	}

		/* header (sidebar) */
		body#ViewWrapper-Timesheets > header {
			position: fixed;
			top: 0px;
			left: 0px;

			width: 175px;
			height: 100vh;

			/* box-shadow: -35px 0px 50px rgba(0,0,0,.2) inset; */
			z-index: 11;
			/* border-right: 1px solid white; */

			background-color: rgb(4,90,163);
			transition: margin 0.25s ease 0s, width 0.25s ease 0s;
		}

			/* hide header when noshell */
			body#ViewWrapper-Timesheets.noshell > header {
				display: none !important;
			}

			/* header collapsed */
			body#ViewWrapper-Timesheets.header-collapsed > header {
				width: 45px;
				z-index: 2;

				transition: width 0.25s ease 0s, z-index 0s linear 0.25s;
			}


			/* any button in header */
			body#ViewWrapper-Timesheets > header button,
			body#ViewWrapper-Timesheets > header label.button {
				display: none;
				position: relative;
				/* width: calc( 100% - 30px ); */
				width: 100%;
				padding: 8px 15px 8px 9px;
				margin-right: 2px;
				vertical-align: middle;

				text-align: left;

				color: white;
				font-size: 14px;
				text-shadow: 1px 1px 0px black;

				background: rgba(0,0,0,.15);
				border: 0px;

				cursor: pointer;
			}

				/* customization for release-report icon */
				body#ViewWrapper-Timesheets > header button[route="release-report"]::before {
					transform: scaleY(-1) scaleX(1.15) rotate(90deg);
				}

				/* button when shown */
				body#ViewWrapper-Timesheets > header button.show {
					display: block;
				}

				/* button when disabled */
				body#ViewWrapper-Timesheets > header button:disabled {
					background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAD0lEQVQImWNgwAQNtBAAAH/pAoFwEqpmAAAAAElFTkSuQmCC);
					cursor: default;
				}
					body#ViewWrapper-Timesheets > header button:disabled > label {
						color: rgba(255,255,255,.35);
						cursor: default;
					}

				/* fa icon */
				body#ViewWrapper-Timesheets > header button::before {
					display: inline-block;
					width: 16px;
					margin-left: -2px;
					text-align: center;
					transition: all 0.25s ease 0s;
				}
					/* fa icon when sidebar collapsed */
					body#ViewWrapper-Timesheets.header-collapsed > header button::before {
						width: 25px;
						margin-left: auto;
					}

				/* button label */
				body#ViewWrapper-Timesheets > header button > label,
				body#ViewWrapper-Timesheets > header label.button > label {
					display: inline-block;
					vertical-align: middle;

					position: absolute;
					left: 0px;
					margin: 1px 0px 0px 31px;

					font-family: Open Sans, Calibri, Arial;
					font-size: 12px;
					font-weight: normal;
					color: white;

					opacity: 1;
					transition: all 0.1s ease .26s;

					cursor: pointer;
				}

					/* button text with header collapsed */
					body#ViewWrapper-Timesheets.header-collapsed > header > nav#toolbar-side > button > label,
					body#ViewWrapper-Timesheets.header-collapsed > header > nav#toolbar-side > label.button > label {
						opacity: 0;
						transition: none;
						width: 0px !important;
						font-size: 0px !important;
					}

					/* rotate release banks list button icon */
					body#ViewWrapper-Timesheets > header > nav#toolbar-side > button[route="release-banks/index"]:before {
						transform: scaleX(-1) rotate(-90deg);
					}

					/* label when contained input checked */
					body#ViewWrapper-Timesheets > header label.button.checked {
						opacity: 1;
						background: rgb(100, 0, 0) !important;
					}

					/* hide inputs inside labels */
					body#ViewWrapper-Timesheets > header label.button input {
						display: none;
					}

				/* hover and active effects */
				body#ViewWrapper-Timesheets > header button:not(:disabled):not(.onpage):hover {
					background: rgba(255,255,255,.25);
				}
				body#ViewWrapper-Timesheets > header button:not(:disabled):not(.onpage):active {
					background: rgba(0,0,0,.15);
				}


			/* title container */
			body#ViewWrapper-Timesheets > header > h1 {
				display: inline-block;
				margin-top: 40px;

				vertical-align: middle;
				position: relative;
				width: 100%;

				text-align: center;

				font-family: Open Sans, Calibri, Arial;
				font-size: 16px;
				font-weight: bold;

				background-color: rgb(4,90,163);
			}

				/* header logo */
				body#ViewWrapper-Timesheets > header > h1 > img#logo {
					margin: 0px 10px 10px 10px;
					height: 41px;
					width: auto;
					vertical-align: middle;

					transition: all 0.25s ease 0s;
				}

					/* logo container with header collapsed */
					body#ViewWrapper-Timesheets.header-collapsed > header > h1 {
						margin-top: 31px;
					}

					/* logo with header collapsed */
					body#ViewWrapper-Timesheets.header-collapsed > header > h1 > img#logo {
						margin: 30px 10px 0px 27px;
						height: 21px;
						opacity: 0;
					}

			/* nav containers */
			body#ViewWrapper-Timesheets > header > nav {
				display: block;
			}

				/* top toolbar */
				body#ViewWrapper-Timesheets > header > nav#toolbar-top {
					position: fixed;
					z-index: 11;
					display: block;
					width: 100%;
					left: 0px;
					top: 0px;
					height: 30px;

					background-color: rgb(0,40,74);
					transition: all 0.25s ease 0s;
					border-bottom: 1px solid rgba(255,255,255,.45);

					font-size: 0px; /* collapse spacing */
				}

					/* record lock container */
					body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#RecordLock {
						display: inline-block;
						height: 10px;
						padding: 10px;
						width: calc( 25% - 20px );
						vertical-align: top;
						text-align: left;

						font-family: Open Sans, Calibri, Arial;
						color: white;
						font-size: 12px;

						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						/* opacity: 0; */
					}

						/* record lock when shown */
						body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#RecordLock.show {
							/* opacity: 1; */
						}

							/* name */
							body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#RecordLock > name {
								display: inline-block;
								margin-right: 15px;

								width: 125px;
								font-weight: bold;
								color: white;
							}

						/* button */
						body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#RecordLock > button#unlock {
							/* width: 200px; */
						}

							/* label */
							body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#RecordLock > button#unlock > label {
								/* width: 138px; */
							}

								/* timer in button label */
								body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#RecordLock > button#unlock > label > span#unlock-timer {
									display: inline-block;
									margin-left: 10px;
								}



					/* buttons container */
					body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#buttons {
						display: inline-block;
						width: 75%;
						height: 30px;
						vertical-align: top;
						text-align: right;
					}

						/* hide archive toggle button by default */
						/* body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#buttons > button#archive {
							display: none;
						}
							body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#buttons > button#archive.show {
								display: inline-block;
							} */

						/* auth status */
						body#ViewWrapper-Timesheets > header > nav#toolbar-top > div#buttons > span#AuthedUser {
							display: inline-block;
							font-family: Open Sans, Calibri, Arial;
							font-size: 12px;
							margin-right: 15px;
							vertical-align: middle;
						}


					/** ALL BUTTONS IN TOP TOOLBAR **/

					/* top toolbar buttons */
					body#ViewWrapper-Timesheets > header > nav#toolbar-top button,
					body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button {
						/* display: inline-block; */
						height: 30px;
						width: auto;

						font-size: 14px;
						background-color: rgba(255,255,255,.25);
						border-right: 1px solid rgba(255,255,255,.1);
					}

						/* adjustment for label-as-button */
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button {
							height: 14px;
						}

						body#ViewWrapper-Timesheets > header > nav#toolbar-top button.show,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button.show {
							display: inline-block !important;
						}

						/* icon */
						body#ViewWrapper-Timesheets > header > nav#toolbar-top button::before,
						body#ViewWrapper-Timesheets.header-collapsed > header > nav#toolbar-top button::before,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button::before,
						body#ViewWrapper-Timesheets.header-collapsed > header > nav#toolbar-top label.button::before {
							width: 16px;
						}

						/* top toolbar button labels */
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button > label,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top button > label {
							position: relative;
							vertical-align: initial;
							margin: 2px -7px auto 5px;
							width: auto;
							text-align: center;
						}

						/* top toolbar button hover/click */
						body#ViewWrapper-Timesheets > header > nav#toolbar-top button:not([disabled]):not(:disabled):hover,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:not([disabled]):not(:disabled):hover {
							background-color: rgba(255,255,255,.5);
						}
						body#ViewWrapper-Timesheets > header > nav#toolbar-top button:not([disabled]):not(:disabled):active,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:not([disabled]):not(:disabled):active {
							background-color: transparent;
						}

						/* visually separate tab to create psuedo groups */
						body#ViewWrapper-Timesheets > header > nav#toolbar-top button.separate,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button.separate {
							margin-left: 15px;
							border-left: 1px solid rgba(255,255,255,.1);
						}

						/* drop-menu for button */
						body#ViewWrapper-Timesheets > header > nav#toolbar-top button:not(:hover) > ul,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top button:not(:hover) > ul *,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top button:disabled > ul,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top button:disabled > ul *,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:not(:hover) > ul,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:not(:hover) > ul *,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:disabled > ul,
						body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:disabled > ul * {
							display: none !important;
						}
							/* drop menu container */
							body#ViewWrapper-Timesheets > header > nav#toolbar-top button:hover > ul,
							body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:hover > ul {
								display: block;
								margin: 7px 0px 0px -9px;
								position: absolute;
								z-index: 11;
								font-size: 0px; /* collapse spacing */
							}
								/* drop menu item */
								body#ViewWrapper-Timesheets > header > nav#toolbar-top button:hover > ul > li,
								body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:hover > ul > li {
									display: block;
									padding: 10px 10px 8px 10px;

									font-family: Open Sans, Calibri, Arial;
									color: white;
									font-size: 12px;

									background: rgb(128, 148, 165);
									border: 0px;
									white-space: nowrap;
									border-top: 1px solid rgba(255,255,255,.45);
								}
									/* over on drop menu item */
									body#ViewWrapper-Timesheets > header > nav#toolbar-top button:hover > ul > li:hover,
									body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:hover > ul > li:hover {
										background: rgb(98,117,133);
									}
									/* drop menu item icon */
									body#ViewWrapper-Timesheets > header > nav#toolbar-top button:hover > ul > li > .fa,
									body#ViewWrapper-Timesheets > header > nav#toolbar-top label.button:hover > ul > li > .fa {
										font-size: 14px;
										margin-right: 6px;
									}


				/* side toolbar */
				body#ViewWrapper-Timesheets > header > nav#toolbar-side {
					/* margin-top: 80px; */
				}

					/* side toolbar buttons */
					body#ViewWrapper-Timesheets > header > nav#toolbar-side > button.tab {
						border-bottom: 1px solid rgba(255,255,255,.1);
					}

					/* visually separate tab to create psuedo groups */
					body#ViewWrapper-Timesheets > header > nav#toolbar-side > button.tab.separate {
						margin-top: 15px;
						border-top: 1px solid rgba(255,255,255,.1);
					}

				/* button when on routed page */
				body#ViewWrapper-Timesheets > header > nav > button.onpage,
				body#ViewWrapper-Timesheets > header > nav > button.onpage > label {
					color: #002F57;
					text-shadow: none;
					background: white;
				}

				/* version */
				body#ViewWrapper-Timesheets > header > #version {
					position: fixed;
					left: 5px;
					bottom: 5px;

					font-family: Roboto Mono, Courier New;
					font-size: 10px;
					color: rgba(255,255,255,.5);
				}
					/* version */
					body#ViewWrapper-Timesheets.header-collapsed > header > #version {
						display: none;
					}

		/* collapse toggle button */
		body#ViewWrapper-Timesheets #header-collapse-toggle {
			position: fixed;
			bottom: 25px;
			width: 50px;
			text-align: right;

			font-size: 50px;
			transition: all 0.25s ease 0s;

			cursor: pointer;

			z-index: 15;
		}

			/* remove collapse toggle button with noshell */
			body#ViewWrapper-Timesheets.noshell #header-collapse-toggle {
				display: none;
			}

			/* in expanded mode */
			body#ViewWrapper-Timesheets:not(.header-collapsed) #header-collapse-toggle {
				left: 127px;
				clip: rect(0px 48px 50px 0px);
			}
				body#ViewWrapper-Timesheets:not(.header-collapsed) #header-collapse-toggle:before {
					font-family: 'FontAwesome';
					font-style: normal;
					/* fa-caret-left */
					content: "\f0d9";
				}

			/* in collapsed mode */
			body#ViewWrapper-Timesheets.header-collapsed #header-collapse-toggle {
				left: 10px;
				color: rgb(4,90,163);
			}
				body#ViewWrapper-Timesheets.header-collapsed #header-collapse-toggle:before {
					font-family: 'FontAwesome';
					font-style: normal;
					/* caret-right */
					content: "\f0da";
				}

		/* system message */
		body#ViewWrapper-Timesheets > header > i.fa#system-message {
			display: none;
		}
			/* show system message */
			/* NOTE: remaining styles in shared view wrapper CSS */
			body#ViewWrapper-Timesheets > header > i.fa#system-message.show {
				position: fixed;
				width: 50px;
				bottom: 100px;
				left: 60px;

				font-size: 50px;
			}

		/* main */
		body#ViewWrapper-Timesheets > main {
			position: static;
			margin: 0px 0px 28px 175px;

			padding: 0px;
			background: white;
			color: black;
			border-left: 1px solid white;

			transition: margin 0.25s ease 0s;
		}

			/* main with noshell */
			body#ViewWrapper-Timesheets.noshell > main {
				margin: 0px !important;
			}

			/* main with header collapsed */
			body#ViewWrapper-Timesheets.header-collapsed > main {
				margin-left: 45px;
			}

			/* main header */
			body#ViewWrapper-Timesheets > main > h2 {
				margin: 10px;

				font-family: 'Roboto Mono';
				font-size: 18px;
				font-weight: bold;
				color: rgba(0,0,0,.65);
			}



		/* footer */
		body#ViewWrapper-Timesheets > footer {

		}