body {
	margin: 0px;
	padding: 0px;
}

* {
	font-family: Arial, Helvetica;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;

	-webkit-tap-highlight-color:transparent;
}

.mainContainer {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
}

.optionsHeader {
	text-align: center;
	width: 100%;
	height: 50px;
}

.languageMenu {
	position: absolute;
	left: 50%;
	width: 200px;
	margin-left: -100px;
}

.languageSelect {
	font-size: 0.8rem;
	margin-top: 15px;
}

.contentLabel {
	position: absolute;
	width: 100%;
	text-align: center;
	padding-top: 12px;
	font-size: 14px;
	/*font-weight: bold;*/
	opacity: 0.4;
}

.contentPhrase {
	text-align: center;
	padding-top: 30px;
	font-size: 36px;
}

.contentPhraseSubText {
	display: none;
	text-align: center;
	padding-top: 15px;
	font-size: 24px;
}

.contentCard {
	display: none;
	
	position: absolute;
	/*height: 450px;*/
	left: 50%;
	top: 50px;
	bottom: 60px;

	cursor: pointer;
	width: 90%;
	margin: auto;

	-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);

	padding-bottom: 100px;

	background-color: #f5f1e3;
	border-radius: 30px;
	overflow: hidden;
}

.contentCardPanel {
}

.verticalCenterOuter {
	position: relative;
	width: 100%;
	height: 100%;
}
.verticalCenterMiddle {
	position: absolute;
	width: 100%;
	top: 50%;
}
.verticalCenterInner {
	width: 100%;
	-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cardPanelContent {
    padding: 0 20px;

	box-sizing: border-box;
	ms-box-sizing: border-box;
	webkit-box-sizing: border-box;
	moz-box-sizing: border-box;
}

.cardPanelContentRegion {
	width: 100%;
	height: 80%;
	/*height: 100%;*/
}

.cardPanelQuestion {
	width: 100px;
	height: 100px;
	background-size: contain;
	background-image: url('../assets/img/icons/question.png');
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    opacity: 0.2;
}

.answerContent .cardPanelContent {
	display: none;
}
.answerContent .cardPanelQuestion {
	display: block;
}
.answerContent .audioButton {
	display: none;
}

.answerContent.answerShown .cardPanelQuestion {
	display: none;
}
.answerContent.answerShown .cardPanelContent {
	display: block;
}
.answerContent.answerShown .audioButton {
	display: block;
}

.questionContent {
	position: absolute;
	width: 100%;
	height: 50%;
	/*background-color: #f5f1e3;*/
	/*background-color: #ff0000;*/
	/*padding: 15px;
	padding-top: 80px;
	padding-bottom: 10px;*/
}
/*.questionContent .contentPhrase {
	font-size: 36px;
}*/

.answerContent {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 50%;
	/*background-color: #efdd9f;*/
	/*padding: 15px;
	padding-top: 60px;
	padding-bottom: 20px;*/
}
/*.answerContent .contentPhrase {
	font-size: 28px;
}*/

.questionContent {
	background-color: #f7de88;
	/*background-color: #efdd9f;*/
}
.answerContent {
	background-color: #fbefc4;
	/*background-color: #f5f1e3;*/
}
.contentCard.swappedLanguage .questionContent {
	background-color: #fbefc4;
}
.contentCard.swappedLanguage .answerContent {
	background-color: #f7de88;
	/*background-color: #efdd9f;*/
-+
+-	
}

/*.answerContent .cardPanelContentRegion {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 50px;
}*/

.button, .iconButton, .audioButton {
	cursor: pointer;
}

.iconButton {
	width: 36px;
	height: 36px;
	background-size: contain;
}

.optionsHeader .iconButton {
	position: absolute;
	top: 8px;
}

.cardListButton {
	right: 10px;
	/*right: 25px;*/
	/*right: 65px;*/
	background-image: url('../assets/img/icons/list.png');
}

.autoPlayAudioButton  {
	right: 50px;
	/*right: 25px;*/
	/*right: 65px;*/
	background-image: url('../assets/img/icons/audio_off.png');
}
.autoPlayAudioButton.enabled {
	background-image: url('../assets/img/icons/audio.png');
}

.repeatButton {
	left: 25px;
	background-image: url('../assets/img/icons/repeat.png');
}
.settingsButton {
	left: 25px;
	background-image: url('../assets/img/icons/settings.png');
}

.swapLanguageButton {
	left: 10px;
	/*left: 25px;*/
	background-image: url('../assets/img/icons/repeat.png');
	opacity: 0.2;
}
.swapLanguageButton.enabled {
	opacity: initial;
}

.translitterateButton {
	left: 50px;
	/*left: 65px;*/
	background-image: url('../assets/img/icons/translitterate.png');
	opacity: 0.2;
}
.translitterateButton.enabled {
	opacity: initial;
}

.audioButton {
	background-size: contain;
	display: none;
	margin: auto;
	width: 60px;
	height: 60px;
	margin-top: 10px;
	background-image: url('../assets/img/icons/audio_off.png');
	/*background-image: url('../assets/img/icons/audio.png');*/
}
/*.answerContent .audioButton {*/
.audioButton {
	/*margin-top: 20px;*/
	position: absolute;
	bottom: 12px;/*25px;*/
	right: 7px;
	/*left: 50%;*/

	width: 35px;
	height: 35px;

	/*-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);*/
}
.audioButton.active {
	background-image: url('../assets/img/icons/audio.png');

	/*-webkit-filter: drop-shadow(0 0 4px #ff6600) drop-shadow(0 0 4px #ff6600);
	filter: drop-shadow(0 0 4px #ff6600) drop-shadow(0 0 4px #ff6600);*/

	/*-webkit-filter: drop-shadow(2px 2px 0 #660000)
	drop-shadow(-2px 2px 0 #660000)
	drop-shadow(2px -2px 0 #660000)
	drop-shadow(-2px -2px 0 #660000);

	filter: drop-shadow(2px 2px 0 #660000) 
	drop-shadow(-2px 2px 0 #660000)
	drop-shadow(2px -2px 0 #660000)
	drop-shadow(-2px -2px 0 #660000);*/
}

.controlsPanel {
	position: absolute;
	width: 100%;
	bottom: 0px;
	height: 50x;
}
.controlsPanel .iconButton {
	position: absolute;
	bottom: 12px;
}

.buttonContainer {
	position: absolute;
}
.buttonContainer div {
	margin-left: -18px;
}

.prevButtonContainer {
	left: 50%;
	margin-left: -30px;
	/*margin-left: -25px;*/
	/*margin-left: -50px;*/
}
.prevButton {
	background-image: url('../assets/img/icons/prev.png');
}
.nextButtonContainer {
	left: 50%;
	margin-left: 30px;
	/*margin-left: 25px;*/
	/*margin-left: 50px;*/
}
.nextButton {
	background-image: url('../assets/img/icons/next.png');
}
.controlsPanel .nextButton, .controlsPanel .prevButton {
	width: 45px;
    height: 45px;
    bottom: 8px;
    margin-left: -22px;
}

/*.cardListButtonContainer {
	left: 50%;
}
.cardListButton {
	background-image: url('../assets/img/icons/list.png');
}*/

.shuffleButton {
	left: 10px;
	opacity: 0.2;/*0.25;*/
	background-image: url('../assets/img/icons/shuffle.png');
}
.shuffleButton.enabled {
	opacity: initial;
}


.shuffleDirectionButton {
	left: 50px;
	/*left: 60px;*/
	opacity: 0.2;
	background-image: url('../assets/img/icons/repeat.png');
}
.shuffleDirectionButton.enabled {
	opacity: initial;
}

.shuffleLanguageButton {
	left: 85px;
	opacity: 0.2;
	background-image: url('../assets/img/icons/repeat.png');
}
.shuffleLanguageButton.enabled {
	opacity: initial;
}


.playButton {
	right: 10px;
	background-image: url('../assets/img/icons/play.png');
}
.playButton.enabled {
	right: 20px;
	background-image: url('../assets/img/icons/pause.png');
}

.iconButton.disabled {
	cursor: auto;
	opacity: 0.15;
}

.debugOutput {
	pointer-events: none;
	position: absolute;
	top: 35px;
	padding: 30px;
	font-size: 12px;
	color: #ff3333;
}


/*** Card List ***/

.cardList {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 50px;
	bottom: 0;
	/*top: 0;*/
	/*bottom: 60px;*/
	background-color: #ffffff;
}

/*.cardListHeader {
	position: absolute;
	width: 100%;
	height: 40px;
	background-color: #efcb50;
}
.cardListHeader .swapLanguageButton {
	position: absolute;
	left: 2px;
	top: 1px;
}
.cardListTitle {
	position: absolute;
	left: 44px;
    top: 7px;
    font-size: 22px;
}*/

.cardListContentContainer {
	/*position: absolute;
	left: 0;
	right: 0;
	top: 40px;
	bottom: 0px;*/
}

.cardListItems {
	height: 100%;
}

.cardListItem {
	position: relative;
	cursor: pointer;

	height: 44px;

	font-size: 20px;

	width: 100%;
}
.cardListItem, .cardListItem .audioButton, .cardListItem .jumpToButton {
	background-color: #f7de88;
	border-bottom: 3px solid #f5e9c1;
	box-sizing: border-box;
}

.cardListItem_label {
	position: absolute;
	/*width: 100%;*/
	left: 48px;
    top: 9px;
	/*padding: 8px 15px;*/
}
/*.cardListItem_label.basePhrase {
	width: 100%;
	padding: 8px 15px;
}*/

.cardListItem:hover, .cardListItem:hover .jumpToButton {
	background-color: #fbe390;
	/*background-color: #ffeaa3;*/
}

.cardListItem.showNative, .cardListItem.showNative .jumpToButton {
	background-color: #fbefc4;
}
.cardListItem.showNative:hover, .cardListItem.showNative:hover .jumpToButton {
	background-color: #fdf5d8;
}

.cardListItem_label.foreignPhrase {
	display: block;
}
.cardListItem_label.foreignPhraseTranslitteration {
	display: none;
}
.cardListItem_label.nativePhrase {
	display: none;
}

.cardListItem.showTranslitteration .cardListItem_label.foreignPhrase {
	display: none;
}
.cardListItem.showTranslitteration .cardListItem_label.foreignPhraseTranslitteration {
	display: block;
}

.cardListItem.showNative .cardListItem_label.foreignPhrase {
	display: none;
}
.cardListItem.showNative .cardListItem_label.foreignPhraseTranslitteration {
	display: none;
}
.cardListItem.showNative .cardListItem_label.nativePhrase {
	display: block;
}

.cardListItem .audioButton {
	display: block;
	margin-top: 0;
	top: 0;
    right: 0;
    left: initial;
    bottom: initial;

    height: 44px;
    width: 44px;

    background-repeat: no-repeat;
    background-size: 33px;
    background-position: 6px 3px;

    border-left: 3px solid #f5e9c1;
}

.cardListItem .jumpToButton {
	cursor: pointer;
	display: block;

	background-size: contain;
	background-image: url('../assets/img/icons/jumpTo.png');

    height: 44px;
    width: 40px;

    background-repeat: no-repeat;
    background-size: 40px 40px;
    background-position: 0px 0px;

    border-right: 3px solid #f5e9c1;

	margin-top: 0;
	top: 0;
    left: 0;
}

.scrollingRegion {
	overflow-x: hidden;
	overflow-y: scroll;
}
.scrollingContainer {

}


/*** post classes (keep at bottom) ***/

.shown {
	display: block;
}
.hidden {
	display: none;
}

.notDisplayed {
	opacity: 0;
}