/*
* Prefixed by:
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* --- Preview - section - start --- */

#space_between_lessons{
    width: 100%;
    height: 2em;
}

#lesson_preview{
    background-color: #006fb9;
    border-radius: 2em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 1em;
    padding-bottom: 1em;
}

#preview_start_language form{
    margin-left: auto;
    margin-right: auto;
}

#preview_start_language #beginnen{
	width: auto;
	height: 4em;
	border: 2px solid white;
	border-radius: 1em;
	color: white;
	background-color: #006fb9;
	font-size: 1.5em;
	padding: 0 14em 0 14em;
}

@media only screen and (max-width: 2000px) {
    #preview_start_language #beginnen{
        padding: 0 6em 0 6em;
    }
}


@media only screen and (max-width: 1400px) {
    #preview_start_language #beginnen{
        padding: 0 2em 0 2em;
    }
}

@media only screen and (max-width: 1000px) {

    #preview_logo_company img{
        display: none;
    }

}

@media only screen and (max-width: 800px) {

    #preview_start_language #beginnen{
        padding: 0 0 0 0;
    }

}

#preview_start_language #beginnen:hover{
	background-color: #3ea7ed;
}

#preview_img{
    text-align: center;
    padding-top: 2em;
    width: 40%;
}

#preview_img img{
    width: 250px; 
    height: 250px;
    border-radius: 1em;
}

#preview_logo_company{
    width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#preview_logo_company img{
    width: 200px; 
    height: auto;
    background-color: white;
    border-radius: 2em;
    padding: 0.5em 0.2em 0 0.2em;
    margin-left: auto;
    margin-right: auto;
}

#company_headline{
    width: 100%;
    text-align: center;
    color: white;
    font-size: 1.5em;
}

#preview_headline{
    text-align: center;
    color: white;
    font-size: 2em;
}

#preview_start_language{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: white;
}

#preview_logo_company_right_space{
    content: '';
    width: 30%;
}

#preview_start_language #en_img{
    background-image:url('../flags/en_EN.png');
    background-repeat:no-repeat;
    background-size: 100px 50px;
}

#preview_start_language #de_img{
    background-image:url('../flags/de_DE.png');
    background-repeat:no-repeat;
    background-size: 100px 50px;
}

#student_dashboard #buttonspace{
    content: '';
    margin-left: 1em;
    margin-right: 1em;
}

/* --- Preview - section - end --- */

/* --- Statusbar - section - start --- */
#progbar{
    width: 100%;
    height: 2em;
    background-color: white;
    display: flex;
}

#progspace{
    width: 15px;
    padding: 7px 0 5px 0;
    background-color: white;
}

#proggrey{ 
    background-color: grey;
    width: 10%;
    padding: 7px 0 5px 0;
    border-radius: 20px;
    border-style: none;
    text-align: center;
    color: lightgray;
}

#proggreen{ 
    background-color: green;
    width: 10%;
    padding: 7px 0 5px 0;
    border-radius: 20px;
    border-style: none;
    text-align: center;
    color: white;
}

#buttonproggrey{ 
    background-color: grey;
    width: 10%;
    padding: 7px 0 5px 0;
	margin: 0 0.4em 0 0.4em;
    border-radius: 20px;
    border-style: none;
    text-align: center;
    color: lightgray;
}

#buttonprogblue{ 
    background-color: #006fb9;
    width: 10%;
    padding: 7px 0 5px 0;
	margin: 0 0.4em 0 0.4em;
    border-radius: 20px;
    border-style: none;
    text-align: center;
    color: white;
}

#progred{ 
    background-color: red;
    width: 10%;
    padding: 7px 0 5px 0;
    border-radius: 20px;
    border-style: none;
    text-align: center;
    color: white;
}

#progblue{ 
    background-color: #006fb9;
    width: 10%;
    padding: 7px 0 5px 0;
    border-radius: 20px;
    border-style: none;
    text-align: center;
    color: white;
}

/* --- Statusbar - section - end --- */

#lessoncont{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

#lessonspace{
    width: 15%;
}

#lessonarea{
    width : 70%;
}

#lesson h2{
    text-align: center;
    scroll-margin-block-start: 10px;
}

#lesson h3{
    text-align: center;
    margin-bottom: -0.3em;
}

#lesson h3#redh3{
    color: red;
}

.radiostyle{
    accent-color:#006fb9;
    outline: 3px solid #006fb9;
    outline-style:solid;
    width: 30px;
    height: 30px;
}

#lesson p{
    text-align: center;
    font-size: 20px;
}


#lesson p#text{
    text-align: left;
}

#listblock{
    text-align: center;
}

#listblock ol.blackli{
    display: inline-block;
    text-align: left;
    font-size: 1.5em;
}

#listblock ol.blackli li{
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

#listblock ul.grey{
    list-style-type: none;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

#listblock ul.grey li{
    padding-bottom: 0.3em;
    padding-bottom: 0.3em;
}

#listblock ul.grey li:before{
    content: "\2022";
    color: grey;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

#listblock ul.greyli{
    display: inline-block;
    text-align: left;
    font-size: 1em;
    color: grey;
    list-style-type: none;
}

#listblock ul.greyli li{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#listblock ul.greyli li:before{
    content: "\2022";
    color: grey;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

#listblock ol.greyol{
    display: inline-block;
    text-align: left;
    font-size: 1em;
    color: grey;
}

#listblock ol.greyol li{
    padding-bottom: 0.5em;
    padding-bottom: 0.5em;
}

#lesson #greyp{
    color: grey;
    font-size: 1em;
}

#lesson #greyp2{
    color: grey;
    font-size: 1em;
    margin-left: 15%;
    text-align: left;
}

#lesson #greyp3{
    color: grey;
    font-size: 1.5em;
}

#formleft{
    margin-left: 25%;
}

#formleft #greyp4{
    color: grey;
    text-align: left;
    width: 80%;
}

#greyp4right{
    color: green;
}

#greyp4wrong{
    color: red;
}

#lesson #greydiv{
    text-align: left;
    width: 90%;
}

#lesson #greypb{
    color: grey;
    font-size: 1.5em;
    margin-bottom: -0.3em;
}

#question6{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    margin-left: 15%;
}

.quizli{
    width: 40%;
    outline: 5px solid #006fb9;
    outline-style:solid;
}

.quizli ol li{
    color: grey;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#lispace{
    content: '';
    margin-left: 2em;
    margin-right: 2em; 
}

#lessonimg{
    width: 100%;
    height: auto;
}

/* Button styling section*/

.input{
    margin-top: 1em;
    width : 100%;
    height: 4em;
    text-align: center;
}

.input input{
    background-color: grey;
    color: white;
    padding: 0.7em 2em 0.7em 2em;
    border: 2px solid;
    border-color: grey;
    border-radius: 0.5em;
    outline: none;
    font-size: 16px;
}

.input input:hover{
    background-color: white;
    color: grey;
    border: 2px solid;
    border-color: grey;
}

#buttonspace{
    content: '';
    margin-left: 2em;
    margin-right: 2em;
}

/* Button styling section*/

.bluefoo{
    margin-top: 2em;
    background-color: #006fb9;
    height: 5em;
    width : 100%;
}

#wp_radio_sec{
    text-align: center;
}

#sort label{
    background: rgb(9,9,121);
    background: linear-gradient(0deg, rgba(9,9,121,1) 24%, rgba(0,172,255,1) 100%);
    display: inline-block;
    color: white;
    padding: 1em 3em 1em 3em;
    min-width: 500px;
    max-width: 500px;
    border-style: 10px solid black;
    border-radius: 1em;
    margin: 0 0.3em 0 0.3em;
    text-shadow: 1px -1px 1px black;
}

.whatever{
    background: rgb(9,9,121);
    background: linear-gradient(0deg, rgba(9,9,121,1) 24%, rgba(0,172,255,1) 100%);
    display: inline-block;
    color: white;
    padding: 1em 3em 1em 3em;
    min-width: 300px;
    max-width: 300px;
    border-style: 10px solid black;
    border-radius: 1em;
    margin: 0 0.3em 0 0.3em;
    text-shadow: 1px -1px 1px black;
    cursor:pointer;
}
.whatever2{
    background: rgb(9,9,121);
    background: linear-gradient(0deg, rgba(9,9,121,1) 24%, rgba(0,172,255,1) 100%);
    display: inline-block;
    color: white;
    padding: 1em 3em 1em 3em;
    min-width: 800px;
    max-width: 800px;
    border-style: 10px solid black;
    border-radius: 1em;
    margin: 0 0.3em 0 0.3em;
    text-shadow: 1px -1px 1px black;
    cursor:pointer;
}

#checkboxes input[type=checkbox]{
    display: none;
}

#checkboxes input[type=checkbox]:checked + .whatever{
    background: rgb(1,15,0);
    background: linear-gradient(0deg, rgba(1,15,0,1) 2%, rgba(0,255,25,1) 100%);
}

#checkboxes2 input[type=checkbox]{
    display: none;
}

#checkboxes2 input[type=checkbox]:checked + .whatever2{
    background: rgb(1,15,0);
    background: linear-gradient(0deg, rgba(1,15,0,1) 2%, rgba(0,255,25,1) 100%);
}

.labl {
    display : inline-block;
    min-width: 300px;
    max-width: 300px;
    min-height: 4em;
}
.labl > input{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
.labl > input + div{ /* DIV STYLES */
    cursor:pointer;
    background: rgb(9,9,121);
    background: linear-gradient(0deg, rgba(9,9,121,1) 24%, rgba(0,172,255,1) 100%);
    color: white;
    padding: 1em 3em 1em 3em;
    margin: 0 0.3em 0 0.3em;
    border-style: 10px solid black;
    border-radius: 1em;
    text-shadow: 1px -1px 1px black;
}
.labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
    background: rgb(1,15,0);
    background: linear-gradient(0deg, rgba(1,15,0,1) 2%, rgba(0,255,25,1) 100%);
}
#radios2{
    display : inline-block;
}

.labl2 {
    display : block;
    min-width: 300px;
    max-width: 300px;
    min-height: 4em;
}
.labl2 > input{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
.labl2 > input + div{ /* DIV STYLES */
    cursor:pointer;
    background: rgb(9,9,121);
    background: linear-gradient(0deg, rgba(9,9,121,1) 24%, rgba(0,172,255,1) 100%);
    color: white;
    padding: 1em 3em 1em 3em;
    margin: 0.3em 0 0.3em 0;
    border-style: 10px solid black;
    border-radius: 1em;
    text-shadow: 1px -1px 1px black;
}
.labl2 > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
    background: rgb(1,15,0);
    background: linear-gradient(0deg, rgba(1,15,0,1) 2%, rgba(0,255,25,1) 100%);
}

.labl3 {
    display : block;
    min-width: 800px;
    max-width: 800px;
    min-height: 4em;
}
.labl3 > input{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
.labl3 > input + div{ /* DIV STYLES */
    cursor:pointer;
    background: rgb(9,9,121);
    background: linear-gradient(0deg, rgba(9,9,121,1) 24%, rgba(0,172,255,1) 100%);
    color: white;
    padding: 1em 3em 1em 3em;
    margin: 0.3em 0 0.3em 0;
    border-style: 10px solid black;
    border-radius: 1em;
    text-shadow: 1px -1px 1px black;
}
.labl3 > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
    background: rgb(1,15,0);
    background: linear-gradient(0deg, rgba(1,15,0,1) 2%, rgba(0,255,25,1) 100%);
}