html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,u,i,center,dl,dt,dd,ol,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
form { display:inline; }
textarea, select, input, button { outline: none; }

html
{
 font-size:15px;
}

@font-face {
  font-family: "vocabularytrainer";
  src: url("/fonts/monospace.ttf") format("truetype");
}

body
{
 line-height: 1.55;
 font-weight: 400;
 font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 color: #272727;
 background-color:#F9F9F9;
 position:relative;
}

h1,h2,h3,h4,h5, .h1_style, .h2_style, .h3_style, .h4_style { margin:0; padding:0; display:block; font-weight:600;  }
h1, .h1_style { font-size:1.4em; margin-bottom:0.1em; }
h2, .h2_style { font-size:1.3em; margin-bottom:0.2em; }
h3, .h3_style { font-size:1.2em; margin-bottom:0.5em; }
h4, .h4_style { font-size:1.2em; margin-bottom:0.5em; }
p {  margin-bottom:0.7em; }
.h4_style { padding-top:0.5rem; }

.leader h1 { font-size:1.7em; }
.leader .main-text { font-size:1.1em;  line-height:1.5; color: #505050}

a, .a-style { color:#FB544E; cursor:pointer; text-decoration:underline; }
a:hover, .a-style:hover { text-decoration:underline; text-decoration:underline;  }

td, th
{
 text-align:left;
 padding-top:6px;
 padding-bottom:6px;
 padding-right:6px;
 border-bottom:1px solid #E8E8E8;
}

th { font-size:13px; color:#5E5E5E; padding-bottom:3px; padding-top:0px; }



info, error, success, error2, open, restricted
{
 margin-bottom:0px;
 padding:0px;
 padding-left:26px;
 display:block;
 background-repeat:no-repeat; background-position:left center;
}

error { background-image:url('/images/wrong.png'); }
error2 { background-image:url('/images/error.png'); font-size:1.1em; }
success { background-image:url('/images/correct.png'); }
info { background-image:url('/images/info2.gif'); }
open { background-image:url('/images/open1.gif'); }
restricted { background-image:url('/images/open0.gif'); margin-bottom:10px; padding-top:4px; }

/* START Bereiche */

.header
{
 display:block;
 height:auto;
 background-color:#FFFFFF;
 -webkit-box-shadow: 0px 1px 26px 0px rgba(217,222,222,0.9);
 -moz-box-shadow: 0px 1px 26px 0px rgba(217,222,222,0.9);
 box-shadow: 0px 1px 26px 0px rgba(217,222,222,0.9);
 position:fixed;
 z-index:6;
 width:100%;
}

.leader
{
 display:block;
 background-color:#EBEBEB;
 border-bottom:1px solid #EAECEC;
 z-index:2;
 background: linear-gradient(90deg, transparent 50%, #EBEBEB 50%);
}

.sub-header
{
 display:block;
 background-color:#EBEBEB;
 border-bottom:1px solid #EAECEC;
 z-index:2;
 display:none;
 width:100%;
}

.sub-header .container { padding-left:0; padding-right:0; }
.sub-header .content { background-color:#EBEBEB; padding-bottom:0.4rem }

.main
{
 background-color:#F9F9F9;
 border-bottom:1px solid #EAECEC;
}

.footer
{
 background-color:#EBEBEB;
 font-size:0.9em;
}

/* ENDE Bereiche */

/* START Container */

.container
{
 margin: 0 auto;
 max-width:1150px;
 background-color:#F9F9F9;
}

.header .container { background-color:#FFFFFF; position:relative; padding:0%; }
.main  { background-color:#FFFFFF; padding-bottom:0; }
.container.container-grey { background-color:#F9F9F9; }

.container:after {
    content: '';
    display: block;
    clear: both;
}

/* ENDE Container */

/* START Backgrounds (sind Teil vom Container im .leader) */

.include-background {
    background-repeat: no-repeat;
    background-size: 48% auto;
    background-position: 100% center;
}
.background-index {
    background-image: url(/images/student.jpg);
}


/*
.background-index { background-image:url('/images/student.jpg'); }
.background-index { background-image:url('/images/background-student2.jpg'); }


.include-background.background-index {
	background-size: auto 900px;
    background-position: 100% -30px;
}
*/


.leader-background { position:absolute; top:0; right:0; background-color:#DDDDDD; bottom:0; height:100%; }
.leader-background img { height:100%; }

.background-english { background-image:url('/images/background-index-english.jpg'); }
.background-german { background-image:url('/images/background-index2.jpg'); }
.background-french { background-image:url('/images/background-index2.jpg'); }
.background-italian { background-image:url('/images/background-index2.jpg'); }
.background-spanish { background-image:url('/images/background-index2.jpg'); }
.background-portuguese { background-image:url('/images/background-index2.jpg'); }

.include-background.background-speaking { background-image:url('/images/speaking.jpg'); background-size: auto 100%; background-position:110% center; }
.include-background.background-teachers { background-image:url('/images/teachers.jpg'); background-size: 50% auto; background-position:100% top; }
.include-background.background-desk { background-image:url('/images/premium-background.jpg'); background-position:left top; background-size: 100% auto; background-repeat:no-repeat }
/* .background-englisch { background-image:url('/images/background-index-english.jpg'); } */

.background-lightgrey {  background-color:#F9F9F9;}
.background-grey {  background-color:#EBEBEB;}


/* ENDE Backgrounds */



/* Modal START */


.modal {
	position:absolute;
	background-color:rgba(180, 180, 180, 0.75);
	min-height:1000px;
	top:0; left:0; right:0; bottom:0; z-index:6;}

.modal-box, .modal-content {
	margin:0 auto;
	text-align:center;
	position:relative;
	padding:12px;
	width:90%;
	width: calc(98% - 36px);
	max-width:360px;
	background-color:#FFFFFF;
	box-shadow:0px 2px 17px 0px rgba(166,166,166,0.9);
	border-radius:8px;
}

.modal-close, .bugdesk-close {
	border-radius:50%;
	border: 5px solid #D4D4D4;
	width:20px;
	height:20px;
	padding:4px;
	position:absolute;
	top:10px;
	right:10px;
	text-align:center;
	font-weight:bold;
	background-color:#FFFFFF;
	cursor:pointer;
	background-image: url("/images/modal-close.png");
	background-position:center center;
	background-repeat:no-repeat;
	opacity:0.7;
	}

.modal-close img {   }
.modal-close:hover, .bugdesk-close:hover { opacity:1; }

.modal-text
{
 margin-right:50%;
 display:block;
}

.modal .h2-style
{
 font-size:1.3em;
 display:block;
 font-weight:bold;
 padding-bottom:5px;
}



.modal-body
{
 padding:1em;
 text-align:left;
}

.modal-header
{
 background-color:#F4F4F4;
 padding:20px;
 padding-right:40px;
 padding-bottom:15px;
}

.modal-h1
{
 font-weight:bold;
 font-size:1.2em;
 margin-bottom:1%;
}

.modal-h2
{
 font-weight:bold;
 font-size:1.1em;
 margin-bottom:1%;
}

.modal-content .button { margin-right:6px; }

.modal-content.modal-content-login, .modal-content.modal-content-invoice, .modal-content.modal-content-register, .modal-content.modal-content-password-forgotten, .data-consent-modal .modal-content
{
 max-width: 400px;
 width:95%;
 margin-top:120px;
}

.modal-content.modal-content-login {
	max-width: 380px;

}


.data-consent-modal .modal-content { margin-top:20px; }



@media (max-width: 620px)
{
 .modal-text { margin-right:0%; }
}

	 .modal-deny, .modal-deny:hover, .modal-button-grau, .modal-button-grau:hover
	  {
	  background-color:#EEEEEE;
	  border-color:#EEEEEE;
      color:#313131;
	 }



/* Modal END */

/* Formular START */


.form label
{
 display:block;
 font-weight:bold;
 padding-bottom:5px;
}

.form label.label-terms
{
 font-weight:normal;
 padding-bottom:5px;
 font-size:0.95em;
 padding-left:1.4rem;
 position:relative;
}

.form label.label-terms input {
	position:absolute;
	left:0.05rem;
	top:0.35rem;
}

.form input.input-text
{
 display:block;
 width:calc(100% - 26px);
 border:1px solid #CCCCCC;
 padding:12px;
 margin-bottom:10px;
 border-radius:5px;
 outline: none;
}

.form select.input-select
{
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border: 3px solid #DBDBDB;
 padding: 0.7rem;
 padding-right: 35px;
 margin-bottom: 10px;
 border-radius: 8px;
 outline: none;
 background-color: #FFFFFF;
 background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23CCCCCC%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
 background-size: 10px auto;
 cursor: pointer;
 font-size: 0.9rem;
}

.form select.input-select::-ms-expand {
 display: none;
}

.form input[type="submit"]
{
 display:inline-block;
 vertical-align:middle;
 margin:0;
 outline: none;
}

.form .form-status
{
 display:inline-block;
 vertical-align:middle;
 margin:0;
 margin-left:10px;
 width:20px;
 height:20px;
}

.form .form-status img
{
 width:100%; height:auto; display:inline-block; vertical-align:top; margin:0;
}

.form-error-message
{
 background-image: url("/images/warning.gif");
 background-repeat:no-repeat;
 background-position:10px 12px;
 font-size: 0.95rem;
 min-height:27px;
 padding-left:42px;
 padding-top:12px;
 padding-bottom:8px;
 background-color:#EEEEEE;
 border-radius:5px;
 margin-bottom:8px;
 padding-right:12px;
}

.form .form-error-message ul
{
 padding:0;
 margin-bottom: 0;
}

.form .form-error-message li
{
 margin-left:17px; padding-bottom:7px; line-height:1.3em; font-size:0.95em;
}

.a-style.form-password-forgotten
{
 margin-left:5px; font-size:0.85em; font-weight:normal;
}

/* Formular END */






/* START Content */

.content
{
 padding-left:2rem;
 padding-right:2rem;
 padding-top:0.7rem;
 padding-bottom:0.7rem;
}


.content_left, .content_right
{
 box-sizing:border-box;
 width:50%;
 padding-top:0.7rem;
 padding-bottom:0.7rem;
}

.content_left { float:left; padding-left:2rem; padding-right:1.5rem; }
.content_right { float:right; padding-right:2rem; padding-left:1.5rem; }

.leader-content
{
 position:relative;
 width:55%;
 z-index:5;
 min-height:400px;
 padding-bottom: 1.2rem;
}

.header .content { padding-top:0; padding-bottom:0 }


h2.content-h2
{
 padding-left:2rem;
 clear:both;
 margin-bottom:0.1em;

}



/* Ende Content */





.padding-top-none { padding-top:0; }
.padding-bottom-none { padding-bottom:0; }


.panel_navigation
{
 display:block;
 margin-bottom:-5px;
}

.panel_navigation_button
{
 display:inline-block;
 border: 5px solid #E8E8E8;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border-bottom:0;
 background-color:#FFFFFF;
 padding:8px 10px 12px 10px;
 text-decoration:none;
 color:#222;
 margin-right:7px;
}

.panel_navigation_button_inactive
{
 display:inline-block;
 border: 5px solid #EDEDED;
 border-bottom: 5px solid #E8E8E8;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border-bottom-left-radius: 0px;
 border-bottom-right-radius: 0px;
 background-color:#FFFFFF;
 padding:8px 10px 7px 10px;
 margin-right:7px;
}

.panel, .small_panel, .word_panel
{
 border-radius: 8px;
 padding:2rem;
 background-color:#FFFFFF;
 display:block;
 border: 5px solid #E8E8E8;
}

.panel.panel-with-navigation { border-top-left-radius: 0px; }
.panel-header { padding:1rem; padding-bottom:1.5rem; background-color:#E8E8E8; margin-bottom:1rem; margin-left:-2rem; margin-top:calc(-2rem - 1px); width:calc(100% + 1px); padding-left:2rem; padding-right:2rem; }



.small_panel { border: 0px solid #E8E8E8;
-webkit-box-shadow: 0px 1px 7px 1px rgba(222,222,222,0.9);
 -moz-box-shadow: 0px 1px 7px 1px rgba(222,222,222,0.9);
 box-shadow: 0px 1px 7px 1px rgba(222,222,222,0.9);
 padding:15px; padding-top:5px; margin-top:5px; }
.word_panel { border: 0px solid #E8E8E8; margin-bottom:5px; padding:0; margin-right:6px; width: calc(33.3% - 6px); display:inline-block; -webkit-box-shadow: 0px 1px 7px 1px rgba(212,212,212,0.9);
 -moz-box-shadow:0px 1px 7px 1px rgba(222,222,222,0.9);
 box-shadow: 0px 1px 7px 1px rgba(222,222,222,0.9); border-radius: 6px; }

.word_panel_left  { width:41%; padding:2.5%; padding-left:4%; display:inline-block; vertical-align:middle; line-height:1.2em; }
.word_panel_right  { width:43%; padding:2.5%; padding-left:6%; display:inline-block; vertical-align:middle; line-height:1.2em; background-image:url('/images/arrow.gif'); background-repeat:no-repeat; background-position:0px center; }

@media (max-width: 1050px)
{
 .word_panel { width: calc(50% - 6px); border-radius: 5px; }
}

@media (max-width: 600px)
{
 .word_panel { width: 100%; }
}


.change-version {
	display:inline-block; cursor:pointer;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.change-version__flag {
	display:inline-block; width:30px; height:auto; vertical-align:middle; margin-right:6px
}

.change-version__text {
	display:inline-block; vertical-align:middle
}

.change-version__arrow {
	display:inline-block; padding:8px 4px; margin-right:5px; vertical-align:bottom; height:20px; width:15px; background-image:url('/images/down.gif'); background-repeat:no-repeat; background-size:15px 9px; background-position: center center;
}

.button-index-show-more, .button-back-to-languages {
	background-image:url('/images/down.png');
	background-repeat:no-repeat; background-position:0.3rem center;
	background-size:0.8rem auto;
	padding-left:1.4rem;
	text-decoration:none;
	padding-bottom:0.1rem;
	color:#FB544E; cursor:pointer; text-decoration:underline;
	display:block;
    margin-top: 0.5rem;
}

.button-back-to-languages {
	display:none;
	background-image:url('/images/left.png');
	background-size:auto 0.8rem;
	background-position:0.5rem 0.3rem;
}

.headline-which-discipline {
	display:none;
}


.button_flag, .button_icon
{
    background-color:#FFFFFF;
    vertical-align:top;
    display:inline-block;
    -webkit-box-shadow: 0px 8px 9px 0px rgba(222,222,222,0.9);
    -moz-box-shadow: 0px 8px 9px 0px rgba(222,222,222,0.9);
    box-shadow: 0px 8px 9px 0px rgba(222,222,222,0.9);
    border: 0;
    border-radius: 8px;
    background-color: #FFFFFF;
    margin-right: 0.7rem;
    margin-bottom: 0.7rem;
    text-decoration: none;
    font-size:1.05rem;
    color: #272727;
    background-repeat: no-repeat;
    background-position: 0.7rem center;
    width: 33%;
    padding: 0.9rem;
    padding-left: 4.2rem;
    padding-right: 0.2rem;
    background-size: 2.8rem auto;
    cursor:pointer;
    overflow: hidden;
    white-space: nowrap;
}

.choose-language--dashboard .button_flag {
    box-sizing:border-box;
    width: calc(25% - 0.7rem);
}



.button_icon__stats {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.button_icon {
    background-size: 2.1rem auto;
    background-position: 1rem center;
}

.button_flag b, .button_icon b {
    font-size: 1.05rem;
    line-height: 1rem;
}
.button_flag p, .button_icon p {
    font-size: 0.9rem;
    line-height: 0.95rem;
    margin-bottom: 0;
}


.button_flag_small
{
 border-radius: 8px;
 background-color:#FFFFFF;
 display:inline-block;
 vertical-align:top;
 box-sizing: border-box;
 text-decoration:none;
 color:#544F4E;
 width:24%;
 width:calc(25% - 0.6rem);
 max-width:250px;
 background-repeat:no-repeat; background-position:0.4rem center;
 padding-left:3.6rem; background-size:2.6rem auto;

 overflow: hidden;
 white-space: nowrap;

 margin-right:0.6rem;
 margin-bottom:0.6rem;
 padding-top: 0.55rem;
 padding-bottom: 0.55rem;
}

.button_flag_small__stats {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.button-stats
{
 background-color:#FB544E; height:25px; font-size:0.9em; padding:5px 7px; border-radius:3px; color:#FFFFFF; margin-right:3px; width:60px; text-align:center
}

.button-stats.button-stats-table
{
 display:inline-block;
 margin:0;
 height:auto;
 font-size:1em;
 letter-spacing:0.04em;
 padding:7px 7px;
 width:28px;
 border-radius:4px;
}

.button-stats-green { background-color:#5fba7d; }
.button-stats-pale { background-color:#E7E7E7; color:#B0B0B0;  }

.button-captions
{

}

.button_flag:hover, .button_icon:hover, .button_flag_small:hover
{
 background-color:#FFF1E3;
 text-decoration:none;
 color:#000000;
}

.flag_en { background-image:url('/images/en.svg'); }
.flag_de { background-image:url('/images/de.svg'); }
.flag_fr { background-image:url('/images/fr.svg'); }
.flag_es { background-image:url('/images/es.svg'); }
.flag_pt { background-image:url('/images/pt.svg'); }
.flag_it { background-image:url('/images/it.svg'); }
.flag_ben { background-image:url('/images/en.svg'); }
.flag_pl { background-image:url('/images/pl.svg'); }
.flag_nl { background-image:url('/images/nl.svg'); }
.flag_cz { background-image:url('/images/cz.png'); }
.flag_se { background-image:url('/images/se.svg'); }
.flag_no { background-image:url('/images/no.svg'); }
.flag_fi { background-image:url('/images/fi.svg'); }
.flag_dk { background-image:url('/images/dk.svg'); }
.flag_ru { background-image:url('/images/ru.svg'); }
.flag_ar { background-image:url('/images/8.png'); }
.flag_tr { background-image:url('/images/tr.svg'); }
.flag_he { background-image:url('/images/he.svg'); }
.flag_arabic { background-image:url('/images/arabic.png'); }
.flag_blabu { width:auto; background-image:url('/images/bubble.png'); background-size:auto 55%; padding-left:2.8rem; padding-right:0.7rem; background-position:0.4rem 0.7rem; }
.flag_discipline { background-image:url('/images/arrow-index.png'); background-size:1.2rem auto; background-position:1.6rem 0.8rem }



.sub-header-headline {
	font-weight: 600;
	margin-bottom: 0.7%;
	color: #232323;
	font-size:1.05em;
	padding:0.6rem 0;
}

.hover
{
 display:inline-block;
 vertical-align:middle;
 margin-right:10px;
 font-size:1.1em;
}

td.first-td
{
 width:60%; vertical-align:middle
}

a.reading-link { padding-right:4px; }

span.label
{
 display:inline-block; vertical-align:top; background-color:#FB544E; font-size:10px; padding:2px 3px; border-radius:3px; color:#FFFFFF; margin-right:3px; margin-top:1px;
}

span.label.label-blue { background-color:#656565; }


select, input
{
 margin:0px;
}

input[type=text]:focus {

}


/* Mobile first Start */

.logo {
    display:inline-block;
    width:110px;
    height:auto;
    padding:0.5rem 0;
    padding-left:1.2rem;
}

.logo img {
    display:inline-block;
    vertical-align:middle;
    width:100%;
    height:auto;
}

.versionselector {
    display:inline-block;
    vertical-align:middle;
    position:absolute;
    right:0px;
    top:0.7rem;
}


@media (min-width: 576px) {
	.logo {
		width:120px;
        padding-left:1.5rem;
	}
}


@media (min-width: 768px) {
	.logo {
        padding:0.7rem 0;
		width:150px;
        padding-left:0;
	}
}

@media (min-width: 992px) {
	.logo {
		width:160px;
        padding-left:0;
	}
}

@media (min-width: 1200px) {
	.logo {
		width:190px;
	}
}

@media (min-width: 1400px) {
	.logo {
        padding:0.8rem 0;
        padding-top:0.8rem;
        max-width:210px;
	}
}







/* HEADER Start */



/* Hide mobile navigation elements */
.navigation-circle, .navigation-toggle, .navigation-login { display:none; }





.navi-text  {
	margin-top:8px;
	padding:8px;
	padding-left:0;
	display:inline-block;
	vertical-align:bottom;
	margin-bottom:-1px;
	text-decoration:none;
	color:#544F4E;
	font-size:0.95em;
}

.overlay {
	display:none;
}

.overlay-dark {
	position:absolute;
	left:0; right:0;
	top:0; bottom:0;
	background-color:#b4b4b4;
	opacity:0.75;
	z-index:1;
}

.navi
{
 border:4px solid #E8E8E8;
 border-bottom:0px;
 padding:8px;
 display:inline-block;
 vertical-align:bottom;
 margin-bottom:-1px;
 text-decoration:none;
 color:#544F4E;
 font-size:0.95em;
 border-top-left-radius:10px;
 border-top-right-radius:10px;
 margin-right:-4px;
 cursor:pointer;
}

.navi img
{
 display:inline-block;
 vertical-align:middle;
 width:30px;
 height:auto;
}

.extra-navi-distance {
	margin-left:1.5rem;
}

@media (min-width: 650px) {
	.navigation {
		display:block !important;
	}

    .logo {
        padding-left:0;
    }
}


@media (max-width: 650px) {


	.change-version {
		font-size:0.95em;
	}


	.navigation { display:none; padding:1.5rem; background-color:#ffffff; border-bottom-left-radius:8px; z-index:2; position:relative;
		background-image: url(/images/top-shadow.png);
		background-position: top;
		background-repeat: repeat-x;
		position: absolute;
		top:70px;
		right:0;
		width:70%;
		max-width:280px
	}


	.navi.navi-button {
		border:4px solid #E8E8E8;
		background-color:#ffffff;
		border-radius:10px;
	}

	.header .content {
		padding:0;
	}
	.header .navi-text {
		padding-left:1.5rem;
		padding-right:0;
		margin-right:-1rem;
	}
	.navi.navi-native-language {
		display:inline-block;
		margin-left:1.5rem;
	}

	.button-circle {
		box-sizing:border-box;
		display:inline-block;
		vertical-align:middle;
		padding:7px;
		font-size:12px;
		color:#544F4E;
		height:44px;
		width:44px;
		border:4px solid #c7c7c7;
		text-align:center;
		border-radius:50%;
		background-color:#FFFFFF;
		text-decoration:none;
		background-position:center center;  opacity:0.6;
		cursor:pointer;
	}

	.button-circle--login {
		/* width:38px;
		padding:5px;
		height:38px; */
		background-size:48%;
		background-image:url('/images/user.png'); background-repeat:no-repeat;
	}

	.button-circle--toggle {
		background-size:60%;
		background-image:url('/images/burger.svg'); background-repeat:no-repeat;
		margin-left:3px;
	}

	.button-circle--toggle[data-toggle="1"] {
		background-image:url('/images/modal-close.png');
		background-size:auto;
	}

	.change-version {
		margin-left:1.5rem;
		margin-bottom:0.5rem;
	}

	.navigation .navi {
		padding-left:1.5rem;
		display:block;
		border-radius:0;
		border-left:0;
		border-right:0;
		border-bottom:0;
		margin:0;
	}

}




@media (max-width: 576px) {
	.navigation {
		top:65px;
		left:0;
		right:0;
		width:100%;
		max-width:none;
	}

	.change-version__arrow {
		margin-right:0px;
	}
	/*
	.navi {
		border:3px solid #E8E8E8; margin-right:-3px; padding:6px;
		border-top-left-radius:8px;
		border-top-right-radius:8px;
		border-bottom:0px;
	}
	*/
	.header .container .content { padding-right:0; }


}


/* HEADER Ende */


/* STARTSEITE Start */

.content_right.content-screen
{
 -webkit-box-shadow: inset 126px 9px 298px -153px rgba(227,227,227,1);
 -moz-box-shadow: inset 126px 9px 298px -153px rgba(227,227,227,1);
 box-shadow: inset 126px 9px 298px -153px rgba(227,227,227,1);
 padding-right:0;
 padding-left:0;
 width:48.5%;
}

.screen
{
 border-radius:10px;
 border:15px solid #D6D6D6;
 width:85%;
 margin:2% auto;
 background-color:#ffffff;
 max-width:500px;
}

.screen img
{
 width:100%;
 height:auto;
 display:inline-block;
 vertical-align:top;
 margin:0;
}

/* STARTSEITE Ende */



/* SPRACHENSTARTSEITE Start */

.content.content-triple
{
 margin-left:-2%; width:98%; padding-right:4%
}

.content-triple-box
{
 display:inline-block; width:31.33%; margin-left:2%; vertical-align:top
}

.screen.screen-triple-box
{
 width:auto; margin:2% 0 3% 0%
}

/* SPRACHENSTARTSEITE Ende */



/* NOCH BENÖTIGT?


.advice { background-color:#ffffff;  }

*/







.navi:hover
{
 color:#544F4E; background-color:#FFF1E3; text-decoration:none;
}






.circle
{
 display:inline-block;
 vertical-align:middle;
 padding:8px;
 font-size:12px;
 height:17px;
 width:17px;
 color:#544F4E;
 border:4px solid #E8E8E8;
 text-align:center;
 border-radius:50%;
 background-color:#FFFFFF;

 margin-right:3px;

 text-decoration:none;
}

.circle:hover
{
 color:#FB544E;
}

.globe {
    display:inline-block;
    vertical-align:middle;
    padding:0px;
    font-size:12px;
    height:33px;
    width:33px;
    text-align:center;
    border-radius:50%;
    background-color:#E8E8E8;
    border:4px solid #E8E8E8;
    margin-right:3px;
    color:#544F4E;
    text-decoration:none;
    transition: background-color 0.3s ease-in-out;

}

.globe:hover {
    background-color:#D9D9D9;
    border:4px solid #D9D9D9;
}

.header .button.button--premium-status {
    display:inline-block; background-color:#E8E8E8; padding:6px 12px; height:29px; line-height:0.9rem; border:none; font-size:0.8rem
}

/* Dark mode toggle button */
.dark-mode-toggle {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  padding: 5px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.dark-mode-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: #544F4E;
}

.dark-mode-toggle:hover {
  background-color: #E8E8E8;
}




.versionleft {
    border-right:1px solid #E8E8E8; padding-right:3px; margin-right:8px; display:inline-block; vertical-align:top;
}

.versionright {
    display:inline-block;
}

.navbox {
    display:inline-block;
    padding-right:0.5rem;
    border-left:1px solid #E8E8E8;
    padding-left:0.4rem;
    margin-left:0.5rem;
}



.desc_de, .desc_en, .desc_fr, .desc_es, .desc_it {
    display:none;
    color:#544F4E; padding-top:7px; padding-left:38px; font-size:0.9em;
    background-image:url('/images/info2.gif'); background-repeat:no-repeat; background-position:10px 6px; line-height:22px;
}

@media (min-width: 780px) {
    .de:hover ~ .desc_de, .en:hover  ~ .desc_en, .fr:hover  ~ .desc_fr, .es:hover  ~ .desc_es, .it:hover  ~ .desc_it {
    display: inline-block;
    }
}

@media (max-width: 900px) {
    .circle {
        display:none;
    }
    .globe {
        margin-right:0.7rem;
    }
}
@media (max-width: 650px) {

    .versionleft {
        display:none;
    }
}
@media (max-width: 400px) {
    .navbox {
        padding-right:0.2rem;
        border-left:0px;
        padding-left:0;
        margin-left:0.3rem;
    }
}





.trainer_left, .sixty_left, .fifty_left  { display:inline-block; vertical-align:top; width:63%; }
.trainer_right, .fourty_right, .fifty_right  { display:inline-block; vertical-align:top; width:33%; margin-left:1.5%; padding-left:2%; border-left:3px solid #E8E8E8; border-style: dotted; }

.sixty_left { width:58%; }
.fourty_right  { width:38%; }
.fifty_left { width:48%; }
.fifty_right  { width:48%; }


@media (max-width: 850px) {

    .fifty_left, .fifty_right {
        width:100%;
        max-width: 600px;
        margin:0 auto; padding:0;
        display:block;
    }

    .fifty_right {
        border-left:0px; border-top:3px solid #E8E8E8; border-style: dotted; padding-top:2%; margin-top:2%;
    }
}


@media (max-width: 750px) {

    .trainer_left, .trainer_right, .sixty_left, .fourty_right {
        width:100%;
        margin:0; padding:0;
        display:block;
    }

    .trainer_right {
        border-left:0px; border-top:3px solid #E8E8E8; border-style: dotted; padding-top:2%; margin-top:2%;
    }

    .fourty_right {
        margin-top:10px;
        border:0px;
    }
}



@media (max-width: 600px)
{
 .content {
  padding-left:1rem; padding-right:1rem;
 }


}

input[type="text"], input[type="email"], input[type="password"], textarea, select
{
 border: 3px solid #E8E8E8;
 padding: 0.5rem;
 font-size:0.9rem;
 border-radius:8px
}

input[type="text"]:hover, input[type="password"]:hover, textarea:hover, select:hover
{

}

input[type="text"]:focus {outline:0;}

 .question-box
 {
  border-top:3px solid #E8E8E8; border-style: dotted; padding-top:10px; padding-bottom:10px;
 }

 .questions_line
 {
  display:table-row;
  width:100%;
 }

 .exercise-box
 {
  position:relative;
    display: table-cell;
    margin: 0em;
    height: auto;
    vertical-align:top;
	width:50%;
	box-sizing:border-box;
	padding:0.5rem 0 0.5rem 0;
 }

 .exercise-box.exercise-box-full
 {
  border-bottom:3px dotted #E8E8E8;
  padding:4px 0;
  padding-bottom:1px;
  width:auto;
  display:block;
 }

 .exercise-box.exercise-box-left
 {
  box-sizing:border-box;
  border-bottom:3px dotted #E8E8E8;
  border-right:3px dotted #E8E8E8;
  width:50%;
  padding-right:0.8rem;
 }

 .exercise-box.exercise-box-right
 {
  box-sizing:border-box;
  border-bottom:3px dotted #E8E8E8;
  width:50%;
  padding-left:0.8rem;
 }

 #questions
 {
  display:table;
  width:100%;
 }



.keypad {
	position:absolute; top:0.4rem; display:inline-block; box-sizing:border-box; border-radius:6px;
}
.keypad:hover {

}
.keypad .button {
	vertical-align:top; margin-bottom:0;
}


 .exercise-hint
 {
  color: #878787;
 }

 input.exercise-input
 {
  padding:5px;
  border-radius:5px;
  font-size:1em;
  color:#272727;
  margin-bottom:3px;
 }

.player-box {
    background-color:#e8e8e8; border-radius:8px; padding:1rem; position:relative; padding-right:0.5rem;
}

.wrapper-lingua-speakers { display:inline }
.wrapper-lingua-player { display:inline-block; vertical-align:top }

.exercise-listening .wrapper-lingua-player {
    display: block;
    max-width: 870px;
}

.exercise-listening .wrapper-lingua-speakers { display:block }
.exercise-listening .speaker-box { margin-top:1rem; margin-left:1rem; }
.exercise-listening .speaker-box:nth-child(1) { margin-left:0; }




.speaker-box {
	position:relative; padding:8px; width:190px; margin-left:1rem; display:inline-block; vertical-align:top; height:40px; border-radius:4px; background-color:#ffffff; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
}

.speaker-box.speaker-box-listening {

}

.speaker-box.speaker-box-reading {
	margin-top:0.5rem; margin-right:0.5rem; margin-left:0;
	width:calc(50% - 0.5rem);
	box-sizing:border-box;
	height:56px;
}

.speaker-box .button-play {
    position:absolute; right:30px; top:6px;
    background-image: url(/images/icon-play.svg);
    background-repeat:no-repeat;
    background-size: 18px auto;
    background-position: center center;
    display:block;
    width:22px;
    height:25px;
    cursor:pointer;
    opacity:0.75;

}
.speaker-box .button-download {
    position:absolute; right:6px; top:6px;
    background-image: url(/images/icon-download.svg);
    background-repeat:no-repeat;
    background-size: 18px auto;
    background-position: center center;
    display:block;
    width:22px;
    height:25px;
    cursor:pointer;
    opacity:0.75;
}


.speaker-box img {
	width:auto; height:44px; position:absolute; left:6px; top:6px;
}
.speaker-box div {
	margin-left:52px; display:inline-block
}

.inactive-speaker {
   opacity:0.7;
   cursor:pointer;
   transition: all 0.5s ease;
}




.inactive-speaker:hover {
	opacity:1;
}

.inactive-speaker img {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
}


.inactive-speaker:hover img {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
}


@media (max-width: 1000px) {
	.wrapper-lingua-speakers { display:block }
	.wrapper-lingua-player { display:block }
	.speaker-box { margin-top:1rem; }
	.speaker-box:nth-child(odd) { margin-left:0; }

    .exercise-listening .speaker-box { margin-left:1rem; }
    .exercise-listening .speaker-box:nth-child(1) { margin-left:0; }

	.lingua-player.green-audio-player { width:auto; }
}






@media (max-width: 980px) {
    .exercise-listening .speaker-box { width: calc( 33.3% - 0.66rem - 16px ) }
	.exercise-listening .speaker-box:nth-child(4) { margin-left:0; }
}

@media (max-width: 600px) {
	.speaker-box { margin-top:1rem; }
	.speaker-box.first-speaker-box { margin-left:0; }
	.speaker-box, .exercise-listening .speaker-box {
		box-sizing:border-box;
		width:calc(50% - 0.25rem);
		height:48px;
		padding:6px;
		margin-top:0.5rem !important;
		margin-left:0.5rem;
	}

    .speaker-box.speaker-box-reading {
        height:48px;
    }


	.exercise-listening .speaker-box:nth-child(4) { margin-left:0.5rem; }
	.exercise-listening .speaker-box:nth-child(3) { margin-left:0; }

	.speaker-box img {
		width:auto; height:40px; position:absolute; left:4px; top:4px;
	}
	.speaker-box div {
		margin-left:44px; display:inline-block
	}
}

@media (max-width: 380px) {
	.speaker-box.speaker-box-reading {
		width:auto;
		display:block;
	}
}


 /*
 .exercise-box
 {
  padding-top:10px; padding-bottom:10px;
 }

 .exercise-box.exercise-box-left
 {
  box-sizing:border-box;
  border-bottom:3px solid #E8E8E8;
  border-right:3px solid #E8E8E8; border-style: dotted;
  width:50%;
  display:inline-block;
  vertical-align:top;
  padding-right:6px;

 }

 .exercise-box.exercise-box-right
 {
  box-sizing:border-box;
  border-bottom:3px solid #E8E8E8; border-style: dotted;
  width:50%;
  display:inline-block;
  vertical-align:top;
  padding-left:6px;
 }
 */

 .question-number
  {
  font-size:0.8em;
  font-weight:600;
  margin-left:4px;
  margin-top:4px;
  background-color:#fb544e; color:#ffffff; font-weight:400; border-radius:4px; padding:0.5rem; display:inline-block; margin-bottom:0.6rem; margin-top:0rem
 }

 .question
  {
  display:block; margin-bottom:10px; font-size:1.1em; margin-left:4px;
 }


 .answers
  {
  display:table; width:100%; border-spacing: 4px;
 }

 .answers-row
  {
  display:table-row;
 }

.answers.very-long-answers, .answers.very-long-answers .answers-row, .answers.very-long-answers .answer
{
 display:block;
 width:auto;
 margin-right:0;
 margin-left:0;
}


.result-modal .percentage {  }

.rate-the-text, .text-rated { display:inline-block; cursor:pointer; background-image:url('/images/radio0.png'); background-position:0px 4px; background-repeat:no-repeat; padding:4px 3px 8px 31px; margin-left:8px; margin-right:5px; min-height:25px; }
.rate-the-text:hover, .rate-the-text-chosen { background-image:url('/images/radio1.png'); border-radius:3px; }
.rate-the-text.rate-the-text-level { display:inline-block; text-align:left; margin: 0 auto; padding:4px 0px 3px 33px; }
.text-rated { cursor:auto; background-image:url('/images/correct.png'); padding-left:26px; }


a.link--grey {
    color:#878787;
    font-size:0.9rem;
    text-decoration:underline;
}

a.button--white, .button--white {
    background-color:#ffffff;
    color:#544F4E;
    padding:0.5rem 1rem;
    border-radius:5px;
    text-decoration:none;
    font-size:1rem;
    display:inline-block;
    margin-top:0rem;
    margin-bottom:0.8rem;
    margin-right:0.8rem;
    box-shadow:3px 3px 4px 0px rgba(230,230,230,0.7)
}

a.button--white:hover {
    background-color:#fAfAfA;
    color:#272727;
    text-decoration:none;
    box-shadow:2px 3px 3px 0px rgba(210,210,210,0.7);
    transition: background-color 0.3s ease;
}


 .button, .answer, .corrected-result
  {
  -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
  border: 3px solid #E8E8E8;
  background:linear-gradient(to bottom, white 0%, white 20%, #F3F3F3 100%);
  padding:6px;
  TEXT-DECORATION: none;
  color: #222;
  font-size:1.0em;
  margin-right:5px; margin-bottom:5px;
  background-color:#F3F3F3;
  cursor:pointer;
 }

 .button:hover { TEXT-DECORATION: none; border-color:#DBDBDB  }
 .button:focus { TEXT-DECORATION: none; border-color:#D2D2D2; background:linear-gradient(to bottom, white 0%, white 20%, #F0F0F0 100%);
    }

 .button.button--dummy:hover { TEXT-DECORATION: none; border-color:#f3f3f3 }

 .button--orange {
	border-color:#fb544e; background:#fb544e; margin:0 auto; color:#ffffff;
 }
 .button--orange:hover {
	border-color:#fb544e;
 }

 .button--smaller, .button--smaller:hover {
	  -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
	  padding:3px;
	  font-size:0.9em;
 }




    .modal .button-cta {
        border: none;
        width: 100%;
        text-align:center;
        border-radius: 5px;
        color: #ffffff;
        background-color: #fb544e;
        display: block;
        padding: 0.8rem 1.5rem;
        cursor: pointer;
        margin-bottom:5px;
        line-height:1em;
        font-size: 1rem;
        text-decoration:none;
        text-shadow: 1px 1px 1px #94332f;
        transition: background-color 0.5s ease;
    }
    .modal .button-cta:hover {
        background-color:#d93c36;
    }



 .corrected-result
 {
  display:inline-block;
  margin-bottom:3px;
  margin-right:0px;
  font-size:1.0em;
  padding:3px 12px;
  padding-right:6px;
  -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
 }

 .corrected-result .mc_icon
 {
  margin-right:5px;
 }

 .corrected-result del { text-decoration: line-through; opacity:0.8em; }

 .modal .corrected-result
 {
  padding:1px 10px;
  padding-right:4px;
  border-width:2px;
  line-height:16px;
 }

 .modal .corrected-result .mc_icon
 {
  margin-right:5px;
  display:inline-block; vertical-align:middle; margin-top:-3px; margin-left:-6px; margin-right:2px; width:16px; height:16px; line-height:16px;
 }

 .modal .corrected-result del { color:#FF0000; }


 .button, .active-answer
 {
  cursor:pointer;
 }

 .active-answer:hover { border:3px solid #DBDBDB }

 @media (hover: hover) and (pointer: fine) {
    .active-answer:hover > .mc_number
    {
     color:#FFFFFF; background-color:#B0B0B0; font-weight:600;
    }
 }

 .mc_number.mc_number_chosen
 {
  color:#FFFFFF; background-color:#B0B0B0; font-weight:600;
 }

 .mc_number.mc_number_chosen {  background-image:url('/images/spinner2.gif');
  background-repeat:repeat-x; }

  input[type=submit] { padding:9px; }
 .button {  padding-right:10px; display: inline-flex;
  align-items: center;      /* Vertically center content */
  justify-content: center;  /* Optional: center text and icon horizontally */
 }
 .answer { display:block; font-size:1.05em; padding:0.6rem 6px; padding-left:12px; min-height:1.5em;  }

 .answers .answer { display:table-cell; width:50%; box-sizing:border-box; }
 .answers.short-answers .answer { width:33.3%; }


 .header .button
   {
  background:#FFFFFF;
  padding:8px;
  font-size:12px;
  height:17px;
  color:#544F4E;
  border:4px solid #E8E8E8;
  vertical-align:top;
 }



    .button.button--vocabulary-list {
        margin-right:0;
    }

  .button i {
    display: inline-block;
    width:1.2rem;
    height:1.2rem;
    margin-right:4px;
    background-size:auto 1.2rem;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    top:0px;
    opacity:0.8;
  }

 .option
  {
  display:inline-block;
  width:50%;
 }

 .options.options__vocabulary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem; /* Abstand zwischen Buttons */
 }
 .options.options__vocabulary .option {
    width: 100%;
    display:block;
    box-sizing: border-box;
 }
 .options.options__vocabulary .answer {
    box-sizing:border-box;
    height:100%;
    margin:0;
 }

 @media (max-width: 480px) {
    .options.options__vocabulary {
        gap: 0.2rem; /* Abstand zwischen Buttons */
     }
    .options.options__vocabulary .answer {
        box-sizing:border-box;
        height:100%;
        margin:0;
        padding-left:0.3rem;
        padding-right:0.1rem;
     }
     .options.options__vocabulary {
        margin-right:-0.5rem;
    }
    .options.options__vocabulary .answer .mc_number {
        margin-right:0;
        font-size:0.7rem;
        margin-left:0;
        width:18px;
        height:18px;
        line-height:18px;
    }

 }

@media (max-width: 380px) {
    .options.options__vocabulary .answer .mc_number {
        display:none;
    }

    .options.options__vocabulary.test {
        margin-left:-0.8rem;
        margin-right:-0.9rem;
    }

    .options.options__vocabulary.test .answer {
        padding-left:0.7rem;
    }
}




 .vc
  {
  display:inline-block;
  vertical-align:middle;

 }

 .vc-correct
 {
  display:inline-block; background-image:url('/images/correct.png'); background-position:3px 0px; background-repeat:no-repeat; padding-left:29px; margin-top:3px;
 }

 .vc-wrong
 {
  display:inline-block; background-image:url('/images/wrong.png'); background-position:3px 0px; background-repeat:no-repeat; padding-left:29px; margin-top:3px;
 }


.input
{
 position:relative; display:inline-block; vertical-align:middle; margin-right:9px; vertical-align:top;  border: 3px solid #E8E8E8;  border-radius:8px
}

.input .answerbox, .input .hintbox
{
 font-family: "TrainerFont", Lucida, Monospace;
 font-size:19px;
 letter-spacing: 14.5px;
 -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}

.input .hintbox
{
 background: url(/images/trainerback.gif) top left repeat-x;
 z-index:0;
 border:0;
 padding:7px;
 background-color:#FFFFFF;
 color:#C2C2C2;
}

.input .answerbox
{
 z-index:1;
 position:absolute;top:0px;left:0px;
 background-color: transparent;
 padding:7px;
 border:0;
 outline: none;
}




.button--sc {
	position:relative; margin-right:3px; display:inline-block; padding:4px; padding-left:9px; padding-right:12px; background-color:#eeeeee; border-width:2px;
}

.button--sc__letter {
	display:inline-block;
}
.button--sc__shortcut {
	position:absolute; right:10%; bottom:5%; font-size:0.7em; color:#7F7F7F;
}

@media (max-width: 680px) {
	.extra-navi { display:none }
}

@media (max-width: 600px) {



	.button--sc {
		 padding:3px 8px;
	}

	.button--sc__shortcut {
		display:none;
	}
}




.button--specialcharacter, .specialcharacter, .button--specialcharacter__small
{
 position:relative; display:inline-block; padding:6px; padding-left:10px; padding-right:16px; background-color:#eeeeee
}

.button--specialcharacter__small {
	 padding:4px; padding-left:8px; padding-right:12px; margin-right:0.1rem; border-width:1px;
}

@media (max-width: 600px) {
    .button.specialcharacter
    {
        padding:6px; padding-left:10px; padding-right:12px; margin-right:3px; margin-bottom:3px;
    }
}

.sc_letter
{
 display:inline-block;
}

.sc_shortcut
{
 position:absolute; right:10%; bottom:5%; font-size:0.7em; color:#7F7F7F;
}


#stats
{
 display:none; color:#717171;
}

.headline
{
 font-size:1.1em; font-weight:600; color:#717171;
}

#stats_bar, .stats_bar
{
 width:70%; max-width:250px; display:inline-block; vertical-align:middle; border-radius:5px; height:25px; background: url(/images/bar.gif) top left no-repeat; background-size: 50% 100%; background-color:#eeeeee;
}

#stats_percentage, .stats_percentage
{
 display:inline-block;  color:#717171; vertical-align:middle; margin-left:2%;
}

#stats_percentage, .stats_percentage
{
 font-weight:600;
 font-size:1.25em;
}

#stats_attempts, .stats_attempts, #stats_words, #stats_last_right, #stats_last_wrong, #stats_learned
{
 display:inline; width:20px; font-weight:600;
}


.trainer
{
 border-bottom:3px solid #E8E8E8; border-style: dotted; padding-bottom:15px;
}

.trainer--example {
    padding:0.2rem;
    font-size:0.93rem;
    background-image: url(/img/icon-bulb.svg);
    background-repeat:no-repeat;
    background-size: 18px auto; padding-left:1.3rem;
    background-position:-0.1rem 0.3rem
}

#result .trainer--example {
    margin-left:-2rem;
    margin-top:6px;
    padding-bottom:2px;
    padding-left: 1.55rem;
}

/* Audio play button styles */
.audio-play-button {
    width: 15px;
    height: 15px;
    margin-left: 5px;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #eeeeee;
    padding: 3px;
    position:relative;
    top:-1px;
}

/* Clickable example box styles */
.trainer--example[data-audio] {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.trainer--example[data-audio]:hover {
    background-color: #f5f5f5;
}

#result {
    margin-top:-0.5rem;
    padding:0.5rem 0;
    display:none; margin-bottom:3px; border-bottom:3px solid #E8E8E8; background-repeat:no-repeat; border-style: dotted; padding-bottom:7px; margin-bottom:9px;
}

#result.result__wrong {
    background-image: url(/images/wrong.png); background-position:0px 0.6rem; padding-left:29px;
}
#result.result__correct {
    background-image: url(/images/correct.png); background-position:0px 0.6rem; padding-left:29px;
}
#result.result__waiting {
    background-image: url(/images/spin.gif); background-position:0px 0.6rem; padding-left:29px;
}

@media (max-width: 600px) {
    .trainer
    {
        border-bottom:0px;
        padding-bottom:0px;
    }
    .trainer_right {
        margin-top:0px;
    }
}



.smaller
{
 font-size:0.8em;
}


.info
{
 background: url(/images/info.gif) 0 0 no-repeat;
 padding-left:31px;
}

.keyboard
{
 background: url(/images/keyboard.gif) top left no-repeat;
 padding-left:36px;
}

.informus
{
 background: url(/images/send.gif) top left no-repeat; background-position:3px 0px;
 padding-left:36px; display:none;
}

.mc_number
{
 display:inline-block; vertical-align:middle; margin-top:-3px;  text-align:center; font-weight:600; color:#8C8C8C; font-size:0.9em; margin-left:-6px; margin-right:2px; border-radius:50%; width:22px; height:22px; line-height:22px; background-color:#E9E9E9;
}

.mc_icon
{
 display:inline-block; vertical-align:middle; margin-top:-3px; margin-left:-6px; margin-right:2px; width:22px; height:22px; line-height:22px;
}



@media (max-width: 628px)
{

 .versionleft
 {
  padding-bottom:0px; margin-bottom:4px;
 }

  .versionright  { padding-right:2px; }

 .header .button
   {
  background:#FFFFFF;
  padding:5px;
  font-size:12px;
  height:17px;
  color:#544F4E;
  border:3px solid #E8E8E8;
  vertical-align:top;
  margin-right:1px;
 }

 .globe
 {
  display:none;
 }

}


@media (max-width: 880px)
{
 .exercise-box
 {

 }



 .exercise-box.exercise-box-left,
 .exercise-box.exercise-box-right
 {
  display:block;
  width:auto;
  border-right:none;
  padding-left:0;
  padding-right:0;
 }

}


/* Breakpoint 4 */
@media (max-width: 576px)  {

    h1, .h1_style { font-size:1.25em; margin-bottom:7px; }
    h2, .h2_style { font-size:1.1em; margin-bottom:2px; }
    h4, .h4_style { font-size:1.1em; }

    .sub-header { margin-top:-8px; padding-top:1.5%; }

    .leader h1 { font-size:1.25em; }
    .leader .main-text { font-size:1em; }

    .answers.long-answers, .answers.long-answers .answers-row, .answers.long-answers .answer {
        display:block;
        width:auto;
        margin-right:0;
        margin-left:0;
    }

    .panel { border-radius:0px; border-left:0px; border-right:0px; margin-left:-1.5rem; margin-right:-1.5rem; padding-top:1rem; }
    .panel-header { margin-top:calc(-1rem - 1px); padding-top:0; padding-bottom:1rem; }

    .panel--idea.panel {
        background-color: #E8E8E8;
        font-size: 1rem;
        padding: 1rem 1.2rem;
        border: 0;
        transition: background-color 0.5s ease;
        background-image: url("/images/icon-idea.png");
        background-repeat: no-repeat;
        background-size: 1.5rem auto;
        padding-left: 3rem;
        background-position: 1rem 1rem;
        margin-bottom: 1rem;
    }



    .question, .question-number { margin-left:0; }
    .question { margin-bottom:3px; font-size:1em; }
    .answer { font-size:1em; padding:0.6rem 0; padding-left:12px; }
    .answers { margin-left:-4px; width:calc(100% + 8px) }

    .panel_navigation_button {
        padding:5px 7px 9px 7px;
    }
    .panel_navigation_button_inactive {
        padding:5px 7px 4px 7px;
    }

    .flag_index
    {
    border: 3px solid #E8E8E8;
    padding:1%;
    margin-right:1.5%;
    margin-bottom:1.5%;
    width:44%;
    }

    .hover
    {
    font-size:1.1em;
    }



    .button-circle--toggle {
        width:42px;
        height:42px;
    }

    .button-circle--login {
        width:42px;
        height:42px;
    }


    .circle:hover
    {
    color:#FB544E;
    }

    .keyboard
    {
    display:none;
    }

    .main .container, .leader .container
    {
    padding:0;
    }

}




.list ul
{
 padding-left:15px;
    list-style-type: disc;
   list-style-position: inside;
}

.list li
{
 padding-left:15px;
}



/* Anmeldeformular Start */

/*
.form, .topline
{
 padding-top:10px; border-top:3px dotted #DBDBDB;
}
*/

.topline { margin-top:8px; }

.form input, .form select
{
 border-color:#DBDBDB;
}

.form label
{
 font-weight:600;
 display:block;
}

.form fieldset
  {
   border: 0px;
   padding: 0px;
   margin: 0px;
  }

.form legend
  {
   display:none;
  }


.form error
{
 color:#DD0000;
 font-weight:600;
}

.form .importance_info
{
 color:#505050;
 font-size:12px;
 font-weight:normal;
}

.form .inputbox
{
 width:98%;
 padding:0.7rem;
 display:block;
 box-sizing: border-box;
 margin-bottom:12px;
 min-width:200px;
 max-width:300px;
}

.form .codebox
{
 width:70%;
 padding:1%;
 display:inline-block;
 vertical-align:center;
 min-width:80px;
 max-width:150px;
}

.form .inputerror
{
 background: url("/images/warning.gif") 5px center no-repeat;
 background-color:#FFFFFF;
 padding-left:33px;
}

.form .innerbox
{
 display:inline-block;
 vertical-align:top;
 width:50%;
 max-width:300px;
 margin-bottom:5px;
}

@media (max-width: 600px)
{
 .form .innerbox
 {
  width:100%;
  max-width:300px;
 }
}



.form .loginbox
{
 padding:10px;
 display:block;
 font-size:1.1em;
 margin-bottom:6px;
 width:85%;
}

.separator-with-caption {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    margin:0.5rem 0;
}

.separator-with-caption > span {
    position: relative;
    display: inline-block;
    color:#acacac;
    font-size:0.8rem;
}

.separator-with-caption > span:before,
.separator-with-caption > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #acacac;
}

.separator-with-caption > span:before {
    right: 100%;
    margin-right: 15px;
}

.separator-with-caption > span:after {
    left: 100%;
    margin-left: 15px;
}

.login-with-google {
    background-image:url('/images/google-icon.svg');
    height: 30px;
    width: 100%;
    background-color: #eeeeee;
    border-radius: 5px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 7px 0;
}


.form .codeimage
{
 display:inline-block;
 vertical-align:center;
 padding-left:10px;
}

.terms
{
 padding-top:10px; padding-bottom:10px; margin-bottom:10px; margin-top:10px; padding-left:32px; border-top:3px dotted #DBDBDB; border-bottom:3px dotted #DBDBDB;  background-image:url('/images/info.gif'); background-position:0px 10px; line-height:25px; background-repeat:no-repeat;
}

/* Anmeldeformular Ende */

.index-flag-hidden { display:none; }

.photo
{
 -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
 border: 2px solid #E8E8E8;
 padding:8px;
 background-color:#FFFFFF;
 max-width:400px;
 width:34%;
 float:left;
 margin-right:2%;
 margin-bottom:2%;
 -webkit-box-shadow: 0px 6px 9px 0px rgba(237,237,237,0.9);
 -moz-box-shadow: 0px 6px 9px 0px rgba(237,237,237,0.9);
 box-shadow: 0px 6px 9px 0px rgba(237,237,237,0.9);
}

.photo.photo--right {
	float:right;
	margin-left:2%;
	margin-right:0;
}

/* START Responsive Leader und Content */

@media (max-width: 1000px)
{
.include-background { background-repeat:no-repeat; background-position:100% center; }
.include-background.background-index { background-image:url('/images/student-small.jpg'); background-position:100% center; }
.include-background.background-speaking, .include-background.background-teachers { background-position:120% center; background-size: auto 100% }
.leader-content { width:62%; }
.leader-background { opacity:0.25}


    .choose-language--dashboard .button_flag {
        box-sizing:border-box;
        width: calc(33.33% - 0.7rem);
    }
}

@media (max-width: 900px)
{
.include-background, .include-background.background-speaking { background-repeat:no-repeat; background-size: auto 100%; background-position:140% center; }
.include-background.background-index { background-position:100% center; }
.include-background.background-speaking, .include-background.background-teachers { background-position:140% center; }
}


@media (max-width: 800px)
{
    .include-background { background:none; } .include-background.background-teachers, .include-background.background-speaking, .include-background.background-index { background:none; }

    .leader-background { display:none; }
    .content.leader-content { width:auto; min-height:0; padding-right: 0.2rem }
    .leader { background: transparent; }
    .main-text { padding-right:0.3rem }

        .button_flag_small
        {
        width:32.3%;
        width:calc(33.3% - 0.7rem);
        }


    .content_left, .content_right
    {
    width:auto; display:block; float:none;
    padding-left:2rem; padding-right:2rem;
    }



    .content_right.content-screen { display:none; }

    .content_right_table_th { display:none; }

    .content_text_left, .content_text_right
    {
    padding-top:0; padding-bottom:0;
    }

    .content_text_left  { padding-top:1%; }
    .content_text_right { padding-bottom:2%; }



    .button-index-show-more { display:none !important; }



    .button_flag, .button_icon
    {
    -webkit-box-shadow: 0px 8px 9px 0px rgba(227,227,227,0.9);
    -moz-box-shadow: 0px 8px 9px 0px rgba(227,227,227,0.9);
    box-shadow: 0px 8px 9px 0px rgba(227,227,227,0.9);
    border-radius: 8px;
    background-color:#FFFFFF;
    display:inline-block;
    width:31.8%;
    margin-right:1.5%;
    margin-bottom:1.5%;
    box-sizing: border-box;
    text-decoration:none;
    color:#544F4E;
    background-repeat:no-repeat; background-position:0.4rem center;
    border:0;
    padding-left:3.6rem; background-size:2.6rem auto;
    }




}

@media (max-width: 750px)
{
 .content, .content_left, .content_right, h2.content-h2, .panel {
  padding-left:1.5rem; padding-right:1.5rem;
 }
 .panel-header { margin-left:-1.5rem; padding-left:1.5rem; padding-right:1.5rem; }




}


@media (max-width: 680px)
{


    .choose-language--dashboard .button_flag {
        box-sizing:border-box;
        width: calc(50% - 0.7rem);
    }


.photo
{
 -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
 border: 1px solid #E8E8E8;
 padding:4px;
 background-color:#FFFFFF;
 max-width:400px;
 width:34%;
 float:left;
 margin-right:2%;
 margin-bottom:2%;
 -webkit-box-shadow: 0px 6px 9px 0px rgba(237,237,237,0.9);
 -moz-box-shadow: 0px 6px 9px 0px rgba(237,237,237,0.9);
 box-shadow: 0px 6px 9px 0px rgba(237,237,237,0.9);
}




}


@media (max-width: 620px) {
 .button_flag, .button_icon {
  width:48%; margin-right:2%; margin-bottom:2%;
 }
 .button_flag:nth-child(2), .button_icon:nth-child(2) {
  margin-right:0;
 }



 .hide620 { display:none; }

}

@media (max-width: 576px)
{
 .button_flag_small
 {
 width:48.8%;
 width:calc(50% - 0.7rem);
 font-size:1em
 }

 .sub-header .container .content {
	 padding-right:0;
 }

}






@media (max-width: 576px)
{

    .main .container, .leader .container
    {
    padding-top:1.5%;
    }



    .hide480 { display:none; }


 .button_flag, .button_icon { background-size:2.3rem auto; padding-left:3.2rem; }


 td.first-td { width:70%; }
 .hide420 { display:none; }

 .content, .content_left, .content_right, h2.content-h2, .panel {
  padding-left:1rem; padding-right:1rem;
 }
 .panel { margin-left:-1rem; margin-right:-1rem; }

 .header .button.button--premium-status { padding:6px 8px;  }
}


@media (max-width: 360px)
{
 .button_flag_small {
  width:auto;
  display:block;
  max-width:none;
 }
 .button_flag, .button_icon { width:96%; margin:0; margin-bottom:2%; }
 .hide360 { display:none; }
 td.first-td { width:auto; }
}



/* ENDE Responsive Leader und Content  */



/* START Dialgue in Texts */

.dialogue .dialogue-person1,
.dialogue .dialogue-person2
{
 padding:10px;
}


.dialogue .dialogue-person1
{
 background-color:#F2F2F2;
}

.dialogue .dialogue-name { display:inline-block; vertical-align:top; width:120px; }
.dialogue .dialogue-text { display:inline-block; vertical-align:top; width:calc(100% - 120px); }

/* Ende Dialgue in Texts */




@media (min-width: 800px)
{
 .jump-to-button { display:none; }
}

#bugdesk .bugdesk {
	box-sizing:border-box;
	width:90%;
	position:fixed; bottom:1rem; right:1rem; padding:1.2rem; max-width:250px; background-color:#ffffff; box-shadow: 0px 8px 13px 7px rgba(0,0,0,0.2); border-radius:8px
}

#bugdesk .bugdesk-minified {
	position:fixed; bottom:0.7rem; right:0.7rem;

	border-radius:50%;
	border: 3px solid #D4D4D4;
	width:20px;
	height:20px;
	padding:3px;
	box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.05);
	text-align:center;
	font-weight:bold;
	background-color:#FFFFFF;
	cursor:pointer;
	background-image: url("/images/exclamation.gif");
	background-position:center center;
	background-repeat:no-repeat;
	background-size:70% auto;
	opacity:0.7;
	cursor:pointer;
}

#bugdesk textarea {
	box-sizing:border-box;
	width:100%;
	padding:0.8rem;
	margin:0.5rem 0;
	min-height:6rem;
	line-height:1.3rem;
	font-family: "Open Sans";
}

#bugdesk p { margin-right:25px; }

#bugdesk .bugdesk-close {
	top:0.6rem;
	right:0.6rem;
	width:15px;
	height:15px;
	background-size:60% auto;
}




/* Lingua Trainer Start */






/* Lingua Trainer End */




/* Basics 2023 Start */

.cta-button {
    border-radius: 8px;
    color: #ffffff;
    background-color: #fb544e;
    display: inline-block;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
    border: 0;
}

ul.boxgrid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
ul.boxgrid li {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 2rem;
    padding-bottom: 1rem;
    margin: 0;
    display: flex;
    margin-bottom: 0.5rem;
    box-shadow: 5px 7px 6px 0px rgba(230,230,230,0.7);
    background-size: 2.8rem auto;
    background-repeat: no-repeat;
    background-position: 2rem 2rem;
    padding-left: 5.7rem;
}

ul.boxgrid li div {
    width: 100%;
    display: inline-block;
}

.icon-connect { background-image: url("/images/teachers-connect.svg"); }
.icon-track { background-image: url("/images/teachers-track.svg"); }
.icon-share { background-image: url("/images/teachers-share.svg"); }
.icon-noads { background-image: url("/images/teachers-noads.svg"); }
.icon-premium { background-image: url("/images/teachers-premium.svg"); }
.icon-report { background-image: url("/images/teachers-report.svg"); }
.icon-edit { background-image: url("/images/teachers-edit.svg"); }
.icon-tools { background-image: url("/images/teachers-tools.svg"); }
.icon-teacher { background-image: url("/images/teachers-teacher.svg"); }
.icon-reading { background-image: url("/images/icon-reading.svg"); }
.icon-listening { background-image: url("/images/icon-listening.svg"); }
.icon-grammar { background-image: url("/images/icon-grammar.svg"); }
.icon-dictation { background-image: url("/images/icon-dictation.svg"); }
.icon-vocabulary { background-image: url("/images/icon-vocabulary.svg"); }
.icon-translation { background-image: url("/images/icon-translation.svg"); }
.icon-list-correct { background-image: url("/images/icon-list-correct.svg"); }
.icon-list-last-wrong { background-image: url("/images/icon-list-wrong.svg"); }
.icon-list-last-correct { background-image: url("/images/icon-list-correct.svg"); }
.icon-list-last { background-image: url("/images/icon-list-last.svg"); }
.icon-list-learned { background-image: url("/images/icon-list-learned.svg"); }
.icon-list-problematic { background-image: url("/images/icon-list-problematic.svg"); }
.icon-list-bookmarks { background-image: url("/images/icon-list-bookmarks.svg"); }
.icon-bookmark { background-image: url("/images/icon-list-bookmark.svg"); }
.icon-premium { background-image: url("/images/icon-premium.svg"); }




@media (max-width: 1150px) {
    ul.boxgrid li {
        padding: 1rem;
        padding-bottom: 0.5rem;
        background-size: 1.8rem auto;
        background-position: 1rem 1rem;
        padding-left: 3.5rem;
    }
}

@media (max-width: 800px) {
    ul.boxgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    ul.boxgrid {
        grid-template-columns: repeat(1, 1fr);
    }
    ul.boxgrid li {
        padding: 1.2rem;
        padding-bottom: 0.5rem;
        background-size: 2.2rem auto;
        background-position: 1.2rem 1.2rem;
        padding-left: 4.2rem;
        margin-bottom: 0;
    }

}
    .premium-upsell {
      background-color: #E8E8E8;
      border-radius: 8px;
      padding: 1rem 1.2rem;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
      background-image: url('/img/audio.png');
      background-repeat: no-repeat;
      background-position: -1rem -1rem;
      background-size: 120px 120px;
      padding-left:122px !important;
      padding-right:2rem !important;
      position: relative;
    }

    .premium-upsell .close-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 24px;
      height: 24px;
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      color: #666;
      transition: all 0.2s ease;
      border: 1px solid #ddd;
    }

    .premium-upsell .close-btn:hover {
      background-color: rgba(255, 255, 255, 1);
      color: #333;
    }

    .premium-upsell p {
      padding-top:0.5rem;
    }