body.modal-open {
overflow: hidden;
position: fixed;
width: 100%;
}
/* Remove controls from Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
}
/* Re-applies the controls on :hover and :focus */
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
appearance: number-input;
}
#test-module-form {
position: relative;
}
#tm-landscape-overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(254, 210, 25, 0.87);
text-align: center;
font-size: 30px;
align-content: center;
color: var( --white );
}
/* Adds a box around the numeric value in Safari and Chrome */
input[type=number]::-webkit-textfield-decoration-container {
border: 1px #ccc solid;
background: #efefef;
}
.grey {
background: var( --grey );
}
.white {
background: var( --white );
}
.color-white {
color: var( --white ) !important;
}
.light-grey {
background: var( --light-grey );
}
.light-green {
background: var( --light-green );
}
.green {
background: var( --green );
}
.light-orange {
background: var( --light-yellow );
}
.blue {
background: var( --blue-link ) !important;
}
.light-blue {
background: var( --light-blue );
}
.yellow {
background: var( --yellow ) !important;
}
.correct-bg {
background-color: var( --green );
}
.incorrect-bg {
background-color: #fdd138;
}
.complete-correct-bg {
background: url(../images/complete-correct-mark.png) var( --green ) no-repeat;
background-position: 50% 0;
width: 100%;
height: 100%;
}
.test-failed-bg {
background-color: var( --light-yellow );
width: 100%;
height: 100%;
}
.test-failed-bg .glyphicons-bomb {
position: absolute;
top: -13%;
left: 23%;
width: 480px;
fill: var( --yellow );
}
.timeout-bg,
.no-questions-available-bg {
background: url(../images/complete-correct-mark.png) var( --light-yellow );
background-position: 50% 0;
width: 100%;
height: 100%;
}
.try-again-bg {
background-color: var( --blue-link );
width: 100%;
height: 100%;
}
.no-questions-available-bg .glyphicons,
.try-again-bg .glyphicons {
position: absolute;
top: 26px;
left: 97px;
font-size: 255px;
color: #fed21a;
}
.try-again-bg .glyphicons {
left: 0;
right: 0;
margin-top: 40px;
text-align: center;
color: var( --light-blue );
}
.text-center {
text-align: center;
}
.complete-correct-bg.preliminary-test,
.complete-correct-bg.public-test-end-screen {
background-image: none;
}
.tm-preliminary-test .show-test-module {
width: 80px;
cursor: pointer;
fill: var( --grey );
}
.preliminary-test > div {
padding: 0;
}
.preliminary-test .complete-notice:after {
display: block;
clear: both;
content: '';
}
.preliminary-test .complete-notice .description {
padding-left: 0;
font-size: 35px;
text-align: left;
font-weight: bold;
}
.preliminary-test .complete-notice .description a.see-all-options {
color: var( --white );
text-decoration: underline;
}
.preliminary-test .complete-notice .description a.see-all-options:hover {
background: 0;
text-decoration: none;
}
.preliminary-test .complete-notice article.hentry .entry-content .suggested-novela a {
padding: 0;
}
.preliminary-test .complete-notice .suggested-novela .novela-title {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 5%;
padding-top: 5px;
text-shadow: 0 1px 2px rgba( 0, 0, 0, .6 );
z-index: 10;
color: var( --white );
font-size: 30px;
font-weight: bold;
text-decoration: underline;
}
.preliminary-test .complete-notice .suggested-novela .novela-title:hover {
background: none;
}
.public-preliminary-test.tm-mid-wrap {
display: grid;
grid-template-columns: 25% 1fr;
column-gap: 30px;
padding: 80px 80px 50px 80px;
color: var( --white );
font-size: 22px;
font-weight: bold;
}
.public-preliminary-test .right .title,
.public-preliminary-test .right .link {
padding: 0;
text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
color: var( --white );
font-size: 30px;
font-weight: bold;
text-decoration: underline;
}
.public-preliminary-test .right .title:hover,
.public-preliminary-test .right .link:hover {
padding: 0;
background: none;
border: none;
}
.public-preliminary-test .right .title,
.public-preliminary-test .right .title:hover {
padding: 30px;
}
.public-preliminary-test .level-link-title {
display: grid;
}
.public-preliminary-test .level-link-title > a {
grid-row-start: 1;
grid-column-start: 1;
}
.public-preliminary-test .level-side-note,
.public-preliminary-test .level-link-title {
display: none;
}
.no-top-pad {
padding-top: 0px !important;
}
.no-bot-pad {
padding-bottom: 0px !important;
}
.no-row-pad {
padding-left: 0 !important;
padding-right: 0 !important;
}
.left-150 {
margin-left: 150px;
}
.modal {
overflow-y: auto;
z-index: 99999;
}
/*.modal-open {
overflow: auto;
}*/
.modal-open[style],
.modal[style] {
padding-right: 0px !important;
}
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* IE < 8 */
#test-module > .tm-wrap > .row {
position: relative;
overflow: hidden;
}
.tm-wrap {
max-width: 980px !important;
margin: 65px auto auto;
}
.tm-title {
font-size: 48px;
font-weight: bold;
text-align: left;
line-height: 85px;
color: var( --white );
}
.tm-upper-wrap {
display: grid;
grid-template-columns: 1fr 150px;
width: 100%;
min-height: 85px;
position: relative;
padding: 0 25px;
}
.tm-upper-wrap .header-status {
grid-column-start: 1;
width: auto;
padding: 0;
float: none;
}
.tm-upper-wrap .header-btns {
width: auto;
padding: 0;
}
#test-module .progress-wrap {
display: grid;
align-items: center;
grid-template-columns: 1fr 200px;
column-gap: 60px;
height: 100%;
}
.tm-close,
.tm-close-settings {
display: inline-block;
height: 85px;
position: relative;
vertical-align: middle;
text-align: right;
}
.tm-close.header-btns {
display: grid;
grid-template-columns: 50px 20px 50px;
margin-top: 0;
height: auto;
justify-content: end;
align-items: center;
}
.tm-close.header-btns a {
align-self: center;
}
.tm-close.header-btns .tm-close-modal {
grid-column-start: 3;
}
.tm-close > svg,
.tm-close-settings > svg {
position: relative;
fill: var( --blue );
width: 50px;
margin-top: 20px;
cursor: pointer;
}
.tm-close.header-btns a:hover svg path,
.tm-close > svg:hover {
fill: var( --darker-blue );
}
.tm-close.header-btns a:active svg path,
.tm-close > svg:active {
fill: var( --dark-blue );
}
.tm-close.header-btns > svg {
margin: 0;
}
.close {
opacity: 1;
}
.tm-mid-wrap {
position: relative;
width: 100%;
min-height: 380px;
padding: 25px 0 0;
}
.admin-go-to-question {
position: absolute;
top: 10px;
right: 10px;
width: 200px;
z-index: 9999;
}
.tm-mid {
font-size: 24px;
font-weight: bold;
line-height: 36px;
}
.browser-desc {
color: var( --white );
}
.browser-desc img.logo {
float: right;
margin-top: -56px;
padding-left: 15px;
}
.browser-desc .dictation-next-page {
cursor: pointer;
}
.browser-desc img.directon,
.browser-desc img.directon2 {
display: inline-block;
float: left;
padding-right: 20px;
position: relative;
top: 50%;
transform: translateY(-8%);
vertical-align: top;
}
.browser-desc img.directon:last-child,
.browser-desc img.directon2:last-child {
padding-right: 0px;
}
.browser-desc .cta {
width: 220px;
height: 50px;
position: relative;
margin-top: 40px;
line-height: 50px;
text-decoration: underline;
}
.browser-desc .cta a {
color: var( --white );
}
.browser-desc .cta img {
float: right;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
#test-module .browser-desc a.chrome_link,
#test-module .do-not-tell-again a,
#test-module a.dictation-next-page,
article.hentry .entry-content #test-module .browser-desc a.chrome_link,
article.hentry .entry-content #test-module .do-not-tell-again a,
article.hentry .entry-content #test-module a.dictation-next-page {
color: var( --white );
font-weight: bold;
text-decoration: underline;
}
#test-module .browser-desc a.chrome_link:hover,
#test-module .do-not-tell-again a:hover,
#test-module a.dictation-next-page:hover,
article.hentry .entry-content #test-module .browser-desc a.chrome_link:hover,
article.hentry .entry-content #test-module .do-not-tell-again a:hover,
article.hentry .entry-content #test-module a.dictation-next-page:hover {
background: 0;
text-decoration: none;
}
.tm-bot-wrap {
width: 100%;
min-height: 106px;
padding: 25px 0;
}
.tm-btn {
font-weight: bold;
font-size: 36px;
color: var( --white );
border: none;
-moz-border-radius: 0;
border-radius: 0;
width: 100%;
height: 56px;
line-height: 56px;
text-align: center;
padding: 0px;
outline: none;
}
.tm-btn.blue {
background: var( --blue );
}
.tm-btn.blue:hover {
background: var( --darker-blue ) !important;
color: var( --white );
}
.tm-btn.blue:active {
background: var( --dark-blue ) !important;
color: var( --white );
}
.tm-btn.orange {
background: var( --yellow );
}
.tm-btn.orange:hover {
background-color: var( --darker-yellow );
color: var( --white );
}
.tm-btn.orange:active {
background-color: var( --dark-yellow );
color: var( --white );
}
.tm-btn.green {
background: var( --green );
}
.tm-btn.green:hover {
background-color: var( --darker-green );
color: var( --white );
}
.tm-btn.green:active {
background-color: var( --dark-green );
color: var( --white );
}
.tm-btn.button-next {
display: none;
}
span.skip-current-test {
position: relative;
display: none;
height: 39px;
background-color: var( --white );
}
span.skip-current-test > span {
display: block;
width: 200px;
padding: 0 15px;
color: var( --green );
font-weight: bold;
line-height: 39px;
font-size: 16px;
text-align: center;
cursor: pointer;
}
span.skip-current-test .glyphicons-question-sign {
position: absolute;
top: 10px;
right: 35px;
font-size: 18px;
}
.question-bot {
text-align: right;
}
.do-not-tell-again {
font-size: 14px;
font-weight: bold;
color: var( --white );
}
.do-not-tell-again a {
color: var( --white );
}
.with-mic {
position: relative;
max-width: 400px;
}
.mic-pad-top {
padding-top: 100px;
}
.apple-mic {
position: absolute;
right: 9%;
top: 170%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.question-en,
.question-pt {
font-size: 50px;
color: var( --dark-grey );
}
.choose-text {
font-size: 50px;
color: var( --dark-grey );
text-align: center;
}
.choose-image {
text-align: center;
margin-top: 20px;
}
.choose-image img {
margin-right: 40px;
display: inline-block;
margin-bottom: 20px;
cursor: pointer;
width: 270px;
height: 210px;
}
.choose-image label {
position: relative;
}
.choose-image label:last-child img {
margin-right: 0px;
}
.choose-image input {
position: absolute;
opacity: 0;
}
.choose-image label:focus {
outline: none;
}
.choose-image label:hover img,
.choose-image label.hovered img {
outline: 4px solid #FFBBBB;
}
.tm-image-checked img,
.choose-image label.tm-image-checked:hover img {
outline: 4px solid #FF5A5A;
}
.img-chosen {
border: 2px solid var( --green );
border-radius: 4px;
}
#audio-for-image {
width: 90px;
}
.tm-play-audio {
margin: 0 auto;
width: 90px;
text-align: center;
}
.question-text-line #audio-for-image {
margin: 0;
}
#audio-button-for-image {
background-size: contain;
cursor: pointer;
display: block;
width: 90px;
}
#test-module .glyphicons-volume-up {
width: 68px;
height: 67px;
padding: 8px 9px;
background-color: #dfdfdf;
border-bottom: 1px solid var( --mid-grey );
border-radius: 50%;
box-shadow: 0 0 3px var( --mid-grey );
fill: var( --mid-grey );
font-size: 50px;
}
#test-module .glyphicons-volume-up:hover {
background-color: var( --blue-link );
fill: var( --white );
}
#test-module .glyphicons-volume-up.no-bg {
background-color: transparent;
border-bottom: none;
border-radius: none;
box-shadow: none;
fill: var( --white );
}
#test-module .glyphicons-volume-up.no-bg:hover {
background-color: var( --blue-link );
border-radius: 50%;
box-shadow: 0 0 3px rgba(191, 191, 191, 1);
color: #fcd6d6;
fill: #fcd6d6;
}
#test-module .glyphicons-volume-up.light-blue-bg {
background-color: var( --light-blue );
border-bottom: none;
border-radius: none;
box-shadow: none;
color: var( --white );
fill: var( --white );
}
#test-module .glyphicons-volume-up.light-blue-bg.on-hover,
#test-module .glyphicons-volume-up.light-blue-bg.is-currently-playing {
background-color: var( --blue-link );
border-radius: 50%;
box-shadow: 0 0 3px rgba(191, 191, 191, 1);
color: #b0b0b0;
fill: #b0b0b0;
}
#progress_bar_for_image {
border: medium none;
border-radius: 0;
margin: 0 auto;
}
.tm-audio-progressbar {
height: 6px;
position: relative;
width: 60%;
}
#progress_fill_bar_for_image {
background: var( --green ) none repeat scroll 0 0;
}
.tm-audio-progressbar-fill {
height: 6px;
}
/* -----------------------------------------------------------
Question Container
-------------------------------------------------------------- */
.question-container,
.question-answer-container {
display: grid;
padding: 0 100px;
grid-template-rows: 72px 1fr;
}
.repeat-text-container .question-container,
.repeat-text-container .question-answer-container {
grid-template-columns: 100%;
grid-template-rows: 105px 1fr 1fr;
text-align: center;
}
.multiple-choice-container .question-container {
grid-template-rows: auto 1fr;
row-gap: 20px;
}
.repeat-text-container .question-container {
grid-template-rows: 85px 1fr 1fr;
}
.repeat-text-container .question-answer-container {
grid-template-rows: 90px 90px 1fr;
}
.repeat-text-container .question-answer-container,
.repeat-audio-container .question-answer-container,
.translate-text-container .question-answer-container {
row-gap: 0;
text-align: center;
}
.repeat-audio-container .question-container {
grid-template-rows: 75px 110px;
grid-template-columns: 1fr;
justify-items: end;
align-items: end;
}
.repeat-audio-container .question-container .tm-play-audio {
margin: 0;
justify-self: center;
}
.choose-image-from-audio-container .question-container,
.choose-image-from-text-container .question-container {
padding: 0;
grid-template-rows: 1fr 72px;
}
.choose-text-from-audio-container .question-container,
.choose-text-from-text-container .question-container {
row-gap: 20px;
}
.translate-text-container .question-container {
grid-template-columns: 1fr;
}
.complete-the-phrase .question-container {
margin-top: 81px;
}
.question-slide-container .choose-answer-from-list {
justify-self: center;
margin: 0;
}
.multiple-choice-container.question-slide-container .choose-answer-from-list {
margin-left: 0;
justify-self: left;
}
.question-answer-slide {
display: none;
}
.answer-input-selection {
position: absolute;
display: grid;
right: 0;
left: 0;
bottom: 30px;
width: 307px;
margin: 0 auto;
grid-template-columns: 80px 120px 107px;
align-items: center;
justify-items: center;
}
.answer-input-selection.no-keyboard {
width: 280px;
grid-template-columns: 80px 120px 80px;
}
.answer-input-selection > div {
display: inline-block;
cursor: pointer;
}
.answer-input-selection svg {
display: block;
fill: #808080;
}
.tm-mid-wrap .question {
display: inline-block;
vertical-align: middle;
}
.repeat-text-container .tm-mid-wrap .question,
.translate-text-container .tm-mid-wrap .question,
.conversation-container .tm-mid-wrap .question {
display: block;
grid-column-start: 1;
}
.repeat-text-container .tm-mid-wrap .question {
margin-bottom: 20px;
}
.tm-mid-wrap .question > div,
.question-answer-container .answer-full {
display: inline-block;
width: auto;
font-size: 40px;
line-height: 52px;
color: var( --dark-grey );
}
.tm-mid-wrap .question > div.light-text {
color: #eaeaea;
}
.tm-mid-wrap .question.smaller-font {
margin-bottom: 20px;
}
.tm-mid-wrap .question.smaller-font > div {
font-size: 30px;
line-height: 46px;
}
.question-answer-container .answer-full {
display: block;
border-bottom: 4px solid var( --green );
padding-bottom: 0px;
margin-top: 9px;
margin-bottom: 16px;
}
.question-answer-container .answer-english,
.question-answer-container .answer-other-answers {
font-size: 28px;
color: var( --dark-grey );
}
.question-answer-container .answer-full .correct,
.question-answer-container .answer-other-answers span {
color: var( --green );
}
.tm-mid-wrap .question > div #final_span,
.tm-mid-wrap .question > div .user-input,
.tm-mid-wrap .question > div input {
background: var( --white );
border: none;
border-bottom: 4px solid var( --green );
color: var( --grey );
width: 125px;
/*height: 52px;*/
padding: 0;
line-height: 45px;
outline: none;
}
.multiple-choice-container .tm-mid-wrap .question > div #final_span,
.multiple-choice-container .tm-mid-wrap .question > div .user-input {
display: inline-block;
border-color: var( --dark-grey );
text-align: center;
}
.tm-mid-wrap .question > div #final_span.correct-answer-text,
.tm-mid-wrap .question > div .user-input.correct-answer-text {
border-bottom: 4px solid transparent;
color: var( --green );
}
.tm-mid-wrap .question > div input[type="text"] {
padding: 0;
text-align: center;
}
.tm-mid-wrap .tm-answer-input-wrapper input::-webkit-input-placeholder {
color: var( --light-green );
}
.tm-mid-wrap .tm-answer-input-wrapper input:-moz-placeholder {
/* FF 4-18 */
color: var( --light-green );
}
.tm-mid-wrap .tm-answer-input-wrapper input::-moz-placeholder {
/* FF 19+ */
color: var( --light-green );
}
.tm-mid-wrap .tm-answer-input-wrapper input:-ms-input-placeholder {
/* IE 10+ */
color: var( --light-green );
}
.tm-mid-wrap .tm-answer-input-wrapper textarea::-webkit-input-placeholder {
opacity: 0.5;
}
.tm-mid-wrap .tm-answer-input-wrapper textarea:-moz-placeholder {
/* FF 4-18 */
opacity: 0.5;
}
.tm-mid-wrap .tm-answer-input-wrapper textarea::-moz-placeholder {
/* FF 19+ */
opacity: 0.5;
}
.tm-mid-wrap .tm-answer-input-wrapper textarea:-ms-input-placeholder {
/* IE 10+ */
opacity: 0.5;
}
.tm-mid-wrap .span-placeholder {
color: var( --light-green );
}
.correct-answer-icon,
.incorrect-answer-icon,
.accents-icon {
width: 70px;
margin-top: -7px;
fill: #b6e47b;
}
.incorrect-answer-icon {
fill: var( --white )1ba;
}
.accents-icon {
color: var( --white );
font-size: 70px;
padding-top: 13px;
}
.correct-answer-background-icon,
.incorrect-answer-background-icon {
position: absolute;
top: 28%;
left: 43%;
width: 170px;
margin-left: 0;
color: #b6e47b;
fill: #b6e47b;
}
.incorrect-answer-background-icon {
fill: var( --white )1ba;
}
.tm-name-field,
.tm-email-field {
padding: 10px 10px 9px 10px;
font-size: 22px;
color: var( --grey );
}
.tm-safari-preference-img {
position: relative;
margin-top: 5px;
}
.tm-safari-preference-settings-img {
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
.tm-safari-preference-text-img {
position: absolute;
margin-top: 140px;
margin-left: 150px;
z-index: 2001;
}
.hide-on-mobile,
.hide-on-tablet {
display: inline-block;
}
.hide-on-desktop,
.hide-on-desktop-inline {
display: none;
}
/* -----------------------------------------------------------
Switch
-------------------------------------------------------------- */
.enforce-choice {
display: inline-block;
font-size: 40px;
text-align: left;
color: var( --white );
}
.switch,
.input-type-switch,
.settings-switch {
position: relative;
display: inline-block;
height: 55px;
padding: 1px;
position: relative;
vertical-align: bottom;
width: 100px;
}
.input-type-switch {
width: 120px;
margin-bottom: 0;
}
.switch:before,
.settings-switch:before {
position: absolute;
display: inline-block;
width: 23px;
height: 26px;
content: '';
background-image: url( 'data:image/svg+xml;utf8,' );
background-repeat: no-repeat;
top: 9px;
left: 19px;
fill: var( --white );
z-index: 20;
}
.switch input,
.input-type-switch input,
.settings-switch input {
display: none;
}
.slider,
.input-type-switch .slider,
.settings-switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var( --dark-grey );
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
transition: .4s;
margin: 4px;
}
.slider::before,
.settings-switch .slider:before {
background-color: white;
bottom: 4px;
content: "";
height: 40px;
left: 3px;
position: absolute;
transition: all 0.4s ease 0s;
width: 40px;
z-index: 21;
}
.input-type-switch .slider::before {
transform: translateX(66px);
}
input:checked + .slider,
.settings-switch input:checked + .slider {
background-color: var( --lighter-black );
margin: 4px;
}
.input-type-switch input:checked + .slider {
background-color: var( --dark-grey );
}
input:focus + .slider,
.input-type-switch input:focus + .slider,
.settings-switch input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before,
.settings-switch input:checked + .slider:before {
transform: translateX(46px);
}
.input-type-switch input:checked + .slider:before {
transform: translateX(0px);
}
.slider.round,
.input-type-switch .slider.round,
.settings-switch .slider.round {
-moz-border-radius: 40px;
border-radius: 40px;
}
.slider.round:before,
.input-type-switch .slider.round:before,
.settings-switch .slider.round:before {
-moz-border-radius: 50%;
border-radius: 50%;
}
.input-type-active {
display: none;
}
.mic-active,
.keyboard-active {
display: grid;
}
select {
/* styling */
background-color: var( --light-yellow );
border: thin solid var( --light-yellow );
-moz-border-radius: 6px;
border-radius: 6px;
display: inline-block;
font: inherit;
line-height: 24px;
padding: 4px;
width: 160px;
color: #cccccc;
cursor: pointer;
/* reset */
margin: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* arrows */
select.classic {
background-image: url(../images/select-bg.png);
background-position: 100% 53%;
-moz-background-size: 48px 44px;
-o-background-size: 48px 44px;
background-size: 48px 44px;
background-repeat: no-repeat;
outline: 0;
color: var( --grey );
}
.alternative-answers {
margin-top: 15px;
}
.alternative-answers p {
font-size: 18px;
line-height: 24px;
color: var( --light-green );
font-style: italic;
margin: 0;
}
.alternative-answers p:first-child {
color: var( --white );
font-style: normal;
}
/* -----------------------------------------------------------
Selectable Words
-------------------------------------------------------------- */
.word-list-available {
margin-top: 10px;
}
.word-list-available .word-list,
.answer-word-list {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.word-list-available .word-list li {
display: inline-block;
margin-right: 6px;
margin-bottom: 6px;
padding: 3px 12px;
background-color: var( --light-blue );
color: var( --white );
cursor: pointer;
font-size: 24px;
}
.word-list-available .word-list li:last-child {
margin-right: 0;
}
.word-list-available .word-list li:hover {
background-color: var( --green );
}
.answer-word-list {
display: none;
}
.answer-word-list li {
display: inline-block;
margin-right: 6px;
margin-bottom: 6px;
padding: 3px 12px;
font-size: 24px;
line-height: 36px;
background-color: #f3f3f3;
}
.answer-word-list li:last-child {
margin-right: 0;
}
.answer-word-list li:hover {
cursor: move;
}
.answer-word-list li.ui-sortable-helper {
height: 28px;
}
.answer-word-list li.ui-sortable-placeholder {
height: 22px;
}
/* -----------------------------------------------------------
Keyboard
-------------------------------------------------------------- */
.keyboard-buttons-container {
display: none;
position: absolute;
bottom: 110px;
width: 300px;
margin: 0 auto;
right: 0;
left: 0;
text-align: center;
}
.keyboard-buttons-container.keyboard-active {
display: block;
grid-row-start: 4;
}
.tm-answer-keyboard {
display: grid;
width: 100%;
grid-template-columns: 50px;
justify-items: center;
justify-content: center;
}
.tm-answer-keyboard.total-buttons-2 {
grid-template-columns: 50px 50px;
column-gap: 20px;
}
.tm-answer-keyboard.total-buttons-3 {
grid-template-columns: 50px 50px 50px;
column-gap: 20px;
}
.tm-answer-keyboard:after {
display: block;
content: '';
clear: both;
}
.tm-answer-keyboard button {
width: 50px;
font-size: 31px;
border: none;
-moz-border-radius: 16px;
border-radius: 50%;
background: var( --light-blue );
outline: inherit;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none !important;
transition: background .3s ease-in;
color: var( --white );
height: 50px;
margin: 0;
line-height: 50px;
padding: 0;
}
.tm-answer-keyboard button:hover {
background: var( --blue-link );
}
.tm-answer-keyboard button:nth-child(6) {
margin-right: 34px;
}
.tm-answer-keyboard button:nth-child(7) {
margin-left: 35px;
}
.speak-phrase-question,
.question-text {
text-align: left;
padding: 20px;
max-width: 370px;
min-height: 118px;
height: 118px;
background-color: #FEE88C;
display: inline-block;
vertical-align: top;
width: 100%;
}
.question-text {
max-width: 330px;
}
.repeat-text-question,
.question-text-line {
display: block;
height: auto;
max-width: 100%;
min-height: auto;
padding-top: 0;
padding-bottom: 40px;
padding-left: 0;
background-color: transparent;
vertical-align: unset;
}
.choose-answer-from-list {
display: inline-block;
/*max-width: 370px;*/
position: relative;
width: 100%;
margin-left: 40px;
text-align: left;
}
.speak-phrase-question p,
.question-text p,
.choose-answer-from-list p {
margin: 0;
padding: 0;
font-size: 18px;
color: var( --dark-grey );
line-height: 18px;
}
.choose-answer-from-list p {
font-size: 34px;
line-height: 34px;
}
.choose-answer-from-list p a.linker {
color: var( --dark-grey );
}
.choose-answer-from-list p a.linker.selected .answer-option-count {
border: 2px solid #449d44;
}
.choose-answer-from-list p a {
display: grid;
align-items: center;
grid-template-columns: 28px 5px 1fr;
grid-template-columns: 35px 10px 1fr;
outline: none;
}
.choose-answer-from-list .answer-option-count {
color: var( --white );
background-color: var( --green );
border-radius: 50%;
font-size: 15px;
line-height: 25px;
font-size: 25px;
line-height: 25px;
display: grid;
align-items: center;
justify-content: center;
height: 24px;
width: 24px;
height: 34px;
width: 34px;
font-weight: bold;
}
.choose-answer-from-list .answer-option {
grid-column-start: 3;
position: relative;
z-index: 0;
font-weight: 400;
}
.choose-answer-from-list p a.linker:hover {
background: var( --light-green ) none repeat scroll 0 0;
}
.choose-answer-from-list a.selected-correct-answer,
.choose-answer-from-list a.selected-incorrect-answer {
background-color: #ccff99;
border-radius: 4px;
padding: 2px;
}
.choose-answer-from-list a.selected-incorrect-answer {
background-color: #fd8793;
}
.repeat-text-question p,
.question-text-line p {
font-size: 22px;
line-height: 28px;
}
.question-text {
padding: 0;
background-color: transparent;
}
.question-text p {
font-size: 24px;
line-height: 1.2;
}
.choose-answer-from-list p {
margin-bottom: 10px;
}
.speak-next {
display: inline-block;
padding: 30px 15px 30px 20px;
vertical-align: top;
fill: #fdd138;
}
.repeat-text-line-container,
.input-answer-text-line {
display: inline-block;
width: 100%;
outline: none;
text-align: center;
}
.input-answer-text-line.inline-field {
width: auto;
}
.complete-the-phrase .input-answer-text-line.inline-field {
line-height: 32px;
height: 38px;
min-height: auto;
max-width: max-content;
font-size: 30px;
display: inline-block;
border: none;
color: var( --green );
}
.complete-the-phrase .input-answer-text-line.inline-field.correct-answer-inline {
display: none;
}
.repeat-text-line-container:after,
.input-answer-text-line:after {
display: block;
clear: both;
content: '';
}
.full-width-input .input-answer-text-line {
border-bottom: 4px solid var( --green );
}
.vocab-stack .full-width-input .input-answer-text-line {
border-bottom: none;
}
.input-answer-text-line #final_span,
.input-answer-text-line .user-input,
.input-answer-text-line #final_input {
font-size: 40px;
line-height: 52px;
/*height: 52px;*/
text-align: center;
outline: none;
}
.input-answer-text-line #final_span,
.input-answer-text-line .user-input {
min-height: 52px;
vertical-align: middle;
overflow: hidden;
}
.input-answer-text-line #final_input {
width: 100%;
background: none;
outline: none;
line-height: 44px;
}
.conversation-container .input-answer-text-line #final_input {
text-align: left;
}
.input-inline {
display: inline-block;
height: 118px;
max-width: 370px;
position: relative;
width: 100%;
}
#tm-input-results,
textarea.tm-translate-input {
background-color: #FEE88C;
border: 5px solid var( --yellow );
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
height: 118px;
max-width: 370px;
min-height: 118px;
padding: 5%;
position: relative;
text-align: left;
width: 100%;
line-height: 18px;
color: var( --dark-grey );
}
textarea.tm-translate-input {
padding: 15px;
}
.tm-answer-input-wrapper input {
background-color: #ccff99;
-moz-border-radius: 0;
border-radius: 0;
border: none;
min-width: 50px;
}
.tm-answer-input-wrapper
.tm-wrapper input,
.tm-wrapper select,
.tm-wrapper textarea {
width: auto;
}
.tm-answer-input-wrapper.full-width-input {
grid-column: 1/4;
grid-row-start: 2;
width: 100%;
}
.repeat-text-container .tm-answer-input-wrapper.full-width-input,
.translate-text-container .tm-answer-input-wrapper.full-width-input,
.conversation-container .tm-answer-input-wrapper.full-width-input {
grid-row-start: 3;
}
.is-not-answered {
position: absolute;
width: 100%;
left: 0px;
top: 76px;
font-size: 22px;
z-index: 999;
color: #23b5ee;
}
#info-start {
position: absolute;
}
.answer-input-selection .start-microphone,
.answer-input-selection .stop-microphone {
margin-bottom: 5px;
margin-left: 5px;
cursor: pointer;
fill: var( --grey );
}
.answer-input-selection .stop-microphone,
.answer-input-selection .keyboard-active svg {
fill: #449d44;
}
.answer-input-selection .stop-microphone {
animation: sft-blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
@keyframes sft-blinker {
from { opacity: 1; }
to { opacity: 0.2; }
}
.click-microphone {
font-size: 16px;
display: block;
margin-left: 60px;
}
#try-again {
position: absolute;
right: 15px;
color: #23b5ee;
font-size: 16px;
cursor: pointer;
}
.repeat-text .ajax-spinner {
position: absolute;
top: auto;
right: 80px;
bottom: 4px;
font-size: 18px;
font-weight: bold;
color: var( --blue-link );
}
.repeat-text .ajax-spinner {
animation: repeat-text-ajax-spinner 2s infinite linear;
}
@keyframes repeat-text-ajax-spinner {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
.choose-answer-from-list p input {
display: none;
}
.choose-answer-from-list p a {
cursor: pointer;
}
.complete-notice,
.fail-notice {
height: auto;
padding: 57px 0 0 0px;
}
.complete-notice a,
.fail-notice a {
color: var( --white );
text-decoration: underline;
}
.complete-notice a:hover,
.fail-notice a:hover {
text-decoration: none;
}
.complete-notice.speech-only-notice-text {
position: relative;
}
.complete-notice.speech-only-notice-text .title {
position: absolute;
}
.complete-notice.speech-only-notice-text .description {
padding-left: 157px;
max-width: 500px;
}
.fail-notice {
padding: 17px 0 0 0px;
}
.complete-notice .title,
.fail-notice .title {
font-size: 76px;
font-weight: bold;
color: var( --white );
}
.fail-notice .title {
margin-top: -30px;
margin-left: 180px;
}
.complete-notice .description,
.fail-notice .description {
font-size: 24px;
color: var( --white );
padding-left: 97px;
}
.fail-notice .description {
padding-left: 0px;
font-size: 48px;
}
article.hentry .entry-content .complete-notice .description a {
color: var( --white );
text-decoration: underline;
}
.complete-meter {
width: 210px;
height: auto;
position: relative;
display: inline-block;
margin-right: 5px;
margin-left: 5px;
margin-top: 12px;
}
.complete-meter img {
margin-right: 10px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.complete-meter p {
color: #9ad045;
display: inline-block;
font-size: 16px;
font-weight: bold;
margin-bottom: -10px;
vertical-align: middle;
}
.counter-wrap {
width: 180px;
height: 60px;
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 26px;
font-size: 0;
}
.page .counter-wrap {
margin-right: 16px;
}
.counter-wrap .count-correct,
.counter-wrap .count-incorrect {
width: 90px;
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
padding-top: 5px;
}
.counter-wrap .count-correct {
background: #dff0bf;
}
.counter-wrap .count-incorrect {
background: #f2a2a0;
}
.counter-wrap .count-correct .count,
.counter-wrap .count-incorrect .count {
font-size: 30px;
font-weight: bold;
line-height: 31px;
}
.counter-wrap .count-correct .count,
.counter-wrap .count-correct .copy {
color: #9fd34f;
}
.counter-wrap .count-incorrect .count,
.counter-wrap .count-incorrect .copy {
color: #ea220f;
}
.counter-wrap .count-correct .copy,
.counter-wrap .count-incorrect .copy {
font-size: 10px;
line-height: 21px;
text-transform: uppercase;
}
.counter-wrap .count-correct .copy {
color: #9fd34f;
}
.counter-wrap .count-incorrect .copy {
color: #ea220f;
}
.test-mode {
font-size: 24px;
line-height: 70px;
font-weight: bold;
color: #9ad045;
display: inline-block;
}
/* -----------------------------------------------------------
Notices
-------------------------------------------------------------- */
.notice-autoplay-container {
padding: 0 95px;
grid-template-columns: 1fr;
}
.notice-autoplay-header {
display: block;
}
.notice-autoplay-header .tm-title {
text-align: center;
}
.notice-autoplay-header .logo {
width: 70px;
margin-left: 30px;
}
.tm-notice-autoplay-video {
position: relative;
width: 550px;
margin: 0 auto;
padding-top: 20px;
text-align: center;
}
.tm-notice-autoplay-video iframe,
.tm-notice-autoplay-video > div,
.tm-notice-autoplay-video object {
width: 550px;
height: 330px;
}
.tm-notice-autoplay-video.safari-iphone-video {
padding: 0;
}
.notice-speaker-icon-container {
position: absolute;
display: none;
width: 140px;
height: 140px;
top: -20px;
right: -20px;
border-radius: 50%;
background-color: #d9ce46;
cursor: pointer;
z-index: 999;
}
.notice-speaker-icon {
width: 70px;
fill: var( --white );
cursor: pointer;
align-self: center;
justify-self: center;
}
/*.notice-object-video,
.is-safari-desktop-video .safari-desktop-video,
.is-safari-desktop-video .safari-ipad-video {
display: none;
}*/
.is-safari-iphone-video iframe,
.is-safari-iphone-video object,
.is-ios-video object {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.iphone-loading-video-note,
.ios-loading-video-note {
position: absolute;
top: 40%;
right: 0;
left: 0;
text-align: center;
color: var( --white );
animation: loading-video-blinker 1s linear infinite;
}
@keyframes loading-video-blinker {
50% {
opacity: 0;
}
}
/* -----------------------------------------------------------
Progress Bar
-------------------------------------------------------------- */
.progress {
overflow: hidden;
height: 35px;
margin-right: 0;
margin-bottom: 0;
background-color: var( --mid-grey );
width: 100%;
display: inline-block;
-moz-border-radius: 25px;
border-radius: 25px;
grid-column-start: 1;
}
.progress-count {
display: inline-block;
max-width: 160px;
width: 100%;
overflow: hidden;
vertical-align: top;
}
.progress-count .correct,
.progress-count .incorrect {
color: var( --green );
font-size: 36px;
font-weight: bold;
line-height: 35px;
display: inline-block;
}
.progress-count .correct {
color: var( --green );
width: 70px;
}
.progress-count .incorrect {
color: var( --red );
width: 70px;
}
.progress .bar {
width: 0%;
height: 36px;
color: var( --white );
font-size: 12px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #a5eb6c;
background-image: linear-gradient(top, #149bdf, #0480be);
background-repeat: repeat-x;
box-shadow: inset 1px 1px 7px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
transition: width 0.6s ease;
border-radius: 25px;
}
.audio-progress-wrap {
height: 10px;
margin: 10px auto;
max-width: 50px;
width: 90px;
}
.audio-progress {
overflow: hidden;
height: 10px;
background-color: #a5aeb8;
max-width: 50px;
width: 100%;
display: inline-block;
-moz-border-radius: 25px;
border-radius: 25px;
}
.audio-progress .bar {
width: 0%;
height: 10px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: var( --green );
box-shadow: inset 1px 1px 7px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
border-radius: 5px;
}
.progress-striped .bar {
background-color: var( --bright-green );
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 0 0
}
to {
background-position: 40px 0
}
}
@-moz-keyframes progress-bar-stripes {
from {
background-position: 0 0
}
to {
background-position: 40px 0
}
}
@-o-keyframes progress-bar-stripes {
from {
background-position: 0 0
}
to {
background-position: 40px 0
}
}
@keyframes progress-bar-stripes {
from {
background-position: 0 0
}
to {
background-position: 40px 0
}
}
/* -----------------------------------------------------------
Flashcards
-------------------------------------------------------------- */
#flashcards-modal .modal-dialog {
width: 980px;
margin-top: 0;
}
.admin-bar #flashcards-modal .modal-dialog {
margin-top: 32px;
}
#flashcards-modal .modal-dialog .modal-content {
border: 0;
border-radius: 0;
background-color: #fce48b;
}
#flashcards-modal .header {
padding-bottom: 0;
border: 0;
}
#flashcards-modal .header .icon {
text-align: right;
}
#flashcards-modal .header .icon .tm-vocab-stats {
position: relative;
display: block;
width: 50px;
height: 50px;
margin: 0 0 0 auto;
color: var( --white );
}
#flashcards-modal .header .icon .tm-vocab-stats .number {
position: absolute;
top: 17px;
left: 0px;
width: 40px;
height: 40px;
color: #1FAAE4;
font-size: 30px;
text-align: center;
font-family: "Helvetica Neue", HelveticaNeue, "TeX Gyre Heros", TeXGyreHeros, FreeSans, "Nimbus Sans L", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;
line-height: 40px;
}
#flashcards-modal .header .title h2 {
margin-top: 15px;
color: #1FAAE4;
}
#flashcards-modal .modal-body {
min-height: 170px;
}
#flashcards-modal .vocab-stack-list .vocab-ul-list {
overflow: auto;
margin-left: -40px;
}
#flashcards-modal .vocab-stack-list .vocab-ul-list ul {
max-height: 380px;
margin-left: 0;
list-style: none;
}
#flashcards-modal .vocab-stack-list .vocab-ul-list ul li {
position: relative;
margin-bottom: 5px;
}
#flashcards-modal .modal-body .selected-words-container:hover .selected-words {
text-decoration: underline;
}
#flashcards-modal .modal-body .glyphicons-volume-up {
position: absolute;
top: 0px;
left: -40px;
width: 40px;
height: 40px;
color: var( --white );
font-size: 20px;
background: none;
box-shadow: none;
border: none;
}
#flashcards-modal .modal-body .selected-words {
color: var( --dark-grey );
font-size: 20px;
cursor: pointer;
}
#flashcards-modal .modal-body .glyphicons-remove {
margin-top: 8px;
margin-left: 10px;
}
#flashcards-modal .modal-body .glyphicons-volume-up:hover,
#flashcards-modal .modal-body .glyphicons-remove:hover {
fill: #1FAAE4;
cursor: pointer;
}
#flashcards-modal .modal-body .sp-vocab-translation {
display: none;
padding-left: 20px;
color: var( --dark-grey );
font-size: 20px;
}
#flashcards-modal .modal-body .sp-vocab-translation:before {
display: inline-block;
content: '>';
padding-right: 5px;
}
#flashcards-modal .vocab-stack-list {
display: none;
}
#flashcards-modal .vocab-stack-list-empty h2,
#flashcards-modal .vocab-stack-list-empty p,
article.hentry #lesson-content .lesson-content-entry .vocab-stack-list-empty a,
article.hentry #lesson-content .lesson-content-entry .vocab-stack-list a.submit-vocab-list {
margin-bottom: 5px;
color: #1FAAE4;
}
article.hentry #lesson-content .lesson-content-entry .vocab-stack-list-empty a:hover {
text-decoration: underline;
background: 0;
}
article.hentry #lesson-content .lesson-content-entry .vocab-stack-list-empty a.close-flashcards,
article.hentry #lesson-content .lesson-content-entry .vocab-stack-list a.submit-vocab-list {
text-decoration: underline;
}
article.hentry #lesson-content .lesson-content-entry .vocab-stack-list-empty a.close-flashcards:hover,
article.hentry #lesson-content .lesson-content-entry .vocab-stack-list a.submit-vocab-list:hover {
text-decoration: none;
background: 0;
}
#flashcards-modal .ajax-spinner {
font-size: 20px;
vertical-align: middle;
font-weight: bold;
opacity: 0;
color: #1FAAE4;
}
#flashcards-modal .ajax-spinner {
animation: ajax-spinner 2s infinite linear;
}
@keyframes ajax-spinner {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
/* -----------------------------------------------------------
Vocab
-------------------------------------------------------------- */
.vocab-stack .vocab-stack-header {
margin-top: 15px;
}
.vocab-stack .vocab-stack-counter {
position: relative;
display: grid;
grid-template-columns: 240px 1fr;
align-items: center;
}
.vocab-stack .vocab-stack-counter:last-child {
margin: 0;
}
.vocab-stack .glyphicons-basic.shakeit {
animation: shake 0.1s ease-in-out 0.1s infinite alternate;
}
@keyframes shake {
from {
transform: rotate(10deg);
}
to {
transform-origin:center center;
transform: rotate(-10deg);
}
}
.tm-vocab-stats {
display: grid;
grid-template-columns: 55px 1fr;
}
.vocab-stack .number {
position: absolute;
top: 16px;
left: 0px;
width: 40px;
height: 40px;
color: var( --blue );
font-size: 20px;
text-align: center;
font-family: "Helvetica Neue", HelveticaNeue, "TeX Gyre Heros", TeXGyreHeros, FreeSans, "Nimbus Sans L", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;
line-height: 40px;
}
.vocab-stack .title {
margin-left: 20px;
color: var( --blue-link );
font-size: 40px;
font-weight: bold;
}
.vocab-stack .title.underlined {
text-decoration: underline;
}
.vocab-stack .tm-help-icon {
margin-left: 10px;
}
.vocab-stack .vocab-title-container {
padding-bottom: 40px;
position: absolute;
bottom: 0;
left: 0;
padding-bottom: 20px;
}
.vocab-stack .vocab-title-container .question-en {
padding-bottom: 0;
}
.vocab-stack .vocab-title-container .vocab-translation-note {
font-weight: bold;
font-size: 14px;
color: var( --dark-grey );
}
.vocab-stack .vocab-title-container .vocab-translation-note span {
color: #8bd132;
font-weight: bold;
}
.vocab-stack .question-text {
max-width: 130px;
margin-left: 80px;
}
.vocab-container .question-container {
margin: 0 auto;
grid-template-columns: 1fr;
grid-template-rows: auto;
text-align: center;
}
.vocab-word-container .word {
display: inline-block;
font-size: 60px;
color: var( --dark-grey );
line-height: 96px;
cursor: pointer;
}
.vocab-word-container .word-translation {
display: none;
}
.vocab-word-container .vocab-hint {
font-size: 29px;
vertical-align: middle;
}
.full-width-input .input-answer-text-line.vocab-keyboard-active {
border: none;
}
.vocab-show-translation {
opacity: 0.5;
margin-left: 20px;
cursor: pointer;
}
.vocab-word-container svg {
margin-left: 10px;
vertical-align: text-bottom;
opacity: 0.4;
cursor: pointer;
transition: opacity 0.4s ease-in-out;
}
.vocab-word-container svg.hover,
.vocab-word-container svg:hover {
opacity: 1;
}
.vocab-stack .action-button-text {
color: var( --white );
font-size: 35px;
text-align: left;
line-height: 70px;
}
.vocab-stack .action-buttons {
text-align: left;
}
.vocab-stack .action-buttons .vocab-correct-container,
.vocab-stack .action-buttons .vocab-incorrect-container {
position: relative;
display: inline-block;
width: 173px;
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
.vocab-stack .action-buttons .vocab-correct-container.action-clicked,
.vocab-stack .action-buttons .vocab-incorrect-container.action-clicked {
opacity: 0.5;
}
.vocab-stack .action-buttons .glyphicons-basic {
position: absolute;
top: 0;
left: 0;
margin: 0 10px;
font-size: 70px;
cursor: pointer;
}
.vocab-stack .action-buttons .vocab-checkmark-text {
color: var( --green );
}
.vocab-stack .action-buttons .glyphicons-basic.white-checkmark,
.vocab-stack .action-buttons .glyphicons-basic.animated-final-white {
color: var( --white );
}
.vocab-stack .action-buttons .vocab-checkmark-text,
.vocab-stack .action-buttons .vocab-xmark-text {
padding-left: 80px;
}
.vocab-stack .action-buttons .glyphicons-basic {
transform: scale(1);
opacity: 1;
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.vocab-stack .action-buttons .glyphicons-basic.animated {
transform: scale(1.5);
opacity: 0.1;
}
.vocab-stack .action-buttons .glyphicons-basic.animated-final {
position: absolute;
top: 0;
left: 0;
display: none;
}
.vocab-stack .action-buttons .glyphicons-basic.glyphicons-remove,
.vocab-stack .action-buttons .vocab-xmark-text {
color: var( --yellow );
}
.vocab-stack .action-buttons .vocab-checkmark-text,
.vocab-stack .action-buttons .vocab-xmark-text {
font-size: 43px;
font-weight: bold;
cursor: pointer;
}
.vocab-stack #vocab-speak-from-text-container {
display: none;
margin-top: 10px;
}
.vocab-stack .speak-line-container {
color: #52bbef;
}
.vocab-stack .speak-line-container .start-microphone,
.vocab-stack .speak-line-container .stop-microphone {
font-size: 25px;
cursor: pointer;
}
.vocab-stack .speak-line-container .start-mic-text {
margin-left: 10px;
line-height: 24px;
font-size: 20px;
cursor: pointer;
}
.vocab-stack #final-span {
color: var( --dark-grey );
}
.vocab-stack .vocab-retry {
display: none;
margin-left: 5px;
}
.vocab-stack .tm-mid-wrap.tm-vocab-no-more-words-note .col-sm-11.col-sm-offset-1 {
margin-top: 120px;
color: var( --dark-grey );
}
.vocab-stack .tm-mid-wrap.tm-vocab-no-more-words-note .col-sm-11.col-sm-offset-1 h2 {
line-height: 50px;
}
.vocab-stack .tm-mid-wrap.tm-vocab-no-more-words-note .col-sm-11.col-sm-offset-1 h2 span {
font-size: 140%;
}
.vocab-text-word p {
margin-bottom: 0;
}
.vocab-stack .vocab-page-container {
padding-top: 60px;
}
/* -----------------------------------------------------------
TM end screens
-------------------------------------------------------------- */
.vocab-stack .tm-vocab-end-screen-footer .action-buttons {
text-align: right;
}
.vocab-stack .tm-vocab-end-screen-footer .action-buttons .tm-btn {
width: auto;
padding: 0px 30px;
}
/* -----------------------------------------------------------
TM in Page
-------------------------------------------------------------- */
.entry-content #test-module {
margin-bottom: 30px;
outline: none;
border: 2px solid #8bd132;
}
.entry-content #test-module .tm-wrap {
margin-top: 0;
}
.entry-content #test-module .tm-close {
display: none;
}
.entry-content #test-module .col-md-offset-1,
.entry-content #test-module .col-sm-11.col-sm-offset-1 {
margin-left: 2%;
}
.entry-content #test-module .col-sm-11.col-sm-offset-1 {
width: 98%;
text-align: center;
}
.entry-content #test-module .admin-go-to-question input,
.entry-content #test-module .admin-go-to-question button {
line-height: 20px;
font-size: 14px;
}
.entry-content #test-module .tm-answer-keyboard button {
line-height: 24.6px;
}
.entry-content #test-module .audio-progress {
display: block;
}
/* -----------------------------------------------------------
Tooltip Notice
-------------------------------------------------------------- */
.skip-current-test-notice {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var( --white );
}
.skip-current-test-notice .tm-notice-tooltip {
top: 30px;
opacity: 1;
font-size: 20px;
}
.skip-current-test-notice .tm-notice-tooltip .tooltip-inner {
padding: 10px 60px 10px 30px;
font-size: 50px;
line-height: 60px;
}
.skip-current-test-notice .tm-notice-tooltip .tooltip-arrow {
left: 50%;
top: auto;
bottom: -40px;
margin-top: 0;
margin-bottom: 0px;
margin-left: -30px;
border-width: 40px 40px 0px;
border-right-color: transparent;
border-top-color: #8BD132;
}
/* -----------------------------------------------------------
Splash Screen
-------------------------------------------------------------- */
.tm-splash-screen {
display: grid;
align-items: center;
}
.tm-splash-screen img,
.tm-splash-screen button {
grid-row-start: 1;
grid-column-start: 1;
}
.tm-splash-screen button {
width: 200px;
justify-self: center;
}
/* -----------------------------------------------------------
Conversation Type
-------------------------------------------------------------- */
.conversation-container .question-container {
grid-template-columns: 1fr;
}
.conversation-container .tm-mid-wrap .question {
display: grid;
margin: 30px 0 10px 0;
grid-template-columns: 90px 1fr;
align-items: center;
}
.conversation-container .tm-mid-wrap .question.no-audio-prompt {
grid-template-columns: 1fr;
margin: 20px 0 30px 0;
}
.conversation .question-text-line:after {
display: block;
clear: both;
content: '';
}
.conversation .audioprompt-left,
.conversation .prompt-left {
display: inline-block;
margin-bottom: 0;
margin-right: 5px;
}
.conversation .prompt-text,
.conversation .text-to-translate {
font-size: 28px;
}
.conversation .question > .audioprompt-left {
margin: 0;
line-height: 26px;
justify-self: start;
}
.conversation .audioprompt-left#audio-for-image,
.conversation .audioprompt-left #audio-button-for-image {
width: auto;
}
.conversation.conversation-has-audio .question-en, .conversation .question-pt {
margin: 0;
}
.conversation.conversation-has-audio .question-text-line {
padding-bottom: 20px;
}
.vocab-next-show-question #tm-question-container {
position: relative;
width: 980px;
min-height: 380px;
overflow: hidden;
}
.question-slide-container {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#tm-question-container {
position: relative;
}
#test-module-form .tm-question-next-slide {
position: absolute;
top: 0px;
width: 100%;
right: -980px;
left: auto;
}
.correct-answer-icon-animation,
.incorrect-answer-icon-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
visibility: hidden;
}
.correct-answer-icon-animation svg,
.incorrect-answer-icon-animation svg {
max-height: 380px;
}
/* -----------------------------------------------------------
TM in content
-------------------------------------------------------------- */
/*.tm-container-in-content {
margin: 30px -170px 70px;
font-size: 1rem;
}
.tm-container-in-content.tm-after-content {
margin-bottom: 30px;
}*/
.button-start-tm {
display: inline-block;
width: 32px;
height: 32px;
background-image: url( 'data:image/svg+xml;utf8,' );
background-repeat: no-repeat;
cursor: pointer;
vertical-align: -9px;
}
.span-start-tm {
display: inline-block;
width: 32px;
height: 32px;
cursor: pointer;
vertical-align: -9px;
}
.button-start-tm.big,
.span-start-tm.big {
width: 64px;
height: 64px;
vertical-align: -20px;
}
.button-start-tm.med,
.span-start-tm.med {
width: 44px;
height: 44px;
vertical-align: -15px;
}
.public-test-end-screen {
display: grid;
grid-template-columns: 25% 1fr;
column-gap: 30px;
padding: 80px 80px 50px 80px;
color: var( --white );
font-size: 22px;
font-weight: bold;
}
.tm-mid-wrap.public-test-end-screen {
min-height: 560px;
}
.public-test-end-screen .right .title,
.public-test-end-screen .right .link {
padding: 0;
text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
color: var( --white );
font-size: 30px;
font-weight: bold;
text-decoration: underline;
}
.public-test-end-screen .right .title:hover,
.public-test-end-screen .right .link:hover {
padding: 0;
background: none;
border: none;
}
.public-test-end-screen .right .title,
.public-test-end-screen .right .title:hover {
padding: 30px;
}
.public-test-end-screen .right {
display: grid;
}
.public-test-end-screen .right > a {
grid-row-start: 1;
grid-column-start: 1;
}
.public-test-end-screen .email {
display: grid;
grid-template-columns: 1fr 200px;
grid-column-start: 2;
grid-column: span 2;
column-gap: 20px;
margin-top: 50px;
}
.public-test-end-screen .email .column-email-field {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
}
.public-test-end-screen .email .column-email-field input {
width: 100%;
}
.public-test-end-screen .email-response {
display: none;
margin-top: 50px;
grid-column-start: 2;
}
.tm-start-button {
display: flex;
margin-bottom: 30px;
justify-content: center;
align-items: center;
}
/* -----------------------------------------------------------
Media Queries
-------------------------------------------------------------- */
@media only screen and (max-width: 992px) {
.browser-desc img.directon {
max-width: 43%;
}
.browser-desc img.directon2 {
max-width: 88%;
}
.complete-meter {
margin-bottom: 20px;
}
.enforce-choice {
font-size: 35px;
}
#flashcards-modal .header .icon.col-xs-3 {
width: 100px;
}
.vocab-show-translation-note {
position: relative;
}
/*.tm-container-in-content {
width: 95.2vw;
position: relative;
left: 53.5%;
right: 49%;
margin-left: -50vw;
margin-right: -50vw;
}
.tm-container-in-content #test-module-form {
display: grid;
}
.tm-container-in-content #test-module-form .tm-bot-wrap {
position: relative;
}*/
.tm-mid-wrap.public-test-end-screen {
min-height: auto;
padding: 20px;
}
.public-test-end-screen .right .title, .public-test-end-screen .right .link {
font-size: 24px;
}
}
@media only screen and (max-width: 940px) {
#test-module .choose-text-from-audio .speak-next {
display: none;
}
}
@media only screen and (max-width: 920px) {
.tm-container-in-content {
width: 98.3vw;
width: auto;
left: 51.2%;
}
/*.choose-text-from-text .question-text,
.choose-text-from-audio .question-text,
.choose-text-from-text .choose-answer-from-list,
.choose-text-from-audio .choose-answer-from-list {
max-width: 300px;
}*/
}
@media only screen and (max-width: 913px) {
.tm-close.header-btns {
grid-template-columns: 50px 20px 50px;
}
}
@media only screen and (max-width: 900px) {
.vocab-stack .title {
font-size: 30px;
line-height: 60px;
}
.vocab-stack .action-buttons .vocab-correct-container,
.vocab-stack .action-buttons .vocab-incorrect-container {
width: 120px;
}
.vocab-stack .action-buttons .glyphicons-basic {
width: 40px;
}
.vocab-stack .action-buttons .vocab-checkmark-text,
.vocab-stack .action-buttons .vocab-xmark-text {
padding-left: 60px;
font-size: 30px;
}
}
@media only screen and (max-width: 850px) and (orientation: landscape) {
#tm-landscape-overlay {
display: grid;
grid-template-rows: 70px auto;
justify-items: center;
}
}
@media only screen and (max-width: 850px) {
/*.choose-text-from-text .question-text, .choose-text-from-audio .question-text, .choose-text-from-text .choose-answer-from-list, .choose-text-from-audio .choose-answer-from-list {
max-width: initial;
text-align: center;
min-height: initial;
height: auto;
margin: 0;
}*/
.choose-text-from-text > .col-sm-11,
.choose-text-from-audio > .col-sm-11 {
width: 100%;
margin: 0 0 30px 0;
text-align: center;
}
.choose-text-from-text .speak-next svg,
.choose-text-from-audio .speak-next svg {
transform: rotate(90deg);
}
}
@media only screen and (max-width: 800px) {
.tm-container-in-content {
width: 98vw;
width: auto;
left: 51.2%;
}
.tm-container-in-content .tm-upper-wrap .col-sm-9 {
width: 100%;
}
.tm-container-in-content .session-finished-footer .col-sm-offset-9 {
margin-left: 65%;
}
.tm-container-in-content .session-finished-footer .col-sm-3 {
width: 30%;
}
.tm-container-in-content .session-finished-footer .col-sm-3.has-email-icon {
width: 0;
}
.tm-container-in-content .session-finished-footer .col-sm-6 {
width: 60%;
}
.tm-container-in-content .session-finished-footer .tm-email-field {
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.hide-on-tablet,
#wpadminbar {
display: none;
}
.admin-bar .modal {
top: 0;
}
.browser-desc img.directon {
max-width: 35%;
}
.col-sm-3.header-btns {
justify-content: end;
}
.entry-content .progress {
max-width: 340px;
}
.entry-content .tm-container-in-content .progress {
max-width: 150px;
margin-bottom: 0;
}
.tm-container-in-content .progress-count {
height: auto;
}
.choose-image img {
margin-bottom: 40px;
}
.enforce-choice {
font-size: 22px;
}
.tm-btn.green,
.tm-btn.orange {
margin-bottom: 20px;
}
.sm-center {
width: 40%;
text-align: center;
}
.correct-notice-buttons .sm-center,
.incorrect-notice-buttons .sm-center {
width: 50%;
}
.correct-notice-buttons .action-btn-next-container,
.incorrect-notice-buttons .action-btn-next-container {
width: 50%;
margin-left: 25%;
}
.correct-answer-icon, .incorrect-answer-icon {
margin-top: 5px;
}
.complete-correct-bg {
background-position: 15% 0;
}
.tm-type-4 .answer-btn-container {
width: 100%;
margin-left: 0;
padding: 0;
}
.test-mode {
line-height: 50px;
}
.timeout-bg {
background-position: 14% 0;
}
.speak-phrase-question,
.complete-the-phrase .tm-answer-keyboard {
margin: 0 0 20px 0;
}
.conversation.conversation-has-audio .speak-phrase-question {
margin: 0;
}
.preliminary-test .complete-notice {
padding: 15px 0 0 0px;
}
.preliminary-test .complete-notice .suggested-novela .novela-title {
left: 10%;
font-size: 25px;
}
#flashcards-modal .modal-dialog {
width: 100%;
margin: 0;
}
#flashcards-modal .header .icon.col-xs-3 {
width: 84px;
}
#flashcards-modal .header .icon .tm-vocab-stats .number {
top: 18px;
left: 3px;
width: 35px;
height: 35px;
font-size: 20px;
line-height: 35px;
}
#flashcards-modal .header .title h2 {
font-size: 30px;
}
.vocab-stack .tm-bot-wrap:after {
display: block;
clear: both;
content: '';
}
.vocab-stack .question-text {
max-width: 100%;
margin-left: 0;
}
.vocab-stack .action-buttons {
text-align: center;
}
.vocab-stack .action-button-text {
display: none;
font-size: 30px;
line-height: 30px;
}
.vocab-stack .action-buttons .vocab-correct-container,
.vocab-stack .action-buttons .vocab-incorrect-container {
margin-top: 20px;
}
.tm-mid-wrap {
padding-top: 15px;
}
.vocab-stack .vocab-title-container .vocab-translation-note {
display: none;
}
.tm-safari-preference-settings-img,
.tm-safari-preference-text-img {
width: 380px;
}
.tm-safari-preference-text-img {
margin-top: 105px;
margin-left: 110px;
}
.tm-wrap {
margin: 0 auto auto;
}
.tm-wrap,
.tm-wrap > .row,
.tm-wrap > .row > .vocab-stack,
#test-module-form,
.tm-mid-wrap {
height: 100%;
}
.tm-type-6 #tm-question-container,
#tm-question-container {
width: 100%;
height: 85%;
}
#tm-question-container.is-notice {
height: 83%;
}
#tm-question-container.is-notice.is-safari-iphone-video {
height: 100%;
}
#tm-question-container.is-notice.is-safari-iphone-video .tm-close-notice-btn {
position: fixed;
bottom: 0px;
}
.tm-container-in-content #tm-question-container {
min-height: 220px;
height: 100%;
}
#test-module .vocab-stack #tm-question-container {
height: 90%;
}
.tm-container-in-content {
position: relative;
}
.question-bot > .col-sm-6:last-child {
width: 100%;
margin-left: 0;
}
.tm-bot-wrap {
min-height: 97px;
padding: 15px 0;
background: var( --white );
}
.switch {
display: block;
margin: 0 auto;
}
.enforce-choice {
font-size: 30px;
vertical-align: middle;
}
.tm-btn.green, .tm-btn.orange {
margin-bottom: 0px;
height: 66px;
font-size: 46px;
line-height: 66px;
}
.try-again-bg .glyphicons {
margin-top: 180px;
}
.try-again-bg .col-sm-9 {
width: 85%;
}
.wrong-accents-footer .try-again-button-container {
width: 75%;
margin-left: 0;
}
#test-module-settings-page .tm-bot-wrap .col-sm-3 {
width: 100%;
margin-left: 0;
}
.session-finished-footer .col-sm-3.col-sm-offset-9,
.session-failed-footer .col-sm-3.col-sm-offset-9 {
width: 40%;
margin-left: 60%;
}
.choose-text-from-audio .choose-answer-from-list p a {
font-size: 30px;
line-height: 40px;
}
.repeat-text-container .question-container {
grid-template-rows: 85px max-content 1fr;
}
.repeat-text-container .tm-mid-wrap .question {
margin-bottom: 0;
}
.tm-container-in-content .answer-input-selection {
bottom: 30px;
}
.tm-container-in-content .question-container {
margin-bottom: 50px;
}
.tm-container-in-content .repeat-text-container .question-container {
padding-bottom: 70px;
}
.tm-container-in-content .tm-mid-wrap .question {
margin-bottom: 0;
}
.tm-container-in-content .keyboard-buttons-container.keyboard-active {
margin-bottom: 50px;
}
.tm-container-in-content .session-finished-footer {
background: initial;
}
.tm-container-in-content .complete-notice .title, .tm-container-in-content .fail-notice .title,
.tm-container-in-content .complete-notice .description, .tm-container-in-content .fail-notice .description {
text-align: center;
}
.tm-container-in-content .session-finished-footer .col-sm-6,
.tm-container-in-content .session-finished-footer .col-sm-3 {
width: 100%;
}
.vocab-word-container .vocab-hint,
.vocab-word-container svg {
display: block;
}
.vocab-word-container svg {
margin: 0 auto;
}
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
.conversation .audioprompt-left,
.conversation .conversation-texts {
float: none;
text-align: center;
}
.conversation .audioprompt-left#audio-for-image {
display: none;
}
.question-container, .question-answer-container {
padding: 0 20px;
row-gap: 50px;
margin-top: 50px;
}
.repeat-text-container .question-container {
margin-top: 30px;
}
.answer-title {
font-size: 38px;
text-align: center;
color: var( --dark-grey );
}
}
@media only screen and (max-width: 768px) {
#tm-question-container:not(.is-notice) {
background-color: var( --white );
}
.entry-content .question-text,
.entry-content .choose-answer-from-list {
max-width: initial;
}
.choose-text-from-audio-container .question-container,
.choose-text-from-text-container .question-container {
text-align: center;
}
.complete-the-phrase .question-container {
margin-top: 50px;
grid-template-columns: 1fr;
}
.choose-text-from-text-container.question-slide-container .choose-answer-from-list,
.multiple-choice-container.question-slide-container .choose-answer-from-list {
justify-self: center;
}
.multiple-choice-container.question-slide-container .choose-answer-from-list {
width: auto;
}
.repeat-text-container .question-answer-container {
grid-template-rows: 90px 70px 1fr;
}
.question-container, .question-answer-container {
padding: 0 20px;
}
.answer-input-selection {
bottom: 80px;
}
.question-container,
.multiple-choice-container .question-container {
row-gap: normal;
}
.question-container, .question-answer-container,
.multiple-choice-container .question-container {
grid-template-rows: auto;
}
.question-answer-container.answer-has-title {
margin-top: 40px;
row-gap: 20px;
}
.question-answer-container.answer-has-title .answer-full {
border: none;
}
.question-en, .question-pt,
.tm-mid-wrap .question {
margin-bottom: 50px;
text-align: center;
}
.complete-the-phrase .question {
margin-bottom: 30px;
}
.conversation-container .tm-mid-wrap .question {
grid-template-columns: 1fr;
}
.keyboard-buttons-container {
position: relative;
bottom: 0;
margin-top: 20px;
}
.tm-answer-input-wrapper.full-width-input {
grid-row-start: auto;
margin-top: 20px;
}
.tm-upper-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.tm-type-6 #tm-question-container,
#tm-question-container,
#test-module .vocab-stack #tm-question-container {
height: 100%;
}
.tm-mid-wrap,
.vocab-stack .vocab-page-container {
padding-top: 130px;
}
.tm-bot-wrap {
position: fixed;
bottom: 0;
padding-bottom: 0;
}
.tm-container-in-content .tm-upper-wrap,
.tm-container-in-content .tm-bot-wrap {
position: relative;
}
.complete-notice, .fail-notice {
padding: 100px 0 0 0px;
}
.vocab-stack .vocab-stack-counter {
grid-template-columns: max-content 1fr;
}
.vocab-word-container .word {
font-size: 34px;
line-height: 46px;
}
.vocab-word-container svg {
width: 44px;
}
.answer-input-selection {
bottom: 100px;
width: fit-content;
}
.vocab-container .answer-input-selection {
grid-template-columns: 80px 120px 80px;
}
.vocab-skip-button {
float: none;
width: auto;
margin: 0;
}
.tm-mid-wrap.complete-correct-bg,
.tm-mid-wrap.incomplete-correct-bg {
z-index: 100;
height: 100%;
}
.tm-bot-wrap.session-finished-footer,
.tm-bot-wrap.session-failed-footer {
z-index: 101;
background: transparent;
}
.tm-type-6 .answer-btn-container.col-sm-offset-6 {
width: 100%;
margin: 0px;
}
.conversation-container .tm-mid-wrap .question.no-audio-prompt {
margin: 0px;
}
}
@media only screen and (max-width: 736px) {
.hide-on-mobile {
display: none;
}
.hide-on-desktop {
display: block;
}
.hide-on-desktop-inline {
display: inline;
}
.tm-upper-wrap {
grid-template-columns: 1fr 80px;
min-height: 60px;
padding: 0 20px;
}
#test-module .progress-wrap {
grid-template-columns: 1fr 150px;
column-gap: 20px;
}
.vocab-stack .tm-mid-wrap.tm-vocab-no-more-words-note .col-sm-11.col-sm-offset-1 {
margin-top: 30px;
}
.tm-mid-wrap {
padding-top: 60px;
}
.session-finished-footer .col-sm-3.col-sm-offset-9,
.session-failed-footer .col-sm-3.col-sm-offset-9 {
width: 100%;
margin-left: 0;
}
.complete-notice.speech-only-notice-text .title {
position: relative;
}
.complete-notice.speech-only-notice-text .description {
padding-left: 0;
}
.tm-close,
.tm-close-settings {
height: 85px;
width: 120px;
padding: 0;
}
.tm-close.header-btns {
grid-template-columns: 30px 20px 30px;
}
.tm-close.header-btns svg {
align-self: center;
}
.vocab-stack .tm-close {
width: initial;
}
.tm-close-settings {
width: 100%;
height: 60px;
padding-right: 10px;
}
.tm-close > svg,
.tm-close-settings > svg {
width: 30px;
margin-top: 14px;
margin-right: 13px;
}
.test-failed-header .tm-close {
padding: 0 10px 0 0;
width: 100%;
}
.vocab-text-word {
padding-bottom: 20px;
text-align: center;
}
.vocab-text-word p {
margin-bottom: 0;
}
.vocab-show-translation-note {
display: none;
}
#test-module .enforce-accents-container {
position: absolute;
bottom: 0;
width: 100%;
}
.complete-notice .title,
.fail-notice .title {
font-size: 50px;
text-align: center;
}
.complete-notice .description,
.fail-notice .description {
padding-left: 0;
text-align: center;
}
.complete-correct-bg {
background-position: 300% 40px;
background-size: 90%;
background-repeat: no-repeat;
}
.try-again-bg .glyphicons-alert {
display: none;
}
.try-again-bg .question-en,
.try-again-bg .question-pt {
padding-bottom: 20px !important;
}
.answer-btn-container.col-sm-offset-6 {
margin-bottom: 0px;
padding: 0;
}
.question-bot > .col-sm-6:last-child {
width: 100%;
}
.switch {
width: 80px;
height: 35px;
vertical-align: bottom;
}
.switch:before {
top: 4px;
left: 7px;
font-size: 19px;
}
.slider::before {
width: 20px;
height: 20px;
}
.tm-btn.green, .tm-btn.orange {
margin-bottom: 10px;
}
.action-btn-next-container .tm-btn.green,
.action-btn-next-container .tm-btn.orange {
margin-top: 10px;
}
.enforce-accents-container,
.correct-incorrect-sign,
.wrong-accents-sign,
.incorrect-answer-background-icon,
.correct-answer-background-icon {
display: none;
}
.action-buttons > div:last-child button {
margin-bottom: 0;
}
.vocab-stack .action-buttons .vocab-correct-container,
.vocab-stack .action-buttons .vocab-incorrect-container {
margin-top: 5px;
}
.correct-notice-buttons .action-btn-next-container,
.incorrect-notice-buttons .action-btn-next-container {
width: 100%;
margin-left: 0%;
}
.correct-notice-buttons .action-btn-next-container .tm-btn.green,
.incorrect-notice-buttons .action-btn-next-container .tm-btn.green,
.correct-notice-buttons .action-btn-next-container .tm-btn.orange,
.incorrect-notice-buttons .action-btn-next-container .tm-btn.orange {
margin: 0;
}
.choose-text {
margin-top: 10px;
font-size: 28px;
line-height: 34px;
}
#tm-settings-page .tm-bot-wrap {
padding: 15px 0;
}
.choose-text-from-audio .choose-answer-from-list p a {
font-size: 24px;
line-height: 1.2;
}
.answer-input-selection .slider::before {
width: 40px;
height: 40px;
}
.tm-mid-wrap .question > div, .question-answer-container .answer-full {
width: 100%;
text-align: center;
}
.conversation .audioprompt-left,
.conversation .prompt-left {
margin-bottom: 10px;
}
.conversation-container .question-container {
margin-top: 10px;
grid-template-rows: auto;
}
.conversation-container .tm-mid-wrap .question {
margin: 0;
}
.conversation .tm-answer-input-wrapper.full-width-input {
margin-top: 0;
grid-column: auto;
grid-row-start: auto;
}
.conversation .full-width-input .input-answer-text-line {
border: none;
text-align: left;
}
.conversation .input-answer-text-line #final_span,
.conversation .input-answer-text-line .user-input {
text-align: left;
font-size: 40px;
line-height: 52px;
color: var( --green );
}
.conversation .dots {
height: 30px;
margin-top: 10px;
}
.conversation .dots span {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
animation-name: conversation-dots;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
border-radius: 50%;
background: #808080;
}
.conversation .dots span:nth-child(2) {
animation-delay: .2s;
}
.conversation .dots span:nth-child(3) {
animation-delay: .4s;
}
@keyframes conversation-dots {
0% {
opacity: .2;
}
20% {
opacity: 1;
}
100% {
opacity: .2;
}
}
.tm-type-6 .conversation .prompt-text,
.tm-type-6 .conversation .text-to-translate {
display: block;
text-align: left;
color: var( --grey );
}
.tm-type-6 .conversation .prompt-text {
font-size: 50px;
line-height: 62px;
}
.tm-type-6 .conversation .text-to-translate {
font-size: 30px;
line-height: 42px;
}
.multiple-choice-container .tm-mid-wrap .question > div #final_span,
.multiple-choice-container .tm-mid-wrap .question > div .user-input,
.tm-mid-wrap .question > div #final_span,
.tm-mid-wrap .question > div .user-input {
width: auto;
display: inline;
border: none;
color: var( --green );
}
.tm-mid-wrap .question > div #final_span .span-placeholder,
.tm-mid-wrap .question > div .user-input .span-placeholder {
color: var( --green );
}
.complete-the-phrase .input-answer-text-line.inline-field.correct-answer-inline {
display: inline;
}
.complete-the-phrase .input-answer-text-line.inline-field.hide-on-mobile {
display: none;
}
.tm-mid-wrap.public-test-end-screen,
.public-test-end-screen .email {
display: block;
}
.public-test-end-screen .left .message,
.public-test-end-screen .email .column-email-field {
margin-bottom: 20px;
}
.public-test-end-screen .right .title, .public-test-end-screen .right .title:hover {
padding: 10px;
}
}
@media only screen and (max-width: 736px) and (orientation: portrait) {
.tm-btn.green.button-answer,
.tm-btn.orange.button-next {
height: 66px;
font-size: 46px;
line-height: 66px;
}
.multiple-choice-container .tm-mid-wrap .question > div #final_span,
.multiple-choice-container .tm-mid-wrap .question > div .user-input {
width: max-content !important;
}
}
@media only screen and (max-width: 670px) {
.vocab-stack .vocab-stack-header {
margin-top: 5px;
margin-bottom: 5px;
}
.vocab-stack .vocab-stack-counter {
margin-right: 20px;
}
.vocab-stack-counter .title {
display: none;
}
}
@media only screen and (max-width: 512px) {
.question-en, .question-pt {
font-size: 38px;
text-align: center;
}
.simple-layout .question-en,
.simple-layout .question-pt {
margin-bottom: 10px;
text-align: left;
font-size: 50px;
line-height: 62px;
color: var( --grey );
}
.choose-answer-from-list .answer-option,
.tm-mid-wrap .question > div,
.question-answer-container .answer-full,
.tm-mid-wrap .question > div #final_span,
.tm-mid-wrap .question > div input,
.tm-mid-wrap .question > div .user-input,
.input-answer-text-line #final_span,
.input-answer-text-line .user-input,
.input-answer-text-line #final_input {
font-size: 30px;
line-height: 40px;
min-height: 40px;
}
.choose-text-from-audio-container .choose-answer-from-list .answer-option {
font-size: inherit;
line-height: unset;
min-height: auto;
}
.simple-layout .question > div {
margin-bottom: 10px;
font-size: 30px;
line-height: 42px;
}
.simple-layout .input-answer-text-line #final_input {
padding: 0;
text-align: left;
border-bottom: 4px solid var( --green );
font-size: 40px;
line-height: 52px;
}
.tm-mid-wrap .question > div #final_span,
.tm-mid-wrap .question > div .user-input,
.tm-mid-wrap .question > div input {
line-height: 32px;
height: 38px;
min-height: auto;
max-width: max-content;
}
.question-answer-container .answer-full {
font-size: 26px;
line-height: 36px;
}
.public-test-end-screen .email .column-email-field {
display: block;
}
.public-test-end-screen .email .column-email-field input:first-child {
margin-bottom: 20px;
}
.tm-type-6 .conversation .prompt-text {
font-size: 24px;
line-height: 38px;
}
.tm-type-6 .conversation .text-to-translate,
.conversation .full-width-input .input-answer-text-line,
.conversation .input-answer-text-line #final_span {
font-size: 32px;
line-height: 36px;
}
}
@media only screen and (max-width: 479px) {
.tm-title {
font-size: 30px;
line-height: 60px;
}
.tm-close > span {
font-size: 15px;
}
.tm-close {
height: 60px;
width: 92px;
padding: 0;
}
.vocab-stack .tm-close {
width: initial;
}
.browser-desc img.logo {
width: 45%;
}
.browser-desc img.directon {
max-width: 62%;
float: none;
}
.browser-desc img.directon2 {
max-width: 82%;
}
.choose-image img {
margin-right: 0px;
}
.progress-count .total {
width: 39px;
}
.progress-count .elapsed {
width: 32px;
}
.progress-count .total,
.progress-count .elapsed {
font-size: 30px;
}
.progress-count .correct, .progress-count .incorrect {
padding: 0 5px;
font-size: 25px;
}
.progress-count .correct,
.progress-count .incorrect {
width: auto;
}
.try-again-bg .glyphicons {
top: 24%;
font-size: 90px;
}
.test-failed-bg .glyphicons-bomb {
top: 16%;
left: 3%;
width: 85%;
}
.fail-notice .description {
padding-left: 0px;
font-size: 38px;
line-height: 44px;
text-align: center;
}
.fail-notice .title {
margin-top: 0px;
margin-left: 0px;
text-align: center;
font-size: 56px;
}
span.skip-current-test {
width: 100%;
top: -20px;
}
span.skip-current-test > span {
width: 100%;
}
span.skip-current-test .glyphicons-question-sign {
right: 25%;
}
.skip-current-test-notice .tm-notice-tooltip {
top: 100px;
}
.skip-current-test-notice .tm-notice-tooltip {
width: 100%;
}
.skip-current-test-notice .tm-notice-tooltip .tooltip-inner {
padding: 30px 60px 30px 30px;
font-size: 23px;
line-height: 35px;
}
#flashcards-modal .header .col-xs-9 {
width: 250px;
}
.vocab-stack .vocab-stack-header {
margin-top: 6px;
}
.vocab-stack .tm-vocab-stats svg {
width: 45px;
}
.vocab-stack .number {
top: 15px;
width: 32px;
height: 32px;
line-height: 32px;
font-size: 18px;
}
.vocab-stack .title {
position: absolute;
top: 0;
left: 70px;
width: 140px;
margin: 0;
line-height: 24px;
font-size: 20px;
}
.vocab-stack-counter .vocab-faq {
margin-left: 10px;
margin-bottom: 8px;
}
.vocab-stack .action-button-text {
display: none;
text-align: center;
}
#test-module .correct-answer #audio-button-for-image,
#test-module .incorrect-answer #audio-button-for-image {
margin: 20px auto;
width: 69px;
}
#test-module .correct-answer .question-en,
#test-module .correct-answer .question-pt,
#test-module .incorrect-answer .question-en,
#test-module .incorrect-answer .question-pt {
font-size: 24px;
}
.incorrect-answer .question-en, .incorrect-answer .question-pt,
.correct-answer .question-en, .correct-answer .question-pt {
line-height: 28px;
}
#test-module .enforce-accents-container {
margin: -20px 0 10px;
}
#test-module .enforce-accents-container label.switch {
margin-bottom: 0;
}
#test-module .tm-mid-wrap.type-from-audio,
#test-module .tm-mid-wrap.translate-text {
padding-bottom: 10px;
}
#test-module .type-from-audio .speak-phrase-question,
#test-module .translate-text .speak-phrase-question {
min-height: auto;
height: auto;
padding: 0;
background: 0;
}
#test-module .type-from-audio textarea.tm-translate-input,
#test-module .translate-text textarea.tm-translate-input {
height: 35px;
min-height: auto;
padding: 5px;
background: 0;
resize: none;
border: 0;
border-bottom: 5px solid var( --yellow );
outline: none;
}
#test-module .type-from-audio textarea.tm-translate-input::-webkit-input-placeholder::before,
#test-module .translate-text textarea.tm-translate-input::-webkit-input-placeholder::before {
content: "type here";
}
#test-module .type-from-audio .keyboard-buttons-container,
#test-module .type-from-audio .audio-progress-wrap,
#test-module .type-from-audio .speak-next,
#test-module .translate-text .speak-next {
display: none;
}
#tm-question-container .tm-mid-wrap {
padding-bottom: 0;
}
.tm-bot-wrap {
min-height: 70px;
padding: 10px 0;
}
}
@media only screen and (max-width: 414px) {
.tm-upper-wrap {
padding: 0 10px;
}
#test-module .progress-wrap {
grid-template-columns: 1fr 110px;
}
.tm-close.header-btns {
grid-template-columns: 30px 10px 30px;
justify-content: center;
margin-top: 0;
}
.choose-image img {
width: 170px;
height: 140px;
margin-bottom: 10px;
}
.choose-image label:first-child {
margin-right: 10px;
}
.choose-image label:nth-child(2) {
margin-left: 10px;
}
.choose-answer-from-list p a {
font-size: 24px;
line-height: 1.2;
}
.choose-answer-from-list {
width: auto !important;
}
.question-container, .question-answer-container {
grid-template-rows: auto 1fr;
}
.multiple-choice-container .question-en,
.multiple-choice-container .question {
margin-bottom: 30px;
}
.multiple-choice-container .choose-answer-from-list p {
margin-bottom: 5px;
}
}
@media only screen and (max-width: 375px) {
.choose-image img {
width: 150px;
height: 120px;
margin-bottom: 10px;
}
.choose-image label:first-child {
margin-right: 10px;
}
.choose-image label:nth-child(2) {
margin-left: 10px;
}
/*.vocab-stack .question-text {
height: 0;
min-height: auto;
}*/
}
@media only screen and (max-width: 375px) and (max-height: 812px) {
.is-safari-iphone-video iframe, .is-safari-iphone-video object, .is-safari-iphone-video object embed {
width: 375px;
height: 812px;
}
}
@media only screen and (max-width: 414px) and (max-height: 736px) {
.is-safari-iphone-video iframe, .is-safari-iphone-video object, .is-safari-iphone-video object embed {
width: 414px;
height: 736px;
}
}
@media only screen and (max-width: 375px) and (max-height: 667px) {
.is-safari-iphone-video iframe, .is-safari-iphone-video object, .is-safari-iphone-video object embed {
width: 375px;
height: 667px;
}
}
@media only screen and (max-width: 320px) and (max-height: 568px) {
.is-safari-iphone-video iframe, .is-safari-iphone-video object, .is-safari-iphone-video object embed {
width: 320px;
height: 568px;
}
}
@media only screen and (max-width: 320px) {
.tm-title {
font-size: 30px;
line-height: 60px;
}
.tm-upper-wrap {
height: 60px;
}
.choose-image img {
width: 120px;
height: 90px;
margin-bottom: 10px;
}
.choose-image label:first-child {
margin-right: 10px;
}
.choose-image label:nth-child(2) {
margin-left: 10px;
}
.tm-btn {
height: 36px;
line-height: 36px;
font-size: 26px;
}
#flashcards-modal .header .col-xs-9 {
width: 220px;
}
#flashcards-modal .header .title h2 {
font-size: 26px;
}
.multiple-choice-container .question-container {
margin-top: 20px;
}
.multiple-choice-container .tm-mid-wrap .question > div,
.multiple-choice-container .tm-mid-wrap .question > div #final_span,
.multiple-choice-container .tm-mid-wrap .question > div .user-input {
font-size: 22px;
line-height: 32px;
}
.multiple-choice-container .tm-mid-wrap .question > div #final_span,
.multiple-choice-container .tm-mid-wrap .question > div .user-input {
height: 32px;
max-width: max-content;
}
.multiple-choice-container .question-en, .multiple-choice-container .tm-mid-wrap .question {
margin-bottom: 40px;
}
}
.rating-question-btn {
background: transparent;
border: 0;
opacity: .5;
outline: 0;
}
.rating-question-btn-like {
color: green;
}
.rating-question-btn-dislike {
color: red;
}
.user-vote-like .rating-question-btn-like {
opacity: 1;
}
.user-vote-dislike .rating-question-btn-dislike {
opacity: 1;
}
.rating-question-btn:hover {
opacity: .8;
}