html {
	height: 100%;
}

body, #main, #main-container {
	/*min-height: 100%;*/
	height: 100%;
	min-height: -webkit-fill-available;
	display: flex;
}

#auth-wrapper {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#auth-nologin-container {
	max-width: 360px;
	margin: 1rem auto;
	padding: 24px;
	box-sizing: border-box;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

#auth-nologin-container h4 {
	font-size: 20px;
}

#open_user_home_panel {
	position: fixed;
	top: 5px;
	right: 5px;
}

#user_home_panel {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	background-color: #fff;
}

#select_group {
	height: 100vh;
	width: 100%;
	position: absolute;
	z-index: 1001;
	top: 0;
	left: 0;
	background-color: #fff;
}

.group-alt {
	background-color: #eee;
}

.unread {
	background-color: rgb(255, 255, 163) !important;
}

.list-item {
	border-bottom: 1px solid lightgray;
}

.clickable:hover {
	background-color: rgb(255, 255, 163);
}

#main_nav {
	background-color: lightskyblue !important;
}

#nav-messages, #nav-messages-icon {
	pointer-events: none;
}

.user-active {
	font-weight: bold !important;
}

.btn-vertical {
	line-height: 1.3rem !important;
}
.btn-icon:before {
	content: "";
	width: 24px;
	height: 24px;
	display: inline-block;
	margin-right: 5px;
	vertical-align: text-top;
	background-color: transparent;
	background-position : center center;
	background-repeat:no-repeat;
}
.btn-f-clef:before {background-image: url('/img/f_clef_24.png');}
.btn-chord:before {background-image: url('/img/chord_24.png');}

.btn-info {
	color: white !important;
}

.fixedview {
	max-height: 90vh
}

#student_list {
	height: 100%;
	overflow: hidd
}


#main-modal {
	position: absolute;
	min-height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}

#exercise-text ul {
	text-align: left;
}


.float-left {
	float: left;
}

.contextual-chord-select {
	padding: 0.3rem;
}

.settings-content {
	min-height: 40%;
	width: 100%;
	background-color: white;
	padding: 0.5em;
	border: 1px solid #333;
	margin: auto;
}

.settings-container {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.settings-panel-group {
	display: flex;
}

.settings-panel-group div.panel {
	padding: 0.3rem;
}

#piano-container {
	width: 100%;
	background-color: white;
	max-height: 50vh;
}

#piano-container svg {
	margin: auto;
	display: block;
	height: 100%;
}

.white {
	fill: white;
	stroke-width: 1;
	stroke: grey
}

.white:hover,
.black:hover,
.fingerboard-note:hover ellipse {
	fill: blue;
}

.fingerboard-note:hover text {
	visibility: visible;
}

.black {
	fill: black;
	stroke-width: 1;
	stroke: black
}

.key-disabled.white {
	fill: #bbb !important;
}
.key-disabled.black {
	fill: #444 !important;
}

.key-disabled, .key-label {
	pointer-events: none;
}

.key-active {
	fill: red !important;
}

.shake {
	/* Start the shake animation and make the animation last for 0.5 seconds */
	animation: shake 0.2s;
  
	/* When the animation is finished, start again */
	animation-iteration-count: infinite;
  }
  
  @keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

#fretboard-container {
	width: 100%;
	background-color: white;
}

.answer-box {
	height: 6rem;
	min-width: 8rem;
}

.answer-row {
	display: flex;
	justify-content: center;
}

.answer-grid {
	display: grid;
}

.btn-answer * {
	pointer-events: none;
}

.btn-answer-octaves {
	background-color: rgb(0, 81, 255) !important;
}
.btn-answer-chordTypes {
	background-color: rgb(0, 81, 255) !important;
}

.btn-answer-notesSharp,
.btn-answer-notesNatural,
.btn-answer-notesFlat {
	width: 4rem;
}

.jumbotron {
	background-color: #fff !important;
}

.correct {background-color: green;}
.incorrect {background-color: red;}

.question-text-medium {
	font-size: 1.5rem !important;
}

.toolbox-left,
.toolbox-right {
	max-width: 200px;
	padding: 5px;
	height: 100%;
	position: fixed;
	top: 0;
	overflow-y: scroll;
	background-color: #eee;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.toolbox-left {
	left: 0;
	border-right: 1px solid #555;
}

.toolbox-right {
	right: 0;
	border-left: 1px solid #555;
}

.toolbox-menu-active {
	font-weight: bold;
}

.toolbox-item-active {
	background-color: #dfd;
}

.syllabusTask {
	width: 3em;
}
.syllabusTaskLevel0 {background-color: gold;}
.syllabusTaskLevel1 {background-color: silver;}
.syllabusTaskLevel2 {background-color: #cd7f32;}

.btn-exercise-level.not-available {text-decoration: line-through;}

.hover-background:hover {
	background-color: #ddd;
}

#bottom-toolbar {
	background-color: white;
}

#bottom-toolbar .grid {
	/*grid: auto / auto-flow;*/
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
}

#bottom-toolbar .grid button {
	margin: 0.1rem;
}

#bottom-toolbar button.highlight {
	box-shadow: 0px 0px 2px 2px #0f0;
}

/* tunelearner */


.tunelearner-controls {
	display: grid;
	grid: auto / auto-flow;
	grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.tunelearner-control .part-control {
	grid-column: 1 / 2;
}

.tunelearner-control .playback-settings {
	grid-column: 2 / 3;
}

.tunelearner .tune-section-header {
	margin-top: 0.2rem;
	font-weight: bold;
	text-align: center;
}

.tunelearner .tune-section {
	margin-bottom: 1rem;
}



.section-nav-indicator:first-child {
	background-color: red;
	z-index: -1;
}


#exercise-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exercise-loading-content {
	border: 3px solid #666;
}


/* The animation code */
@keyframes example {
	0%   {background-color: yellow;}
	50%  {background-color: white;}
	100%  {background-color: yellow;}
  }

  
/* The element to apply the animation to */
.list-group-item-animate {
	background-color: red;
	animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
.card {
	margin-bottom: 1em;
}
.card-header {
	font-weight: bold;
	background-color: lightskyblue !important;
	cursor: pointer;
}
.card-header:hover {
	background-color: rgb(128,128,255) !important;
}
.list-group-item.title {
	padding: 0 0 0 1.25em;
}
.list-group-item.url-button {
	text-align: center;
}
.list-group-item.exercise,
.list-group-item.article,
.list-group-item.static,
.list-group-item.homework,
.list-group-item.review,
.list-group-item.embed,
.list-group-item.url,
.list-group-item.collection,
.list-group-item.custom
 {
	padding: 0 0 0 1.75em;
}
.list-group-item.link {
	text-align: center;
	background-color: lightskyblue;
}
.list-group-item.exercise:hover,
.list-group-item.article:hover,
.list-group-item.static:hover,
.list-group-item.collection:hover,
.list-group-item.homework:hover,
.list-group-item.review:hover,
.list-group-item.embed:hover,
.list-group-item.url:hover,
.list-group-item.url-button:hover,
.list-group-item.custom:hover
{
	background-color: rgb(128,128,255) !important;
	cursor: pointer;
}
.list-group-item.exercise:hover a,
.list-group-item.article:hover a,
.list-group-item.static:hover a,
.list-group-item.collection:hover a,
.list-group-item.homework:hover a,
.list-group-item.review:hover a,
.list-group-item.embed:hover a,
.list-group-item.url:hover a,
.list-group-item.url-button:hover a,
.list-group-item.custom:hover a {
	color: white;
}
.list-group-item.completed:hover a,
.list-group-item.done:hover a {
	color: black !important;
}
.list-group-item.exercise.active,
.list-group-item.article.active,
.list-group-item.homework.active,
.list-group-item.embed.active,
.list-group-item.url.active,
.list-group-item.review.active
 {
	z-index: 0;

}
.list-group-item.active a {
	color: #fff;
}
.list-group-item.done,
.list-group-item.completed
 {
	 color: #555;
	 background-color: #eee;
}
.list-group-item.done.teacher { background-color: #ffc}
.list-group-item.done.teacher:hover { background-color: #ff8 !important}
.list-group-item.completed div.row div:first-child:before { content:"\2713\0020"; }
.list-group-item.homework div.row div:first-child:before { content:"\1F4DD"; }
.list-group-item.skipped {text-decoration:line-through; background-color: #eee; color: #555;}
.list-group-item.unavailable {text-decoration:line-through}

.list-group-item.homework.active {
	background-color: rgb(96,192,95);
}
.list-group-item.review {
	background-color: rgb(192,192,255);
}
.list-group-item.active-task .task-name {
	font-style: italic;
	font-weight: bold;
}

.card-header.header-completed {background-color: lightgray !important;}
.card-header.header-active {background-color: rgb(128,128,255) !important;}
.card-header.header-active-light {background-color: rgb(230,230,255) !important;}
.card-header.header-partial {background-color: rgb(255,196,64) !important;}
/*.card-header.header-notStarted {background-color: lightgoldenrodyellow !important;}*/
.card-header.header-empty {background-color: darkgray !important;}

/* TEMP Sheetmusic */

.highlight-bar {
	fill: rgba(0,255,0,0.25);
}

rect.dropzone:hover {
	stroke-width:2;
	stroke:rgba(0,255,0, 0.5)
}

text.beat-marker {
	color:rgb(0, 0, 0);
	font-size: 24rem;
	font-weight: bold;
	font-family: Times;
}

.rhythm-marker-length {
	animation: rhythmMarkerLength 0.7s ease infinite;
}

@keyframes rhythmMarkerLength {
	0% {fill:black}
	30% {fill:lightgray}
	60% {fill:black}
}


/* TEMP interactjs */
.draggable {
	display: inline-block;
	height: 50px;
	margin:5px;
	border: 1px solid #777;
}
.draggable-24 {
	width: 100px;
}
.draggable-44 {
	width: 140px;
}
.draggable-active {
	transform: scale(0.3);
}
.dropzoneTest {
	display: inline-block;
	width: 110px;
	height: 50px;
	background-color: #eee;
	transition: background-color 0.3s;
}

.drop-active {background-color: #ddd !important}
.drop-target {background-color: #eee !important}

.svg-drop-active.beat-0 {fill: rgb(0, 0, 255, 0.1);}
.svg-drop-active.beat-1 {fill: rgb(0, 255, 0, 0.1);}
.svg-drop-active.beat-2 {fill: rgb(0, 255, 255, 0.1);}
.svg-drop-active.beat-3 {fill: rgb(255, 255, 0, 0.1);}
.svg-drop-target {fill: rgba(0, 255, 0, 0.2) !important;}
.svg-can-drop {fill: rgb(0, 255, 0);}

.beat-listen-0 {fill: rgb(0, 0, 255, 0.3);}
.beat-listen-1 {fill: rgb(0, 255, 0, 0.3);}
.beat-listen-2 {fill: rgb(0, 255, 255, 0.3);}
.beat-listen-3 {fill: rgb(255, 255, 0, 0.3);}
.beat-listen:hover {fill-opacity: 0.8;cursor:pointer;}


/* 4WD */
.fwd-container {
	height: 100vh;
	display: grid;
	grid: auto / auto-flow;
	grid-auto-columns: 1fr;
}

.fwd-main {
	grid-column: 2 / 6;
	grid-row: 2 / 6;
	border: 1px solid blue;
	z-index: 100;
	background-color: white;
}

.fwd-practice {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	border: 1px solid blue;
}

.fwd-theory {
	grid-column: 5 / 7;
	grid-row: 1 / 3;
	border: 1px solid blue;
	justify-content: flex-end;
}

.fwd-create {
	grid-column: 1 / 3;
	grid-row: 5 / 7;
	border: 1px solid blue;
	align-items: flex-end;
}

.fwd-inspiration {
	grid-column: 5 / 7;
	grid-row: 5 / 7;
	border: 1px solid blue;
	text-align: right;
	align-items: flex-end;
	justify-content: flex-end;
}

.fwd-wheel {
	font-size: 2rem;
	padding: 1rem;
	display: flex;
}

.fwd-wheel:hover {
	background-color: #ddf;
}

.fwd-title, .fwd-description {
	text-align: center;
}


/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(153,204,51,0.9);
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	/*background: url(../img/cross.png) no-repeat center center;*/
	background-color: #555;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
}

/* Effects */
.overlay-scale {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}

.overlay-scale.open {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);	
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	transition: transform 0.4s, opacity 0.4s;
}

@media (orientation: portrait) {
	.portrait-hide {
		display: none !important
	}
	.portrait-mw-100 {
		max-width: 100%
	}
}

@media (orientation: landscape) {
	.landscape-hide {
		display: none !important
	}
}


.category-rhythm, .card-header.header-active.category-rhythm {
	background-color: #87cefa !important;
}
.category-note, .card-header.header-active.category-note {
	background-color: #87ceaa !important;
}
.category-interval, .card-header.header-active.category-interval {
	background-color: #f7cefa !important;
}
.category-chord, .card-header.header-active.category-chord {
	background-color: #87fffa !important;
}
.category-key, .card-header.header-active.category-key {
	background-color: #f7feaa !important;
}
.category-chordProg, .card-header.header-active.category-chordProg {
	background-color: #87feaa !important;
}

#offcanvas-btn-box-left {
	left: -10px;
	visibility: visible;
	transform: transform .3s ease-in-out;
}

.offcanvas.showing + .offcanvas-bn-box-left {
	transform: translateX(400px);
	position: relative;
	z-index: 1100
}

#offcanvas-btn-box-right {
	right: -10px;
	visibility: visible;
	transform: transform .3s ease-in-out;
}

.offcanvas.showing + .offcanvas-bn-box-right {
	transform: translateX(-400px);
	position: relative;
	z-index: 1100
}

#popup-message {
	padding-bottom: 0.5rem;
}