@font-face {
    font-family: 'HeaderFont';
    src: url('fonts/opensans-semibold-webfont.woff2') format('woff2'),
    url('fonts/opensans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BodyFont';
    src: url('fonts/opensans-regular-webfont.woff2') format('woff2'),
    url('fonts/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LightFont';
    src: url('fonts/opensans-light-webfont.woff2') format('woff2'),
    url('fonts/opensans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #F0F0F0;
    background-size: 100% 100%;
}

#content.dynpage,
.invite,
.profilepicture,
.menu .button.big img.icon,
#content.leaderboard .trophy,
#content .profile,
.qna,
#content form,
#content .course .buttons,
#content .course,
.overlayWindow,
.overlayWindow .header,
#content .intro_image,
.overlayWindow .border .avatarLine {
    background-color: #FFF;
}

#test_timer .countdown-row,
.header {
    background-color: rgb(6,45,76); /*rgb(6,45,76)*/
}

.results .entry .resultTitle,
.indexlesson .indexcard .cardtitle,
.results .entry .resultContent,
.indexlesson .indexcard .question,
#content .listSubscribedEntry,
#content .listAvailableEntry {
    color: rgb(0,0,0); /*rgb(0,0,0)*/
}

#content .listSubscribedEntry,
#content .listAvailableEntry {
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    border-bottom: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

#content .listSubscribedEntry:hover,
#content .listAvailableEntry:hover {
    background-color: rgb(89,156,219); /*rgb(89,156,219)*/
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}

#content .voucherEntry,
#content .addEntry {
    color: rgb(250,130,10); /*rgb(250,130,10)*/
}

#content .voucherEntry svg.entry path,
#content .voucherEntry svg.entry g,
#content .addEntry svg.entry path,
#content .addEntry svg.entry g{
    fill: rgb(250,130,10); /*rgb(250,130,10)*/
}

#content .voucherEntry:hover svg.entry path,
#content .voucherEntry:hover svg.entry g,
#content .addEntry:hover svg.entry path,
#content .addEntry:hover svg.entry g{
    fill: rgb(238,171,92); /*rgb(238,171,92)*/
}

#content .voucherEntry:hover,
#content .addEntry:hover {
    color: rgb(238,171,92); /*rgb(238,171,92)*/
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
}

.menu {
    background-color: rgb(166,216,244); /*rgb(166,216,244)*/
}

.overlayWindow .category:hover,
.answers.selectable .answer:hover {
    background-color: rgb(89,156,219); /*rgb(89,156,219)*/
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}

.overlayWindow .button.cancel,
.overlayWindow .button.next,
#content .button.learn,
#content .button.next,
#content .button.login,
#content .button.subscribe {
    background-color: rgb(250,130,10); /*rgb(250,130,10)*/
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}

.button.next.disabled,
.button.next.disabled:hover,
.overlayWindow .button.next.disabled,
.overlayWindow .button.next.disabled:hover,
#viewPort #content .buttons .button.next.disabled,
#viewPort #content .buttons .button.disabled:hover {
    background-color: #CCC !important;
    color: #FFF !important;
}

.answers .answer {
    border-bottom: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    color: rgb(0,0,0); /*rgb(0,0,0)*/
}

.overlayWindow .button.cancel:hover,
.overlayWindow .button.next:hover,
#content .button.learn:hover,
#content .button.next:hover,
#content .button.login:hover,
#content .button.subscribe:hover {
    background-color: rgb(238,171,92); /*rgb(238,171,92)*/
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}

.answers .answer.correct {
    background-color: rgb(107,186,41); /*rgb(107,186,41)*/
    color: rgb(255,255,255); /*rgb(255,255,255)*/
    border-bottom: 1px solid rgb(255,255,255); /*rgb(255,255,255)*/
}

.answers .answer.incorrect {
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    color: rgb(0,0,0); /*rgb(0,0,0)*/
}

.answers .answer.missing {
    background-color: rgb(107,186,41); /*rgb(107,186,41)*/
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}
.listview {
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
}

.answers,
.context .context_text {
    border-left: 1px solid rgb(6,45,76);  /*rgb(6,45,76)*/
}

/* PROGRESS BAR*/
#progressbar #progressbg,
#progressbar {
    background-color: rgb(166,216,244); /*rgb(166,216,244)*/
    border-top: 1px solid #F0F0F0;
}

#progress {
    background-color: rgb(50,146,218); /*rgb(50,146,218)*/
}

.menu .button {
    color: rgb(6,45,76); /*rgb(6,45,76)*/
    border-bottom: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}
.menu .button:hover {
    background-color: rgb(89,156,219); /*rgb(89,156,219)*/
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}

.menu .button:hover svg g,
.menu .button:hover svg path{
    fill: rgb(255,255,255); /*rgb(255,255,255)*/
}

.menu .button.profile {
    color: rgb(6,45,76); /*rgb(6,45,76)*/
}

/*LOGIN PAGE*/
#content .button.register {
    color: rgb(250,130,10); /*rgb(250,130,10)*/
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    border: 1px solid rgb(250,130,10); /*rgb(250,130,10)*/
}

#content .button.register:hover {
    color: rgb(238,171,92); /*rgb(238,171,92)*/
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    border: 1px solid rgb(238,171,92); /*rgb(238,171,92)*/
}

.voucherinput input,
#content form input {
    border: solid 1px rgb(204,204,204); /*rgb(204,204,204)*/
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    color: rgb(6,45,76);               /*rgb(6,45,76)*/
}

#content.dynpage .text .smalllink span,
#content.dynpage .buttons,
#content.login form .buttons {
    border-top: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

#content .actions .buttons .button.forgotpassword,
#content.login .buttons .button.forgotpassword {
    color: rgb(250,130,10); /*rgb(250,130,10)*/
}

#content .actions .buttons .button.forgotpassword:hover,
#content.login .buttons .button.forgotpassword:hover {
    color: rgb(238,171,92); /*rgb(238,171,92)*/
}

#content.dynpage .text .smalllink:hover,
#footercontent .footerlink:hover {
    color: rgb(250,130,10); /*rgb(250,130,10)*/
}

.footer {
    background-color: rgb(6,45,76); /*rgb(6,45,76)*/
}

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

/********** COURSE INTRO ****************/
.listview .separator,
.overlayWindow .category,
#content .course .introduction_side .lesson_overview,
#content .course .introduction_side .course_info {
    border-bottom: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

#content .course .introduction_side .lesson_item .progressbar {
    background-color: rgb(166,216,244); /*rgb(166,216,244)*/
}

#content .course .introduction_side .lesson_item .progressbar .progresscompletion {
    background-color: rgb(50,146,218); /*rgb(50,146,218)*/
}

/*TEST TIMER*/
#test_timer {
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}

#content .noresults,
.resultheader {
    color: #CCC;
}

#content .graph {
    background-color: #FFF; /*ProgressScreenbackgroundColorStart*/
}

#content .graph .result .bar {
    background-color: #F7807F; /*TestresultwrongColorStart*/
}

#content .graph .result .threshold {
    border-right: 1px #000 dashed;
}

#content .graph .result .bar .correctbar {
    background-color: rgb(107,186,41); /*rgb(107,186,41)*/
    border-right: 1px solid #FFF;
}

#menu_icon_closed {
    border-left: 1px solid rgb(255,255,255); /*rgb(255,255,255)*/
}

#menu_icon_open {
    border-left: 1px solid rgb(166,216,244); /*rgb(166,216,244)*/
}

.header #pageTitle,
.featuretxt,
.menutxt {
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}

/* ABORT OVERLAY *//* FEEDBACK OVERLAY */
.overlayBackground {
    background-color: #000;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* IE 5-7 */
    filter: alpha(opacity=50);
    /* Netscape */
    -moz-opacity: 0.5;
    /* Safari 1.x */
    -khtml-opacity: 0.5;
    /* Good browsers */
    opacity: 0.5;
}

.overlayWindow .header{
    background-color: #F0F0F0;
}

.overlayWindow textarea.comment {
    border: 1px solid rgb(204,204,204); /*rgb(204,204,204)*/
    color: rgb(6,45,76); /*rgb(6,45,76)*/
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
}

/** INDEX & SEARCH STYLE*/
.results,
.indexlesson {
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
}

.indexlesson .lessonheader {
    color: rgb(6,45,76); /*rgb(6,45,76)*/
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
}

.results .entry .resultContent,
.indexlesson .indexcard .question {
    color: rgb(0,0,0); /*rgb(0,0,0)*/
}

.indexlesson .indexcard {
    border-top: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

.results .entry {
    border-bottom: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

.results .entry:hover,
#content .indexlesson .indexcard:hover {
    background-color: rgb(89,156,219); /*rgb(89,156,219)*/
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}

.search .searchbutton,
.search .searchfield {
    background-color: rgb(255,255,255); /*rgb(255,255,255) */
    border: 1px solid rgb(204,204,204); /*rgb(204,204,204)*/
    color: rgb(6,45,76); /*rgb(6,45,76)*/
}

.available .dropdown,
.search .searchengines {
    background-color: rgb(255,255,255); /*rgb(255,255,255) */
    border: 1px solid rgb(204,204,204); /*rgb(204,204,204)*/
    color: rgb(0,0,0); /*rgb(0,0,0)*/
}

.hilite {
    background-color: rgb(89,156,219); /*rgb(89,156,219)*/
    color: rgb(255,255,255); /*rgb(255,255,255)*/
}

/* PROGRESS GRAPH */
#content .progressgraph .column.learned .number {
    color: rgb(50,146,218); /*rgb(50,146,218)*/
}
#content .progressgraph .column.learned .indicator {
    background-color: rgb(50,146,218); /*rgb(50,146,218)*/
}

#content .progressgraph .column .number {
    color: rgb(166,216,244); /*rgb(166,216,244)*/
}
#content .progressgraph .column .indicator {
    background-color: rgb(166,216,244); /*rgb(166,216,244)*/
}

.progresscontent #progressbar #progressbg{
    background-color: #FFF;
    border: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

.progresscontent #progress {
    background-color: rgb(107,186,41); /*rgb(107,186,41)*/
}

.progresscontent .rightField {
    border-left: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

.listview.extended .separator {
    color: rgb(6,45,76); /*rgb(6,45,76)*/
    background-color: transparent;
}
.listview .separator {
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    color: rgb(6,45,76); /*rgb(6,45,76)*/
}

/*BottomBar for embedded/lowres views*/
.bottombar {
    background-color: rgb(6,45,76); /*rgb(6,45,76)*/
}

/*BORDER REMOVAL WHERE NO BORDERS SHOULD APPEAR*/
#content .listAvailableEntry:last-child {border-bottom: 0 solid #CCC;}
#content .addEntry,
#content .voucherEntry {
    border-bottom: 0 solid #CCC;
}
.results .entry:last-child, .menu .button:last-child, .answers .answer:last-child { border-bottom: 0;}
#test_timer, #test_timer .countdown-row {border: 0;}

#content.leaderboard .selection_list,
#content.opponentSelection .selection_list {
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
}
#content.opponentSelection .selection_list {
    border: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

#content.leaderboard .selection_list .selection_item.separator div {
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    color: rgb(6,45,76); /*rgb(6,45,76)*/
}

#shareOverlay .selection_list .selection_item img.icon,
#shareOverlay .selection_list .selection_item svg.icon,
#shareOverlay .selection_list .selection_item .text,
#content.opponentSelection .selection_list .selection_item img.icon,
#content.opponentSelection .selection_list .selection_item svg.icon,
#content.opponentSelection .selection_list .selection_item .text,
#content.leaderboard .selection_list .selection_item div,
#content.opponentSelection .selection_list .selection_item div,
#content.opponentSelection .selection_list .selection_item svg,
#content.opponentSelection .selection_list .selection_item img {
    color: rgb(0,0,0); /*rgb(0,0,0)*/
    border-top: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

#content.leaderboard .selection_list .selection_item.self,
#shareOverlay .selection_list .selection_item:hover,
#content.opponentSelection .selection_list .selection_item:hover {
    color: rgb(255,255,255); /*rgb(255,255,255)*/
    background-color: rgb(89,156,219); /*rgb(89,156,219)*/
}

#content.matchResult table.result td.score.winner,
#content.matchOverview .listview .matchItem .score .won,
.score .resulttext .won {
    color: rgb(107,186,41); /*rgb(107,186,41)*/
}

#content.matchOverview .listview .matchItem .score .lost,
.score .resulttext .lost {
    color: rgb(228,62,50); /*rgb(228,62,50)*/
}

#content.matchOverview .listview .matchItem .score .tie,
.score .resulttext .tie {
    color: rgb(0,0,0); /*rgb(0,0,0)*/
}

#content.matchResult #gobutton .animationcolor {
    color: rgb(107,186,41); /*rgb(107,186,41)*/
}

#content.matchResult #gobutton .text {
    color: #FFF; /*TODO*/
}

#content.matchResult #gobutton.disabled .text {
    color: #C6C6C6; /*TODO*/
}

#content.matchResult table.result {
    border: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

#content.matchResult table.result th {
    border-bottom: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    color: rgb(6,45,76); /*rgb(6,45,76)*/
}

#content.matchResult table.result tr.future {
    color: #CCC;
}

#content.matchResult table.result td {
    border-bottom: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
    background-color: #FFF;
}

#content.matchOverview .listview {
    border: 1px solid rgb(6,45,76);  /*rgb(6,45,76)*/
}

#content.matchOverview .listview .matchItem {
    border-bottom: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

#content.matchOverview .listview .matchItem .text {
    color: rgb(0,0,0); /*rgb(0,0,0)*/
}

.matchBar {
    color: rgb(255,255,255);
    background-color: rgb(89,156,219);
}

#headerIndicator.notificationIndicator {
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    color: rgb(6,45,76); /*rgb(255,255,255)*/
}

#menuIndicator.notificationIndicator {
    background-color: rgb(6,45,76); /*rgb(6,45,76)*/
    color: rgb(255,255,255) /*rgb(255,255,255)*/
}

#finishedIndicator.notificationIndicator {
    background-color: rgb(255,255,255); /*rgb(255,255,255)*/
    color: rgb(250,130,10); /*rgb(250,130,10)*/
}

.overlayWindow #avatarGrid .jspDrag {
    background: #C6C6C6;
}

.listview .separator.bordertop {
    border-top: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

#content form input:disabled {
    background-color: #F0F0F0;
}

.imprintfooter {
    background-color: #FFF;
    border-top: 1px solid #DDD;
}

.imprintfooter .footerlink {
    color: rgb(250,130,10); /*rgb(250,130,10)*/
}

#content.dynpage .text .smalllink {
    color: #000;
}

.mm_filename {
    color: #828383;
}
.audiojs .error-message {
    color: #FFF;
}

.audiojs .progress {
    background-color: rgb(6,45,76);
}

.audiojs .error-message a {
    color: #eee;
    border-bottom: 1px solid rgb(6,45,76);  /*rgb(6,45,76)*/
}

#content .buttons .button.oauth,
#content .buttons .button.moodle,
#content .buttons .button.oidc,
#content .buttons .button.saml {
    color: rgb(250,130,10); /*rgb(250,130,10)*/
}

#content .withbackground span,
#content .listAvailableEntry.withbackground .title,
#content .withbackground .subscribedEntryTable.extended .title,
#content.opponentSelection .withbackground .title,
#content.leaderboard .withbackground .course_title {
    color: #FFF; /*Overrides the skincolor of a text*/
}

#content.matchOverview .listview .matchItem .score {
    background-color: #F0F0F0;
}

.overlayWindow .avatarElement .profilepicture.selected {
    -webkit-box-shadow: 0 0 5px 5px rgba(0,150,0,0.4);
    -moz-box-shadow: 0 0 5px 5px rgba(0,150,0,0.4);
    box-shadow: 0 0 5px 5px rgba(0,150,0,0.4);
}

#viewPort.rtl .context_text,
#viewPort.rtl .answers {
    border-right: 1px solid rgb(6,45,76);  /*rgb(6,45,76)*/
}

.overlayWindow .border {
    border-bottom: 1px solid rgb(6,45,76); /*rgb(6,45,76)*/
}

.overlayWindow .border .avatarLine {
    color: rgb(6,45,76); /*rgb(6,45,76)*/
}

#content .course .share:hover .background {
    border-left: 40px solid rgb(238,171,92); /*rgb(238,171,92)*/
}

#content .course .share .background {
    border-left: 40px solid rgb(250,130,10); /*rgb(250,130,10)*/
}

.ui-widget-header {
    background: rgb(250,130,10) !important;
    border: 0 !important;
}

/*svg icon colors*/
svg.svgicon.thumb g,
svg.svgicon.thumb path{
    fill: rgb(6,45,76) /*rgb(6,45,76)*/;
}

svg.svgicon.normal g,
svg.svgicon.normal path{
    fill: rgb(6,45,76) /*rgb(6,45,76)*/;
}

svg.svgicon.alternate g,
svg.svgicon.alternate path{
    fill: rgb(255,255,255);
}

.maximize svg.svgicon.alternate g,
.maximize svg.svgicon.alternate path{
    fill: white; /*NOT SKINNABLE*/
}

svg.svgicon.successthumb g,
svg.svgicon.successthumb path {
    fill: rgb(6,45,76);
}
svg.svgicon.skipcard g,
svg.svgicon.skipcard path {
    fill: rgb(6,45,76);
}

svg.svgicon.menuclosed g,
svg.svgicon.menuclosed path {
    fill: rgb(255,255,255);
}

svg.svgicon.menuopen g,
svg.svgicon.menuopen path {
    fill: rgb(6,45,76);
}