@-ms-viewport {
    width: device-width;
}

html {
    width: 100%;
    height: 100%;
}

.denyRegistration{
background-color : rgb(153, 153, 153)!important;
color : #e5e5e5!important;
cursor : default;
pointer-events: none;
}

body {
    font-family: BodyFont, Helvetica, Arial, sans-serif;
    margin: 0;
}

.escapeCustomFont{
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
}

input,
select {
    font-family: BodyFont, Helvetica, Arial, sans-serif;
}

a img {
    border:none;
}

.langar,
.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
}

.button {/*Addition prevent from button text being (accidentally) selected*/
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

.scrollwrapper {
    position: absolute;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

#content img,
#content svg,
#content iframe {
    width: 100%;
}

#content #declineMatch{
   width: 30px;
}

#content .verifymessage {
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-align: center;
}

#viewPort #content {
    margin-top: 0;
}

#content .listSubscribedEntry,
#content .listAvailableEntry {
    display: block;
    text-decoration: none;
    padding: 15px 10px 15px 10px;
}

#content .profile input[type=checkbox] {
    display: none;
}

#content .profile input[type=checkbox] + label.placeholder {
    padding: 5px 0 10px 35px;
    background-image: url("../img/empty.png");
    background-position: 0 0;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
}

#content .profile input[type=checkbox]:checked + label.placeholder {
    background-image: url("../img/checked.png");
    background-position: 0 0;
    background-size: 30px 30px;
    background-repeat: no-repeat;
}

#content .profile .input.hidden {
    display: none;
}

.invite .actions .buttons .button.disabled:hover,
.featurebtn.countdown:hover,
.logo.nohover:hover,
.progresscontent #progressbar:hover,
#content.matchResult #gobutton.disabled:hover,
#content.matchResult .buttons .button.disabled,
#progressbar.nohover:hover,
.overlayWindow .button.next.disabled,
#viewPort #content .buttons .button.disabled:hover,
.answer:hover {
    cursor: default;
    /*pointer-events: none;*/
}

.disableCursor{
   pointer-events: none;
}
.enableCursor{
   pointer-events: auto;
}

.hidden {
    display: none !important;
}


.overlayWindow .header:hover {
    /*cursor: move;*/
}

#profileOverlay .avatarElement,
.audiojs p,
.imprintfooter .footerlink:hover,
.featuretxt:hover,
.menubtn:hover,
.search .searchbutton:hover,
.button:hover,
.answers.selectable .answer:hover,
.overlayWindow .header .closeicon,
.overlayWindow .category:hover,
#progressbar:hover,
#content .course .share:hover .background,
#content .course .share .icon:hover,
#content .profilelink .profilepicture,
#content .invite .buttons .button.forgotpassword:hover,
#content.login .buttons .button.forgotpassword:hover,
#content .addEntry:hover,
#content .voucherEntry:hover,
#content .listSubscribedEntry:hover,
#content .listAvailableEntry:hover {
    cursor: pointer;
}

.answers.selectable #voc_answer:hover {
    background: none;
    cursor: text;
    color: inherit;
}

.error .play-pause p {
    cursor: auto;
}

#content .listAvailableEntry .icons,
#content .listSubscribedEntry .icons,
#content .listSubscribedEntry .icons .addCourse{
    width: 30px;
    display: table-cell;
}

#content .voucherEntry,
#content .addEntry {
    display: block;
    text-decoration: none;
    padding: 5px 15px 0 0;
}

#content .voucherEntry .icons,
#content .addEntry .icons {
    width: 40px;
    display: table-cell;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    #content .listAvailableEntry .icons,
    #content .listSubscribedEntry .icons {
        width: 30px;
        display: block;
        float: right;
    }

    .addCourse{
        float: left!important;
    }

    .menubtn .notificationIndicator {
        padding: 5px;
        border-radius: 20px;
        min-width: 10px;
        height: 10px;
        display: inline-block;
        line-height: 10px;
        text-align: center;
        font-size: 10px;
    }

    html{
        -ms-overflow-style: none;
    }

    .scrollwrapper{
        -ms-overflow-style: scrollbar !important;
        overflow-x: visible;
    }

}

@media only screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width: 400px){
    #content .addEntry,
    #content .voucherEntry {
        display: table;
    }

    #content .addEntry .subscribedEntryTable.extended,
    #content .voucherEntry .subscribedEntryTable.extended {
        display: table-cell;
        vertical-align: middle;
    }

    #content .voucherEntry .icons,
    #content .addEntry .icons {
        width: 40px;
        float: left;
        border:none;

    }

    #content .voucherEntry .title,
    #content .addEntry .title {
        margin-top: 2%;
        float: left;
        margin-right: 0;
        padding-right: 0;
        padding-left: 0;
        margin-left:0;
        border: none;
    }
}

.icons svg,
.icons img {
    height: 30px;
}

#content .listAvailableEntry .title {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    word-break: break-word;
}

#content .listSubscribedEntry .subscribedEntryTable{
    width: 100%;
    display: table;
}

#content .listSubscribedEntry .title {
    white-space: nowrap;
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    padding-right: 10px;
}

#content .info .intro_image img,
#content .info .intro_image .video-embed {
    margin: 0;
}

.context {
    display: block;
}

#content .intro_image {
    overflow: hidden;
    display: block;
    position: relative;
}

.menu .button .text {
    padding-top: 4px;
}

.menu .button {
    text-decoration: none;
    display: block;
    padding: 5px;
}

.menu .button.big:hover .text,
.menu .button.big .viewprofile,
form .dz-message,
form .dz-fallback,
form .dz-default,
.dz-preview {
    display: none;
}

#content .course .share {
    position: absolute;
    right: -6px;
}

#content .course .share .icon {
    width: 26px;
    height: 26px;
    position: relative;
    z-index: 5;
    margin: 4px 12px 0 -6px;
}

#content .course .share .background {
    position: absolute;
    margin: -26px 0 0 -8px;
    z-index: 4;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}

.overlayWindow .selection_list .selection_item .imagecol,
.overlayWindow .selection_list .selection_item .text {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 5px 10px 10px;
}

.overlayWindow .selection_list .selection_item .text {
    width: 100%;
    padding-left: 0;
}

.overlayWindow .selection_list .selection_item svg.icon,
.overlayWindow .selection_list .selection_item img.icon {
    height: 36px;
    width: 36px;
    padding: 5px 10px 0 5px;
}

.overlayWindow .selection_list .selection_item {
    display: table-row;
    width: 100%;
    text-decoration: none;
}

.overlayWindow .selection_list .selection_item .imagecol svg.icon,
.overlayWindow .selection_list .selection_item .imagecol img.icon{
    padding:0;
}

.notificationIndicator {
    padding: 5px;
    border-radius: 20px;
    min-width: 10px;
    height: 10px;
    display: block;
    line-height: 10px;
    text-align: center;
    font-size: 10px;
}

/*Profile Menu Item*/
.menu .button.big .text,
.menu .button.big:hover .viewprofile {
    display: table-cell;
}

.menu .button.big svg.icon,
.menu .button.big img.icon {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
}

.menu .button.big:hover svg.icon,
.menu .button.big:hover img.icon {
    -webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
}

.menu .button.big {
    display: table;
    width: 100%;
    padding: 0;
    border-spacing: 10px;
    -moz-box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.1);
    box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.1);
}

.menu .button.big .viewprofile,
.menu .button.big .text {
    vertical-align: middle;
    width: 100%;
    white-space: normal;
    word-break: break-word;
}

.menu .button.big .text{
    word-break: break-all;
}

.notificationIndicator {
    padding: 5px;
    border-radius: 20px;
    min-width: 10px;
    height: 10px;
    display: block;
    line-height: 10px;
    text-align: center;
    font-size: 10px;
}

#content .error{
    text-align: center;
}

#content form input {
    display: block;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
    font-weight: normal;
    box-shadow: none;
    border-radius: 2px;
    padding: 10px 5px 10px 5px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.useAndPrivacyPolicy{
    padding: 1%;
    text-align: center;
    text-decoration: none;
}

.useAndPrivacyPolicyContainer{
    position: relative;
    width: inherit;
    overflow: hidden;
}

.useAndPrivacyPolicyCheckbox{
    position: relative;
    width: 5%;
    float: left;
    margin-top: 5px;
}

.useAndPrivacyPolicyMessage{
    position: relative;
    width: 95%;
    float: left;
}

.useAndPrivacyPolicyMessageFormat{
    float: left;
}

.termsOfUseMessageFormat{
    float: left;
    padding-right: 1%;
}

.privacyPolicyMessageFormat{
    float: left;
    padding-left: 1%;
    padding-right: 1%;
}

#profileOverlay .profilepicture,
#content .profilepicture {
    border-radius: 100%;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.55);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.55);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.55);
}

.audiojs .error-message {
    float: left;
    display: none;
    margin: 0 10px;
    height: 36px;
    width: 400px;
    overflow: hidden;
    line-height: 36px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -khtml-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}

.audiojs .error-message a {
    text-decoration: none;
    padding-bottom: 1px;
    white-space: normal;
}

.audiojs .play {
    background: url("../img/play.png") no-repeat;
    margin-top: 2px;
}

.audiojs .loading {
    background: url("../img/loading.png") no-repeat;
    margin-top: 2px;
}

.audiojs .error {
    background: url("../img/error.png") no-repeat;
    margin-top: 2px;
}

.audiojs .pause {
    background: url("../img/pause.png") no-repeat;
    margin-top: 2px;
}

.audiojs .play-pause {
    width: 80px;
    height: 80px;
    margin: 0;
    float: left;
    overflow: hidden;
}

.audiojs p {
    display: none;
    width: 80px;
    height: 80px;
    margin: 0;
}

.audiojs .play {
    display: block;
}

.audiojs .time {
    float: left;
    font-size: 16px;
    line-height: 16px;
    margin: 30px 5px;
}

.audiojs .time em {
    font-style: normal;
}

.audiojs .time strong {
    font-weight: normal;
}

.audiojs .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 0;
    z-index: 1;
    background-color: #CCC;
}

.audiojs .loaded {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 0;
}

.audiojs {
    height: 75px;
    padding: 5px;
    overflow: hidden;
}

.playing .play, .playing .loading, .playing .error {
    display: none;
}
.playing .pause {
    display: block;
}

.audiojs audio {
    position: absolute;
    left: -1px;
}

.loading .play, .loading .pause, .loading .error {
    display: none;
}

.loading .loading {
    display: block;
}

.error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
    display: none;
}

.error .error {
    display: block;
}

.error .error-message {
    display: block;
}

.overlayWindow .button.cancel,
.overlayWindow .button.next,
#content .button.learn,
#content .button.next,
#content .button.login,
#content .button.subscribe,
.fixedfooter .button {
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: 2px;
    padding: 10px;
}

.listheader {
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    font-size: 26px;
    margin-bottom: 25px;
    margin-left: 20px;
}

.menu .button svg.svgicon {
    width: 30px;
    height: 30px;
}

.indexsvg{
    width: 30px;
    height: 30px;
}

.menu .button svg.icon,
.menu .button img.icon,
#content .answers .answer img.radio,
#content .answers .answer img.checkbox {
    height: 30px;
    width: 30px;
    display: inline-block;
}

.invite .info .opponentInfo img,
.invite .info .opponentInfo span{
    display: table-cell;
    vertical-align: middle;
}

.invite .info .opponentInfo span {
    padding: 0 15px;
}

.invite .info .courseInfo span {
    display: table-cell;
    vertical-align: bottom;
    white-space: normal;
    padding: 0;
    font-size: 24px;
}

#content.leaderboard .listview .separator {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    display: table;
    padding: 0;
    width: 100%;
}

#content.leaderboard .listview .separator div {
    padding: 5px 10px;
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

#content.leaderboard .listview .separator .text {
    width: 100%;
    text-align: left;
}

#content.leaderboard .listview .separator div {
    display: table-cell;
}

#content.leaderboard .withbackground .course_title {
    text-shadow: 0 0 1px #000;
    padding-bottom: 10px;
}

#content.leaderboard .introduction,
#content.leaderboard .selection_list {
    margin: 0 auto;
    display: block;
}

#content.leaderboard .introduction {
    padding: 0 10px;
}

#content.leaderboard .selection_list .selection_item {
    display: table-row;
    width: 100%;
    text-decoration: none;
}

#content.leaderboard .selection_list .selection_item svg.icon,
#content.leaderboard .selection_list .selection_item img.icon {
    height: 36px;
    width: 36px;
}

#content.leaderboard .trophy {
    display: block;
    margin: 0 auto 20px auto;
}

.invite .info .courseInfo {
    display: table;
    width: 100%;
}

#content .profilelink .profilepicture:hover,
#profileOverlay .avatarElement .profilepicture.selected:hover,
#profileOverlay .avatarElement .profilepicture:hover {
    -webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
}

#content.matchResult .opponentsSmall .you,
#content.matchResult .opponentsSmall .opponent,
#content.matchResult .opponentsSmall .profilepicture {
    height: 75px;
    width: 75px;
}

#content.matchResult .opponentsSmall .you,
#content.matchResult .opponentsSmall .opponent {
    display: table-cell;
    vertical-align: middle;
}

#content.matchResult .opponentsBig .you,
#content.matchResult .opponentsBig .versus,
#content.matchResult .opponentsBig .opponent{
    display: table-cell;
    text-align: center;
    width: 33%;
    vertical-align: middle;
}

#content.matchResult .finishedtext,
#content.matchResult .preparationtext,
#content.matchResult .opponentsBig .name {
    padding-top: 10px;
    font-size: 20px;
    text-align: center;
}

#content.matchResult #gobutton {
    text-decoration: none;
}

#content.matchResult #gobutton .text {
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    font-size: 90px;
    position: absolute;
    z-index: 2;
    line-height: 250px;
    width: 250px;
    text-align: center;
}

#content.matchResult #gobutton canvas {
    position: absolute;
    z-index: 1;
}

#content.matchOverview .buttons.points .score {
    width: 100%;
}

#content.matchOverview .buttons.points .score span {
    display: block;
}

#content .profilelink {
    display: block;
    margin: 0 auto;
    width: 100px;
}

#content.matchOverview .listview .matchItem {
    width: 100%;
    display: table;
    text-decoration: none;
}

#content .button.register {
    text-decoration: none;
    margin: 20px;
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 2px;
}

#content .course .introduction_side .lesson_item {
    display: table;
    width: 100%;
}

#content .course .introduction_side .lesson_item .lesson_title {
    display: table-cell;
    word-break: break-word;
}

#content .course .introduction_side .lesson_item .progress_item {
    display: table-cell;
    width: 1%;
}

#content .voucherEntry .subscribedEntryTable.extended,
#content .addEntry .subscribedEntryTable.extended {
    margin: 0 auto;
    width: inherit;
}

#content .addEntry .subscribedEntryTable.extended .title,
#content .voucherEntry .subscribedEntryTable.extended .title,
#content .addEntry .subscribedEntryTable.extended .icons,
#content .voucherEntry .subscribedEntryTable.extended .icons{
    vertical-align: middle;
}

#content .graph span.false,
#content .graph span.correct {
    font-size: 16px;
}

#content .graph span.correct {
    float: left;
}

#content .graph span.false {
    float: right;
}

#content .graph .result {
    padding-top: 15px;
    padding-bottom: 15px;
    height: 50px;
    display: block;
}

#content .graph .result .bar {
    vertical-align: middle;
    display: block;
    width: 100%;
    height: 35px;
    border-radius: 2px;
    position: relative;
    top: 7px;
}

#content .graph .result .threshold {
    width: 1px;
    left: 35%;
    height: 50px;
    display: block;
    position: absolute;
    z-index: 10;
}

#content .graph .result .bar .correctbar {
    display: block;
    width: 75%;
    height: 35px;
    border-radius: 2px;
}

.thresholdtext, .timeneededtext {
    font-family: LightFont, Helvetica, Arial, sans-serif ;
    line-height: 24px;
}

#content .legend {
    font-family: LightFont, Helvetica, Arial, sans-serif ;
    display: block;
    height: 20px;
}

.results .entry,
.indexlesson .indexcard {
    padding: 0 10px 10px 3px;
    display: block;
    text-decoration: none;
}

#content.index,
#content.search {
    margin-top: 15px;
}

/*boxshadow*/
.invite,
#content.opponentSelection .course .selection_list,
#content.matchResult table.result,
#content.leaderboard .listview .selection_list,
#content .profile,
#content.opponentSelection .listview .selection_list {
    -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
}

#intervention_canvas {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#footercontent {
    display: block;
    height: 100%;
}

.fancyUnsubscribeContainer{
    position: absolute;
    width: 273px;
}

.regularUnsubscribeContainer{
    float: right;
}

.fancyFurtherEntries{
    padding: 2px;
    position:relative;
    float: right;
    z-index: 2;
}

.fancyFurtherEntries::after{
    content: '';
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    float: right;
}

.regularFurtherEntries{
    padding: 3px;
    position: absolute;
    margin-left: 35px;
}

.regularFurtherEntries::after{
    content: '';
    width: 100%;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    float: left;
}

.removeFancyPCCourseOption{
    padding: 2px;
    position:relative;
    float: right;
}

.removeFancyPCCourseOption::after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: #e6e6e6;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    float: right;
}

.removeRegularPCCourseOption{
    padding: 2px;
    position:relative;
    float: right;
    margin-right: 43px;
}

.removeRegularPCCourseOption::after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: #e6e6e6;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    float: right;
}

.dot{
    height: 4px;
    width: 4px;
    background-color: #ffffff;
    border-radius: 50%;
    display: block;
    margin-bottom: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: #495057;
    position:relative;
    z-index: 2;
}

.unsubscribeOptionText{
    position: relative;
    z-index: 2;
    color: #000000!important;
    font-weight: bold;
}

.withbackground .bottom-top-gradient {
    background-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent 100%);
    background-image: -ms-linear-gradient(to top, rgba(0,0,0,0.5), transparent 100%);
}

.overlayBackground {
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
}

#content .subscribedEntryTable.extended .title,
#content .subscribedEntryTable.extended .icons{
    vertical-align: bottom;
    white-space: normal;
    word-break: break-word;
}

#content .addEntry .subscribedEntryTable.extended .title,
#content .voucherEntry .subscribedEntryTable.extended .title {
    white-space: nowrap;
}

#content.opponentSelection .titleblock.withbackground .bottom-top-gradient {
    min-height: 300px;
}

@-moz-document url-prefix() {
    #content.opponentSelection .titleblock.withbackground .bottom-top-gradient {
        height: 300px;
    }
}

#content.opponentSelection .titleblock .bottom-top-gradient{
    min-height: 150px;
    height: 100%;
    width: 100%;
    display: table;
}

#content.opponentSelection .titleblock .title {
    font-size: 28px;
    font-weight: bold;
    display: table-cell;
    vertical-align: bottom;
    white-space: normal;
    padding: 5px 15px;
    word-break: break-word;
}

#content.opponentSelection .selection_list .selection_item svg.icon,
#content.opponentSelection .selection_list .selection_item img.icon {
    height: 36px;
    width: 36px;
    padding: 5px 10px 0 5px;
}

#content.opponentSelection .selection_list .selection_item {
    display: table-row;
    width: 100%;
    text-decoration: none;
}

/* KnowledgeMatch Play Screen*/
.matchBar table td {
    width: 33%;
    height: 27px;
    vertical-align: middle;
    padding: 0;
}

.matchBar table td.left{
    text-align: left;
}

.matchBar table td.middle{
    text-align: center;
}

.matchBar table td.right{
    text-align: right;
}

.matchBar table {
    width: 100%;
    border-spacing: 0;
}

#content.matchResult .points .scoretitle {
    font-size: 20px;
    font-weight: bold;
    font-family: LightFont, Helvetica, Arial, sans-serif;
}

#content.matchResult .points .measurement {
    font-size: 20px;
    font-family: LightFont, Helvetica, Arial, sans-serif;
    font-weight: bold;
}

#content.matchResult .points .number {
    font-size: 36px;
    font-weight: bold;
    font-family: LightFont, Helvetica, Arial, sans-serif;
}


#content.matchResult .points {
    padding: 20px;
    text-align: center;
}

#content.matchResult .points span {
    display: block;
}

#content.matchResult .waiting {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 15px;
}

#content.matchResult .opponentsSmall,
#content.matchResult .opponentsBig {
    display: table;
    width: 100%;
    padding-bottom: 15px;
}

#content.matchResult .opponentsSmall .score {
    display: table-cell;
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    font-size: 36px;
    text-align: center;
    vertical-align: middle;
}

#content.matchResult .animation {
    width: 250px;
    height: 250px;
    margin: 0 auto;
}

#content.matchResult table.result {
    width: 100%;
    text-align: center;
    border-spacing: 0;
}
#content.matchResult table.result td.score.winner,
#content.matchResult table.result thead {
    font-weight: bold;
}

#content.matchResult table.result td.score {
    font-size: 20px;
}

#content.matchResult table.result .score {
    width: 55px;
    max-width: 55px;
    word-break: break-all;
}

#content.matchResult table.result td {
    padding: 0;
}

#content.matchResult table.result th,
#content.matchResult table.result td {
    height: 40px;
    padding: 0 10px;
}

#content.matchResult table.result tr.current {
    font-weight: bold;
}

#content.dynpage {
    padding: 15px 0;
}

#content.dynpage .text img {
    width: inherit;
    margin: 0 auto;
    display: block;
}

#content.dynpage .text a {
    text-decoration: none;
    margin: 10px auto;
}

#content.dynpage .text .smalllink {
    display: table-row;
    margin: 10px;
    text-decoration: none;
    height: 50px;
}

#content.dynpage .text .smalllink img {
    display: table-cell;
    height: 30px;
    float: left;
}

#content.dynpage .text .smalllink span {
    display: table-cell;
    vertical-align: middle;
    font-size: 13px;
}

#content.dynpage .devicetable {
    display: table;
    width: 100%;
}

#content.dynpage .text .downloadheader,
#content.dynpage .text .downloaddescription,
#content.dynpage .text .devices {
    font-size: 13px;
    padding-bottom: 25px;
}

#content.dynpage .text .devices,
#content.dynpage .text .downloadheader {
    font-weight: bold;
}

#content.dynpage .text #yourdevicetable {
    font-weight: normal;
}

.dltext {
    width: 100%;
}

#content.matchOverview .buttons.points div {
    display: table-cell;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

#content.matchOverview .buttons.points .score span.measurement {
    font-size: 20px;
    font-family: LightFont, Helvetica, Arial, sans-serif;
    font-weight: bold;
}

#content.matchOverview .listview .matchItem .score{
    vertical-align: middle;
    display: table-cell;
    white-space: nowrap;
}

.matchBar {
    font-size: 13px;
    padding: 5px;
    font-weight: bold;
}

.menu {
    position: absolute;
    width: 275px;
    z-index: 12;
    box-shadow: -50px 50px 50px -50px rgba(0, 0, 0, 0.1);
    text-align: left;
    right: 0;
}

.welcomemessage {
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    word-wrap: break-word;
    text-align: center;
}

.overlayWindow .selection_list .selection_item:first-child img,
.overlayWindow .selection_list .selection_item:first-child svg,
.overlayWindow .selection_list .selection_item:first-child div,
#content.matchResult table.result:last-child,
#content.opponentSelection .selection_list .selection_item:first-child img,
#content.opponentSelection .selection_list .selection_item:first-child svg,
#content.opponentSelection .selection_list .selection_item:first-child div,
#content.leaderboard .selection_list .selection_item:first-child div {
    border: 0 !important;
}

#content.opponentSelection .selection_match_exists{
    text-align: center;
    padding: 20px 0px 10px 0px;
}

.match_exists_buttons{
    display: table;
    border-collapse: separate;
    border-spacing: 15px;
    width: 100%;
}

.invite .info .opponentInfo {
    display: table;
}

span.answerIndicator {
    width: 15px;
    height: 15px;
    display: inline-block;
    position: relative;
    top: 3px;
    padding-left: 5px;
}

span.answerIndicator.wrong {
    background: url("../img/answerindicator_wrong.png") no-repeat;
}

span.answerIndicator.correct {
    background: url("../img/answerindicator_correct.png") no-repeat;
}

span.answerIndicator.unanswered {
    background: url("../img/answerindicator_unanswered.png") no-repeat;
}

#content.opponentSelection.opponentList .selection_list {
    margin: 0 auto;
}

.opponentinput{
    margin-top: 10px;
    margin-bottom: 20px;
}

#content .intro_image .video-embed {
    margin: 0 auto;
    display: block;
    height: 302px;
    width: 450px;
}

#profileOverlay .border {
    text-align: center;
    display: block;
}

.welcomemessage .small {
    font-family: BodyFont, Helvetica, Arial, sans-serif;
    font-size: 24px;
    padding-top: 30px;
}

.progressgraph .column .number{
    font-family: BodyFont, Helvetica, Arial, sans-serif;
    font-size: 40px;
}

.resultheader {
    font-family: LightFont, Helvetica, Arial, sans-serif;
}

#test_timer {
    font-family: LightFont, Helvetica, Arial, sans-serif;
    display: table-cell;
    font-weight: normal;
}

#content.matchOverview .buttons.points .score span.number {
    font-size: 36px;
    font-weight: bold;
    font-family: LightFont, Helvetica, Arial, sans-serif;
}

#feedbackOverlay textarea.comment {
    width: 100%;
    resize: none;
    max-height: 75px;
    height: 75px;
    border-radius: 2px;
    font-size: 18px;
    font-family: BodyFont, Helvetica, Arial, sans-serif;
}

.header #pageTitle {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    line-height: 30px;
    height: 30px;
    font-size: 18px;
}

#content .course_title {
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    text-align: center;
    word-wrap: break-word;
}

#content .course .introduction_side .lesson_item .progressbar {
    width: 65px;
    height: 12px;
}

#content .course .introduction_side .lesson_item .progressbar .progresscompletion {
    width: 0;
    height: 12px;
}

#content .course .introduction_side .lesson_item .lesson_progress {
    text-align: right;
    width: 50px;
    display: table-cell;
    white-space: nowrap;
}

#content.langar .course .introduction_side .lesson_item .lesson_progress,
#content.rtl .course .introduction_side .lesson_item .lesson_progress {
    text-align: left;
    width: 50px;
    display: table-cell;
}

#content.leaderboard .selection_list .selection_item .rank,
#content.leaderboard .selection_list .selection_item .points {
    padding: 0 10px;
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.context .context_header {
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    font-size: 24px;
}

#content .matchBar table td.middle .timericon {
    width: 18px;
    position: relative;
    height: 20px;
    display: inline-block;
}

#content.matchOverview .buttons.points {
    display: table;
}

#content.opponentSelection .selection_list .selection_item .text {
    width: 100%;
    padding-left: 0;
    word-break: break-word;
}

#content.opponentSelection .selection_list .selection_item .imagecol svg.icon,
#content.opponentSelection .selection_list .selection_item .imagecol img.icon {
    padding:0;
}

#profileOverlay .avatarElement .profilepicture {
    width: 75px;
    height: 75px;
}

#profileOverlay .avatarElement {
    padding: 15px;
    display: inline-block;
}

#profileOverlay {
    width: 435px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.header {
    height: 40px;
    margin: 0;
    background: no-repeat bottom left;
}

.header .logo img{
    height: 100%;
}

.header .logo {
    height: 30px;
}

#headercontent {
    position: absolute;
}

.headerfeatures {
    display: block;
    position: relative;
    float: right;
    text-align: right;
    height: 30px;
}

#content .listview.extended .listSubscribedEntry .bottom-top-gradient,
#content .listview.extended .listAvailableEntry .bottom-top-gradient {
    padding: 15px 10px 15px 10px;
}

.menubtn {
    display: table;
}

#content .button.learn,
#content .button.next,
#content .button.login,
#content .button.subscribe {
    margin: 20px;
}

#content .intro_image img {
    margin: 0 auto;
    display: block;
}

.listview {
    padding: 20px;
}

.qna {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    display: table;
    table-layout: fixed;
}

.context {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
}

.context .question_context,
.context .answer_context {
    display: table;
    table-layout: fixed;
}



.context .imagewrapper,
.question {
    display: table-cell;
    vertical-align: top;
    word-wrap: break-word;
}

.initial {
    display: inherit;
}

.answers {
    vertical-align: top;
}

.answers .answer {
    word-wrap: break-word;
}

.context .context_text,
.context .imagewrapper,
.qna .question
.qna .answers {
    width: 50%;
    display: table-cell;
}

.qna .answers {
    position: relative;
}

.buttons {
    display: block;
}

.context .answer_context,
.context .question_context {
    width: 100%;
}

.context .context_text {
    font-size: 16px;
    line-height: 22px;
    word-wrap: break-word;
    display: table-cell;
}

#content .answers .answer .text {
    padding-left: 5px;
}

#progress {
    height: 10px;
    display: block;
}

.menu .button .text,
#content .answers .answer .text {
    display: inline-block;
    max-width: 80%;
    vertical-align: top;
}

.welcomemessage.video iframe {
    margin: 0 auto;
    display: block;
}

#content form {
    padding: 15px 0 5px 0;
}

#content .buttons .button,
#content form .input {
    margin: 15px auto;
    display: block;
}

#content form input {
    margin: 0;
}

#content.login .buttons .button.register,
#content.login .buttons .button.login {
    padding: 10px 0 10px 0;
}

#content.login .buttons .button.register {
    font-size: 18px;
}
#content.login .buttons .button.login {
    font-size: 24px;
}

#content .invite .buttons .button.forgotpassword,
#content.login .buttons .button.forgotpassword {
    text-decoration: none;
    font-size: 18px;
}

#content.login .resetusername {
    font-size: 24px;
    text-align: center;
    display: block;
}

#content .introduction_side,
#content .image_side {
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
}

#content .introduction_side.only {
    margin: 0 auto;
    display: block;
}

#content .course .buttons {
    padding: 0 0 20px 0;
}

#content .course .button.learn,
#content .course .button.subscribe {
    text-align: center;
}

#content .course .introduction_side {
    font-size: 16px;
    line-height: 22px;
}

#content .course .introduction_side .lesson_overview .overview_header {
    font-family: HeaderFont, HeaderFont, Helvetica, Arial, sans-serif;
    padding: 0 0 10px 0;
}

#content .course .introduction_side .introduction,
#content .course .introduction_side .course_info {
    padding: 0 0 15px 0;
}

#content .course .introduction_side .lesson_overview {
    padding: 15px 0 15px 0;
}

#content .course_finished {
    text-align: center;
    font-size: 30px;
}

#test_timer {
    font-size: 24px;
}

#test_timer .countdown-row {
    font-weight: normal;
}

.resultheader {
    text-align: center;
    font-size: 100px;
    margin-top: 25px;
    margin-bottom: 25px;
}

#content .buttons.test {
    display: block;
}

#content .buttons.test .button {
    margin: 10px;
    display: inline-block;
}

#content .graph {
    padding: 15px 15px 10px 15px;
    margin: 0 auto;
}

#viewPort #content .buttons .button.next.testnext {
    display: inline-block;
    float: right;
}

.overlayWindow {
    position: absolute;
    z-index: 1000 !important;
}

.overlayWindow .header{
    display: table;
    padding: 10px 15px;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;
}

.overlayWindow .header .title {
    display: table-cell;
    width: 99%;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlayWindow .header .headericon,
.overlayWindow .header .closeicon {
    display: table-cell;
    height: 35px;
    vertical-align: middle;
}

.overlayWindow .header .headericon {
    padding-right: 10px;
}

.overlayWindow .header .closeicon {
    padding-left: 10px;
}

.overlayWindow .buttons .button {
    width: 35%;
}

.overlayWindow .buttons .button.next {
    float: right;
    display: inline-block;
    margin: 15px 15px 15px 0;
}

.overlayWindow .buttons .button.cancel {
    float: left;
    display: inline-block;
    margin: 15px 0 15px 15px;
}

.overlayWindow .abortContent .text {
    padding: 20px 20px 5px 20px;
    font-size: 20px;
}

.overlayWindow .category {
    height: 50px;
    display: table;
}

.overlayWindow .category img {
    height: 40px;
    width: 40px;
    display: table-cell;
    padding: 5px;
}

#feedbackOverlay .category .text {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

#feedbackSent {
    height: 87px;
}

#feedbackSent .header{
    display: block;
    font-size: 28px;
    padding: 25px 15px 15px 25px;
    text-align: center;
    height: 28px;
}

.rightField,
.leftField {
    display: block;
    position: relative;
}
.indexlesson {
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 0 10px 5px 10px;
    display: block;
}

.indexlesson .lessonheader{
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    font-size: 20px;
    padding: 10px 10px 10px 3px;
    word-break: break-word;
}

.lessonheaderlink{
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    font-size: 20px;
    padding: 10px 10px 10px 3px;
    word-break: break-word;
    color:inherit;
}

.results .entry .resultTitle,
.indexlesson .indexcard .cardtitle {
    font-size: 14px;
    padding: 10px 0 0 0;
    word-break: break-word;
}

.results .entry .resultContent,
.indexlesson .indexcard .question {
    font-size: 12px;
    line-height: 17px;
    width: 100%;
}

.results .entry:hover .resultTitle, .results .entry:hover .resultContent,
#content .indexlesson .indexcard:hover .cardtitle, #content .indexlesson .indexcard:hover .question{
    color: inherit;
}

.indexlesson .lessondescription{
    font-size: 12px;
    line-height: 17px;
    width: 100%;
    white-space: nowrap;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
}

.indexlesson .furtherDescription{
    font-size: 15px;
    white-space: nowrap;
}

.descriptionContainer{
    padding-bottom: 5px;
}

.lessondescriptionextended{
    font-size: 12px;
    line-height: 17px;
    width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    padding: 0px 0px 10px 3px;
}

.search .searchheader {
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    display: inline-block;
    font-size: 20px;
    position: relative;
    vertical-align: middle;
}
.search .searchbutton {
    width: 26px;
    display: inline-block;
    border-radius: 2px;
    line-height: 28px;
    font-size: 20px;
    height: 26px;
    vertical-align: middle;
    position: relative;
}

.results {
    padding: 20px;
}

#content .loading img {
    width: 100px;
    margin: 0 auto;
    display: block;
    padding-top: 40px;
}

#content .noresults {
    font-size: 50px;
    text-align: center;
    padding: 20px;
}

#content .progressHeader {
    font-size: 36px;
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    text-align: center;
}

#content .progressgraph {
    text-align: center;
    border-spacing: 5px;
}

#content .progressgraph .column {
    height:250px;
    width: 50px;
    border-radius: 2px;
    vertical-align: bottom;
}

#content .progressgraph .column .indicator {
    width: 80%;
    min-height: 4px;
    display: block;
    margin: 0 auto;
}

.progresscontent #progressbar #progressbg,
.progresscontent #progressbar {
    height: 50px;
    border-radius: 2px;
    margin: 15px 0;
}

.progresscontent #progress {
    display: block;
    height: 50px;
}

.progresscontent .graphtext,
.progresscontent .progressText {
    font-size: 20px;
}

.listview .separator {
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    padding: 10px;
    font-size: 13px;
}

.listview #newcourses.separator,
.listview #othercourses.separator {
    margin-top: 50px;
}

.intervention_top {
    font-size: 28px;
    text-align: center;
    word-wrap: break-word;
}

.intervention_top_info{
    margin-bottom: 100px;
}

#content .buttons.intervention {
    margin: 0 auto;
    text-align: center;
}

#content .buttons.intervention .learn{
    width: 200px;
    display: inline-block;
    margin: 10px;
}

#content .answers .choices {
    position:relative;
    z-index: 1;
}

#content .answers .thumb{
    position: absolute;
    z-index: 100;
    display: block;
    height: 100%;
    width: 100%;
}

#content .answers .thumb svg.successthumb {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    display: block;
}

#feedbackOverlay .commentbox {
    display: block;
    padding: 10px;
}

#headertable {
    border-spacing: 0;
    padding: 0;
    height: 40px;
}

#headertable tr,
#headertable td {
    border-spacing: 0;
    padding: 0;
}

#headertable td.logocolumn {
    padding: 5px 10px 5px 5px;
    width: 1%; /*FIXES THE CONTENT WIDTH TO THE STUFF INSIDE THIS COLUMN*/
}

#headertable td.titlecolumn {
    min-width: 0;
    width: 99%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#headertable td.btncolumn {
    padding-left: 10px;
    width: 1%;
}

#headertable td.btncolumn.menucolumn {
    padding-left: 15px;
    width: 1%;
}

.imprintfooter .footertable {
    display: inline-table;
    height: 100%;
}

.imprintfooterExtended{
    padding-left: 20px;
}

.imprintfooter {
    height: 35px;
    width: 100%;
    position: absolute;
    text-align: left;
    border-spacing: 0;
}

.imprintfooter .footerlink {
    text-decoration: none;
    font-size: 15px;
    display: table-cell;
    vertical-align: middle;
}

#content.dynpage .text {
    word-wrap: break-word;
    margin: 20px auto;
}

#content.dynpage .buttons .button {
    width: 25%;
    margin: 15px auto;
    display: block;
}

.audiojs .scrubber {
    position: relative;
    float: left;
    height: 16px;
    margin: 30px 5px;
    overflow: hidden;
    background-color: #F6F6F6;
    border: 1px solid #000;
}

#content .buttons .button.moodle {
    background: url("../img/moodle_29.png") no-repeat left center;
    text-decoration: none;
    padding: 10px 0 10px 35px;
    text-align: left;
}

#content .buttons .button.saml {
    background: url("../img/saml.svg") no-repeat left center;
    text-decoration: none;
    padding: 10px 0 10px 35px;
    text-align: left;
}

#content .buttons .button.oidc {
    background: url("../img/openid.png") no-repeat left center;
    text-decoration: none;
    padding: 10px 0 10px 35px;
    text-align: left;
}

#content .listview.extended {
    padding: 0;
}

#content .listview.extended .listAvailableEntry .availableEntryTable,
#content .subscribedEntryTable.extended {
    height: 120px;
}

#content.opponentSelection .buttons {
    padding: 0;
}

#content.opponentSelection .buttons .button.learn.tomatch {
    width: initial;
}

#content.opponentSelection .introduction,
#content.opponentSelection .selection_list {
    margin: 15px 10px;
    display: block;
}

#content.opponentSelection .introduction {
    padding: 0 10px;
}

#content.matchOverview .listview {
    padding: 0;
    margin: 15px auto;
}

#content.matchOverview .listview .matchItem img.invite_close {
    width: 36px;
    height: 36px;
}

#content.matchOverview .listview .matchItem img {
    width: 50px;
    height: 50px;
    display: table-cell;
    vertical-align: top;
    margin: 6px;
}

#content.matchOverview .listview .matchItem .text {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    font-size: 13px;
}

#content.matchOverview .listview .matchItem .text .courseTitle {
    padding-top: 10px;
    padding-right: 10px;
    font-size: 16px;
}

#content.matchOverview .listview .introduction {
    padding: 5px 10px;
}

#content.matchOverview .listview .matchItem .score div {
    margin: 10px;
    width: 40px;
    text-align: center;
    font-weight: bold;
}

#content.matchResult .match {
    margin: 0 auto;
    padding: 15px;
}

#content .profilepicture {
    height: 100px;
    width: 100px;
}

#content.matchResult .opponentsBig .versus {
    font-family: HeaderFont, Helvetica, Arial, sans-serif;
    font-size: 60px;
    top: -20px;
    position: relative;
}

#content.matchResult.rtl table.result th.opponent {
    text-align: left;
    padding-left: 35px;
}

#content.matchResult table.result th.opponent{
    text-align: right;
    padding-left: 80px;
}

#content.matchResult .buttons .button {
    display: inline-block;
    margin: 15px;
}
#content .profile {
    margin: 20px auto;
}
#content .profile.settings {
    margin-top: 150px;
}

#content .profile form{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 15px 15px 0 15px;
}

#content .profile form .input {
    margin: 0 auto 15px auto;
}

#content .profile .buttons {
    display: table;
    border-collapse: separate;
    border-spacing: 15px;
}

#content .profile .buttons .button {
    width: 150px;
    display: table-cell;
}

#content .profile #errorDiv {
    display: none;
    background-color: #FFCC33;
}

#profileOverlay .border .avatarLine {
    position: relative;
    display: inline-block;
    top: 10px;
    padding: 0 10px;
}

#profileOverlay #avatarGrid {
    max-height: 355px;
}

#content.leaderboard .listview .separator.selection_item .rank {
    padding: 5px 10px;
    text-align: left;
}

#content.leaderboard .selection_list .selection_item .text {
    width: 100%;
    padding-left: 0;
    word-break: break-word;
}

.invite .info .opponentInfo {
    padding-bottom: 15px;
}

.invite .info .courseInfo.withbackground span {
    padding: 15px;
}

#content .invite .profilepicture {
    width: 50px;
    height: 50px;
}

.invite .actions,
.invite .info {
    display: block;
    padding: 15px;
    vertical-align: bottom;
}

#menuIndicator.notificationIndicator {
    position: relative;
    float: right;
    top: 7px;
    right: 7px;
}

#finishedIndicator.notificationIndicator {
    display: inline-block;
    top: -2px;
    position: relative;
    left: 5px;
}

#headerIndicator.notificationIndicator {
    position: absolute;
    right: 1px;
    top: 2px;
}

.langfilter .languages,
.search .searchengines,
.search .searchfield {
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    line-height: 28px;
    height: 24px;
}

.search.language {
    padding: 0;
}

.search.language select.searchengines {
    display: block;
    padding: 0;
    height: 42px;
    margin-top: 0;
}

#content .video-embed.unskippable {
    /*pointer-events: none;*/
}

#content .intro_image.unskippable {
    position: relative;
}

#content.matchOverview .listview .matchItem:last-of-type {
    border-bottom: 0 !important;
}

#content .listview.extended.detailed .listAvailableEntry,
#content .listview.extended.detailed .listSubscribedEntry {
    width: initial;
    display: block;
    padding: 15px;
    border-radius: .5rem;
}

#content .listview.extended.detailed .listAvailableEntry,
#content .listview.extended.detailed .listSubscribedEntry:not(.addEntry):not(.voucherEntry) {
    min-height: 150px;
}

#content .listview.extended.detailed .listAvailableEntry .courseImage,
#content .listview.extended.detailed .listSubscribedEntry .courseImage {
    display: block;
    width: 150px;
    height: 150px;
    margin-right: 15px;
}

#content .listview.extended.detailed .listAvailableEntry .availableEntryTable .info,
#content .listview.extended.detailed .listSubscribedEntry .subscribedEntryTable .info {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

#content .listview.extended.detailed .listSubscribedEntry .subscribedEntryTable .icons {
    width: 30px;
    display: table;
    vertical-align: top;
}

#content .listview.extended.detailed .listAvailableEntry .availableEntryTable .info .title,
#content .listview.extended.detailed .listSubscribedEntry .subscribedEntryTable .info .title {
    font-size: 24px;
    font-weight: bold;
}

#content .listview.extended.detailed .listAvailableEntry .availableEntryTable .info .introduction,
#content .listview.extended.detailed .listSubscribedEntry .subscribedEntryTable .info .introduction {
    font-family: LightFont, Helvetica, Arial, sans-serif;
}

/*Fixed Footer*/
.fixedfooter {
    width: 100%;
    position: absolute;
}

.fixedfooter .buttons {
    display: table;
    border-spacing: 15px;
}

.fixedfooter .buttons .button {
    background-color: rgb(201,199,205);
    color: rgb(0,0,0);
    display: table-cell;
    color: white;
    width: 1%; /*to share the whole size with all other buttons*/
}

.fixedfooter .buttons .button:hover {
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
}

.fixedfooter .buttons .button#explanation {
    display: none;
}

.fixedfooter .buttons .button.disabled {
    background-color: grey;
}

.listview .userfilter {
    width: 100%;
    padding: 15px 10px 15px 10px;
    box-sizing: border-box;
}

#content.opponentSelection .listview .userfilter.search.selection_list {
    border-bottom: 0;
}

.listview .userfilter .searchfield {
    box-sizing: border-box;
    padding: 10px;
    height: 45px;
    width: 100%;
}

a.lesson_title {
    color: #000;
    cursor: pointer;
    text-decoration: none;
}

a.lesson_title:hover {
    text-decoration: underline;
}

.repeat_indicator {
    display: table-cell;
    width: 1%;
}

#content img.start_lesson {
    height: 15px;
    width: 15px;
    padding-right: 5px;
}

#content #errorDiv {
    background-color: #FFCC33;
}

.results .entry .resultContent,
.indexlesson .indexcard .question {
    /* For Firefox */
    white-space: pre-wrap;

    /* For Chrome and IE */
    word-wrap: break-word;
}

#voucherOverlay {

}

#voucherOverlay .overlayContent {

}

#voucherOverlay .overlayContent .voucherinput {
    padding: 75px 15px 0 15px;
}

#voucherOverlay .overlayContent .message {
    padding: 15px 0;
}

#voucherOverlay .overlayContent .message span{
    display: block;
    text-align: center;
}

#voucherOverlay .overlayContent .voucherinput input{
    width: 100%;
    display: block;
    font-size: 24px;
    font-weight: normal;
    appearance: none;
    box-shadow: none;
    border-radius: 2px;
    padding: 10px 5px 10px 5px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: monospace;
    text-align: center;
}

#voucherOverlay .overlayContent .voucherinput input.invalid {
    background-image: url(../img/svg/wc_alert.svg);
    background-repeat: no-repeat;
    background-position-x: 10px;
    background-position-y: 11px;
    background-size: 25px;
    -o-background-size: 25px;
    -webkit-background-size: 25px;
}

#voucherOverlay .overlayContent .buttons {
    display: table;
    border-spacing: 15px;
}
#voucherOverlay .overlayContent .buttons .button {
    display: table-cell;
    float: none;
}

#voucherOverlay .overlayContent .voucherCourseList {
    min-height: 250px;
    max-height: 250px;
    overflow: hidden;
    margin: 10px 0;
}

#voucherOverlay .overlayContent .voucherCourseList ul{
    margin: 0;
}

.intro_image .maximize {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0,0,0,0.6);
    border-style: none;
    border-radius: 100%;
    padding: 8px;
    border-color: black;
}

#content .intro_image .maximize svg {
    height: 15px;
    width: 15px;
}

#timer_icon {
    height: 30px;
    width: 30px;
    vertical-align: middle;
    display: table-cell;
}

#content .info.question .intro_image {
    display: inline-block;
}

@keyframes fadeInDropPlaceholder {
    0%   { border-left-width: 0 }
    100% { border-left-width: 4px }
}

#content .fill-in-wrapper {
    display: inline-block;
    margin: 0;
    /* background-color: rgba(166,216,244, 0.3); */
    height: auto;
    vertical-align: top;
    padding-bottom: 5px;
    line-height: 20px;
    word-wrap: break-word;
}

#content .fill-in-wrapper > .fill-in-editable {
    display: block;
    height: 20px;
    border-bottom: 1px solid black;
    overflow-y: hidden;
    overflow-x: hidden;
}

#content .fill-in-wrapper > .fill-in-editable.answer-part {
    min-width: 5em;
    max-width: 428px;
}

#content .fill-in-wrapper.incorrect > .fill-in-editable.answer-part {
    border: 2px solid red;
    padding-left: 4px;
    padding-right: 24px;
    min-width: 0;
    background: url(../img/wrong.png) no-repeat center right;
    background-size: 20px 20px;
    line-height: 18px;
    height: auto;
    display: inline-block;
}

#content .fill-in-wrapper.correct > .fill-in-editable.answer-part {
    border: 2px solid lightgreen;
    padding-left: 4px;
    padding-right: 24px;
    min-width: 0;
    background: url(../img/correct.png) no-repeat center right;
    background-size: 20px 20px;
    line-height: 18px;
    height: auto;
}

#content .fill-in-wrapper.missing > .fill-in-editable.answer-part {
    border: 2px solid red;
    padding-left: 4px;
    padding-right: 24px;
    min-width: 0;
    background: url(../img/wrong.png) no-repeat center right;
    background-size: 20px 20px;
    line-height: 16px;
    height: auto;
}

#content .fill-in-wrapper .fill-in-editable.answer-part s {
    color: red;
}

#content .fill-in-wrapper > input.fill-in-editable.answer-part {
    border: 0;
    border-bottom: 1px solid black;
    width: 5em;
    max-width: 460px;
    word-wrap: break-word;
}

#content .fill-in-wrapper > input.fill-in-editable.answer-part::-ms-clear {
    display: none;
}

#content .fill-in-wrapper > .fill-in-editable:focus {
}

@supports (-ms-ime-align:auto) {
    .imprintfooter #footercontent{
        text-align: right;
    }
    .imprintfooter .footertable {
        padding-right: 10px;
    }
}
@-moz-document url-prefix() {
    .imprintfooter #footercontent{
        text-align: right;
    }
    .imprintfooter .footertable {
        padding-right: 10px;
    }
}

/*Desktop*/
@media (min-width: 1024px){
    #content.opponentSelection.inviteSelection .buttons {
        padding: 0 10px 10px 10px;
        width: initial;
    }

    #headercontent {
        max-width: 980px;
        position: relative;
        margin: 0 auto;
    }
    #footercontent {
        max-width: 980px;
        position: relative;
        margin: 0 auto;
    }

    #content {
        width: 100%;
        max-width: 980px;
        margin: 30px auto 20px auto;
        position: relative;
    }

    .scrollwrapper {
        overflow-x: auto;
    }

    .overlayWindow .button.cancel,
    .overlayWindow .button.next {
        margin: 20px;
    }

    #viewPort #content .button.next {
        width: 30%;
        margin-right: 20px;
        margin-left: auto;
    }

    #content .intro_image img {
        max-height: 302px;
        width: inherit;
    }

    .listheader.extended {
        margin-left: 10px;
    }

    .progressHeader,
    .qna {
        margin-top: 25px;
    }

    .context .imagewrapper,
    .question {
        font-size: 24px;
        line-height: 30px;
        padding-right: 15px;
    }

    .question.info {
        width: 100%;
    }

    .answers {
        font-size: 16px;
        line-height: 22px;
        padding-left: 15px;
    }

    input.fill-in-editable.answer-part {
        font-size: 16px;
    }

    .answers .answer {
        max-width: 100%;
        padding: 10px;
    }

    .context p,
    .question p {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .buttons {
        width: 100%;
    }

    .context .context_text {
        padding-left: 15px;
        vertical-align: top;
    }

    .context .context_header {
        padding-bottom: 10px;
    }

    /* PROGRESS BAR*/
    #progressbar #progressbg,
    #progressbar {
        width: 100%;
    }

    #progressbar #progressbg,
    #progressbar,
    #progress {
        height: 10px;
    }

    /*LOGIN PAGE*/
    .welcomemessage {
        font-size: 48px;
        margin-top: 30px;
    }

    .welcomemessage.video iframe {
        width: 60%;
        max-width: 600px;
        height: 320px;
    }

    .login_logo,
    #content .buttons .button,
    #content form .input {
        width: 480px;
    }

    #content #errorDiv {
        font-size: 13px;
        padding: 12px;
    }

    .regularFurtherEntries{
        padding: 3px;
        position: absolute;
        margin-left: 35px;
        margin-top: 0.5px;
    }

    @-moz-document url-prefix() {
        .regularFurtherEntries {
            padding: 3px;
            position: absolute;
            margin-left: 35px;
            margin-top: 1px;
        }
    }

    /********** COURSE INTRO ****************/
    #content .course_title {
        font-size: 36px;
        padding-bottom: 20px;
    }

    #content .introduction_side,
    #content .image_side {
        width:450px;
    }

    #content .introduction_side {
        padding: 20px 20px 20px 15px;
    }

    #content .image_side {
        padding: 20px 20px 20px 15px;
    }

    #content .course .button.learn,
    #content .course .button.subscribe {
        width: 440px;
        margin: 0 auto;
    }

    #content .course .buttons.match .button {
        margin: 0 15px;
        display: inline-block;
        float: left;
    }

    #content .course .buttons.match.only .button {
        margin: 10px auto;
        display: block;
        float: none;
    }

    #content .course .buttons.match.only {
        height: inherit;
    }

    #content .course .buttons.match {
        height: 42px;
    }

    #content .course_finished {
        margin-bottom: 50px;
    }

    .resultheader {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    #content .buttons.test {
        width: 500px;
        margin: 15px auto;
    }

    #content .buttons.test .button {
        width: 207px;
    }

    #content .graph {
        width: 475px;
    }

    #viewPort #content .buttons .button.next.testnext {
        margin-left: auto;
        margin-right: 20px;
    }

    #viewPort #content .buttons .button.next.testprev {
        margin: 15px;
        display: inline-block;
    }

    /* ABORT OVERLAY *//* FEEDBACK OVERLAY */
    .overlayWindow {
        width:475px;
        top: 20%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .overlayWindow .header{
        font-size: 28px;
        height: 28px;
    }

    .overlayWindow .buttons .button {
        width: 195px;
    }

    .overlayWindow .category {
        width: 100%;
    }

    .overlayWindow .buttons .button {
        width: 195px;
    }

    .overlayWindow .buttons .button.next {
        float: right;
        display: inline-block;
        margin: 15px 15px 15px 0;
    }

    .overlayWindow .buttons .button.cancel {
        float: left;
        display: inline-block;
        margin: 15px 0 15px 15px;
    }

    #feedbackSent.overlayWindow {
        width: 475px;
        top: 20%;
        left: 36%;
    }

    /** INDEX STYLE*/
    .rightField,
    .leftField {
        width: 485px;
        display: inline-block;
        float: right;
        margin-right: 5px;
        min-height: 50px;
    }

    .progresscontent .rightField,
    .progresscontent .leftField {
        margin: 0;
        padding: 0 10px;
        width: 465px;
    }

    .indexlesson {
        padding: 10px 20px 5px 20px;
        width: 440px;
    }

    .indexlesson .indexcard .question {
        width: 425px;
    }

    .search {
        padding: 0 20px 10px 20px;
        width: 960px;
    }

    .search .searchheader {
        width: 100px;
    }

    .langfilter .languages,
    .search .searchengines,
    .search .searchfield {
        font-size: 18px;
        padding-left: 5px;
    }

    .search .searchfield {
        width: 840px;
    }

    .search .searchfield.small {
        width: 496px;
    }

    .search .searchbutton {
        margin-right: 15px;
        left: -6px;
    }

    .langfilter{
        display: block;
    }

    .langfilter .languages{
        height: 28px;
        float: right;
        top: -60px;
        position: relative;
    }
    .search .searchengines {
        width: 300px;
        height: 28px;
    }

    /* PROGRESS GRAPH */
    #content .progressgraph {
        padding: 15px 15px 0 6px;
        margin: 50px auto 0 auto;
        width: 475px;
    }

    /* PROGRESS BAR*/
    .progresscontent {
        margin-top: 25px;
    }

    .progresscontent #progressbar #progressbg,
    .progresscontent #progressbar {
        width: 450px;
        margin: 50px 0 20px 0;
    }

    .progresscontent .graphtext {
        margin: 0 0 20px 20px;
    }

    .intervention_top {
        margin-top: 50px;
    }

    #content .buttons.intervention .learn{
        width: 200px;
    }

    .langar #content .answers .thumb,
    .rtl #content .answers .thumb{
        position: absolute;
        z-index: 100;
        display: block;
    }

    .footer .featurebtn,
    .footer {
        display: none;
        width: 0;
    }


    /* NEW HEADER */
    #headertable {
        height: 65px;
    }

    #headertable td.logocolumn {
        padding: 10px 15px 10px 10px;
    }

    .featuretxt,
    .menutxt {
        font-size: 13px;
        height: 40px;
        line-height: 24px;
        white-space: nowrap;
    }

    .featurebtn {
        padding: 10px 0;
        text-decoration: none;
        display: table;
    }

    .featurebtn svg,
    .featurebtn img {
        height: 30px;
        display: table-cell;
        vertical-align: middle;
        padding-right: 10px;
        top: 5px;
        position: relative;
    }

    .featurebtn span {
        display: table-cell;
        vertical-align: middle;
    }

    /*TEST TIMER*/
    #test_timer {
        font-size: 30px;
    }

    .header {
        height: 65px;
    }

    .header .logo {
        display: block;
    }

    .header #pageTitle {
        line-height: 45px;
        height: 45px;
    }

    .headerfeatures {
        height: 55px;
    }

    .menubtn {
        height: 65px;
        border-spacing: 0;
        padding: 0;
    }

    .menuimg {
        margin-top: 10px;
        height: 45px;
        display: table-cell;
    }

    .menutxt {
        display: table-cell;
        vertical-align: middle;
        padding-right: 15px;
    }

    .imprintfooter .footertable:last-of-type {
        padding-left: 20px;
    }

    .imprintfooter .footerlink {
        font-size: 13px;
    }

    #content.dynpage {
        margin-bottom: 30px;
    }

    #content.dynpage .text {
        width: 480px;
    }

    #content.dynpage .buttons .button {
        width: 25%;
    }


    #content.langar .langfilter .languages,
    #content.rtl .langfilter .languages {
        float: left;
    }

    #viewPort.langar .answers,
    #viewPort.rtl .answers {
        border-left: 0;
        padding-left: 0;
        padding-right: 15px;
    }

    #viewPort.langar .context_text,
    #viewPort.rtl .context_text {
        border-left: 0;
        padding-left: 0;
        padding-right: 15px;
        min-width: 47%;
    }

    #viewPort.langar #content .button.next,
    #viewPort.rtl #content .button.next{
        margin-right: auto;
        margin-left: 20px;
    }

    .audiojs .scrubber {
        width: 55%;
    }

    #content .buttons .button.moodle {
        width: 445px;
    }

    #content .buttons .button.saml {
        width: 445px;
    }

    #content .buttons .button.oidc {
        width: 445px;
    }

    /*Available & Subscribed Courses Extended View*/
    #content .listview.extended.availablelist {
        padding: 30px 0 0 0;
    }
    #content .listview.extended .listAvailableEntry,
    #content .listview.extended .listSubscribedEntry {
        width: 293px;
        display: inline-block;
        border: 0;
        margin: 15px;
        padding: 0;
    }

    #content .voucherEntry .subscribedEntryTable.extended,
    #content .addEntry .subscribedEntryTable.extended {
        height: 35px;
    }

    #content .listview.extended .voucherEntry,
    #content .listview.extended .addEntry{
        padding: 15px;
        height: 35px;
        width: 262px;
    }

    .listview.extended {
        background: none !important;
    }

    #content .listview.extended .listAvailableEntry .availableEntryTable{
        width: 100%;
        display: table;
    }

    #content .listview.extended .listAvailableEntry .availableEntryTable .title {
        display: table-cell;
        vertical-align: bottom;white-space: normal;
    }

    /* opponentSelection */
    #content.opponentSelection .course {
        width: 425px;
        margin: 0 auto;
        height: 100%;
    }

    #content.opponentSelection .listview {
        padding: 0;
        width: 425px;
        margin: 0 auto;
    }

    #content.opponentSelection .selection_list .noopponent .text,
    #content.opponentSelection .selection_list .selection_item .imagecol,
    #content.opponentSelection .selection_list .selection_item .text {
        display: table-cell;
        vertical-align: middle;
        padding: 10px 5px 10px 10px;
    }

    /*boxshadow*/
    .indexlesson,
    .overlayWindow,
    .qna,
    .header,
    #content.matchOverview .listview,
    #content form,
    #content #errorDiv,
    #content .listview,
    #content .listview.extended .listAvailableEntry,
    #content .listview.extended .listSubscribedEntry,
    #content .course {
        -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
        box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    }

    #content .invite form,
    #content .listview.extended {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    #content .invite .buttons .button.moodle {
        width: initial;
    }

    #content .invite .buttons .button {
        width: 460px;
    }

    /* result screen */
    #content.matchResult .match {
        width: 425px;
    }

    #content.matchResult table.result th.opponent.unknown{
        padding-right: 35px;
    }

    #content.matchResult .buttons .button {
        width: 160px;
        white-space: nowrap;
    }

    /*KM Overview*/
    #content.matchOverview .listview {
        width: 700px;
    }

    #content.matchOverview .listview .matchItem img.invite_close {
        padding-bottom: 7px;
    }

    #content.matchOverview .buttons.points {
        width: 700px;
        margin: 0 auto;
    }

    #content.matchOverview .buttons.points div .button {
        width: 200px;
    }

    #content.matchOverview .buttons .button {
        width: 300px;
    }

    #content .matchBar table td.middle #match_timer {
        position: relative;
        top: 3px;
    }

    /*Notification Indicator*/

    #headerIndicator.notificationIndicator {
        position: relative;
        top: -19px;
        right: 7px;
    }

    #menuIndicator.notificationIndicator {
        display: inline-block;
    }

    /*INVITE PAGE*/
    .invite .info .courseInfo.withbackground {
        height: 340px;
    }

    .invite {
        display: table;
    }

    .invite .actions,
    .invite .info {
        display: table-cell;
        width: 100%;
        vertical-align: top;
    }

    .invite .actions .small {
        padding: 15px 15px 0 5px;
    }

    /*Profile Page*/
    #content .profile {
        width: 455px;
    }

    #content .profile form input,
    #content .profile form select {
        width: 425px;
    }

    #content .listview.extended .listAvailableEntry:hover,
    #content .listview.extended .listSubscribedEntry:hover {
        -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
        box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    }

    /* leaderboard */
    #content.leaderboard .listview {
        width: 425px;
        padding: 0;
        margin: 0 auto;
    }

    #content.leaderboard .selection_list .selection_item .imagecol,
    #content.leaderboard .selection_list .selection_item .text {
        display: table-cell;
        vertical-align: middle;
        padding: 5px 5px 5px 0;
    }

    #content.opponentSelection .buttons .button,
    #content.leaderboard .buttons .button {
        width: 200px;
    }

    .overlayWindow .border {
        margin: -15px 10px 10px 10px;
    }
}

/*Tablet Landscape*/
@media (min-width: 816px) and (max-width: 1023px) {
    #content.opponentSelection.inviteSelection .buttons {
        padding: 0 10px 10px 10px;
        width: initial;
    }

    #headercontent {
        width: 100%;
    }

    .header .logo {
        display: block;
    }

    #content {
        width: 100%;
        max-width: 780px;
        margin: 30px auto 50px auto;
        position: relative;
    }

    .menuimg {
        height: 30px;
        margin: 5px 0;
        padding: 0 5px 0 5px;
        display: table-cell;
    }

    .overlayWindow .button.cancel,
    .overlayWindow .button.next {
        margin: 20px;
    }

    #viewPort #content .button.next {
        width: 30%;
        margin-right: 20px;
        margin-left: auto;
    }

    #content .intro_image .video-embed {
        height: 255px;
        width: 365px;
    }

    .listheader.extended {
        margin-left: 10px;
    }

    .progressHeader,
    .qna {
        margin-top: 25px;
    }

    .context .imagewrapper,
    .question {
        font-size: 24px;
        line-height: 30px;
        padding-right: 15px;
    }

    .question.info {
        width: 100%;
    }

    .answers {
        font-size: 16px;
        line-height: 22px;
        padding-left: 15px;
        padding-right: 15px;
    }

    input.fill-in-editable.answer-part {
        font-size: 16px;
    }

    .answers .answer {
        max-width: 100%;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-top: 10px;
    }

    .context p,
    .question p {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .buttons {
        width: 100%;
    }

    .context .context_text {
        padding-left: 15px;
        vertical-align: top;
    }

    .context .context_header {
        padding-bottom: 10px;
    }

    /* PROGRESS BAR*/
    #progressbar #progressbg,
    #progressbar {
        width: 100%;
    }

    #progressbar #progressbg,
    #progressbar,
    #progress {
        height: 15px;
    }

    /*LOGIN PAGE*/
    .welcomemessage {
        font-size: 48px;
        margin-top: 30px;
    }

    .welcomemessage.video .video-embed {
        width: 60%;
        max-width: 600px;
        height: 320px;
    }

    .login_logo,
    #content .buttons .button,
    #content form .input {
        width: 480px;
    }

    #content #errorDiv {
        font-size: 13px;
        padding: 12px;
    }

    .regularFurtherEntries{
        padding: 3px;
        position: absolute;
        margin-left: 35px;
        margin-top: 0.5px;
    }

    @-moz-document url-prefix() {
        .regularFurtherEntries {
            padding: 3px;
            position: absolute;
            margin-left: 35px;
            margin-top: 2px;
        }
    }

    /********** COURSE INTRO ****************/
    #content .course_title {
        font-size: 36px;
        padding: 0 20px 20px 20px;
    }

    #content .introduction_side,
    #content .image_side {
        width: 350px;
    }

    #content .introduction_side.only {
        width: 760px;
    }

    #content .introduction_side {
        padding: 20px 20px 20px 15px;
    }

    #content .image_side {
        padding: 20px 20px 20px 15px;
    }

    #content .course .button.learn,
    #content .course .button.subscribe {
        width: 440px;
        margin: 0 auto;
    }

    #content .course .buttons.match .button {
        width: 340px;
        margin: 0 15px;
        display: inline-block;
        float: left;
    }

    #content .course .buttons.match {
        height: 42px;
    }

    #content .course_finished {
        margin-bottom: 50px;
    }

    #content .buttons.test {
        width: 500px;
        margin: 15px auto;
    }

    #content .buttons.test .button {
        width: 207px;
    }

    #content .graph {
        width: 475px;
    }

    #viewPort #content .buttons .button.next.testnext {
        margin-left: auto;
        margin-right: 20px;
    }

    #viewPort #content .buttons .button.next.testprev {
        margin: 15px;
        display: inline-block;
    }

    .featuretxt {
        font-size: 13px;
        white-space: nowrap;
    }

    .menutxt {
        display: table-cell;
        vertical-align: middle;
        padding-right: 15px;
        font-size: 13px;
        height: 40px;
        line-height: 24px;
        white-space: nowrap;
    }

    .featurebtn {
        text-decoration: none;
        display: table;
    }

    .featurebtn svg,
    .featurebtn img {
        height: 30px;
        display: table-cell;
        padding-right: 5px;
        vertical-align: middle;
    }

    .featurebtn span {
        display: table-cell;
        vertical-align: middle;
    }

    /* ABORT OVERLAY *//* FEEDBACK OVERLAY */
    .overlayWindow {
        width: 40%;
        top: 20%;
        left: 30%;
    }

    .overlayWindow .header{
        font-size: 28px;
        height: 28px;
    }

    #feedbackOverlay {
        width:50%;
        top: 20%;
        left: 25%;
    }

    #feedbackOverlay .header{
        display: block;
        font-size: 28px;
        padding: 10px 15px 15px 15px;
        height: 28px;
    }

    #feedbackOverlay .category img {
        padding: 5px 10px 5px 15px;
    }

    #feedbackOverlay .buttons .button {
        width: 35%;
    }

    #feedbackOverlay .buttons .button.next {
        float: right;
        display: inline-block;
        margin: 15px 15px 15px 0;
    }

    #feedbackOverlay .buttons .button.cancel {
        float: left;
        display: inline-block;
        margin: 15px 0 15px 15px;
    }

    #feedbackSent {
        width:50%;
        top: 20%;
        left: 25%;
    }

    /** INDEX STYLE*/
    .rightField,
    .leftField {
        width: 380px;
        display: inline-block;
        float: right;
        margin-right: 10px;
        min-height: 50px;
    }

    .progresscontent .rightField,
    .progresscontent .leftField {
        margin: 0;
        padding: 0 10px;
        width: 365px;
    }

    .indexlesson {
        padding: 10px 20px 5px 20px;
    }

    .indexlesson .indexcard .question {
        width: 100%;
        word-wrap: break-word;
    }

    .search {
        padding: 0 0 10px 20px;
        width: 760px;
    }

    .search .searchheader {
        width: 100px;
    }

    .langfilter .languages,
    .search .searchengines,
    .search .searchfield {
        font-size: 18px;
        padding-left: 5px;
    }

    .search .searchfield {
        width: 640px;
    }

    .search .searchfield.small {
        width: 380px;
    }

    .search .searchbutton {
        margin-right: 15px;
        left: -6px;
    }

    .langfilter{
        display: block;
    }

    .langfilter .languages{
        height: 28px;
        float: right;
        top: -55px;
        position: relative;
    }

    .search .searchengines {
        width: 215px;
        height: 28px;
    }

    /* PROGRESS GRAPH */
    #content .progressgraph {
        padding: 15px 15px 0 6px;
        margin: 50px auto 0 auto;
        width: 365px;
    }

    /* PROGRESS BAR*/
    .progresscontent {
        margin-top: 25px;
    }

    .progresscontent #progressbar #progressbg,
    .progresscontent #progressbar {
        width: 355px;
        margin: 50px 0 20px 0;
    }

    .progresscontent .graphtext {
        margin: 0 0 20px 20px;
    }

    .intervention_top {
        margin-top: 50px;
    }

    #content .buttons.intervention .learn{
        width: 200px;
    }

    .langar #content .answers .thumb,
    .rtl #content .answers .thumb{
        position: absolute;
        z-index: 100;
        display: block;
    }

    .footer .featurebtn,
    .footer {
        display: none;
        width: 0;
    }
    /* NEW HEADER */
    .imprintfooter .footertable {
        padding-left: 10px;
    }

    #content.dynpage {
        margin-bottom: 30px;
    }

    #content.dynpage .text {
        width: 480px;
    }

    #content.dynpage .buttons .button {
        width: 25%;
    }

    #content.langar .langfilter .languages,
    #content.rtl .langfilter .languages {
        float: left;
    }

    #viewPort.langar .answers,
    #viewPort.rtl .answers {
        border-left: 0;
        padding-left: 0;
        padding-right: 15px;
    }

    #viewPort.langar .context_text,
    #viewPort.rtl .context_text {
        border-left: 0;
        padding-left: 0;
        padding-right: 15px;
        min-width: 47%;
    }

    #viewPort.langar #content .button.next,
    #viewPort.rtl #content .button.next{
        margin-right: auto;
        margin-left: 20px;
    }

    /*AUDIO JS STYLING*/
    .audiojs .scrubber {
        width: 45%;
    }

    #content .buttons .button.moodle {
        width: 445px;
    }

    /*Available & Subscribed Courses Extended View*/
    #content .listview.extended.availablelist {
        padding: 30px 0 0 0;
    }
    #content .listview.extended .listAvailableEntry,
    #content .listview.extended .listSubscribedEntry {
        width: 227px;
        display: inline-block;
        border: 0;
        margin: 15px;
        padding: 0;
    }

    .fancyUnsubscribeContainer{
        position: absolute;
        width: 207px;
    }

    #content .voucherEntry .subscribedEntryTable.extended,
    #content .addEntry .subscribedEntryTable.extended {
        height: 35px;
    }

    #content .listview.extended .voucherEntry,
    #content .listview.extended .addEntry{
        padding: 15px;
        height: 35px;
        width: 198px;
    }

    .listview.extended {
        background: none !important;
    }

    #content .listview.extended .listAvailableEntry .availableEntryTable{
        width: 100%;
        display: table;
    }

    #content .listview.extended .listAvailableEntry .availableEntryTable .title {
        display: table-cell;
        vertical-align: bottom;
        white-space: normal;
    }

    #content .withbackground span {
        text-shadow: 0 0 1px #000;
    }

    /* opponentSelection */
    #content.opponentSelection .course {
        width: 425px;
        margin: 0 auto;
    }

    #content.opponentSelection .intro_image {
        overflow: hidden;
        display: block;
        padding: 0 15px;
    }
    #content.opponentSelection .selection_list .selection_item img.icon,
    #content.opponentSelection .selection_list .selection_item svg.icon,
    #content.opponentSelection .selection_list .selection_item .text {
        display: table-cell;
        vertical-align: middle;
        padding: 10px 5px 10px 10px;
    }

    #content.opponentSelection .selection_list .selection_item:first-child .text {
        border: 0;
    }

    /*boxshadow*/
    .indexlesson,
    #feedbackOverlay,
    .qna,
    .header,
    #content.matchOverview .listview,
    #content form,
    #content #errorDiv,
    #content .listview,
    #content .listview.extended .listAvailableEntry,
    #content .listview.extended .listSubscribedEntry,
    #content .course {
        -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
        box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    }

    /*Notification Indicator*/
    #headerIndicator.notificationIndicator {
        display: table-cell;
    }

    #menuIndicator.notificationIndicator {
        display: inline-block;
    }

    /*KM Overview*/

    #content.matchOverview .listview {
        width: 700px;
    }

    #content.matchOverview .listview .matchItem img.invite_close {
        padding-bottom: 7px;
    }

    #content.matchOverview .buttons.points {
        width: 700px;
        margin: 0 auto;
    }

    #content.matchOverview .buttons.points div .button {
        width: 200px;
    }

    #content.matchOverview .buttons .button {
        width: 300px;
    }

    #content .matchBar table td.middle #match_timer {
        position: relative;
        top: 3px;
    }

    /* opponentSelection */
    #content.opponentSelection .course{
        height: 100%;
    }

    #content.opponentSelection .course {
        width: 425px;
        margin: 0 auto;
    }

    #content.opponentSelection .listview {
        padding: 0;
        width: 425px;
        margin: 0 auto;
    }

    #content.opponentSelection .selection_list .noopponent .text,
    #content.opponentSelection .selection_list .selection_item .imagecol,
    #content.opponentSelection .selection_list .selection_item .text {
        display: table-cell;
        vertical-align: middle;
        padding: 10px 5px 10px 10px;
    }

    #content .invite form,
    #content .listview.extended {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    /* leaderboard */
    #content.leaderboard .listview {
        width: 425px;
        padding: 0;
        margin: 0 auto;
    }

    #content.leaderboard .selection_list .selection_item .imagecol,
    #content.leaderboard .selection_list .selection_item .text {
        display: table-cell;
        vertical-align: middle;
        padding: 5px 5px 5px 0;
    }

    #content.opponentSelection .buttons .button,
    #content.leaderboard .buttons .button {
        width: 200px;
    }

    /*Profile Page*/
    #content .profile {
        width: 455px;
    }

    #content .profile form input,
    #content .profile form select {
        width: 425px;
    }

    #content .listview.extended .listAvailableEntry:hover,
    #content .listview.extended .listSubscribedEntry:hover {
        -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
        box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    }
    /* result screen */
    #content.matchResult .match {
        width: 425px;
    }

    #content.matchResult table.result th.opponent.unknown{
        padding-right: 35px;
    }

    #content.matchResult .buttons .button {
        width: 160px;
        white-space: nowrap;
    }

    /*INVITE PAGE*/
    .invite .info .courseInfo.withbackground {
        height: 200px;
    }

    .invite {
        display: table;
        margin: 0 auto;
    }

    .invite .actions,
    .invite .info {
        display: table-cell;
        vertical-align: top;
        width: 50%;
    }

    .invite .actions .small {
        padding: 15px 15px 0 5px;
    }

    #content .invite .buttons .button,
    #content .invite form .input {
        width: initial;
    }

    .overlayWindow .border {
        margin: -15px 10px 10px 10px;
    }
}

/*Tablet Portrait*/
@media (min-width: 401px) and (max-width: 815px) {
    #content.opponentSelection.inviteSelection .buttons {
        padding: 0 10px 10px 10px;
        width: initial;
    }

    #content .fill-in-wrapper > input.fill-in-editable.answer-part {
        max-width: 640px;
    }

    #content .fill-in-wrapper > .fill-in-editable.answer-part {
        max-width: 618px;
    }

    .header {
        padding: 0;
    }

    #headercontent {
        width: 100%;
    }

    .header .logo {
        float: left;
        margin: 0 5px;
    }

    #content .context .intro_image{
        padding: 0 20px;
    }
    #content .intro_image {
        padding: 20px 20px;
    }

    #content .qna .intro_image {
        padding: 20px 0;
    }

    #content {
        width: 100%;
        max-width: 672px;
        margin: 30px auto 50px auto;
        position: relative;
    }

    .menuimg {
        height: 30px;
        margin: 5px;
        padding: 0 0 0 5px;
        display: table-cell;
    }

    .overlayWindow .button.cancel,
    .overlayWindow .button.next {
        margin: 20px;
    }

    #viewPort #content .button.next {
        width: 30%;
        margin-right: 20px;
        margin-left: auto;
    }

    #content .intro_image img {
        max-height: 302px;
        width: inherit;
    }

    .listheader.extended {
        margin: 0 auto 25px auto;
        padding-left: 10px;
        max-width: 490px;
    }

    .progressHeader,
    .qna {
        margin-top: 25px;
    }

    .context .imagewrapper,
    .qna .question {
        font-size: 24px;
        line-height: 30px;
        width: 100%;
        display: block;
    }

    .qna {
        display: block;
    }

    .question.info {
        width: 100%;
    }

    .qna .answers {
        font-size: 16px;
        line-height: 22px;
        width: 100%;
        display: inline-block;
    }

    .answers .answer {
        max-width: 100%;
        padding: 10px;
    }

    .context p,
    .question p {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .buttons {
        width: 100%;
    }

    .context .context_text {
        display: inline-block;
        width: 100%;
    }

    .context .answer_context,
    .context .question_context {
        display: block;
    }

    .context .imagewrapper {
        padding-bottom: 15px;
    }

    .context .context_header {
        padding-bottom: 10px;
    }

    /* PROGRESS BAR*/
    #progressbar #progressbg,
    #progressbar,
    #progress {
        height: 15px;
    }

    /*LOGIN PAGE*/
    .welcomemessage {
        font-size: 48px;
        width: 80%;
        margin: 30px auto 0 auto;
    }

    .welcomemessage.video {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .welcomemessage.video .video-embed {
        width: 100%;
        height: 300px;
    }

    #content .buttons .button,
    #content form .input {
        width: 80%;
    }

    #content #errorDiv {
        font-size: 13px;
        padding: 12px;
    }

    .regularFurtherEntries{
        padding: 3px;
        position: absolute;
        margin-left: 35px;
        margin-top: 0.5px;
    }

    @-moz-document url-prefix() {
        .regularFurtherEntries {
            padding: 3px;
            position: absolute;
            margin-left: 35px;
            margin-top: 2px;
        }
    }

    /********** COURSE INTRO ****************/
    #content .course_title {
        font-size: 36px;
        padding-bottom: 20px;
    }

    #content .introduction_side {
        padding: 20px 20px 20px 15px;
    }

    #content .image_side {
        width: 100%;
    }

    #content .course .button.learn,
    #content .course .button.subscribe {
        width: 440px;
        margin: 10px auto 0 auto;
    }

    #content .course_finished {
        margin-bottom: 50px;
    }

    #content .buttons.test {
        width: 500px;
        margin: 15px auto;
    }

    #content .buttons.test .button {
        width: 207px;
    }

    #viewPort #content .buttons .button.next.testnext {
        margin-left: auto;
        margin-right: 20px;
    }

    #viewPort #content .buttons .button.next.testprev {
        margin: 15px;
        display: inline-block;
    }

    .border {
        display: inline-block;
        height: 30px;
        top: -5px;
        position: relative;
    }

    .featuretxt {
        display: none;
    }

    .menutxt {
        display: table-cell;
        vertical-align: middle;
        padding-right: 15px;
        font-size: 13px;
        height: 40px;
        line-height: 24px;
        white-space: nowrap;
    }

    .featurebtn {
        text-decoration: none;
        display: table;
    }

    .featurebtn svg,
    .featurebtn img {
        height: 30px;
        display: table-cell;
        padding-right: 5px;
        vertical-align: middle;
    }

    .featurebtn.countdown span {
        display: table-cell;
        vertical-align: middle;
    }


    /* ABORT OVERLAY *//* FEEDBACK OVERLAY */
    .overlayWindow {
        width: 80%;
        top: 20%;
        left: 10%;
    }

    .overlayWindow .header{
        font-size: 28px;
        height: 28px;
    }

    #feedbackOverlay {
        width: 90%;
        left: 5%;
    }

    .overlayWindow .category {
        height: 40px;
        width: 100%;
    }

    .overlayWindow .buttons .button {
        width: 35%;
    }

    .overlayWindow .buttons .button.next {
        float: right;
        display: inline-block;
        margin: 15px 15px 15px 0;
    }

    .overlayWindow .buttons .button.cancel {
        float: left;
        display: inline-block;
        margin: 15px 0 15px 15px;
    }

    #feedbackOverlay textarea.comment {
        height: 60px;
    }

    #feedbackSent {
        width: 90%;
        left: 5%;
    }

    /** INDEX STYLE*/
    .rightField,
    .leftField {
        width: 100%;
    }

    .progresscontent .rightField{
        margin: 25px 0;
        width: 100%;
        background-color: #FFF;
    }

    .progresscontent .leftField {
        margin: 0;
        width: 100%;
    }

    .indexlesson {
        padding: 10px 20px 5px 20px;
    }

    .indexlesson .indexcard .question {
        word-wrap: break-word;
    }

    .search {
        padding: 0 20px 10px 20px;
    }

    .search .searchheader {
        width: 100px;
    }

    .langfilter .languages,
    .search .searchengines,
    .search .searchfield {
        font-size: 18px;
    }

    .search .searchfield {
        width: 70%;
    }

    .search .searchfield.small {
        margin-top: 10px;
    }

    .search .searchbutton {
        margin-top: 10px;
    }

    .langfilter{
        display: block;
    }

    .langfilter.long {
        width: 100%;
    }

    .langfilter.long .languages {
        width: 100%;
        float: initial;
        top: 0;
    }

    .langfilter .languages{
        height: 28px;
        float: right;
        top: -55px;
        position: relative;
    }

    .langfilter .languages {
        height: 28px;
    }

    .search .searchengines {
        width: 100%;
        height: 28px;
        margin-top: 10px;
    }

    /* PROGRESS GRAPH */
    #content .progressgraph {
        padding: 15px 15px 15px 6px;
        margin: 50px auto 0 auto;
        width: 100%;
    }

    /* PROGRESS BAR*/
    .progresscontent {
        margin: 0;
    }

    .progresscontent #progressbar #progressbg,
    .progresscontent #progressbar {
        margin: 25px 10px 20px 10px;
    }

    .progresscontent .progressText {
        margin: 20px 10px;
    }

    .progresscontent .graphtext {
        padding: 10px;
    }

    .intervention_top {
        margin-top: 50px;
    }

    #content .buttons.intervention .learn{
        width: 200px;
    }

    .footer .featurebtn,
    .footer {
        display: none;
        width: 0;
    }

    .answers,
    .context .context_text,
    .rightField,
    .leftField,
    #content.login form .buttons {
        border: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    /* NEW HEADER */
    #headertable td.btncolumn.menucolumn {
        padding-left: 10px;
    }

    .imprintfooter .footertable {
        padding-left: 10px;
    }

    #content.dynpage {
        margin-bottom: 30px;
    }

    #content.dynpage .text {
        max-width: 480px;
        width: 80%;
    }

    #content.dynpage .buttons .button {
        width: 40%;
    }

    #content.dynpage .text img {
        width: inherit;
    }

    /*AUDIO JS STYLING*/
    .audiojs .scrubber {
        width: 50%;
    }

    .login_logo {
        width: 100%;
        margin: 0 auto;
    }

    #content .buttons .button.moodle {
        width: 75%;
    }

    /*Available & Subscribed Courses Extended View*/
    #content .listview.extended {
        margin: 0 auto;
        max-width: 500px;
    }

    #content .listview.extended.availablelist {
        padding: 30px 0 0 0;
    }
    #content .listview.extended .listAvailableEntry,
    #content .listview.extended .listSubscribedEntry {
        width: 215px;
        display: inline-block;
        border: 0;
        margin: 15px;
        padding: 0;
    }

    .fancyUnsubscribeContainer{
        position: absolute;
        width: 195px;
    }

    .dot{
        height: 4px;
        width: 4px;
        background-color: #ffffff;
        border-radius: 50%;
        display: block;
        margin-bottom: 2px;
        border-style: solid;
        border-width: 1px;
        border-color: #495057;
        position: relative;
        z-index: 2;
    }

    #content .voucherEntry .subscribedEntryTable.extended,
    #content .addEntry .subscribedEntryTable.extended {
        height: 35px;
    }

    #content .listview.extended .voucherEntry,
    #content .listview.extended .addEntry{
        display: block;
        padding: 15px;
        height: 35px;
        width: initial;
    }

    .listview.extended {
        background: none !important;
    }

    #content .listview.extended .listAvailableEntry .availableEntryTable{
        width: 100%;
        display: table;
    }

    #content .listview.extended .listAvailableEntry .availableEntryTable .title {
        display: table-cell;
        vertical-align: bottom;
        white-space: normal;
    }

    #content .withbackground span {
        text-shadow: 0 0 1px #000;
    }

    /* opponentSelection */
    #content.opponentSelection .course {
        height: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    #content.opponentSelection .buttons .button.learn.tomatch {
        max-width: initial;
    }

    #content.opponentSelection img {
        width: 100%;
    }

    #content.opponentSelection .listview {
        padding: 0;
        max-width: 400px;
        margin: 0 auto;
    }

    #content.opponentSelection .selection_list .noopponent .text,
    #content.opponentSelection .selection_list .selection_item .imagecol,
    #content.opponentSelection .selection_list .selection_item .text {
        display: table-cell;
        vertical-align: middle;
        padding: 10px 5px 10px 10px;
    }

    #content.opponentSelection .buttons .button {
        max-width: 200px;
    }

    /*boxshadow*/
    .indexlesson,
    #feedbackOverlay,
    .qna,
    .header,
    #content.matchOverview .listview,
    #content form,
    #content #errorDiv,
    #content .listview,
    #content .listview.extended .listAvailableEntry,
    #content .listview.extended .listSubscribedEntry,
    #content .course {
        -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
        box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
    }

    #content .invite form,
    #content .listview.extended {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    /*Notification Indicator*/
    #headerIndicator.notificationIndicator {
        display: table-cell;
    }

    #menuIndicator.notificationIndicator {
        display: inline-block;
    }

    /*KM Overview*/

    #content.matchOverview .listview {
        max-width: 500px;
    }

    #content.matchOverview .listview .matchItem img.invite_close {
        padding-bottom: 7px;
    }

    #content.matchOverview .buttons.points {
        max-width: 500px;
        margin: 0 auto;
    }

    #content.matchOverview .buttons.points div .button {
        width: 120px;
    }

    #content.matchOverview .buttons .button {
        width: 300px;
    }

    #content .matchBar table td.middle #match_timer {
        position: relative;
        top: 3px;
    }

    /* result screen */
    #content.matchResult .match {
        max-width: 400px;
    }

    #content.matchResult .opponentsBig .versus {
        font-size: 40px;
    }

    #content.matchResult table.result th.opponent.unknown{
        padding-right: 35px;
    }

    #content.matchResult .buttons .button.learn {
        float: left;
    }
    #content.matchResult .buttons .button.next {
        float: right;
    }

    #content.matchResult .buttons .button {
        width: 135px;
        white-space: nowrap;
    }

    /*Profile Page*/
    #content .profile {
        width: 455px;
    }

    #content .profile form .input {
        width: initial;
    }

    #content .profile form input,
    #content .profile form select {
        width: 425px;
    }

    #content .listview.extended .listAvailableEntry:hover,
    #content .listview.extended .listSubscribedEntry:hover {
        -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
        box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    }

    #profileOverlay .border .avatarLine {
        top: 18px;
    }
    /* leaderboard */
    #content.leaderboard .listview {
        max-width: 425px;
        padding: 0;
        margin: 0 auto;
    }

    #content.leaderboard .selection_list .selection_item .imagecol,
    #content.leaderboard .selection_list .selection_item .text {
        display: table-cell;
        vertical-align: middle;
        padding: 5px 5px 5px 0;
    }

    #content.opponentSelection .buttons .button,
    #content.leaderboard .buttons .button {
        width: 200px;
    }

    /*INVITE PAGE*/
    .invite .info .courseInfo.withbackground {
        height: 250px;
    }

    .invite {
        max-width: 450px;
        margin: 0 auto;
    }

    #content .invite .buttons .button,
    #content .invite form .input {
        width: initial;
    }

    #content .invite form {
        padding: 0;
    }

    #content .invite .buttons {
        padding: 0;
    }

    #content .invite .buttons .button {
        margin: 0;
    }

    #content .invite form .buttons .button{
        margin: 15px 0;
    }

    .overlayWindow .border {
        margin: -15px 10px 10px 10px;
    }

    input.fill-in-editable.answer-part {
        font-size: 16px;
    }
}

/*Mobile*/
@media (max-width: 400px){
    .useAndPrivacyPolicyContainer{
        position: relative;
        width: inherit;
        overflow: hidden;
    }

    .useAndPrivacyPolicyCheckbox{
        position: relative;
        width: 15%;
        float: left;
        margin-top: 4.5px;
    }

    .useAndPrivacyPolicyMessage{
        position: relative;
        width: 85%;
        float: left;
    }

    .fancyUnsubscribeContainer{
        position: absolute;
        width: 95%;
    }

    .removeRegularPCCourseOption{
        padding: 2px;
        position:relative;
        float: right;
        margin-right: 0px;
    }

    #content.opponentSelection.inviteSelection .buttons {
        padding: 0;
        width: initial;
    }

    #content.matchResult .opponentsSmall .score {
        font-size: 18px;
    }

    #content.matchResult.rtl table.result th.opponent {
        padding-left: 10px;
    }


    .header {
        padding: 0;
    }

    .header .logo {
        float: left;
    }

    #headercontent {
        width: 100%;
    }

    .header #pageTitle {
        font-size: 14px;
    }

    .headerfeatures {
        height: 40px;
    }

    .menu {
        width: 100%;
    }

    #content {
        margin-top: 10px;
        margin-bottom: 50px;
        width:100%;
    }

    #content .listview.extended .listSubscribedEntry,
    #content .listview.extended .listAvailableEntry {
        padding: 0;
    }

    #content .voucherEntry,
    #content .addEntry {
        padding: 5px 15px 10px 0;
    }

    #content .listAvailableEntry .availableEntryTable {
        width: 100%;
        display: table;
    }

    .menubtn {
        display: inline-block;
        height: 40px;
    }

    .menuimg {
        height: 40px;
    }

    #viewPort #content .button.next {
        margin: 15px 10px;
    }

    #content .intro_image img {
        max-width: 100%;
        width: inherit;
    }

    #content .intro_image .video-embed {
        width: 100%;
    }

    .listheader {
        font-size: 24px;
    }

    .listview,
    .qna,
    .context {
        padding: 0;
    }

    .question {
        font-size: 16px;
        line-height: 22px;
    }

    .question {
        width: 100%;
    }

    #content .intro_image {
        margin-bottom: 5px;
        padding: 10px;
    }

    .answers {
        font-size: 14px;
        line-height: 18px;
        width: 100%;
    }

    input.fill-in-editable.answer-part {
        font-size: 14px;
    }

    .answers .answer {
        padding: 10px;
    }

    .context p,
    .question p {
        margin: 5px 10px;
    }

    .buttons {
        padding: 10px;
    }

    .context .context_text {
        display: block;
        width: 100%;
    }

    .context .context_header {
        padding: 0 10px;
    }

    .context .answer_context,
    .context .question_context {
        display: block;
    }

    .context .imagewrapper {
        padding-bottom: 10px;
    }


    /* PROGRESS BAR*/
    #progressbar #progressbg,
    #progressbar {
        width: 100%;
    }

    #progressbar #progressbg,
    #progressbar,
    #progress {
        height: 14px;
    }

    /*LOGIN PAGE*/
    .welcomemessage {
        font-size: 24px;
        margin-top: 15px;
        padding: 0 20px;
    }

    .welcomemessage .small {
        font-family: HeaderFont, Helvetica, Arial, sans-serif;
        font-size: 16px;
        padding-top: 10px;
    }

    .welcomemessage.video {
        padding: 0;
        margin: 0;
    }

    .welcomemessage.video .video-embed {
        width: 100%;
        height: 200px;
    }

    #content form {
        padding: 5px 20px 5px 20px;
    }

    #content .buttons .button,
    #content form .input {
        text-align: center;
    }

    #content form input {
        margin: 0 auto;
    }

    #content.login .buttons .button.register,
    #content.login .buttons .button.login {
        font-size: 16px;
    }

    #content .invite .buttons .button.forgotpassword,
    #content.login .buttons .button.forgotpassword {
        font-size: 13px;
    }

    #content #errorDiv {
        font-size: 13px;
        padding: 10px 20px;
    }

    .regularFurtherEntries{
        padding: 3px;
        position: absolute;
        margin-left: 35px;
        margin-top: 0.5px;
    }

    @-moz-document url-prefix() {
        .regularFurtherEntries {
            padding: 3px;
            position: absolute;
            margin-left: 35px;
            margin-top: 2px;
        }
    }

    /********** COURSE INTRO ****************/
    #content .course_title {
        font-size: 22px;
        padding: 0 10px 10px 10px;
        line-height: 27px;
    }

    #content .course_title.intro_title {
        text-align: left;
    }

    #content .introduction_side,
    #content .image_side {
        width: 100%;
    }

    #content .course .button.learn,
    #content .course .button.subscribe {
        padding: 10px 0;
        margin: 0 10px 10px 10px;
    }

    #content .course .introduction_side .introduction,
    #content .course .introduction_side .course_info {
        margin: 0 10px;
    }

    #content .course .introduction_side .lesson_overview {
        padding: 10px 0;
        margin: 0 10px;
    }

    #content .course_finished {
        font-size: 20px;
        padding: 10px 10px;
    }

    /*TEST TIMER*/
    #test_timer {
        font-size: 16px;
        vertical-align: middle;
    }

    .resultheader {
        font-size: 50px;
    }

    #content .buttons.test .button {
        margin: 10px 0;
        display: block;
    }

    #viewPort #content .buttons .button.next.testnext {
        margin: 15px 0;
        width: 40%;
    }

    #viewPort #content .buttons .button.next.testprev {
        float: left;
        margin: 15px 0;
        width: 40%;
    }

    .header .featurebtn,
    .menutxt {
        display: none;
    }

    .header .featurebtn.countdown {
        display: table;
    }

    /* ABORT OVERLAY *//* FEEDBACK OVERLAY */
    .overlayWindow {
        width:100%;
        top: 10%;
    }

    .overlayWindow .header{
        font-size: 18px;
        height: 18px;
    }

    .overlayWindow .buttons .button {
        width: 30%;
    }

    .overlayWindow .buttons.reviewbuttons {
        height: 65px;
    }

    .overlayWindow .buttons .button.next {
        margin: 0 0 15px 0;
    }

    .overlayWindow .buttons .button.cancel {
        margin: 0 0 15px 0;
    }

    .overlayWindow .abortContent .text {
        padding: 10px 10px 0 10px;
        font-size: 16px;
    }

    #feedbackOverlay {
        width:100%;
        top: 40px;
    }

    .overlayWindow .category {
        height: 40px;
        width: 100%;
    }

    .overlayWindow .category img {
        height: 30px;
        width: 30px;
    }

    .overlayWindow .category .text {
        font-size: 13px;
    }

    .overlayWindow .buttons {
        padding: 10px;
    }

    .overlayWindow .buttons .button.next,
    .overlayWindow .buttons .button.cancel {
        display: block;
        margin: 10px 0;
    }

    .overlayWindow textarea.comment {
        font-size: 16px;
    }

    #feedbackSent {
        width:100%;
        top: 40px;
    }

    /** INDEX STYLE*/
    .progresscontent .rightField,
    .progresscontent .leftField {
        margin: 0;
        padding: 0 10px;
    }

    .progresscontent .leftField {
        background-color: #FFF; /*NOT EVER CHANGED ANYWAY DOES NOT NEED TO BE IN STYLE*/
        padding: 15px 10px;
    }

    .indexlesson {
        padding: 0 10px 5px 10px;
    }

    .indexlesson .lessonheader{
        padding: 10px 10px 10px 5px;
    }

    .results .entry .resultTitle,
    .indexlesson .indexcard .cardtitle {
        font-size: 16px;
    }

    .search {
        padding: 0 10px 10px 10px;
    }

    .search .searchheader {
        padding-right: 5px;
    }

    .search .searchfield {
        font-size: 20px;
        height: 24px;
        margin-top: 5px;
    }

    .langfilter .languages,
    .search .searchengines {
        font-size: 18px;
        height: 28px;
        padding-left: 5px;
        margin-top: 10px;
    }

    .langfilter .languages,
    .search .searchengines,
    .search .searchfield {
        display: block;
        width: 100%;
    }

    .search .searchfield.small {
        display: inline-block;
    }

    .search .searchbutton {
        margin-top: 5px;
    }

    #content .noresults {
        font-size: 32px;
    }

    /* PROGRESS GRAPH */
    #content .progressHeader {
        font-size: 24px;
        margin: 15px 10px 15px 10px;
    }

    #content .progressgraph {
        width: 100%;
    }

    /* PROGRESS BAR*/
    .progressgraph .column .number{
        font-size: 32px;
    }

    .progresscontent .progressText {
        font-size: 18px;
    }

    .progresscontent .graphtext {
        font-size: 18px;
        padding: 10px 0 50px 0;
    }

    .listview .separator {
        padding: 6px;
    }

    .listview #newcourses.separator,
    .listview #othercourses.separator {
        margin-top: 25px;
    }

    .intervention_top {
        font-size: 20px;
        padding: 15px 10px 5px 10px;
    }

    .intervention_top {
        margin: 15px 10px;
    }

    #content .buttons.intervention {
        width: 100%;
        padding: 0;
    }

    #content .buttons.intervention .learn{
        display: block;
    }

    #content .answers .choices {
        width: 100%;
    }

    .answers,
    .context .context_text,
    .rightField,
    .leftField,
    #content.dynpage .buttons,
    #content.login form .buttons {
        border: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    #regbutton {
        padding: 5px 20px 5px 20px;
    }

    #content .qna,
    #content .course .buttons,
    #content .intro_image {
        background: none !important;
    }

    .qna {
        display: block;
    }

    .qna .answers,
    .qna .question {
        width: 100%;
        display: block;
    }

    .footer {
        height: 40px;
        width: 100%;
        position: absolute;
        text-align: center;
        border-spacing: 0;
    }

    .footer .featurebtn {
        height: 35px;
        text-decoration: none;
    }

    .footer .featurebtn svg,
    .footer .featurebtn img {
        width: 25px;
    }

    .footer .featurebtn .featuretxt {
        display: none;
    }

    .buttons.nopadding {
        padding: 0;
    }

    /* NEW HEADER */
    #headertable td.logocolumn {
        padding: 5px;
    }

    #headertable td.btncolumn {
        display: none;
    }

    #headertable td.btncolumn#timer {
        display: table-cell;
    }

    #headertable td.btncolumn.menucolumn {
        display: table-cell;
        padding-left: 5px;
    }

    .imprintfooter .footertable {
        padding-left: 10px;
    }

    .imprintfooter {
        height: 40px;
    }

    #content.dynpage .text {
        margin: 10px;
    }

    #content.dynpage .buttons .button {
        margin: 10px auto;
    }

    /*AUDIO JS STYLING*/
    .context .imagewrapper {
        width: 100%;
        display: block;
    }

    .audiojs .scrubber {
        width: 32%;
    }

    .login_logo {
        width: 100%;
    }

    /*Available & Subscribed Courses Extended View*/
    #content .listview.extended .listAvailableEntry .availableEntryTable,
    #content .subscribedEntryTable.extended {
        height: 75px;
    }

    #content .listview.extended .listAvailableEntry .title {
        display: table-cell;
        vertical-align: bottom;
        white-space: normal;
    }

    /* opponentSelection */
    #content.opponentSelection {
        margin-top: 0;
    }

    #content.opponentSelection .course{
        height: 100%;
    }

    #content.opponentSelection .buttons {
        padding: 0 10px;
    }

    #content.opponentSelection .selection_list .selection_item svg.icon,
    #content.opponentSelection .selection_list .selection_item img.icon {
        padding: 5px 10px 5px 5px;
    }

    #content.opponentSelection .selection_list .selection_item div {
        display: table-cell;
        vertical-align: middle;
        padding: 10px 5px 10px 10px;
    }

    /*KM Overview*/
    #content .profilelink {
        width: 80px;
    }

    #content.matchOverview .listview {
        margin: 0 10px;
    }

    #content.matchOverview .listview .matchItem .text .courseTitle {
        word-wrap: break-word;
    }

    #content.matchOverview .buttons.points .score span.number {
        font-size: 20px;
    }

    #content.matchOverview .buttons.points .score span.measurement {
        font-size: 12px;
    }

    #content.matchOverview .buttons.points div .button {
        font-size: 14px;
        min-width: 80px;
        padding: 10px 5px;
        margin: 0;
    }

    /* result screen */
    #content.matchResult .match{
        width: 90%;
        padding: 5px 15px;
    }

    #content .profilepicture {
        height: 80px;
        width: 80px;
    }

    #content.matchResult .opponentsBig .versus {
        font-size: 30px;
    }

    #content.matchResult .buttons .button {
        display: block;
        margin: 10px 0;
    }

    #content.matchResult .buttons {
        padding: 0;
    }

    span.answerIndicator {
        width: 10px;
        height: 10px;
        padding-bottom: 3px;
    }

    span.answerIndicator.wrong {
        background: url("../img/answerindicator_wrong_small.png") no-repeat;
    }

    span.answerIndicator.correct {
        background: url("../img/answerindicator_correct_small.png") no-repeat;
    }

    span.answerIndicator.unanswered {
        background: url("../img/answerindicator_unanswered_small.png") no-repeat;
    }

    #content .matchBar table td.middle .timericon {
        height: 15px;
        width: 15px;
        display: inline-block;
        top: -2px;
    }

    /*Profile Page*/
    #content .profile.settings,
    #content .profile {
        margin: 10px;
    }

    #content .profile .placeholder {
        text-align: left;
        display: block;
    }

    #content .profile .buttons {
        padding: 0;
    }

    #content .profile #errorDiv {
        padding: 10px 15px;
    }

    #profileOverlay {
        width: 95%;
    }

    #profileOverlay .avatarElement .profilepicture {
        width: 45px;
        height: 45px;
    }

    #profileOverlay #avatarGrid {
        max-height: 185px;
        width: 100%;
    }

    /* leaderboard */
    #content.opponentSelection .listview,
    #content.leaderboard .listview {
        margin: 10px;
    }

    #content.leaderboard .selection_list .selection_item div {
        display: table-cell;
        vertical-align: middle;
        padding: 5px 5px 5px 0;
    }

    #content.leaderboard .selection_list .selection_item:first-child svg.icon,
    #content.leaderboard .selection_list .selection_item:first-child img.icon {
        border: 0;
    }

    #content.login form .buttons {
        padding: 10px 0;
    }

    /*INVITE PAGE*/
    .invite .info .courseInfo.withbackground {
        height: 150px;
    }

    .invite .info .opponentInfo {
        padding-bottom: 10px;
    }

    .invite .info .courseInfo.withbackground span {
        padding: 5px;
    }

    .invite .actions,
    .invite .info {
        padding: 10px;
    }

    .invite {
        margin: 10px;
    }

    #content .invite .buttons .button,
    #content .invite form .input {
        width: initial;
    }

    #content .invite .buttons {
        padding: 0;
    }

    #content .invite .buttons .button {
        margin: 0;
    }

    #content .invite form .buttons .button{
        margin: 15px 0;
    }

    #content .invite #regbutton,
    #content .invite form {
        padding: 0;
    }

    #content.margin {
        margin-top: 0;
    }

    #profileOverlay form.dropzone {
        margin: 10px 10px 0 10px;
    }

    .voucherEntry {
        border-top: 1px solid #CCC;
    }
}