/* Keyboard */
.keyboard, .correct-answer, .output-container, .numbers-history {
	margin-left: auto;
	margin-right: auto;
	max-width: 300px;
	
}
.keyboard-line {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

	justify-content: space-around;
	flex-wrap:wrap;
}

.keyboard .key {
	margin:0.5em;
	width:calc(16.6% - 1em);
}
.keyboard .key div {
	border: solid 1px gray;
	
	height:50px;
	line-height:50px;
	text-align:center;
	background-color: whitesmoke;

	
}
.content-row {
	margin: 1rem auto;
}

/* Lesson input */
.lesson-input {
	text-align: center;
}

.lesson-input button {
margin-right:0px;
}
.content-row label { display: block; }

/* Correct answer */
.output-container input {
	font-size: 150%;
	display:inline-block;
	width: auto;
	border-top:1px !important;
	border-style:solid !important;
	/*border: 1px solid #ddd;
	border-radius: .1875rem;*/
}
.correct-answer-text {
	padding:0.5rem 0px;
	margin-top:1rem;
	font-size:150%;
}
input.border-success, input.border-danger {
	border-width: 2px !important;
}
input.border-primary {
	border-width: 1px;
}
input.border-danger {
	border-color: rgba(244, 67, 54,.4) !important;
	/*box-shadow: 0 1px 3px rgba(244, 67, 54,.12), 0 1px 2px rgba(244, 67, 54,.24);*/
	box-shadow: 0 0 2px #fff, 0 0 4px #f44336, 0 0 6px #f44336, 0 0 8px #f44336 , 0 0 10px #f44336 ;
}
input.border-success {
	border-color:rgba(76, 175, 80,.4) !important;
	box-shadow: 0 0 2px #fff, 0 0 4px #4caf50, 0 0 6px #4caf50, 0 0 8px #4caf50 , 0 0 10px #4caf50 ;
	
}


/* Numbers history */
.numbers-history div {
	overflow:hidden;
	text-overflow: ellipsis;
}

/* Some MD adjustments */
.nav-tabs-bottom .nav-item.show .nav-link, .nav-tabs-bottom .nav-link.active {
	background-color: white;
}