/* orientation-specific */

/* portrait */
@media screen and (orientation:portrait) {
}
/* landscape */
@media screen and (orientation:landscape) {
}

/* disable text selection */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    border-spacing: 0px;
    border-collapse: collapse;
}

/* set cursor to pointer */
* {
    cursor: pointer;
}

/* break long words okay */
* {
    word-wrap: break-word;
}

/* default font-size */
@media (max-height: 200px) {
    * {
        font-size: 15px;
    }
}
@media (min-height: 201px) and (max-height: 220px) {
    * {
        font-size: 16px;
    }
}
@media (min-height: 221px) and (max-height: 240px) {
    * {
        font-size: 17px;
    }
}
@media (min-height: 241px) and (max-height: 260px) {
    * {
        font-size: 18px;
    }
}
@media (min-height: 261px) and (max-height: 280px) {
    * {
        font-size: 19px;
    }
}
@media (min-height: 281px) and (max-height: 300px) {
    * {
        font-size: 20px;
    }
}
@media (min-height: 301px) and (max-height: 320px) {
    * {
        font-size: 21px;
    }
}
@media (min-height: 321px) and (max-height: 340px) {
    * {
        font-size: 22px;
    }
}
@media (min-height: 341px) and (max-height: 360px) {
    * {
        font-size: 23px;
    }
}
@media (min-height: 361px) and (max-height: 380px) {
    * {
        font-size: 24px;
    }
}
@media (min-height: 381px) and (max-height: 400px) {
    * {
        font-size: 25px;
    }
}
@media (min-height: 401px) and (max-height: 420px) {
    * {
        font-size: 26px;
    }
}
@media (min-height: 421px) and (max-height: 440px) {
    * {
        font-size: 27px;
    }
}
@media (min-height: 441px) and (max-height: 460px) {
    * {
        font-size: 30px;
    }
}
@media (min-height: 461px) and (max-height: 480px) {
    * {
        font-size: 30px;
    }
}
@media (min-height: 481px) and (max-height: 500px) {
    * {
        font-size: 30px;
    }
}
@media (min-height: 501px) and (max-height: 600px) {
    * {
        font-size: 32px;
    }
}
@media (min-height: 601px) and (max-height: 700px) {
    * {
        font-size: 34px;
    }
}
@media (min-height: 701px) and (max-height: 800px) {
    * {
        font-size: 36px;
    }
}
@media (min-height: 801px) and (max-height: 900px) {
    * {
        font-size: 38px;
    }
}
@media (min-height: 901px) {
    * {
        font-size: 40px;
    }
}
/*	200	15		133	8	7.4	7.2		1.8	2.46666666666667
201	220	16		146	8	7.4	7.2		1.8	2.46666666666667
221	240	17		160	8	7.4	7.2		1.8	2.46666666666667
241	260	18		173	8	7.4	7.2		1.8	2.46666666666667
261	280	19		186	8	7.4	7.2		1.8	2.46666666666667
281	300	20		200	10	9.4	9.2		2.3	3.13333333333333
301	320	21		213	10	9.4	9.2		2.3	3.13333333333333
321	340	22		226	10	9.4	9.2		2.3	3.13333333333333
341	360	23		240	10	9.4	9.2		2.3	3.13333333333333
361	380	24		253	10	9.4	9.2		2.3	3.13333333333333
381	400	25		266	10	9.4	9.2		2.3	3.13333333333333
401	420	26		280	10	9.4	9.2		2.3	3.13333333333333
421	440	27		293	10	9.4	9.2		2.3	3.13333333333333
441	460	30		306	10	9.4	9.2		2.3	3.13333333333333
461	480	30		320	10	9.4	9.2		2.3	3.13333333333333
481	500	30		333	10	9.4	9.2		2.3	3.13333333333333
501	600	32		400	12	11.4	11.2		2.8	3.8
601	700	34		466	12	11.4	11.2		2.8	3.8
701	800	36		533	14	13.4	13.2		3.3	4.46666666666667
801	900	38		600	14	13.4	13.2		3.3	4.46666666666667
901		40		0						*/
@media (max-height: 280px) {
    .touch .AltPagingKeypad2CenteredControls {
        /*background-color: blue;*/
    }
    .touch .AltPagingKeypad2CenteredControls {
        width: 8em;
    }
    .touch .AltPagingKeypad2CenteredControls .Row > div span,
    .touch .AltPagingKeypad2CenteredControls .Row > div i {
        width: 1.8em;
    }
    .touch .AltPagingKeypad2CenteredControls .Row > div.PageControl i,
    .touch .AltPagingKeypad2CenteredControls .Row > div.ResultControl i {
        width: 2.466em;
    }
}
@media (min-height: 281px) and (max-height: 500px) {
    .touch .AltPagingKeypad2CenteredControls {
        /*background-color: green;*/
    }
    .touch .AltPagingKeypad2CenteredControls {
        width: 10em;
    }
    .touch .AltPagingKeypad2CenteredControls .Row > div span,
    .touch .AltPagingKeypad2CenteredControls .Row > div i {
        width: 2.3em;
    }
    .touch .AltPagingKeypad2CenteredControls .Row > div.PageControl i,
    .touch .AltPagingKeypad2CenteredControls .Row > div.ResultControl i {
        width: 3.133em;
    }
}
@media (min-height: 501px) and (max-height: 700px) {
    .touch .AltPagingKeypad2CenteredControls {
        /*background-color: red;*/
    }
    .touch .AltPagingKeypad2CenteredControls {
        width: 12em;
    }
    .touch .AltPagingKeypad2CenteredControls .Row > div span,
    .touch .AltPagingKeypad2CenteredControls .Row > div i {
        width: 2.8em;
    }
    .touch .AltPagingKeypad2CenteredControls .Row > div.PageControl i,
    .touch .AltPagingKeypad2CenteredControls .Row > div.ResultControl i {
        width: 3.8em;
    }
}
@media (min-height: 701px) {
    .touch .AltPagingKeypad2CenteredControls {
        /*background-color: orange;*/
    }
    .touch .AltPagingKeypad2CenteredControls {
        width: 14em;
    }
    .touch .AltPagingKeypad2CenteredControls .Row > div span,
    .touch .AltPagingKeypad2CenteredControls .Row > div i {
        width: 3.3em;
    }
    .touch .AltPagingKeypad2CenteredControls .Row > div.PageControl i,
    .touch .AltPagingKeypad2CenteredControls .Row > div.ResultControl i {
        width: 4.45em;
    }
}

/** {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}*/

html {
    -ms-touch-action: none;
}

body {
    overflow-x: hidden;
}
.touch body {
    overflow-y: hidden;
}

.displayNone {
    display: none !important;
}

.visibilityHidden {
    visibility: hidden !important;
}

.centeredContainer {
    display: table;
    margin: 0 auto;
}
.centeredElement {
    display: table-cell;
}

.columnsContainer {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding-bottom: 10px;
}
.columnElement {
    display: table-cell;
}
.verticalSliderGrabBar {
    width: 1.75em;
    display: table-cell;
    position: relative;
    height: 100%;
}
.verticalSliderGrabBar > div {
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    margin-bottom: 0.1em;
    margin-right: 0.1em;
    margin-left: 0.1em;
    width: 1.55em;
    /*height: 100%;*/
    border-radius: 0.1em;
    background-color: #aaaaaa;
}
.touch.menuCollapsed .body .verticalSliderGrabBar > div {
    top: 2em;
}
.no-touch .verticalSliderGrabBar,
.touch .noSlider .footer .verticalSliderGrabBar,
.touch:not(.menuCollapsed) .noSlider .body .verticalSliderGrabBar,
.touch.menuCollapsed .noSlider .body .verticalSliderGrabBar > div {
    display: none;
}

.backgroundColorLearned {
    background-color: #70fee8;
}

.backgroundColorSelected {
    background-color: #fed45a;
}

.backgroundColorProgress {
    background-color: #ac2925;
}

/* LoadingContainer */
#LoadingContainer {
    display: none;
}
html.loading > body > :not(#LoadingContainer) {
    display: none;
}
html.loading #LoadingContainer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #222222;
}
#LoadingContainer #LoadingInnerContainer {
    display: table-cell;
    vertical-align: middle;
    padding-left: 5%;
    padding-right: 5%;
}
#LoadingContainer #LoadingContent {
    color: white;
    width: 100%;
    text-align: center;
    padding: 0.2em;
    border: 0.1em solid white;
    border-radius: 0.1em;
    box-sizing: border-box;
}
#LoadingContainer.transition #LoadingContent {
    border: none;
    box-sizing: initial;
}
#LoadingContainer #LoadingContent #LoadingProgress {
    margin-top: 0.2em;
    width: 0;
}
#LoadingContainer.transition #LoadingContent #LoadingMessage,
#LoadingContainer.transition #LoadingContent #LoadingProgress {
    display: none;
}
#LoadingContainer:not(.transition) #LoadingContent #LoadingTransition {
    display: none;
}
#LoadingContainer.transition #LoadingContent #LoadingTransition i {
    padding: 0.2em;
}
#LoadingContainer.transition #LoadingContent #LoadingTransition i:nth-child(1) {
    /*color: #454545;*/
    color: #b49847;
}
#LoadingContainer.transition #LoadingContent #LoadingTransition i:nth-child(2) {
    /*color: #959595;*/
    color: #fed45a;
}
#LoadingContainer.transition #LoadingContent #LoadingTransition i:nth-child(3) {
    /*color: #e5e5e5;*/
    color: #9ff0b8;
}

/* PropertiesContainer */
#PropertiesContainer {
    display: none;
}
#PropertiesContainer.selected {
    color: #fed45a;
}
#PropertiesContainer.learned {
    color: #70fee8;
}

/* MessageContainer */
.show-message > body > :not(#MessageContainer),
.show-message > body > :not(#MessageContainer) * {
    visibility: hidden;
}
.show-message #MessageContainer {
    display: block;
}
#MessageContainer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('images/arrow1bw.jpg');
    background-size: auto auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: right center;
}
#MessageContainer .transparency {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fef1cc;
    opacity: 0.75;
}
#Message {
    color: #222222;
    position: absolute;
    top: 5%;
    left: 50%;
    width: 88%;
    margin-left: -45%;
    padding: 1%;
    padding-top: 0;
    border: 0.2em solid white;
    border-radius: 0.1em;
    box-sizing: border-box;
    background-color: #ccfef6;
    opacity: 0.75;
    box-shadow: 0.1em 0.1em 0.3em #222222;    
}
#Message > #MessageBar {
    display: table;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    margin: 0 auto;
    margin-bottom: 1%;
}
#Message > #MessageBar > div:hover {
    background-color: #70fee8;
}
#Message > #MessageBar > div {
    height: 2em;
    line-height: 2em;
    display: table-cell;
    width: 2em;
    visibility: hidden;
}
#Message > #MessageBar > div#MessageBarClose,
#MessageContainer.MessageBarPrevious #MessageBarPrevious,
#MessageContainer.MessageBarNext #MessageBarNext {
    visibility: visible;
}
#MessageContent {
    font-size: 0.75em;
}
#MessageContainer .center {
    text-align: center;
}
#MessageContainer .h1 {
    font-weight: bold;
    font-size: 120%;
    margin-bottom: 0.2em;
}
#MessageContainer .h2 {
    margin-bottom: 0.2em;
}
#MessageContainer .h3 {
    font-style: italic;
}
.touch #MessageContainer .h1 {
    font-size: 110%;
    margin-bottom: 0.2em;
}
.touch #MessageContainer .h2 {
    margin-bottom: 0.2em;
    font-size: 85%;
}
.touch #MessageContainer .h3 {
    font-size: 75%;
    color: #fed45a;
    background-color: #222222;
    padding: 0.2em;
}


/* HighlighterContainer */
#HighlighterContainer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#Highlighter {
    outline: black solid 10000px;
    opacity: 0.75;
}
#HighlighterPointer i {
    z-index: 10002;
    font-size: 4em;
    /*color: #ffffff;*/
    color: #ac2925;
    opacity: 0.8;
}
#HighlighterPointer i:first-of-type {
    /*color: #ac2925;*/
    color: #ffffff;
}
#HighlighterPointer i:last-of-type {
    /*opacity: 1;*/
}
#HighlighterPointer {
    z-index: 10001;
    width: 4em;
    height: 4em;
    line-height: 4em;
    text-align: center;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.1em #222222;    
}
#HighlighterPointer.centered {
    top: 50%;
    left: 50%;
    margin-left: -2em;
    margin-top: -2em;
}
#HighlighterPointer.bottom {
    bottom: 0;
    width: 100%;
    left: 0;
    margin: 0;
}
#HighlighterPointer.top {
    top: 0;
    width: 100%;
    left: 0;
    margin: 0;
}
#HighlighterPointer .transparency {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
}

/* MenuContainer */
#MenuContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.touch #MenuContainer {
    position: absolute;
}
.touch.menuCollapsed #MenuContainer {
    display: none;
}
#MenuHandle {
    background-color: white;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    display: none;
    width: 1.75em;
    height: 2em;
}
#MenuHandle > div {
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    margin-left: 0.1em;
    margin-right: 0.1em;
    width: 1.55em;
    height: 1.85em;
    background: #6e3030;
    /*background: #222222;*/
    text-align: center;
    line-height: 1.85em;
    color: white;
    border-radius: 0.1em;
}
.menuCollapsed #MenuHandle {
    display: block;
}
#MenuContainer > div {
    display: none;
    background-color: #222222;
}
#MenuContainer.learning #HeaderBar {
    /*background-color: #419735;*/
    background-color: #6e3030;
}
#MenuContainer.learning #HeaderBar > div {
    color: #E5E5E5;
}
html.menuOpened body {
    overflow: hidden;
}
html.menuOpened #MenuContainer {
    /*position: absolute;*/
    height: 100%;
    background-color: #222222;
}
html.menuOpened #MenuContainer > div:not(.customBar) {
    display: table;
}
#MenuContainer > #ProgressBar {
    display: none;
}
html:not(.menuOpened) #MenuContainer.showProgressBar > #ProgressBar {
    display: block;
    height: 0.2em;
    width: 100%;
}
#MenuContainer > #ProgressBar > div {
    display: block;
    height: 100%;
    float: left;
}
.touch #MenuContainer > .progressStatsBar {
    white-space: normal;
    font-size: 65%;
}
#MenuContainer > .progressStatsBar * {
    font-size: inherit;
}
#MenuContainer > #CycleBar {
    display: none;
}
html #MenuContainer > #CycleBar {
/*html:not(.menuOpened) #MenuContainer > #CycleBar {*/
    display: table;
    height: 0.2em;
    width: 100%;
}
#MenuContainer > #CycleBar > div {
    display: table-cell;
    visibility: hidden;
    height: 100%;
}
#MenuContainer > #HeaderBar {
    display: table;
}
#MenuContainer > div {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    margin: 0 auto;
    height: 2em;
}
#MenuContainer > div > div {
    color: #e5e5e5;
    line-height: 2em;
    display: table-cell;
    width: 3em;
}
#MenuContainer .navSlot {
    color: #3b93fd;
}
#MenuContainer > div.customBar {
    display: none;
}
#MenuContainer > div > div.toggleSlot {
    visibility: hidden;
}
html.menuOpened #MenuContainer.showCustomBarOne #CustomBarOne,
html.menuOpened #MenuContainer.showCustomBarTwo #CustomBarTwo {
    display: table;
}
#MenuContainer.showInterPageLeftNav #InterPageLeftNav,
#MenuContainer.showInterPageRightNav #InterPageRightNav,
#MenuContainer.showHeaderBarSlotOne #HeaderBarSlotOne,
#MenuContainer.showHeaderBarSlotTwo #HeaderBarSlotTwo {
    visibility: visible;
}
.no-touch #MenuContainer > div:not(.noHoverHighlight) > div:hover {
    color: white;
    background-color: #888888;
}
#MenuContainer .ProgressStatsWidget.SelectedStudyWords > div {
    color: #fed45a;
}
#MenuContainer #SubBar.show {
    width: 100%;
    height: 1.5em;
    background-color: #222222;
    display: block;
}
.menuOpened #MenuContainer #SubBar.show {
    display: none;
}

/* Overlay */
/*.no-touch #Overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.touch #Overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#Overlay {
    z-index: 100;
    opacity: 0;
    background-color: #70fee8;
    display: none;
}*/

/* PopMessage */
#PopMessageContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#PopMessage {
    display: none;
    text-align: center;
    color: #222222;
    position: absolute;
    left: 50%;
    width: 58%;
    z-index: 10000;
    margin-left: -30%;
    padding: 1%;
    border: 0.2em solid white;
    border-radius: 0.1em;
    box-sizing: border-box;
    background-color: #ccfef6;
    opacity: 1;
    box-shadow: 0.1em 0.1em 0.3em #222222;    
}
#PopMessage * {
    font-size: 75%;
}
#PopMessage.fadeOut {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all 750ms ease;
    -moz-transition: all 750ms ease;
    -ms-transition: all 750ms ease;
    -o-transition: all 750ms ease;
    transition: all 750ms ease;    
}
#PopMessage.bottom {
    bottom: 5%;
    display: block;
}
#PopMessage.top {
    top: 1.5em;
    display: block;
}

/* BodyContainer & FooterContainer */
#BodyContainer {
    position: relative;
    top: 2.5em;
}
.no-touch #BodyScrollerContainer.hideProgressBar #BodyContainer {
    top: 2.3em;
}
.no-touch #BodyScrollerContainer.showSubBar #BodyContainer {
    top: 4em;
}
.no-touch #BodyScrollerContainer.hideProgressBar.showSubBar #BodyContainer {
    top: 3.8em;
}
.no-body-scroll.no-touch #BodyContainer {
    position: fixed;
}
.touch #BodyContainer,
.touch #FooterContainer {
    z-index: 1;
    position: absolute;
    width: 100%;
    left: 0;
    padding-right: 0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}
.touch #BodyContainer {
    top: 0;
}
.touch #BodyScrollerContainer,
.touch #FooterScrollerContainer {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    bottom: 0;
}
.touch #BodyScrollerContainer {
    top: 2.5em;
}
.touch #BodyScrollerContainer.hideProgressBar {
    top: 2.3em;
}
.touch #BodyScrollerContainer.showSubBar {
    top: 4em;
}
.touch #BodyScrollerContainer.hideProgressBar.showSubBar {
    top: 3.8em;
}
.touch.menuCollapsed #BodyScrollerContainer {
    top: 0;
}
.touch.footerActive #BodyScrollerContainer {
    bottom: 8.8em;
    /*background-color: green;*/
}
.touch.footerActive #FooterScrollerContainer {
    height: 8.8em;
    /*background-color: red;*/
}
/*.showPop #BodyContainer,*/
html.menuOpened #BodyContainer {
    visibility: hidden;
}

/* PopContainer */
#PopContainer {
    position: relative;
    top: 2.5em;
    display: none;
}
.showPop #PopContainer,
#PopContainer.open {
    display: block;
}

/* centerable top bar elements */
.top-bar:not(.expanded) section ul.center {
    display: table;
    margin: 0 auto;
}
.top-bar:not(.expanded) section ul.center li {
    display: table-cell;
}

/* widthless div centering */
.widthlessCenteredDivOuter {
    position: relative;
    left: 50%;
    float: left;
    clear: both;
    text-align: left;
}
.widthlessCenteredDivInner {
    position: relative;
    left: -50%;
    text-align: left;
    margin-left: 1em;
    margin-right: 1em;
}
.widthlessCenteredWrap {
    overflow: hidden;
    position: relative; /* ie7 needs position:relative here */
}
.altWidthlessCenteredDivOuter {
    position: absolute;
    right: 50%;
}
.altWidthlessCenteredDivInner {
    position: relative;
    left: 50%;
}

/* ProgressStatsWidget */
.ProgressStatsWidget i {
    color: green;
}

/* DragKeypad */
.DragKeypad,
.DragKeypad * {
    /*font-size: 20px;*/
}
.no-touch .DragKeypad,
.no-touch .DragKeypad * {
    /*font-size: 30px;*/
}
.DragKeypad {
    min-width: 220px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #222222;
    height: 8.65em;
}
.DragKeypad.WithoutBullets {
    height: 6.65em;
}
.DragKeypad .KeysAndBulletsContainer {
    position: absolute;
}
.DragKeypad .KeysContainer {
    white-space: nowrap;
    padding-top: 0.15em;
    padding-bottom: 0.15em;
}
.DragKeypad .BulletsContainer {
    white-space: nowrap;
    /*background-color: #ac2925;*/
    background: -webkit-linear-gradient(left, #ac2925, #3b93fd);
    background: -o-linear-gradient(right, #ac2925, #3b93fd);
    background: -moz-linear-gradient(right, #ac2925, #3b93fd);
    background: linear-gradient(to right, #ac2925, #3b93fd);
}
.DragKeypad .BulletsContainer .Arrow {
    position: absolute;
    height: 2em;
}
.DragKeypad .BulletsContainer .Arrow i {
    color: #e5e5e5;
    line-height: 2em;
    font-weight: bold;
}
.DragKeypad .BulletsContainer .Arrow.LeftArrow {
    left: 0.15em;
}
.DragKeypad .BulletsContainer .Arrow.RightArrow {
    right: 0.15em;
}
.no-touch .BulletsContainer .Arrow i:hover {
    color: #c5c5c5;
}
.DragKeypad.WithoutBullets .BulletsContainer {
    display: none;
}
.DragKeypad .ControlsContainer {
    display: table;
    margin: 0 auto;
    position: relative;
    top: 5.3em;
    text-align: center;
    padding-top: 0.15em;
    padding-bottom: 0.15em;
}
.DragKeypad.WithoutBullets .ControlsContainer {
    top: 3.3em;
}
.DragKeypad .ControlsContainer .Control {
    display: table-cell;
    text-align: center;
    padding-left: 0.15em;
    padding-right: 0.15em;
}
.DragKeypad .ControlsContainer .Control i {
    line-height: 3em;
    height: 3em;
    width: 3em;
    border: 0.1em solid white;
    border-radius: 0.5em;
    color: white;
}
.DragKeypad .Key,
.DragKeypad .Bullet {
    display: inline-block;
    text-align: center;
    width: 3em;
    margin-left: 0.15em;
    margin-right: 0.15em;
}
.DragKeypad .Key {
    height: 3em;
    line-height: 3em;
    border: 0.1em solid white;
    border-radius: 0.5em;
    color: white;
    white-space: nowrap;
}
.DragKeypad .Bullet {
    height: 2em;
}
.DragKeypad .Bullet i {
    line-height: 2em;
    color: #e5e5e5;
}
.no-touch .DragKeypad .Key:hover {
    background-color: white;
    color: #222222;
}
.no-touch .DragKeypad .Bullet i:hover {
    color: #c5c5c5;
}
.no-touch .DragKeypad .Control i:hover {
    background-color: white;
    color: #222222;
}
    
/* PagingKeypad */
.PagingKeypad,
.PagingKeypad * {
    /*font-size: 30px;*/
}
.no-touch .PagingKeypad,
.no-touch .PagingKeypad * {
    /*font-size: 40px;*/
}
.PagingKeypad {
    width: 8.8em;
}
.PagingKeypad {
    position: relative;
    overflow: hidden;
}
.PagingKeypad .KeyPage {
    display: none;
}
.PagingKeypad .KeyPagesContainer {
    text-align: center;
    display: table;
    margin: 0 auto;
}
.PagingKeypad .PagingContainer,
.PagingKeypad .ControlsContainer {
    display: table;
    margin: 0 auto;
    text-align: center;
}
.PagingKeypad .ControlsContainer {
    margin-bottom: 0.2em;
}
.PagingKeypad .Control {
    display: table-cell;
    text-align: center;
    padding-left: 0.1em;
    padding-right: 0.1em;
}
.PagingKeypad .Control i {
    line-height: 2em;
    height: 2em;
    width: 2em;
    /*border: 0.05em solid #222222;*/
    border-radius: 0.1em;
    background-color: #cce3fe;
    color: black;
}
.PagingKeypad .Control.inactive {
    display: none;
}
.PagingKeypad .Key {
    display: none;
    float: left;
    text-align: center;
    white-space: nowrap;
    height: 2em;
    line-height: 2em;
    width: 2em;
    margin-bottom: 0.2em;
    margin-left: 0.1em;
    margin-right: 0.1em;
    /*border: 0.05em solid #222222;*/
    border-radius: 0.1em;
    background-color: #cce3fe;
    color: black;
}
.no-touch .PagingKeypad .Key:hover {
    background-color: #222222;
    color: white;
}
.no-touch .PagingKeypad .Control i:hover {
    background-color: #222222;
    color: white;
}

/* PagingKeypad2 */
.PagingKeypad2,
.PagingKeypad2 * {
    /*font-size: 30px;*/
}
.no-touch .PagingKeypad2,
.no-touch .PagingKeypad2 * {
    /*font-size: 40px;*/
}
.PagingKeypad2 {
    width: 8.8em;
}
.no-touch .PagingKeypad2 {
    width: 8.8em;
    /*width: 11.0em;*/
    /*width: 13.2em;*/
}
.PagingKeypad2 {
    position: relative;
    overflow: hidden;
}
.PagingKeypad2 .KeysContainer .Key {
    visibility: hidden;
}
.PagingKeypad2 .PageControlsContainer .Control {
    visibility: hidden;
}
.PagingKeypad2 .KeysContainer .Row {
    display: none;
}
.touch .PagingKeypad2 .KeysContainer .Row.r0,
.touch .PagingKeypad2 .KeysContainer .Row.r1,
.no-touch .PagingKeypad2 .KeysContainer .r0 .Row.r0,
.no-touch .PagingKeypad2 .KeysContainer .r1 .Row.r0,
.no-touch .PagingKeypad2 .KeysContainer .r2 .Row.r0,
.no-touch .PagingKeypad2 .KeysContainer .r3 .Row.r0,
.no-touch .PagingKeypad2 .KeysContainer .r1 .Row.r1,
.no-touch .PagingKeypad2 .KeysContainer .r2 .Row.r1,
.no-touch .PagingKeypad2 .KeysContainer .r3 .Row.r1,
.no-touch .PagingKeypad2 .KeysContainer .r2 .Row.r2,
.no-touch .PagingKeypad2 .KeysContainer .r3 .Row.r2,
.no-touch .PagingKeypad2 .KeysContainer .r3 .Row.r3 {
    display: block;
}
.PagingKeypad2 .KeysContainer .k0 .Key.k0,
.PagingKeypad2 .KeysContainer .k1 .Key.k1,
.PagingKeypad2 .KeysContainer .k2 .Key.k2,
.PagingKeypad2 .KeysContainer .k3 .Key.k3,
.PagingKeypad2 .KeysContainer .k4 .Key.k4,
.PagingKeypad2 .KeysContainer .k5 .Key.k5,
.PagingKeypad2 .KeysContainer .k6 .Key.k6,
.PagingKeypad2 .KeysContainer .k7 .Key.k7,
.PagingKeypad2 .KeysContainer .k8 .Key.k8,
.PagingKeypad2 .KeysContainer .k9 .Key.k9,
.PagingKeypad2 .KeysContainer .k10 .Key.k10,
.PagingKeypad2 .KeysContainer .k11 .Key.k11,
.PagingKeypad2 .KeysContainer .k12 .Key.k12,
.PagingKeypad2 .KeysContainer .k13 .Key.k13,
.PagingKeypad2 .KeysContainer .k14 .Key.k14,
.PagingKeypad2 .KeysContainer .k15 .Key.k15,
.PagingKeypad2 .KeysContainer .k16 .Key.k16,
.PagingKeypad2 .KeysContainer .k17 .Key.k17,
.PagingKeypad2 .KeysContainer .k18 .Key.k18,
.PagingKeypad2 .KeysContainer .k19 .Key.k19,
.PagingKeypad2 .KeysContainer .k20 .Key.k20,
.PagingKeypad2 .KeysContainer .k21 .Key.k21,
.PagingKeypad2 .KeysContainer .k22 .Key.k22,
.PagingKeypad2 .KeysContainer .k23 .Key.k23 {
    visibility: visible;
}
.PagingKeypad2 .KeysContainer .c0 .Key.k0,
.PagingKeypad2 .KeysContainer .c1 .Key.k1,
.PagingKeypad2 .KeysContainer .c2 .Key.k2,
.PagingKeypad2 .KeysContainer .c3 .Key.k3,
.PagingKeypad2 .KeysContainer .c4 .Key.k4,
.PagingKeypad2 .KeysContainer .c5 .Key.k5,
.PagingKeypad2 .KeysContainer .c6 .Key.k6,
.PagingKeypad2 .KeysContainer .c7 .Key.k7,
.PagingKeypad2 .KeysContainer .c8 .Key.k8,
.PagingKeypad2 .KeysContainer .c9 .Key.k9,
.PagingKeypad2 .KeysContainer .c10 .Key.k10,
.PagingKeypad2 .KeysContainer .c11 .Key.k11,
.PagingKeypad2 .KeysContainer .c12 .Key.k12,
.PagingKeypad2 .KeysContainer .c13 .Key.k13,
.PagingKeypad2 .KeysContainer .c14 .Key.k14,
.PagingKeypad2 .KeysContainer .c15 .Key.k15,
.PagingKeypad2 .KeysContainer .c16 .Key.k16,
.PagingKeypad2 .KeysContainer .c17 .Key.k17,
.PagingKeypad2 .KeysContainer .c18 .Key.k18,
.PagingKeypad2 .KeysContainer .c19 .Key.k19,
.PagingKeypad2 .KeysContainer .c20 .Key.k20,
.PagingKeypad2 .KeysContainer .c21 .Key.k21,
.PagingKeypad2 .KeysContainer .c22 .Key.k22,
.PagingKeypad2 .KeysContainer .c23 .Key.k23 {
    background-color: #fed45a;
}
.PagingKeypad2 .KeysContainer .q0 .Key.k0,
.PagingKeypad2 .KeysContainer .q1 .Key.k1,
.PagingKeypad2 .KeysContainer .q2 .Key.k2,
.PagingKeypad2 .KeysContainer .q3 .Key.k3,
.PagingKeypad2 .KeysContainer .q4 .Key.k4,
.PagingKeypad2 .KeysContainer .q5 .Key.k5,
.PagingKeypad2 .KeysContainer .q6 .Key.k6,
.PagingKeypad2 .KeysContainer .q7 .Key.k7,
.PagingKeypad2 .KeysContainer .q8 .Key.k8,
.PagingKeypad2 .KeysContainer .q9 .Key.k9,
.PagingKeypad2 .KeysContainer .q10 .Key.k10,
.PagingKeypad2 .KeysContainer .q11 .Key.k11,
.PagingKeypad2 .KeysContainer .q12 .Key.k12,
.PagingKeypad2 .KeysContainer .q13 .Key.k13,
.PagingKeypad2 .KeysContainer .q14 .Key.k14,
.PagingKeypad2 .KeysContainer .q15 .Key.k15,
.PagingKeypad2 .KeysContainer .q16 .Key.k16,
.PagingKeypad2 .KeysContainer .q17 .Key.k17,
.PagingKeypad2 .KeysContainer .q18 .Key.k18,
.PagingKeypad2 .KeysContainer .q19 .Key.k19,
.PagingKeypad2 .KeysContainer .q20 .Key.k20,
.PagingKeypad2 .KeysContainer .q21 .Key.k21,
.PagingKeypad2 .KeysContainer .q22 .Key.k22,
.PagingKeypad2 .KeysContainer .q23 .Key.k23 {
    background-color: #70fee8;
}
.PagingKeypad2 .PageControlsContainer .previous .Control.previous,
.PagingKeypad2 .PageControlsContainer .next .Control.next,
.PagingKeypad2 .PageControlsContainer .show .Control.show {
    visibility: visible;
}
.no-touch .PagingKeypad2 .PageControlsContainer > div:not([class]),
.no-touch .PagingKeypad2 .PageControlsContainer > div[class=''] {
    display: none;
}
.PagingKeypad2 .Key {
    float: left;
    text-align: center;
    white-space: nowrap;
    height: 2em;
    line-height: 2em;
    width: 2em;
    margin-bottom: 0.2em;
    margin-left: 0.1em;
    margin-right: 0.1em;
    border-radius: 0.1em;
    background-color: #cce3fe;
    color: black;
}
.PagingKeypad2 .PageControlsContainer,
.PagingKeypad2 .QueryControlsContainer {
    display: table;
    margin: 0 auto;
    text-align: center;
}
.PagingKeypad2 .QueryControlsContainer {
    margin-bottom: 0.2em;
}
.PagingKeypad2 .Control {
    display: table-cell;
    text-align: center;
    padding-left: 0.1em;
    padding-right: 0.1em;
}
.PagingKeypad2 .Control i {
    line-height: 2em;
    height: 2em;
    width: 2em;
    border-radius: 0.1em;
    background-color: #cce3fe;
    color: black;
}
.PagingKeypad2 .PageControlsContainer .Control i {
    width: 4.2em;
}
.touch .PagingKeypad2 .PageControlsContainer .Control i {
    width: 2.733em;
}
.no-touch .PagingKeypad2 .PageControlsContainer .Control.show {
    display: none;
}
.no-touch .PagingKeypad2 .KeysContainer * .Key:hover {
    background-color: #222222;
    color: white;
}
.no-touch .PagingKeypad2 .Control i:hover {
    background-color: #222222;
    color: white;
}
.PagingKeypad2 .QueryControlsContainer .SelectGraphemeGroupIdFromQuery.incorrect i {
    color: red;
}
.PagingKeypad2 .QueryControlsContainer .SubmitAnswerViewableModel.highlight i {
    background-color: #fed45a;
}

/* PagingKeypad2CenteredControls */
.PagingKeypad2CenteredControls,
.PagingKeypad2CenteredControls * {
    /*font-size: 30px;*/
}
.no-touch .PagingKeypad2CenteredControls,
.no-touch .PagingKeypad2CenteredControls * {
    /*font-size: 40px;*/
}
.PagingKeypad2CenteredControls {
    width: 8.8em;
}
.no-touch .PagingKeypad2CenteredControls {
    width: 8.8em;
    /*width: 11.0em;*/
    /*width: 13.2em;*/
}
.PagingKeypad2CenteredControls {
    position: relative;
    overflow: hidden;
}
.PagingKeypad2CenteredControls .PageControlsContainer,
.PagingKeypad2CenteredControls .QueryControlsContainer,
.PagingKeypad2CenteredControls .KeysContainer {
/*    height: 2.2em;
    line-height: 2.2em;*/
}
.PagingKeypad2CenteredControls .Key,
.PagingKeypad2CenteredControls .Control {
/*    text-align: center;
    padding: 0.1em;*/
    display: inline-block;
}
.PagingKeypad2CenteredControls .KeysContainer .Key div,
.PagingKeypad2CenteredControls .PageControlsContainer .Control i {
    visibility: hidden;
}
.PagingKeypad2CenteredControls .k0 .Key.k0 *,
.PagingKeypad2CenteredControls .k1 .Key.k1 *,
.PagingKeypad2CenteredControls .k2 .Key.k2 *,
.PagingKeypad2CenteredControls .k3 .Key.k3 *,
.PagingKeypad2CenteredControls .k4 .Key.k4 *,
.PagingKeypad2CenteredControls .k5 .Key.k5 *,
.PagingKeypad2CenteredControls .k6 .Key.k6 *,
.PagingKeypad2CenteredControls .k7 .Key.k7 *,
.PagingKeypad2CenteredControls .k8 .Key.k8 *,
.PagingKeypad2CenteredControls .k9 .Key.k9 *,
.PagingKeypad2CenteredControls .k10 .Key.k10 *,
.PagingKeypad2CenteredControls .k11 .Key.k11 *,
.PagingKeypad2CenteredControls .k12 .Key.k12 *,
.PagingKeypad2CenteredControls .k13 .Key.k13 *,
.PagingKeypad2CenteredControls .k14 .Key.k14 *,
.PagingKeypad2CenteredControls .k15 .Key.k15 *,
.PagingKeypad2CenteredControls .k16 .Key.k16 *,
.PagingKeypad2CenteredControls .k17 .Key.k17 *,
.PagingKeypad2CenteredControls .k18 .Key.k18 *,
.PagingKeypad2CenteredControls .k19 .Key.k19 *,
.PagingKeypad2CenteredControls .k20 .Key.k20 *,
.PagingKeypad2CenteredControls .k21 .Key.k21 *,
.PagingKeypad2CenteredControls .k22 .Key.k22 *,
.PagingKeypad2CenteredControls .k23 .Key.k23 * {
    visibility: visible;
}
.PagingKeypad2CenteredControls .c0 .Key.k0 *,
.PagingKeypad2CenteredControls .c1 .Key.k1 *,
.PagingKeypad2CenteredControls .c2 .Key.k2 *,
.PagingKeypad2CenteredControls .c3 .Key.k3 *,
.PagingKeypad2CenteredControls .c4 .Key.k4 *,
.PagingKeypad2CenteredControls .c5 .Key.k5 *,
.PagingKeypad2CenteredControls .c6 .Key.k6 *,
.PagingKeypad2CenteredControls .c7 .Key.k7 *,
.PagingKeypad2CenteredControls .c8 .Key.k8 *,
.PagingKeypad2CenteredControls .c9 .Key.k9 *,
.PagingKeypad2CenteredControls .c10 .Key.k10 *,
.PagingKeypad2CenteredControls .c11 .Key.k11 *,
.PagingKeypad2CenteredControls .c12 .Key.k12 *,
.PagingKeypad2CenteredControls .c13 .Key.k13 *,
.PagingKeypad2CenteredControls .c14 .Key.k14 *,
.PagingKeypad2CenteredControls .c15 .Key.k15 *,
.PagingKeypad2CenteredControls .c16 .Key.k16 *,
.PagingKeypad2CenteredControls .c17 .Key.k17 *,
.PagingKeypad2CenteredControls .c18 .Key.k18 *,
.PagingKeypad2CenteredControls .c19 .Key.k19 *,
.PagingKeypad2CenteredControls .c20 .Key.k20 *,
.PagingKeypad2CenteredControls .c21 .Key.k21 *,
.PagingKeypad2CenteredControls .c22 .Key.k22 *,
.PagingKeypad2CenteredControls .c23 .Key.k23 * {
    background-color: #fed45a;
}
.PagingKeypad2CenteredControls .q0 .Key.k0 *,
.PagingKeypad2CenteredControls .q1 .Key.k1 *,
.PagingKeypad2CenteredControls .q2 .Key.k2 *,
.PagingKeypad2CenteredControls .q3 .Key.k3 *,
.PagingKeypad2CenteredControls .q4 .Key.k4 *,
.PagingKeypad2CenteredControls .q5 .Key.k5 *,
.PagingKeypad2CenteredControls .q6 .Key.k6 *,
.PagingKeypad2CenteredControls .q7 .Key.k7 *,
.PagingKeypad2CenteredControls .q8 .Key.k8 *,
.PagingKeypad2CenteredControls .q9 .Key.k9 *,
.PagingKeypad2CenteredControls .q10 .Key.k10 *,
.PagingKeypad2CenteredControls .q11 .Key.k11 *,
.PagingKeypad2CenteredControls .q12 .Key.k12 *,
.PagingKeypad2CenteredControls .q13 .Key.k13 *,
.PagingKeypad2CenteredControls .q14 .Key.k14 *,
.PagingKeypad2CenteredControls .q15 .Key.k15 *,
.PagingKeypad2CenteredControls .q16 .Key.k16 *,
.PagingKeypad2CenteredControls .q17 .Key.k17 *,
.PagingKeypad2CenteredControls .q18 .Key.k18 *,
.PagingKeypad2CenteredControls .q19 .Key.k19 *,
.PagingKeypad2CenteredControls .q20 .Key.k20 *,
.PagingKeypad2CenteredControls .q21 .Key.k21 *,
.PagingKeypad2CenteredControls .q22 .Key.k22 *,
.PagingKeypad2CenteredControls .q23 .Key.k23 * {
    background-color: #70fee8;
}
.PagingKeypad2CenteredControls .PageControlsContainer.previous .Control.previous i,
.PagingKeypad2CenteredControls .PageControlsContainer.next .Control.next i,
.PagingKeypad2CenteredControls .PageControlsContainer.show .Control.show i {
    visibility: visible;
}
.PagingKeypad2CenteredControls .Key *,
.PagingKeypad2CenteredControls .Control * {
    height: 2em;
    white-space: nowrap;
    background-color: #cce3fe;
    width: 2em;
    border-radius: 0.1em;
    color: black;
    overflow: hidden;
}
.PagingKeypad2CenteredControls .PageControlsContainer .Control i {
    width: 4.2em;
}
.touch .PagingKeypad2CenteredControls .PageControlsContainer .Control i {
    width: 2.733em;
}
.no-touch .PagingKeypad2CenteredControls .PageControlsContainer .Control.show {
    display: none;
}
.no-touch .PagingKeypad2CenteredControls .Key:hover {
    background-color: #222222;
    color: white;
}
.no-touch .PagingKeypad2CenteredControls .Control i:hover {
    background-color: #222222;
    color: white;
}
.PagingKeypad2CenteredControls .QueryControlsContainer .SelectGraphemeGroupIdFromQuery.incorrect i {
    color: red;
}
.PagingKeypad2CenteredControls .QueryControlsContainer .SubmitAnswerViewableModel.highlight i {
    background-color: #fed45a;
}

/* PagingKeypad2CenteredControls */
.no-touch .AltPagingKeypad2CenteredControls {
    width: 8.8em;
}
.AltPagingKeypad2CenteredControls {
    position: relative;
    overflow: hidden;
}
.AltPagingKeypad2CenteredControls .Row {
    clear: both;
}
.AltPagingKeypad2CenteredControls .Row > div {
    float: left;
    padding: 0.1em;
    height: 2em;
}
.AltPagingKeypad2CenteredControls .Key span {
    background-color: #fef1cc;
}
.AltPagingKeypad2CenteredControls .KeyControl i,
.AltPagingKeypad2CenteredControls .ResultControl i,
.AltPagingKeypad2CenteredControls .PageControl i {
    background-color: #cce3fe;
}
.AltPagingKeypad2CenteredControls .Key,
.AltPagingKeypad2CenteredControls .ResultControl i,
.AltPagingKeypad2CenteredControls .PageControl i {
    visibility: hidden;
}
.AltPagingKeypad2CenteredControls .k0 .Key.k0,
.AltPagingKeypad2CenteredControls .k1 .Key.k1,
.AltPagingKeypad2CenteredControls .k2 .Key.k2,
.AltPagingKeypad2CenteredControls .k3 .Key.k3,
.AltPagingKeypad2CenteredControls .k4 .Key.k4,
.AltPagingKeypad2CenteredControls .k5 .Key.k5,
.AltPagingKeypad2CenteredControls .k6 .Key.k6,
.AltPagingKeypad2CenteredControls .k7 .Key.k7,
.AltPagingKeypad2CenteredControls .k8 .Key.k8,
.AltPagingKeypad2CenteredControls .k9 .Key.k9,
.AltPagingKeypad2CenteredControls .k10 .Key.k10,
.AltPagingKeypad2CenteredControls .k11 .Key.k11,
.AltPagingKeypad2CenteredControls .k12 .Key.k12,
.AltPagingKeypad2CenteredControls .k13 .Key.k13,
.AltPagingKeypad2CenteredControls .k14 .Key.k14,
.AltPagingKeypad2CenteredControls .k15 .Key.k15,
.AltPagingKeypad2CenteredControls .k16 .Key.k16,
.AltPagingKeypad2CenteredControls .k17 .Key.k17,
.AltPagingKeypad2CenteredControls .k18 .Key.k18,
.AltPagingKeypad2CenteredControls .k19 .Key.k19,
.AltPagingKeypad2CenteredControls .k20 .Key.k20,
.AltPagingKeypad2CenteredControls .k21 .Key.k21,
.AltPagingKeypad2CenteredControls .k22 .Key.k22,
.AltPagingKeypad2CenteredControls .k23 .Key.k23 {
    visibility: visible;
}
.AltPagingKeypad2CenteredControls .c0 .Key.k0 *,
.AltPagingKeypad2CenteredControls .c1 .Key.k1 *,
.AltPagingKeypad2CenteredControls .c2 .Key.k2 *,
.AltPagingKeypad2CenteredControls .c3 .Key.k3 *,
.AltPagingKeypad2CenteredControls .c4 .Key.k4 *,
.AltPagingKeypad2CenteredControls .c5 .Key.k5 *,
.AltPagingKeypad2CenteredControls .c6 .Key.k6 *,
.AltPagingKeypad2CenteredControls .c7 .Key.k7 *,
.AltPagingKeypad2CenteredControls .c8 .Key.k8 *,
.AltPagingKeypad2CenteredControls .c9 .Key.k9 *,
.AltPagingKeypad2CenteredControls .c10 .Key.k10 *,
.AltPagingKeypad2CenteredControls .c11 .Key.k11 *,
.AltPagingKeypad2CenteredControls .c12 .Key.k12 *,
.AltPagingKeypad2CenteredControls .c13 .Key.k13 *,
.AltPagingKeypad2CenteredControls .c14 .Key.k14 *,
.AltPagingKeypad2CenteredControls .c15 .Key.k15 *,
.AltPagingKeypad2CenteredControls .c16 .Key.k16 *,
.AltPagingKeypad2CenteredControls .c17 .Key.k17 *,
.AltPagingKeypad2CenteredControls .c18 .Key.k18 *,
.AltPagingKeypad2CenteredControls .c19 .Key.k19 *,
.AltPagingKeypad2CenteredControls .c20 .Key.k20 *,
.AltPagingKeypad2CenteredControls .c21 .Key.k21 *,
.AltPagingKeypad2CenteredControls .c22 .Key.k22 *,
.AltPagingKeypad2CenteredControls .c23 .Key.k23 * {
    background-color: #fed45a;
}
.AltPagingKeypad2CenteredControls .q0 .Key.k0 *,
.AltPagingKeypad2CenteredControls .q1 .Key.k1 *,
.AltPagingKeypad2CenteredControls .q2 .Key.k2 *,
.AltPagingKeypad2CenteredControls .q3 .Key.k3 *,
.AltPagingKeypad2CenteredControls .q4 .Key.k4 *,
.AltPagingKeypad2CenteredControls .q5 .Key.k5 *,
.AltPagingKeypad2CenteredControls .q6 .Key.k6 *,
.AltPagingKeypad2CenteredControls .q7 .Key.k7 *,
.AltPagingKeypad2CenteredControls .q8 .Key.k8 *,
.AltPagingKeypad2CenteredControls .q9 .Key.k9 *,
.AltPagingKeypad2CenteredControls .q10 .Key.k10 *,
.AltPagingKeypad2CenteredControls .q11 .Key.k11 *,
.AltPagingKeypad2CenteredControls .q12 .Key.k12 *,
.AltPagingKeypad2CenteredControls .q13 .Key.k13 *,
.AltPagingKeypad2CenteredControls .q14 .Key.k14 *,
.AltPagingKeypad2CenteredControls .q15 .Key.k15 *,
.AltPagingKeypad2CenteredControls .q16 .Key.k16 *,
.AltPagingKeypad2CenteredControls .q17 .Key.k17 *,
.AltPagingKeypad2CenteredControls .q18 .Key.k18 *,
.AltPagingKeypad2CenteredControls .q19 .Key.k19 *,
.AltPagingKeypad2CenteredControls .q20 .Key.k20 *,
.AltPagingKeypad2CenteredControls .q21 .Key.k21 *,
.AltPagingKeypad2CenteredControls .q22 .Key.k22 *,
.AltPagingKeypad2CenteredControls .q23 .Key.k23 * {
    background-color: #70fee8;
}
.AltPagingKeypad2CenteredControls .previous .previous i,
.AltPagingKeypad2CenteredControls .next .next i,
.AltPagingKeypad2CenteredControls .show .show i {
    visibility: visible;
}
.AltPagingKeypad2CenteredControls .Row > div span,
.AltPagingKeypad2CenteredControls .Row > div i {
    height: 2em;
    line-height: 2em;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    width: 2em;
    border-radius: 0.1em;
    color: black;
    overflow: hidden;
}
.no-touch .AltPagingKeypad2CenteredControls .Row > div.PageControl i {
    width: 4.2em;
}
.touch .AltPagingKeypad2CenteredControls .Row > div.ResultControl.show i {
    background-color: #fed45a;
}
.no-touch .AltPagingKeypad2CenteredControls .ResultControl.show {
    display: none;
}
.no-touch .AltPagingKeypad2CenteredControls .Key:hover {
    background-color: #222222;
    color: white;
}
.no-touch .AltPagingKeypad2CenteredControls .Row > div span:hover,
.no-touch .AltPagingKeypad2CenteredControls .Row > div i:hover {
    background-color: #222222;
    color: white;
}
.AltPagingKeypad2CenteredControls .incorrect .SelectGraphemeGroupIdFromQuery i {
    color: red;
}
.AltPagingKeypad2CenteredControls .correct .SelectGraphemeGroupIdFromQuery i {
    background-color: #70fee8;
}
.AltPagingKeypad2CenteredControls .autocomplete:not(.correct):not(.incorrect) .SelectGraphemeGroupIdFromQuery i {
    background-color: #fed45a;
}

/* DynamicKeyboardWidget */
.DynamicKeyboardQuery {
    padding-top: 0.25em;
    padding-bottom: 0.5em;
    width: 100%;
    text-align: center;
}
.DynamicKeyboardQuery .QueryGraphemeIdsView.selected {
/*    border: 0.1em solid black;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    border-radius: 0.5em;
    background-color: #f4f3ff;*/
    /*background-color: #fed45a;*/
/*    margin-left: 0.1em;
    margin-right: 0.5em;*/
}
/*.DynamicKeyboardActiveGraphemes {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}*/
.DynamicKeyboardControls {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
/*.DynamicKeyboardActiveGraphemes .o,*/
.DynamicKeyboardControls .fa {
    /*float: left !important;*/
    padding: 1em;
    margin-right: 0.3em;
    margin-top: 0.15em;
    margin-bottom: 0.15em;
    border: 0.1em solid black;
    border-radius: 0.5em;
}
.DynamicKeyboardControls .SelectGraphemeGroupIdFromQuery.incorrect {
    color: red;
}
.DynamicKeyboardResults,
.DynamicKeyboardResults * {
    /*font-size: 30px;*/
}
.no-touch .DynamicKeyboardResults,
.no-touch .DynamicKeyboardResults * {
    /*font-size: 40px;*/
}
.touch .DynamicKeyboardResults {
    width: 8.8em;
}
.no-touch .DynamicKeyboardResults {
    width: 8.8em;
    /*width: 11.0em;*/
    /*width: 13.2em;*/
}
.touch .DynamicKeyboardResults {
    display: none;
}
.DynamicKeyboardResults .GraphemeGroup {
    line-height: 2em;
    min-height: 2em;
    text-align: center;
    background-color: #ccfef6;
    margin-bottom: 0.1em;
}
.DynamicKeyboardResults .GraphemeGroup .GraphemeGroupPrompt {
    display: none;
}
.no-touch .DynamicKeyboardResults .GraphemeGroup.HideResultsButton {
    display: none;
}
.DynamicKeyboardResults .GraphemeGroup.HideResultsButton {
    background-color: #cce3fe;
}
.DynamicKeyboardQueryCollection .g0 .Query.g0,
.DynamicKeyboardQueryCollection .g1 .Query.g1,
.DynamicKeyboardQueryCollection .g2 .Query.g2,
.DynamicKeyboardQueryCollection .g3 .Query.g3,
.DynamicKeyboardQueryCollection .g4 .Query.g4,
.DynamicKeyboardQueryCollection .g5 .Query.g5,
.DynamicKeyboardQueryCollection .g6 .Query.g6,
.DynamicKeyboardQueryCollection .g7 .Query.g7,
.DynamicKeyboardQueryCollection .g8 .Query.g8,
.DynamicKeyboardQueryCollection .g9 .Query.g9,
.DynamicKeyboardQueryCollection .g10 .Query.g10,
.DynamicKeyboardQueryCollection .g11 .Query.g11,
.DynamicKeyboardQueryCollection .g12 .Query.g12,
.DynamicKeyboardQueryCollection .g13 .Query.g13,
.DynamicKeyboardQueryCollection .g14 .Query.g14,
.DynamicKeyboardQueryCollection .g15 .Query.g15,
.DynamicKeyboardQueryCollection .g16 .Query.g16,
.DynamicKeyboardQueryCollection .g17 .Query.g17,
.DynamicKeyboardQueryCollection .g18 .Query.g18,
.DynamicKeyboardQueryCollection .g19 .Query.g19 {
    background-color: #fed45a;
}
/*:not(.active) + .DynamicKeyboardQueryCollection .QueryGraphemeIdsView:last-of-type:after {*/
.DynamicKeyboardQueryCollection .QueryGraphemeIdsView:last-of-type:after {
    content: "_";
}

/* CueWordsEditorWidget */
.CueWordsEditorWidget .CueWordViewableModel.translation {
    color: purple;
    font-style: italic;
    padding-left: 0.25em;
    padding-right: 0.25em;
}
.CueWordsEditorWidget .CueWordViewableModels {
    line-height: 2em;
}
.CueWordsEditorWidget .ForeignWordViewableModel.translation {
    color: purple;
    font-style: italic;
    padding-left: 0.25em;
    padding-right: 0.25em;
}
.CueWordsEditorWidget .ForeignWordViewableModel.selected {
    border: 0.1em solid black;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    border-radius: 0.5em;
    margin-left: 0.25em;
    margin-right: 0.25em;
}
.CueWordsEditorWidget .ForeignWordViewableModel.trigger {
    font-weight: bold;
}
.CueWordsEditorWidget .ForeignWordViewableModels {
    line-height: 2em;
}
.CueWordsEditorWidget .ForeignWordViewableModels .primaryStudyWord.unanswered {
    color: orange;
}
.CueWordsEditorWidget .ForeignWordViewableModels .primaryStudyWord.answered {
    color: green;
    font-weight: bold;
}
.CueWordsEditorWidget .TranslationWordViewableModel.selected {
    border: 0.1em solid black;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    border-radius: 0.5em;
    margin-left: 0.25em;
    margin-right: 0.25em;
}
.CueWordsEditorWidget .TranslationWordViewableModels {
    line-height: 2em;
}
.CueWordsEditorWidget .backgroundSentenceCueWords {
    line-height: 2em;
}
.CueWordsEditorWidget .translationMorphemeCueWords {
    color: purple;
    font-style: italic;
    padding-left: 0.25em;
    padding-right: 0.25em;    
}
.CueWordsEditorWidget.StudyWordCueWordsSnapshotWidget .studyWordLabel .translationWord {
    color: purple;
    font-style: italic;
    padding-left: 0.25em;
    padding-right: 0.25em;
}
.CueWordsEditorWidget.StudyWordCueWordsSnapshotWidget .backgroundSentenceCueWords  {
    line-height: 2em;
}

/* ItemListSelectorWidget */
.ItemListSelectorWidget .ItemViewableModel {
    line-height: 2em;
}

/* StudyWordSelection */
.touch .StudyWordSelection .TranslatedPhraseViewableModel {
    font-size: 75%;
}
.touch .StudyWordSelection .TranslatedPhraseViewableModel * {
    font-size: inherit;
}
.StudyWordSelection.body.highlight .TranslatedPhraseViewableModel :not(.translation) {
}
.StudyWordSelection.body.highlight .TranslatedPhraseViewableModel .translation {
    color: purple;
/*    font-style: italic;
    padding-left: 0.25em;
    padding-right: 0.25em;*/
}
.StudyWordSelection.body.highlight .TranslatedPhraseViewableModel :not(.learned):not(.selected) {
}
.StudyWordSelection.body.highlight .TranslatedPhraseViewableModel .learned {
    /*color: green;*/
    background-color: #70fee8;
/*    background-color: #e9ffb4;
    border: 1px solid #fff5b4;
    /*border-bottom: 0.1em solid black;*/
}
.StudyWordSelection.body.highlight .TranslatedPhraseViewableModel .selected {
    /*color: orange;*/
    background-color: #fed45a;
    /*background-color: #fff5b4;*/
    /*border: 1px solid #222222;*/
/*    border: 0.1em solid black;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    border-radius: 0.5em;
    background-color: #f4f3ff;
    margin-left: 0.1em;
    margin-right: 0.1em;*/
}
.StudyWordSelection.body.highlight .TranslatedPhraseViewableModel .unselected.translation {
}
.StudyWordSelection.body.highlight .TranslatedPhraseViewableModel .learned.translation {
}
.StudyWordSelection.body.highlight .TranslatedPhraseViewableModel .selected.translation {
/*    padding-left: 0.4em;
    padding-right: 0.4em;*/
}
.StudyWordSelection.body .TranslatedPhraseViewableModel {
    line-height: 1.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
.StudyWordSelection.body .TranslatedPhraseViewableModels:not(.paragraphMode) .TranslatedPhraseViewableModel {
    background-color: #FEF1CC;
    margin-bottom: 0.1em;
}
.StudyWordSelection.body .TranslatedPhraseViewableModels:not(.paragraphMode) .TranslatedPhraseViewableModel.complete {
    background-color: #CCFEF6;
}
.StudyWordSelection.body .TranslatedPhraseViewableModels.paragraphMode .TranslatedPhraseViewableModel {
    display: inline;
}
.StudyWordSelection.body .TranslatedPhraseViewableModels.paragraphMode .TranslatedPhraseToggleViewableModel {
    display: none;
}
.StudyWordSelection.body .TranslatedPhraseViewableModel .foreignPhraseWords {
}
.StudyWordSelection.body .TranslatedPhraseViewableModel .foreignPhraseText {
}
.StudyWordSelection.body .TranslatedPhraseViewableModel .translationPhraseText {
    color: purple;
}
.StudyWordSelection.body .TranslatedPhraseToggleViewableModel {
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: #fed45a;
}
.StudyWordSelection.body .complete .TranslatedPhraseToggleViewableModel {
    color: #70fee8;
}
    
.StudyWordSelection.menu .ToggleHighlightsViewableModel:not(.off) > .off,
.StudyWordSelection.menu .ToggleHighlightsViewableModel.off > :not(.off) {
    display: none;
}

/* StudyWordSummary*/
.StudyWordSummary.body .StudyWordsViewableModel div {
    line-height: 2em;
    min-height: 2em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    margin-bottom: 0.1em;
    text-align: left;
}
.no-touch .StudyWordSummary.body .StudyWordsViewableModel div {
    text-align: center;
}
    
.StudyWordSummary.body .StudyWordsViewableModel .unselected {
}
.StudyWordSummary.body .StudyWordsViewableModel .learned {
    background-color: #70fee8;
}
.StudyWordSummary.body .StudyWordsViewableModel .selected {
    background-color: #fed45a;
}
.StudyWordSummary.body .StudyWordsViewableModel.hideunselected .unselected,
.StudyWordSummary.body .StudyWordsViewableModel.hidelearned .learned,
.StudyWordSummary.body .StudyWordsViewableModel.hideselected .selected {
    display: none;
}
.StudyWordSummary .ToggleViewableModel.unselected {
    color: white;
}
.StudyWordSummary .ToggleViewableModel.learned {
    color: #70fee8;
}
.StudyWordSummary .ToggleViewableModel.selected {
    color: #fed45a;
}

/* WordTranslation */
.WordTranslation .SubGroupView div {
    line-height: 2em;
    min-height: 2em;
}
.WordTranslation .SubGroupView .TranslationPair {
    width: 100%;
    background-color: #fed45a;
    text-align: left;
    margin-bottom: 0.1em;
}
.no-touch .WordTranslation .SubGroupView .TranslationPair {
    text-align: center;
}
.WordTranslation .SubGroupView .TranslationPrompts,
.WordTranslation .SubGroupView .TranslationAnswers {
    text-align: center;
}
.WordTranslation .SubGroupView .TranslationPrompts > div,
.WordTranslation .SubGroupView .TranslationAnswers > div {
    margin-bottom: 0.1em;
} 
.WordTranslation .SubGroupView .TranslationPrompts > div {
    padding-right: 0.05em;
}
.WordTranslation .SubGroupView .TranslationPrompts .o,
.WordTranslation .SubGroupView .TranslationAnswers .o {
    width: 100%;
    word-wrap: break-word;
}
.WordTranslation .SubGroupView .TranslationPrompts .o {
    background-color: #fef1cc;
}
.WordTranslation .SubGroupView .TranslationAnswers > div {
    padding-left: 0.05em;
}
.WordTranslation .SubGroupView .TranslationAnswers .o {
    background-color: #ccfef6;
}
.WordTranslation .SubGroupView .TranslationPrompts .o.unselected,
.WordTranslation .SubGroupView .TranslationAnswers .o.unselected {
}
.WordTranslation .SubGroupView .TranslationPrompts .o.selected,
.WordTranslation .SubGroupView .TranslationAnswers .o.selected {
    background-color: #fed45a;
}
.WordTranslation .SubGroupView .TranslationPrompts .o.correct,
.WordTranslation .SubGroupView .TranslationAnswers .o.correct {
    background-color: #70fee8;
}
.WordTranslation .SubGroupView .TranslationPrompts .o.incorrect,
.WordTranslation .SubGroupView .TranslationAnswers .o.incorrect {
    color: red;
    text-decoration: line-through;
}

/* PhraseTranslation */
.PhraseTranslation .unselected,
.ForeignPhraseTranslation .unselected,
.TranslatedPhraseTranslation .unselected {
}
.PhraseTranslation .correct,
.ForeignPhraseTranslation .correct,
.TranslatedPhraseTranslation .correct {
    background-color: #70fee8;
}
.PhraseTranslation .incorrect,
.ForeignPhraseTranslation .incorrect,
.TranslatedPhraseTranslation .incorrect {
    color: red;
    text-decoration: line-through;
}
.PhraseTranslation .hidden,
.ForeignPhraseTranslation .hidden,
.TranslatedPhraseTranslation .hidden {
    visibility: hidden;
}
.PhraseTranslation .promptPhraseView,
.ForeignPhraseTranslation .promptPhraseView,
.TranslatedPhraseTranslation .promptPhraseView,
.PhraseTranslation .answerPhraseViews .o,
.ForeignPhraseTranslation .answerPhraseViews .o,
.TranslatedPhraseTranslation .answerPhraseViews .o {
    width: 100%;
    text-align: left;
    line-height: 2em;
    min-height: 2em;
    margin-bottom: 0.1em;
}
.PhraseTranslation .answerPhraseViews .o,
.ForeignPhraseTranslation .answerPhraseViews .o,
.TranslatedPhraseTranslation .answerPhraseViews .o {
    background-color: #fef1cc;
}
.PhraseTranslation .answerPhraseViews .o.correct,
.ForeignPhraseTranslation .answerPhraseViews .o.correct,
.TranslatedPhraseTranslation .answerPhraseViews .o.correct {
    background-color: #70fee8;
}
.PhraseTranslation .promptPhraseView,
.ForeignPhraseTranslation .promptPhraseView,
.TranslatedPhraseTranslation .promptPhraseView {
    background-color: #fed45a;
}
.no-touch .PhraseTranslation .promptPhraseView,
.no-touch .ForeignPhraseTranslation .promptPhraseView,
.no-touch .TranslatedPhraseTranslation .promptPhraseView,
.no-touch .PhraseTranslation .answerPhraseViews .o,
.no-touch .ForeignPhraseTranslation .answerPhraseViews .o,
.no-touch .TranslatedPhraseTranslation .answerPhraseViews .o {
    text-align: center;
}


/* TypedTranslation */
.WordTypedTranslation .ForeignPromptView,
.NGramTypedTranslation .ForeignPromptView {
    line-height: 2em;
}
.WordTypedTranslation .ForeignPromptView.incorrect,
.NGramTypedTranslation .ForeignPromptView.incorrect {
    color: red;
}
.WordTypedTranslation .SubmitAnswerViewableModel.incorrect,
.NGramTypedTranslation .SubmitAnswerViewableModel.incorrect,
.WordTypedTranslation .SubmitAnswerViewableModel.incorrect *,
.NGramTypedTranslation .SubmitAnswerViewableModel.incorrect * {
    color: red;
}
.TypedTranslation .PromptViewableModel > div {
    line-height: 2em;
    background-color: #fef1cc;
    margin-bottom: 0.1em;
    text-align: center;
}
.TypedTranslation .PromptViewableModel .correct {
    background-color: #ccfef6;
}
.TypedTranslation .PromptViewableModel .Answer,
.TypedTranslation .PromptViewableModel .Next,
.TypedTranslation .PromptViewableModel .correct .DynamicKeyboardQueryCollection,
.TypedTranslation .PromptViewableModel .incorrect .DynamicKeyboardQueryCollection {
    display: none;
}
.TypedTranslation .PromptViewableModel .correct .Next,
.TypedTranslation .PromptViewableModel .correct .Answer,
.TypedTranslation .PromptViewableModel .incorrect .Answer {
    display: inline;
}
.TypedTranslation .PromptViewableModel .incorrect .Answer {
    color: red;
}
.TypedTranslation .PromptViewableModel .correct .Answer {
    background-color: #70fee8;
}

/* ForeignSentenceTranslation */
.ForeignSentenceTranslation .ForeignSentenceViewableModel {
    line-height: 1.25em;
    text-align: center;
    background-color: #fef1cc;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
.touch .ForeignSentenceTranslation .ForeignSentenceViewableModel {
    font-size: 75%;
}
.touch .ForeignSentenceTranslation .ForeignSentenceViewableModel * {
    font-size: inherit;
}
.ForeignSentenceTranslation .ForeignSentenceViewableModel * {
    word-wrap: break-word;    
}
.ForeignSentenceTranslation .ForeignSentenceViewableModel.complete {
    background-color: #ccfef6;
}
.ForeignSentenceTranslation .ForeignSentenceViewableModel .selected {
    background-color: #fed45a;
}
.ForeignSentenceTranslation .ForeignSentenceViewableModel .translation {
    background-color: #70fee8;
}
.ForeignSentenceTranslation .SubmitTranslationViewableModel.incorrect,
.ForeignSentenceTranslation .SubmitTranslationViewableModel.incorrect * {
    color: red;
}
.ForeignSentenceTranslation .ForeignSentenceViewableModel .active {
    background-color: #fed45a;
    /*color: #fed45a;*/
} 
.ForeignSentenceTranslation .ForeignSentenceViewableModel .hide {
    display: none;
} 
.ForeignSentenceTranslation .ForeignSentenceViewableModel .show {
    display: inline;
    color: purple;
    background-color: #70fee8;
} 
.ForeignSentenceTranslation .ForeignSentenceViewableModel .correct:not(.active) {
    background-color: #70fee8;
} 
.ForeignSentenceTranslation .ForeignSentenceViewableModel .passed:not(.active) {
    color: red;
} 

/* TranslatedSentenceTranslation */
.TranslatedSentenceTranslation .TranslatedSentenceViewableModel,
.TranslatedSentenceTranslation .ForeignSentenceViewableModel {
    line-height: 1.25em;
    text-align: center;
    background-color: #ccfef6;
    width: 100%;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
.TranslatedSentenceTranslation .TranslatedSentenceViewableModel {
    background-color: #ccfef6;
    margin-bottom: 0.1em;
}
.TranslatedSentenceTranslation .ForeignSentenceViewableModel {
    background-color: #fef1cc;
}
.touch .TranslatedSentenceTranslation .TranslatedSentenceViewableModel,
.touch .TranslatedSentenceTranslation .ForeignSentenceViewableModel {
    font-size: 75%;
}
.touch .TranslatedSentenceTranslation .TranslatedSentenceViewableModel *,
.touch .TranslatedSentenceTranslation .ForeignSentenceViewableModel * {
    font-size: inherit;
}
.TranslatedSentenceTranslation .TranslatedSentenceViewableModel *,
.TranslatedSentenceTranslation .ForeignSentenceViewableModel * {
    word-wrap: break-word;
}
.TranslatedSentenceTranslation .ForeignSentenceViewableModel.complete {
    background-color: #ccfef6;
}
.touch .TranslatedSentenceTranslation .ForeignSentenceViewableModel.minimize,
.touch .TranslatedSentenceTranslation .TranslatedSentenceViewableModel.minimize {
    height: 2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.touch .TranslatedSentenceTranslation .ForeignSentenceViewableModel.minimize,
.touch .TranslatedSentenceTranslation .ForeignSentenceViewableModel.minimize *,
.touch .TranslatedSentenceTranslation .TranslatedSentenceViewableModel.minimize {
    color: #7f7f7f;
}
.TranslatedSentenceTranslation .open {
    background-color: #fed45a;
}
.TranslatedSentenceTranslation .correct {
    background-color: #70fee8;
}
.TranslatedSentenceTranslation .incorrect {
    color: red;
    text-decoration: line-through;
}
.TranslatedSentenceTranslation .active i {
    background-color: #fed45a;
}
.TranslatedSentenceTranslation .passed {
    color: red;
}
.TranslatedSentenceTranslation .SubmitTranslationViewableModel.incorrect,
.TranslatedSentenceTranslation .SubmitTranslationViewableModel.incorrect * {
    color: red;
}
.TranslatedSentenceTranslation .NeighborStudyWordsViewableModel {
    line-height: 2em;
}
.TranslatedSentenceTranslation .NeighborStudyWordViewableModel {
    line-height: 2em;
}
.TranslatedSentenceTranslation .NeighborStudyWordViewableModel.incorrect {
    color: red;
    text-decoration: line-through;
}

/* Disambiguation */
.Disambiguation .TranslationWordViewableModels {
    line-height: 2em;
    color: purple;
}
.Disambiguation .ForeignWordViewableModels {
    line-height: 2em;
}
.Disambiguation .ForeignWordViewableModel.translation {
    color: purple;
    font-style: italic;
}
.Disambiguation .ForeignWordViewableModel.selected {
    background-color: #fed45a;
}
.Disambiguation .ForeignWordViewableModel.trigger {
    font-weight: bold;
}
.Disambiguation .ResponseViewableModels {
    line-height: 2em;
}
.Disambiguation .ResponseViewableModel .translation {
    color: purple;
    font-style: italic;
}
.Disambiguation .ResponseViewableModel .correct {
    background-color: #70fee8;
}
.Disambiguation .ResponseViewableModel .incorrect {
    color: red;
    text-decoration: line-through;
}
.Disambiguation .TranslationWordViewableModel.selected {
    background-color: #fed45a;
}
.Disambiguation .ForeignDisambiguationWordViewableModel.unanswered {
    background-color: #fed45a;
}
.Disambiguation .ForeignDisambiguationWordViewableModel.answered {
    background-color: #70fee8;
}
.Disambiguation .DisambiguationWordSelectorWidget {
    line-height: 2em;
}
.Disambiguation .DisambiguationWordSelectorWidget .translation {
    color: purple;
    font-style: italic;
}
.Disambiguation .DisambiguationWordSelectorWidget .incorrect {
    color: red;
    text-decoration: line-through;
}

/* StudyWordReview */
.StudyWordReview .o {
    line-height: 2em;
    min-height: 2em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    margin-bottom: 0.1em;
    text-align: left;
    background-color: #70fee8;
}
.no-touch .StudyWordReview .o {
    text-align: center;
}
.StudyWordReview .unlearned {
    color: red;
    text-decoration: line-through;
    background-color: white;
}

/* Progress */
.Progress .toggle {
    padding-left: 0.2em;
    padding-right: 0.2em;
}
.Progress .header {
    background-color: #fed45a;
    margin-bottom: 0.1em;
    text-align: center;
    line-height: 1.25em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;    
}
.Progress .section .section .header {
    background-color: #fef1cc;
}
.Progress .row {
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    background-color: #efefef;
    line-height: 1.25em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;    
}
.Progress .row:nth-child(even) {
    background-color: #fcfcfc;
}
.touch .Progress .header,
.touch .Progress .row {
    font-size: 75%;
}
.touch .Progress .header *,
.touch .Progress .row * {
    font-size: inherit;
}   
.Progress .cycleWordsLearned .content .cycleWordsLearned,
.Progress .cycleLearningMinutes .content .cycleLearningMinutes,
.Progress .cycleWordsLearnedPerLearningMinute .content .cycleWordsLearnedPerLearningMinute,
.Progress .cycleAttempts .content .cycleAttempts,
.Progress .cycleSuccesses .content .cycleSuccesses,
.Progress .cycleErrors .content .cycleErrors,
.Progress .cycleOpportunities .content .cycleOpportunities,
.Progress .cycleErrorsPerAttempt .content .cycleErrorsPerAttempt,
.Progress .cycleSuccessesPerAttempt .content .cycleSuccessesPerAttempt,
.Progress .cycleAttemptsPerOpportunity .content .cycleAttemptsPerOpportunity,
.Progress .cycleAttemptsPerExercise .content .cycleAttemptsPerExercise,
.Progress .totalNewWordsLearned .content .totalNewWordsLearned,
.Progress .totalLearningHours .content .totalLearningHours,
.Progress .totalAttempts .content .totalAttempts,
.Progress .totalErrors .content .totalErrors,
.Progress .totalSuccesses .content .totalSuccesses,
.Progress .totalOpportunities .content .totalOpportunities,
.Progress .totalExercises .content .totalExercises,
.Progress .totalCycles .content .totalCycles,
.Progress .totalNewWordsLearnedPerLearningHour .content .totalNewWordsLearnedPerLearningHour,
.Progress .totalAttemptsPerLearningHour .content .totalAttemptsPerLearningHour,
.Progress .totalOpportunitiesPerLearningHour .content .totalOpportunitiesPerLearningHour,
.Progress .totalExercisesPerLearningHour .content .totalExercisesPerLearningHour,
.Progress .totalCyclesPerLearningHour .content .totalCyclesPerLearningHour,
.Progress .totalErrorsPerAttempt .content .totalErrorsPerAttempt,
.Progress .totalSuccessesPerAttempt .content .totalSuccessesPerAttempt,
.Progress .totalAttemptsPerOpportunity .content .totalAttemptsPerOpportunity,
.Progress .totalAttemptsPerExercise .content .totalAttemptsPerExercise,
.Progress .totalAttemptsPerCycle .content .totalAttemptsPerCycle,
.Progress .cycleScore .content .cycleScore,
.Progress .totalScore .content .totalScore,
.Progress .wordProgress .content .wordProgress,
.Progress .sentenceProgress .content .sentenceProgress {
    background-color: #ccfef6;
}
.Progress .cycleWordsLearned .favorite .content .cycleWordsLearned,
.Progress .cycleLearningMinutes .favorite .content .cycleLearningMinutes,
.Progress .cycleWordsLearnedPerLearningMinute .favorite .content .cycleWordsLearnedPerLearningMinute,
.Progress .cycleAttempts .favorite .content .cycleAttempts,
.Progress .cycleSuccesses .favorite .content .cycleSuccesses,
.Progress .cycleErrors .favorite .content .cycleErrors,
.Progress .cycleOpportunities .favorite .content .cycleOpportunities,
.Progress .cycleErrorsPerAttempt .favorite .content .cycleErrorsPerAttempt,
.Progress .cycleSuccessesPerAttempt .favorite .content .cycleSuccessesPerAttempt,
.Progress .cycleAttemptsPerOpportunity .favorite .content .cycleAttemptsPerOpportunity,
.Progress .cycleAttemptsPerExercise .favorite .content .cycleAttemptsPerExercise,
.Progress .totalNewWordsLearned .favorite .content .totalNewWordsLearned,
.Progress .totalLearningHours .favorite .content .totalLearningHours,
.Progress .totalAttempts .favorite .content .totalAttempts,
.Progress .totalErrors .favorite .content .totalErrors,
.Progress .totalSuccesses .favorite .content .totalSuccesses,
.Progress .totalOpportunities .favorite .content .totalOpportunities,
.Progress .totalExercises .favorite .content .totalExercises,
.Progress .totalCycles .favorite .content .totalCycles,
.Progress .totalNewWordsLearnedPerLearningHour .favorite .content .totalNewWordsLearnedPerLearningHour,
.Progress .totalAttemptsPerLearningHour .favorite .content .totalAttemptsPerLearningHour,
.Progress .totalOpportunitiesPerLearningHour .favorite .content .totalOpportunitiesPerLearningHour,
.Progress .totalExercisesPerLearningHour .favorite .content .totalExercisesPerLearningHour,
.Progress .totalCyclesPerLearningHour .favorite .content .totalCyclesPerLearningHour,
.Progress .totalErrorsPerAttempt .favorite .content .totalErrorsPerAttempt,
.Progress .totalSuccessesPerAttempt .favorite .content .totalSuccessesPerAttempt,
.Progress .totalAttemptsPerOpportunity .favorite .content .totalAttemptsPerOpportunity,
.Progress .totalAttemptsPerExercise .favorite .content .totalAttemptsPerExercise,
.Progress .totalAttemptsPerCycle .favorite .content .totalAttemptsPerCycle,
.Progress .cycleScore .favorite .content .cycleScore,
.Progress .totalScore .favorite .content .totalScore,
.Progress .wordProgress .favorite .content .wordProgress,
.Progress .sentenceProgress .favorite .content .sentenceProgress {
    display: block;
}
.Progress .favorite .content > div {
    display: none;
}
.Progress .row .label {
    display: inline;
}
.Progress .row .value {
    display: inline;
}
.Progress .row .label:before {
    content: ' ';
}
.Progress .content .header {
    text-align: center;
}
.Progress .evaluation .content div:nth-of-type(1) .header {
    color: #3b92fd;
}
.Progress .evaluation .content div:nth-of-type(2) .header {
    color: #766fb5;
}
.Progress .evaluation .content div:nth-of-type(3) .header {
    color: #b24c6d;
}
.Progress .evaluation .content div:nth-of-type(4) .header {
    color: #ee2925;
}
.Progress .container > div {
    display: none;
}
.Progress .container.favorite > .favorite,
.Progress .container.evaluation > .evaluation,
.Progress .container.total > .total,
.Progress .container.cycle > .cycle {
    display: block;
}
#SubBar.Progress .selector {
    width: 100%;
    height: 1.5em;
    background-color: #222222;
    display: table;
}
#SubBar.Progress .selector > div {
    display: table-cell;
    text-align: center;
    color: #e5e5e5;
    width: 3.75em;
    line-height: 1.5em;
}
#SubBar.Progress .selector > div:hover {
    background-color: #888888;
    color: white;
}

/* Patterns */
.ProgressStripeA {
    height: 0.5em;
    background: -webkit-repeating-linear-gradient(left, #ee2925, #ee2925 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
    background: -moz-repeating-linear-gradient(left, #ee2925, #ee2925 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
    background: -o-repeating-linear-gradient(left, #ee2925, #ee2925 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
    background: repeating-linear-gradient(to right, #ee2925, #ee2925 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
}
.ProgressStripeB {
    height: 0.5em;
    background: -webkit-repeating-linear-gradient(left, #feda1f, #feda1f 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
    background: -moz-repeating-linear-gradient(left, #feda1f, #feda1f 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
    background: -o-repeating-linear-gradient(left, #feda1f, #feda1f 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
    background: repeating-linear-gradient(to right, #feda1f, #feda1f 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
}
.ProgressStripeC {
    height: 0.5em;
    background: -webkit-repeating-linear-gradient(left, #70ffff, #70ffff 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
    background: -moz-repeating-linear-gradient(left, #70ffff, #70ffff 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
    background: -o-repeating-linear-gradient(left, #70ffff, #70ffff 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
    background: repeating-linear-gradient(to right, #70ffff, #70ffff 0.5em, transparent 0.5em, transparent 0.6em) repeat scroll 0% 0% transparent;
}