/* app css stylesheet */

html,
body {
	overflow: hidden;
	height: 100%;
	font-family: 'Open Sans';
}

.mainScreen {
	height: 100%;
	overflow:hidden;
}
.leftOpac {
	opacity: 0;
}

.rightOpac {
	opacity: 0;
}
/* Left Sidebar Start ------------------------------------------------------------------- */

.leftSidebar {
	color: white;
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	background-color: #5d6770;
	overflow: hidden;
	z-index: 5;
	border-right: 1px solid black;
	overflow: hidden;
}

.catButton {
	color: white;
	font-size: 1.5rem;
	height: 4rem;
	line-height: 4rem;
	text-align: right;
	vertical-align: middle;
	background-color: #40316d;
	overflow: hidden;
	cursor: pointer;
}

.catNumberBoxes {
	font-size: 1rem;
	width: 20%;
	height: 3rem;
	line-height: 3rem;
	text-align: center;
	background-color: #12a9ab;
	margin-left: 10%;
	display: inline-block;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

.catNames {
	display: inline-block;
	padding-left: 5%;
}
/* Left Sidebar End */
/* Right Sidebar Start ------------------------------------------------------------------- */

.rightSidebar {
	color: white;
	position: absolute;
	right: -5px;
	top: 75px;
	width: 0;
	height: 85%;
	background-color: #5d6770;
	overflow: hidden;
	z-index: 5;
	border: 1px solid black;
	overflow: hidden;
}

.helpHeader {
	color: white;
	font-size: 1.5rem;
	height: 4rem;
	line-height: 4rem;
	text-align: left;
	vertical-align: middle;
	background-color: #40316d;
	overflow: hidden;
	cursor: pointer;
}

.helpText {
	font-size: 1rem;
	height: 85%;
	padding-right: 10px;
	padding-bottom: 20px;
	margin-left: 5%;
	display: inline-block;
	overflow: auto;
}
/* Right Sidebar End */

.passage-table {
	width: 50%;
}

.offline-alert {
	position: fixed;
	bottom: 1.5em;
	right: 0;
	z-index: 9000;
}

[data-ng-view] {
	transition: all 1s;
}

[data-ng-view].ng-enter {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	animation: fadein 1s;
}

[data-ng-view].ng-leave {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	animation: fadeout 1s;
}
.waiting-too-long {
	opacity:0;
}
@keyframes fadeout {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}