learngerman/static/assets/css/stylesheets.css

.background-color-sand {
    background-color: #F08C00
}

.background-color-orange {
    background-color: #E1500F
}

.background-color-pink {
    background-color: #DC1978
}

.background-color-red {
    background-color: #BE0046
}

.background-color-gray {
    background-color: #F5F4F2
}

.text-color-white {
    color: #FFF !important
}

.text-color-gray {
    color: #9B9B9B !important
}

.color-orange {
    background-color: #E1500F;
    color: #fff
}

.color-orange-light {
    background-color: #F08C00;
    color: #fff
}

.color-pink {
    background-color: #DC1978;
    color: #fff
}

.color-red {
    background-color: #BE0046;
    color: #fff
}

.color-red-dark {
    background-color: #B20028;
    color: #fff
}

.color-green-light {
    background-color: #CDBE00;
    color: #fff
}

.color-green-mid {
    background-color: #91B423;
    color: #fff
}

.color-green-dark {
    background-color: #55911E;
    color: #fff
}

.color-blue-mid {
    background-color: #1464A5;
    color: #fff
}

.color-blue-cyan {
    background-color: #0098FF;
    color: #fff
}

@font-face {
    font-family: DWTheAntiquaB;
    src: url(../fonts/dw-theAntiquaB-W5Plain-web/dwtheantiquab-w5plain.eot);
    src: url(../fonts/dw-theAntiquaB-W5Plain-web/dwtheantiquab-w5plain.eot?) format("embedded-opentype"), url(../fonts/dw-theAntiquaB-W5Plain-web/dwtheantiquab-w5plain.woff2) format("woff2"), url(../fonts/dw-theAntiquaB-W5Plain-web/dwtheantiquab-w5plain.woff) format("woff"), url(../fonts/dw-theAntiquaB-W5Plain-web/dwtheantiquab-w5plain.svg) format("svg");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: DWTheAntiquaBItalic;
    src: url(../fonts/dw-theAntiquaB-W5PlainItalic-web/DWTheAntiquaB-W5PlainItalic.woff2) format("woff2"), url(../fonts/dw-theAntiquaB-W5PlainItalic-web/DWTheAntiquaB-W5PlainItalic.woff) format("woff");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: DWTheAntiquaBBold;
    src: url(../fonts/dw-theAntiquaB-W7Bold-web/DWTheAntiquaB-W7Bold.woff2) format("woff2"), url(../fonts/dw-theAntiquaB-W7Bold-web/DWTheAntiquaB-W7Bold.woff) format("woff");
    font-style: normal;
    font-weight: 400
}

body {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 23px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.h1, h1 {
    font-size: 28px;
    line-height: 32px
}

.h2, h2 {
    font-size: 24px;
    line-height: 25px
}

.h3, h3 {
    font-size: 20px;
    line-height: 25px
}

.h4, h4 {
    font-size: 17px;
    line-height: 20px
}

.paragraph, p {
    font-size: 15px;
    line-height: 25px
}

.exercise-questions {
    font-size: 15px
}

@media (min-width: 768px) {
    .h1, h1 {
        font-size: 32px;
        line-height: 40px
    }

    .h2, h2 {
        font-size: 24px;
        line-height: 25px
    }

    .h3, h3 {
        font-size: 20px;
        line-height: 25px
    }

    .h4, h4 {
        font-size: 17px;
        line-height: 20px
    }

    .paragraph, p {
        font-size: 15px;
        line-height: 25px
    }

    .exercise-questions {
        font-size: 17px
    }
}

@media (min-width: 992px) {
    .h1, h1 {
        font-size: 36px;
        line-height: 45px
    }

    .paragraph, p {
        font-size: 17px;
        line-height: 25px
    }
}

@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 40px;
        line-height: 50px;
        font-weight: 400
    }

    .h2, h2 {
        font-size: 27px;
        line-height: 25px
    }

    .h3, h3 {
        font-size: 22px;
        line-height: 25px
    }

    .h4, h4 {
        font-size: 18px;
        line-height: 25px
    }

    .paragraph, p {
        font-size: 18px;
        line-height: 25px
    }
}

.result-headline p, h1, h1 + p, h3 {
    font-family: DWTheAntiquaB, Georgia, serif;
    font-weight: 400
}

.exercise-container .exercise-headline, .exercise-container .exercise-infos, .exercise-container .exercise-results-header {
    font-family: DWTheAntiquaB, Georgia, serif;
    font-weight: 400
}

.exercise-container .exercise-headline bold, .exercise-container .exercise-headline strong, .exercise-container .exercise-infos bold, .exercise-container .exercise-infos strong, .exercise-container .exercise-results-header bold, .exercise-container .exercise-results-header strong {
    font-family: DWTheAntiquaBBold, Georgia, serif;
    font-weight: 400
}

.exercise-container .exercise-headline em, .exercise-container .exercise-headline i, .exercise-container .exercise-infos em, .exercise-container .exercise-infos i, .exercise-container .exercise-results-header em, .exercise-container .exercise-results-header i {
    font-family: DWTheAntiquaBItalic, Georgia, serif;
    font-style: normal
}

.richtext-content-container .grammarLink, .richtext-content-container .grammarLinkText {
    font-family: DWTheAntiquaB, Georgia, serif;
    font-weight: 400
}

.btn, .exercise-nav-title, button {
    font-family: Helvetica, Arial, sans-serif
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.btn.main {
    display: inline-block;
    background: #0098FF;
    position: relative;
    width: 100%;
    height: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 33px;
    font-size: 17px;
    color: #FFF
}

.btn.main:active, .btn.main:focus, .btn.main:hover {
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
    background-color: #252629;
    color: #FFF
}

.btn.secondary {
    display: inline-block;
    background: 0 0;
    position: relative;
    width: 100%;
    height: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 33px;
    font-size: 17px;
    border: 1px solid #0098FF;
    color: #0098FF
}

.btn.secondary:active, .btn.secondary:focus, .btn.secondary:hover {
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
    background-color: #252629;
    border: 1px solid #FFF;
    color: #FFF
}

.btn.login-home {
    position: relative;
    background: #FFF;
    font-size: 22px;
    line-height: 50px;
    border-radius: 0;
    width: 320px;
    text-transform: uppercase;
    color: #F08C00;
    margin: 700px auto 0 auto
}

@media (max-width: 767px) {
    .btn.login-home {
        margin: 740px auto 0 auto
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .btn.login-home {
        margin: 790px auto 0 auto
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .btn.login-home {
        margin: 660px auto 0 auto
    }
}

@media (min-width: 1200px) {
    .btn.login-home {
        margin: 540px auto 0 auto
    }
}

.btn span.icon {
    position: absolute;
    margin: -2px 0 0 10px
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

.btn.focus, .btn:focus, .btn:hover {
    color: #333;
    text-decoration: none
}

.btn.active, .btn:active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none
}

a.btn.disabled, fieldset[disabled] a.btn {
    pointer-events: none
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc
}

.btn-default.focus, .btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c
}

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad
}

.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open > .dropdown-toggle.btn-default.focus, .open > .dropdown-toggle.btn-default:focus, .open > .dropdown-toggle.btn-default:hover {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c
}

.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
    background-image: none
}

.btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled].focus, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
    background-color: #fff;
    border-color: #ccc
}

.btn-default .badge {
    color: #fff;
    background-color: #333
}

.btn-primary {
    color: #fff;
    background-color: #0098FF;
    border-color: #0089e6
}

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #007acc;
    border-color: #003d66
}

.btn-primary:hover {
    color: #fff;
    background-color: #007acc;
    border-color: #0064a8
}

.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #007acc;
    border-color: #0064a8
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: #0064a8;
    border-color: #003d66
}

.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
    background-image: none
}

.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
    background-color: #0098FF;
    border-color: #0089e6
}

.btn-primary .badge {
    color: #0098FF;
    background-color: #fff
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c
}

.btn-success.focus, .btn-success:focus {
    color: #fff;
    background-color: #449d44;
    border-color: #255625
}

.btn-success:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439
}

.btn-success.active, .btn-success:active, .open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: #449d44;
    border-color: #398439
}

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover {
    color: #fff;
    background-color: #398439;
    border-color: #255625
}

.btn-success.active, .btn-success:active, .open > .dropdown-toggle.btn-success {
    background-image: none
}

.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
    background-color: #5cb85c;
    border-color: #4cae4c
}

.btn-success .badge {
    color: #5cb85c;
    background-color: #fff
}

.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da
}

.btn-info.focus, .btn-info:focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85
}

.btn-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc
}

.btn-info.active, .btn-info:active, .open > .dropdown-toggle.btn-info {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc
}

.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .dropdown-toggle.btn-info.focus, .open > .dropdown-toggle.btn-info:focus, .open > .dropdown-toggle.btn-info:hover {
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85
}

.btn-info.active, .btn-info:active, .open > .dropdown-toggle.btn-info {
    background-image: none
}

.btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled].focus, .btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:hover {
    background-color: #5bc0de;
    border-color: #46b8da
}

.btn-info .badge {
    color: #5bc0de;
    background-color: #fff
}

.btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236
}

.btn-warning.focus, .btn-warning:focus {
    color: #fff;
    background-color: #ec971f;
    border-color: #985f0d
}

.btn-warning:hover {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512
}

.btn-warning.active, .btn-warning:active, .open > .dropdown-toggle.btn-warning {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512
}

.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover {
    color: #fff;
    background-color: #d58512;
    border-color: #985f0d
}

.btn-warning.active, .btn-warning:active, .open > .dropdown-toggle.btn-warning {
    background-image: none
}

.btn-warning.disabled.focus, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled].focus, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
    background-color: #f0ad4e;
    border-color: #eea236
}

.btn-warning .badge {
    color: #f0ad4e;
    background-color: #fff
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a
}

.btn-danger.focus, .btn-danger:focus {
    color: #fff;
    background-color: #c9302c;
    border-color: #761c19
}

.btn-danger:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925
}

.btn-danger.active, .btn-danger:active, .open > .dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925
}

.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open > .dropdown-toggle.btn-danger.focus, .open > .dropdown-toggle.btn-danger:focus, .open > .dropdown-toggle.btn-danger:hover {
    color: #fff;
    background-color: #ac2925;
    border-color: #761c19
}

.btn-danger.active, .btn-danger:active, .open > .dropdown-toggle.btn-danger {
    background-image: none
}

.btn-danger.disabled.focus, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled].focus, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover {
    background-color: #d9534f;
    border-color: #d43f3a
}

.btn-danger .badge {
    color: #d9534f;
    background-color: #fff
}

.btn-link {
    color: #0098FF;
    font-weight: 400;
    border-radius: 0
}

.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
    border-color: transparent
}

.btn-link:focus, .btn-link:hover {
    color: #a0d246;
    text-decoration: underline;
    background-color: transparent
}

.btn-link[disabled]:focus, .btn-link[disabled]:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:hover {
    color: #777;
    text-decoration: none
}

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 0
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 0
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 0
}

.btn-block {
    display: block;
    width: 100%
}

.btn-block + .btn-block {
    margin-top: 5px
}

input[type=submit].btn-block, input[type=reset].btn-block, input[type=button].btn-block {
    width: 100%
}

.form-control {
    border-radius: 0;
    box-shadow: none;
    border-color: #AEB8C1
}

.form-control, output {
    color: #000
}

div.form-group div.input-group label {
    font-weight: 400
}

div.form-group div.input-group label a {
    color: #0098FF
}

.custom-checkbox {
    margin-top: 20px;
    margin-bottom: 20px
}

.custom-checkbox .input-group .form-control {
    position: relative;
    z-index: 2;
    margin: 0;
    height: 15px;
    width: 15px;
    color: #000;
    padding: 0
}

.custom-checkbox .input-group .checkbox-label {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    color: #000;
    padding: 15px 0 15px 20px;
    font-size: 14px;
    border: 1px solid #AEB8C1;
    border-radius: 0 4px 4px 0;
    width: 100%
}

.custom-checkbox .has-error .checkbox-label {
    border-color: #a94442
}

.has-nested-errors .help-block {
    color: #a94442
}

.alert-danger {
    border-radius: 0;
    background-image: none;
    background-color: inherit;
    border-color: #be232d;
    color: #be232d
}

.nav > li > a:focus, .nav > li > a:hover {
    background-color: #000;
    color: #FFF
}

.nav-tabs {
    border-bottom: 1px solid #0098FF
}

.nav-tabs > li > a {
    border-radius: 0;
    color: #0098FF;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    cursor: default
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    background-color: #0098FF;
    color: #FFF;
    border-color: #0098FF #0098FF transparent
}

.tab-content {
    margin: 20px 0
}

div.richtext-content-container {
    margin: 20px 0
}

div.richtext-content-container b, div.richtext-content-container strong {
    font-family: DWTheAntiquaBBold, Georgia, serif;
    font-weight: 400;
    color: #3e3e3e
}

div.richtext-content-container em, div.richtext-content-container i {
    font-family: DWTheAntiquaBItalic, Georgia, serif;
    font-weight: 400;
    font-style: normal
}

div.richtext-content-container img ~ p, div.richtext-content-container picture ~ p {
    margin-top: 40px
}

div.richtext-content-container div.tab-wrap {
    margin: 40px 0;
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll
}

@media (min-width: 768px) {
    div.richtext-content-container div.tab-wrap {
        overflow-x: auto
    }
}

div.richtext-content-container div.tab-wrap table td, div.richtext-content-container div.tab-wrap table th {
    padding: 5px 0 15px;
    vertical-align: top;
    border-top: 1px solid #BBB
}

div.richtext-content-container div.tab-wrap table td:first-child, div.richtext-content-container div.tab-wrap table th:first-child {
    padding-right: 10px
}

div.richtext-content-container div.tab-wrap table td:last-child, div.richtext-content-container div.tab-wrap table th:last-child {
    padding-left: 10px
}

div.richtext-content-container div.tab-wrap table {
    border-bottom: 1px solid #BBB
}

div.richtext-content-container div.tab-wrap table td strong, div.richtext-content-container div.tab-wrap table th {
    font-family: DWTheAntiquaBBold, Georgia, serif;
    font-weight: 400;
    color: #3e3e3e
}

div.richtext-content-container div.tab-wrap table {
    font-size: 15px;
    line-height: 25px
}

div.richtext-content-container .jwplayer, div.richtext-content-container img, div.richtext-content-container p, div.richtext-content-container picture, div.richtext-content-container video {
    margin-bottom: 20px
}

div.row.vocabulary div.richtext-content-container .jwplayer, div.row.vocabulary div.richtext-content-container img, div.row.vocabulary div.richtext-content-container p, div.row.vocabulary div.richtext-content-container picture, div.row.vocabulary div.richtext-content-container video {
    margin-bottom: 20px
}

@media (min-width: 768px) {
    div.richtext-content-container div.tab-wrap table {
        font-size: 16px
    }

    div.richtext-content-container .jwplayer, div.richtext-content-container img, div.richtext-content-container p, div.richtext-content-container picture, div.richtext-content-container video {
        margin-bottom: 30px
    }
}

@media (min-width: 992px) {
    div.richtext-content-container div.tab-wrap table {
        font-size: 16px
    }

    div.richtext-content-container div.tab-wrap table td, div.richtext-content-container div.tab-wrap table th {
        padding: 10px 0 20px
    }

    div.richtext-content-container div.tab-wrap table td:first-child, div.richtext-content-container div.tab-wrap table th:first-child {
        padding-right: 20px
    }

    div.richtext-content-container div.tab-wrap table td:last-child, div.richtext-content-container div.tab-wrap table th:last-child {
        padding-left: 20px
    }
}

@media (min-width: 1200px) {
    div.richtext-content-container div.tab-wrap table {
        font-size: 17px
    }

    div.richtext-content-container div.tab-wrap table td, div.richtext-content-container div.tab-wrap table th {
        padding: 15px 0 30px
    }

    div.richtext-content-container .jwplayer, div.richtext-content-container img, div.richtext-content-container p, div.richtext-content-container picture, div.richtext-content-container video {
        margin-bottom: 40px
    }
}

div.richtext-content-container p.grammarLink {
    border-top: 1px solid #BBB;
    padding: 8px 0;
    margin-bottom: 0 !important
}

p.grammarLinkText {
    margin-top: -8px !important
}

p.grammarLinkText {
    margin-bottom: 10px !important
}

p.grammarLinkText:last-child {
    margin-bottom: 30px !important
}

div.grammarOverview div.course-headline-wrapper {
    background-color: #F5F4F2;
    color: #3e3e3e
}

div.grammar-link-list a, div.grammar-list a {
    display: block;
    padding: 20px 40px 20px 20px;
    font-family: DWTheAntiquaB, Georgia, serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px
}

div.grammar-list a {
    font-size: 16px;
    border-bottom: 1px solid #fff
}

div.grammar-list a:after {
    position: absolute;
    top: 22px;
    right: 36px;
    width: 24px;
    height: 20px;
    content: '';
    background: transparent url(../svg/nav-arrow-up.svg) no-repeat top left
}

div.grammar-list a.collapsed:after {
    position: absolute;
    top: 22px;
    right: 36px;
    width: 24px;
    height: 20px;
    content: '';
    background: transparent url(../svg/nav-arrow-down.svg) no-repeat top left
}

div.grammar-list a:hover {
    color: #fff;
    text-decoration: none
}

div.grammar-link-list a:hover {
    color: #3e3e3e;
    text-decoration: none
}

div.grammar-link-list a {
    border-bottom: 1px solid #E6E1DD;
    color: #3e3e3e
}

div.grammar-overview div:nth-last-child(2) a {
    border-bottom: none
}

@media (min-width: 768px) {
    div.grammar-link-list a, div.grammar-list a {
        font-size: 18px;
        line-height: 25px
    }

    div.grammar-list a:after {
        top: 27px;
        right: 40px
    }

    div.grammar-list a.collapsed:after {
        top: 27px;
        right: 40px
    }
}

@media (min-width: 992px) {
    div.grammar-link-list a:hover, div.grammar-list a:hover {
        background-color: #3e3e3e;
        color: #fff;
        text-decoration: none
    }
}

@media (min-width: 1200px) {
    div.section div.row.grammar-list:first-child {
        margin-top: 20px
    }
}

a.audio-link {
    color: #0ff;
    text-decoration: none
}

a.audio-link:before {
    content: ' ';
    display: inline-block;
    background-image: url(../icons/icon-vocabulary-audio.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px;
    height: 15px;
    margin-right: 8px;
    margin-bottom: -2px
}

a.audio-link:hover, a.audio-link:hover em, a.audio-link:hover strong {
    color: #0098FF !important;
    text-decoration: none
}

a.audio-link:hover:before {
    background-image: url(../icons/icon-vocabulary-audio-cyan.svg)
}

a.absolute-fav {
    display: block;
    position: absolute;
    content: ' ';
    width: 40px;
    height: 40px;
    top: 12px;
    right: 10px;
    z-index: 99;
    background-image: url(../svg/icon-vocabulary-star-outline.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat
}

a.absolute-fav.checked {
    background-image: url(../svg/icon-vocabulary-star.svg)
}

div.row.vocabulary {
    position: relative
}

div.row.vocabulary div.col-sm-3 p {
    margin-right: 30px
}

@media (min-width: 768px) {
    a.absolute-fav {
        right: 70px
    }

    div.row.vocabulary div.col-sm-4 p {
        margin-right: 20px
    }

    div.row.vocabulary div.col-sm-3 p {
        margin-right: 0
    }
}

@media (min-width: 992px) {
    a.absolute-fav {
        right: 95px
    }
}

@media (min-width: 1200px) {
    a.absolute-fav {
        right: 212px
    }
}

@media (min-width: 768px) {
    div.section div.row.vocabulary:first-child div[class^=col-] {
        border-top: none
    }
}

div.headline-container.row.voc-start, div.row.voc-start {
    margin-top: 35px;
    margin-bottom: 10px
}

.voc-start div.exercise-headline h2, .voc-start div.exercise-headline p {
    font-size: 16px;
    line-height: 16px;
    margin-top: 0
}

.voc-start div.exercise-headline h2 {
    color: #3e3e3e
}

.voc-start div.exercise-headline p {
    color: #938A7F
}

div.row.voc-button-stack {
    margin-bottom: 10px
}

@media (min-width: 768px) {
    div.headline-container.row.voc-start, div.row.voc-start {
        margin-top: 60px;
        margin-bottom: 20px
    }

    .voc-start div.exercise-headline h2, .voc-start div.exercise-headline p {
        font-size: 18px;
        line-height: 18px
    }

    div.row.voc-button-stack {
        margin-bottom: 20px
    }
}

@media (min-width: 1200px) {
    div.headline-container.row.voc-start, div.row.voc-start {
        margin-top: 40px;
        margin-bottom: 30px
    }

    .voc-start div.exercise-headline h2, .voc-start div.exercise-headline p {
        font-size: 20px;
        line-height: 22px
    }

    div.row.voc-button-stack {
        margin-bottom: 30px
    }
}

div.row.topless {
    margin-top: -70px
}

@media (min-width: 768px) {
    div.row.topless {
        margin-top: -30px
    }
}

@media (min-width: 1200px) {
    div.row.topless {
        margin-top: -20px
    }
}

.exercise-container .bubble.right.audio {
    padding-right: 20px;
    padding-left: 50px
}

.exercise-container .bubble.right:after {
    display: block;
    position: absolute;
    z-index: 10;
    content: '';
    top: 30px;
    top: calc(38%);
    left: auto;
    right: -20px;
    height: 4px;
    width: 0;
    background-color: #0098FF;
    border-top: 20px solid #FFF;
    border-right: none;
    border-left: 20px solid #0098FF
}

.exercise-container .bubble.right.playing:after {
    left: auto;
    right: -20px;
    background-color: #000;
    border-top: 20px solid #FFF;
    border-right: none;
    border-left: 20px solid #000
}

.exercise-container .bubble.right.ending:after {
    left: auto;
    right: -20px;
    background-color: #0098FF;
    border-top: 20px solid #FFF;
    border-right: none;
    border-left: 20px solid #0098FF
}

.exercise-container .bubble.right.audio .exercise-play-audio {
    right: auto;
    left: 18px
}

a.smileys {
    margin-top: 20px;
    margin-bottom: 20px
}

a.smileys:hover circle.dot {
    fill: #0098FF !important
}

a.smileys.fine circle.dot {
    fill: #91B423 !important
}

a.smileys.notsogood circle.dot {
    fill: #E1500F !important
}

.modal .modal-dialog-glossar {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    min-width: 280px
}

.modal .modal-dialog-glossar .m-bubble:after {
    display: block;
    position: absolute;
    z-index: 10;
    content: '';
    bottom: -19px;
    left: 30%;
    height: 4px;
    width: 0;
    background-color: transparent;
    border-top: 20px solid #fff;
    border-right: 20px solid transparent
}

.modal .modal-content {
    position: relative;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 0;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5)
}

.modal.fade .modal-dialog-glossar {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.modal.in .modal-dialog-glossar {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.modal .m-bubble .modal-header {
    padding: 15px 15px 10px
}

.modal .m-bubble .modal-header.no-line {
    border-bottom: none
}

.modal .m-bubble .modal-body {
    padding: 10px 15px 15px
}

.modal .m-bubble .modal-body img {
    margin-bottom: 15px
}

.modal h2.modal-title {
    font-size: 70px;
    line-height: 64px;
    color: #333
}

.modal h4.modal-title {
    color: #000;
    padding-right: 20px
}

.modal h5.modal-title {
    color: #777;
    margin: 3px 0 0;
    font-size: 16px
}

.modal div.modal-body, .modal div.modal-body p {
    font-size: 15px
}

a.glossar-modal {
    outline: 0;
    text-decoration: none;
    border-bottom: 1px dotted #0098FF;
    cursor: help
}

a.glossar-modal:hover {
    text-decoration: none;
    border-bottom: 2px dotted #0098FF
}

a.anlaut-modal {
    outline: 0;
    text-decoration: none;
    border-bottom: 1px solid #E1500F;
    font-weight: 700;
    color: #E1500F;
    cursor: help
}

a.anlaut-modal:hover {
    text-decoration: none;
    border-bottom: 2px solid #E1500F
}

.navbar-header {
    height: 110px;
    position: relative;
    width: 100%;
    padding: 26px 15px
}

.navbar-header a.navbar-brand {
    padding: 0;
    width: 270px;
    margin-left: 25px
}

.navbar-header a.navbar-brand .brand-text {
    color: #0098FF;
    position: absolute;
    top: 50px;
    left: 118px
}

.row-menu .navbar.navbar-static-top {
    background-color: #FFF;
    background-image: none;
    box-shadow: none;
    border: none
}

.row-menu .navbar .navbar-nav.navbar-right {
    margin: 21px 10px 0 0
}

.row-menu .navbar nav.main-nav {
    position: relative
}

.row-menu .navbar nav.main-nav .navbar-toggle {
    z-index: 1;
    display: block;
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 26px;
    margin-bottom: 4px;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0
}

.row-menu .navbar nav.main-nav .navbar-toggle:active .icon-bar, .row-menu .navbar nav.main-nav .navbar-toggle:hover .icon-bar {
    background-color: #FFF
}

.row-menu .navbar nav.main-nav .navbar-toggle:active .close-cross, .row-menu .navbar nav.main-nav .navbar-toggle:hover .close-cross {
    background: url(../svg/nav-cross-lg.svg) no-repeat
}

.row-menu .navbar nav.main-nav .navbar-toggle:focus .icon-bar {
    background-color: #000
}

.row-menu .navbar nav.main-nav .navbar-toggle:focus .close-cross {
    background: url(../svg/nav-cross-black-lg.svg) no-repeat
}

.row-menu .navbar nav.main-nav .navbar-toggle.collapsed .close-cross {
    display: none
}

.row-menu .navbar nav.main-nav .navbar-toggle.collapsed .icon-bar {
    display: block
}

.row-menu .navbar nav.main-nav .navbar-toggle .icon-bar {
    background-color: #FFF;
    width: 21px;
    height: 3px;
    border-radius: 0;
    display: none
}

.row-menu .navbar nav.main-nav .navbar-toggle .close-cross {
    display: block;
    width: 22px;
    height: 21px;
    background: url(../svg/nav-cross-lg.svg) no-repeat;
    margin-top: -2px
}

.row-menu .navbar nav.main-nav div#main-nav {
    position: relative;
    width: 100%;
    height: 85px
}

.row-menu .navbar nav.main-nav div#main-nav ul {
    padding: 20px 4px;
    margin: 0
}

.row-menu .navbar nav.main-nav div#main-nav ul li {
    display: inline;
    padding: 0 10px 0 0;
    line-height: 90px
}

.row-menu .navbar nav.main-nav div#main-nav ul li a {
    font-family: Arial;
    color: #FFF;
    font-size: 23px;
    text-decoration: none;
    text-transform: uppercase;
    opacity: .33;
    font-weight: 600
}

.row-menu .navbar nav.main-nav div#main-nav ul li a:active, .row-menu .navbar nav.main-nav div#main-nav ul li a:hover {
    opacity: 1
}

.row-menu .navbar nav.main-nav div#main-nav ul li a:focus {
    color: #000;
    opacity: 1
}

.row-menu .navbar nav.main-nav div#main-nav ul li a.active {
    opacity: 1
}

.row-menu .navbar nav.main-nav #nav-user-menu {
    border-top: 1px solid #99d7ff;
    width: 400px;
    z-index: 100;
    background-color: #0098ff;
    right: 0;
    box-shadow: 0 9px 10px rgba(0, 0, 0, .4)
}

.row-menu .navbar nav.main-nav #nav-user-menu ul {
    padding: 0;
    margin: 0;
    -webkit-box-shadow: 1px 10px 20px 0 rgba(0, 0, 0, .25);
    -moz-box-shadow: 1px 10px 20px 0 rgba(0, 0, 0, .25);
    box-shadow: 1px 10px 20px 0 rgba(0, 0, 0, .25)
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li {
    display: block;
    padding: 0;
    border-bottom: 1px solid #99d7ff;
    width: 100%
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li:last-child {
    border: none
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li a {
    display: block;
    font-size: 18px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    color: #99d7ff;
    padding: 0 20px
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li a:active, .row-menu .navbar nav.main-nav #nav-user-menu ul li a:focus, .row-menu .navbar nav.main-nav #nav-user-menu ul li a:hover {
    color: #FFF;
    background-color: #000
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li a.course-nav {
    font-family: Helvetica, Arial, sans-serif;
    color: #FFF
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li a span.icon {
    margin-left: 10px;
    margin-top: -1px;
    position: absolute;
    opacity: .7
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li a:hover span.icon {
    opacity: 1
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li #navbar-lang {
    padding: 0;
    margin: 0
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li a {
    cursor: pointer
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li #nav-lang-menu ul.nav.navbar-nav li a span:first-of-type {
    padding: 0 15px
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li #nav-lang-menu ul.nav.navbar-nav li a span:first-of-type.rtl {
    padding-left: 0;
    padding-right: 15px
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li #nav-lang-menu ul.nav.navbar-nav li:first-child {
    border-top: 1px solid #99d7ff
}

.row-menu .navbar nav.main-nav #nav-user-menu ul li #nav-lang-menu ul.nav.navbar-nav .language-tick {
    width: 16px;
    height: 16px
}

@media (max-width: 767px) {
    .row-menu .navbar .navbar-header-mobile {
        height: 60px;
        width: 100%;
        position: relative;
        z-index: 100;
    }

    .row-menu .navbar .navbar-header-mobile a.navbar-brand {
        display: inline-block;
        height: 60px;
        width: 260px;
        font-size: 18px;
        line-height: 20px;
        margin-top: 15px
    }

    .row-menu .navbar .navbar-header-mobile .brand-text-mobile {
        color: #1464A5;
        font-size: 17px;
        margin-top: 24px;
        text-transform: uppercase;
        position: relative;
        text-align: center;
    }

    .row-menu .navbar nav.main-nav {
        margin-bottom: 0
    }

    .row-menu .navbar nav.main-nav .navbar-toggle {
        margin-top: 0;
        top: 60px;
        z-index: 1;
        margin-right: 10px;
    }

    .row-menu .navbar nav.main-nav #nav-user-menu {
        top: 0
    }

    .row-menu .navbar nav.main-nav #nav-user-menu ul {
        width: 100%
    }

    .row-menu .navbar nav.main-nav #nav-user-menu ul li a {
        line-height: 60px;
        font-size: 18px
    }

    .row-menu .navbar .navbar-collapse {
        padding: 60px 0 0 0
    }
}

@media (min-width: 768px) {
    .row-menu .navbar .navbar-header-mobile {
        height: 80px
    }

    .row-menu .navbar nav.main-nav {
        margin-bottom: 80px;
        position: relative
    }

    .row-menu .navbar nav.main-nav #nav-user-menu {
        top: 80px
    }

    .row-menu .navbar nav.main-nav #nav-user-menu ul {
        width: 100%
    }

    .row-menu .navbar nav.main-nav #nav-user-menu ul li a {
        line-height: 85px;
        font-size: 22px
    }

    .row-menu .navbar .navbar-collapse {
        padding: 0
    }
}

@media (max-width: 1200px) {
    .row-menu .navbar {
        margin-bottom: 0;
    }

    .row-menu .navbar .navbar-header-mobile {
        width: 100%;
        position: relative;
        z-index: 100
    }

    .row-menu .navbar .navbar-header-mobile a.navbar-brand {
        display: inline-block;
        width: 260px;
        font-size: 18px;
        line-height: 20px;
        margin: 17px 0 0 30px;
        padding: 0;
        background: url(../svg/dw-logo-mobile.svg);
        width: 40px;
        height: 23px
    }

    .row-menu .navbar .navbar-header-mobile .brand-text-mobile {
        color: #1464A5;
        font-size: 17px;
        text-transform: uppercase;
        position: relative;
        margin: 19px auto 0 auto;
        width: 190px;
    }

    .row-menu .navbar nav.main-nav #nav-user-menu {
        position: relative;
        width: 100%;
        left: 0;
        right: inherit
    }

    .row-menu .navbar nav.main-nav .navbar-toggle {
        padding: 9px 0;
        margin-right: 0;
        position: fixed;
        right: 22px;
        top: 13px;
        z-index: 3000;
    }

    .row-menu .navbar nav.main-nav .navbar-toggle .icon-bar {
        background-color: #032F59;
        width: 14px;
        height: 2px;
        border-radius: 0;
        margin-top: 3px
    }

    .row-menu .navbar nav.main-nav .navbar-toggle .close-cross {
        background-image: url(../svg/nav-cross-xs.svg);
        margin-top: 3px;
        width: 13px;
        height: 12px
    }

    .row-menu .navbar nav.main-nav .navbar-toggle:active .icon-bar, .row-menu .navbar nav.main-nav .navbar-toggle:hover .icon-bar {
        background-color: #032F59
    }

    .row-menu .navbar nav.main-nav .navbar-toggle:active .close-cross, .row-menu .navbar nav.main-nav .navbar-toggle:hover .close-cross {
        background: url(../svg/nav-cross-xs.svg) no-repeat
    }

    .row-menu .navbar nav.main-nav .navbar-toggle:active:focus .icon-bar, .row-menu .navbar nav.main-nav .navbar-toggle:hover:focus .icon-bar {
        background-color: #000
    }

    .row-menu .navbar nav.main-nav .navbar-toggle:active:focus .close-cross, .row-menu .navbar nav.main-nav .navbar-toggle:hover:focus .close-cross {
        background: url(../svg/nav-cross-black-xs.svg) no-repeat
    }

    .row-menu .navbar .navbar-collapse {
        border: none
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .row-menu .navbar .navbar-header-mobile a.navbar-brand {
        background: url(../svg/dw-logo-tablet.svg);
        margin: 24px 0 0 30px;
        width: 54px;
        height: 31px
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .row-menu .navbar .navbar-header-mobile .brand-text-mobile {
        font-size: 27px;
        width: 300px;
        margin: 23px auto 0 auto;
        padding-top: 8px
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .row-menu .navbar nav.main-nav .navbar-toggle {
        padding: 0 0;
        top: 22px;
        margin-right: 22px
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .row-menu .navbar nav.main-nav .navbar-toggle .icon-bar {
        margin-top: 5px;
        width: 21px;
        height: 3px;
        border-radius: 0
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .row-menu .navbar nav.main-nav .navbar-toggle .close-cross {
        background-image: url(../svg/nav-cross-md.svg);
        margin-top: 3px;
        width: 22px;
        height: 21px
    }
}

@media (max-width: 1200px) and (min-width: 768px) {
    .row-menu .navbar nav.main-nav .navbar-toggle:active .icon-bar, .row-menu .navbar nav.main-nav .navbar-toggle:hover .icon-bar {
        background-color: #032F59
    }

    .row-menu .navbar nav.main-nav .navbar-toggle:active .close-cross, .row-menu .navbar nav.main-nav .navbar-toggle:hover .close-cross {
        background: url(../svg/nav-cross-md.svg) no-repeat
    }

    .row-menu .navbar nav.main-nav .navbar-toggle:active:focus .icon-bar, .row-menu .navbar nav.main-nav .navbar-toggle:hover:focus .icon-bar {
        background-color: #000
    }

    .row-menu .navbar nav.main-nav .navbar-toggle:active:focus .close-cross, .row-menu .navbar nav.main-nav .navbar-toggle:hover:focus .close-cross {
        background: url(../svg/nav-cross-black-md.svg) no-repeat
    }
}

@media (min-width: 1200px) {
    header {
        height: 220px;
        margin: 0
    }

    .row-menu .col-xs-12 {
        height: 85px
    }

    .row-menu .navbar {
        height: 200px
    }

    .row-menu .navbar nav.main-nav {
        background-color: #0098FF;
        position: relative;
        top: inherit;
        left: 0;
        right: inherit;
        margin-bottom: 0
    }

    .row-menu .navbar nav.main-nav .navbar-toggle {
        margin-top: 28px
    }

    .row-menu .navbar nav.main-nav #nav-user-menu {
        position: absolute;
        top: 90px
    }

    .row-menu .navbar nav.main-nav #nav-user-menu ul li a {
        line-height: 60px;
        font-size: 18px
    }

    .row-menu .navbar nav.main-nav .navbar-collapse {
        padding: 0
    }
}

@media (min-width: 1200px) {
    div#header-row.lecture-nav {
        margin-bottom: 20px
    }
}

div#header-row div.row-menu div.lecture-nav-container {
    position: relative
}

div#header-row div.row-menu div.lecture-nav-container div.navbar.lecture {
    margin-bottom: 0;
    border: 0;
    position: absolute;
    z-index: 20;
    height: 60px;
    width: 100%
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar.lecture {
        height: 85px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar.lecture .excercise-nav-title {
    color: #FFF;
    text-align: center
}

div#header-row div.row-menu div.lecture-nav-container div.navbar.lecture .excercise-nav-title h1 {
    margin-top: 0;
    line-height: 60px;
    font-size: 18px
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar.lecture .excercise-nav-title h1 {
        line-height: 85px;
        font-size: 25px
    }
}

@media (min-width: 992px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar.lecture .excercise-nav-title h1 {
        line-height: 85px;
        font-size: 25px
    }
}

@media (min-width: 1200px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar.lecture .excercise-nav-title h1 {
        line-height: 85px;
        font-size: 34px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar.lecture .lecture-navbar-nav.navbar-right {
    margin-right: 0;
    position: absolute;
    right: -19px;
    top: 10px
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar.lecture .lecture-navbar-nav.navbar-right {
        right: -10px;
        top: 19px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar div.lecture-title {
    position: absolute;
    color: #fff;
    z-index: 1;
    padding: 0 20px
}

div#header-row div.row-menu div.lecture-nav-container div.navbar div.lecture-title h1 {
    margin-top: 0;
    line-height: 85px
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav {
    background-color: #F08C00;
    height: 60px;
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav {
        height: 85px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle {
    z-index: 1;
    display: block;
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 23px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    color: #FFF
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle:focus.collapsed .toggle-icon-container .icon-bar {
    background-color: #000
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle:focus .icon-close-cross {
    background: url(../svg/nav-cross-black-lg.svg) no-repeat
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle {
        margin-right: 35px
    }
}

@media (min-width: 1200px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle {
        margin-right: 27px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle .toggle-icon-container {
    position: relative;
    float: right;
    margin-top: 3px
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle.collapsed .icon-close-cross {
    display: none
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle.collapsed .toggle-icon-container {
    margin: -4px 9px 0 0
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle.collapsed .toggle-icon-container .icon-bar {
    display: block;
    background-color: #FFF;
    width: 14px;
    height: 2px;
    border-radius: 0;
    margin-top: 3px
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle.collapsed .toggle-icon-container .icon-bar {
        margin-top: 5px;
        width: 21px;
        height: 3px;
        border-radius: 0
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle .icon-bar {
    background-color: #FFF;
    width: 21px;
    height: 3px;
    border-radius: 0;
    display: none
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle .icon-close-cross {
    display: block;
    width: 15px;
    height: 15px;
    background: url(../svg/nav-cross-lg.svg) no-repeat;
    background-size: cover;
    margin-top: -7px;
    margin-right: 8px
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle .icon-close-cross {
        margin-top: -7px;
        width: 22px;
        height: 21px;
        margin-right: 8px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle span.title {
    display: none;
    position: absolute;
    top: -3px;
    right: 50px;
    width: 150px
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav .navbar-toggle span.title:hover {
    opacity: 1
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu {
    border-top: 1px solid #fff;
    z-index: 1;
    background-color: #F08C00;
    margin: -15px 0 0 0;
    position: absolute;
    right: 0;
    top: 75px;
    text-align: center;
    width: 100%;
    box-shadow: 0 9px 10px rgba(0, 0, 0, .4)
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu {
        top: 100px
    }
}

@media (min-width: 1200px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu {
        width: 400px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul {
    padding: 0;
    margin: 0;
    -webkit-box-shadow: 1px 10px 20px 0 rgba(0, 0, 0, .25);
    -moz-box-shadow: 1px 10px 20px 0 rgba(0, 0, 0, .25);
    box-shadow: 1px 10px 20px 0 rgba(0, 0, 0, .25);
    width: 100%
}

@media (min-width: 1200px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul {
        width: 400px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li {
    position: relative;
    display: inline;
    padding: 0;
    border-bottom: 1px solid #fff;
    width: 100%;
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li:last-child {
    border: none
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li a {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #FFF;
    font-size: 17px;
    padding: 20px;
    text-decoration: none
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li a:active, div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li a:focus, div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li a:hover {
    background-color: #bf6f00
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li a:focus {
    background-color: #000
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li a {
        font-size: 21px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li a span {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    display: block;
    padding: 5px 0;
    font-size: 14px
}

@media (min-width: 768px) {
    div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li a span {
        font-size: 17px
    }
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li .progress-icon {
    display: none;
    position: absolute;
    right: 40px;
    top: 30px
}

div#header-row div.row-menu div.lecture-nav-container div.navbar nav.lecture-nav div#lecture-nav-user-menu ul li .progress-icon.half {
    right: 50px
}

div#page-header-container {
    background-color: #F08C00;
    position: relative;
    text-align: center;
    color: #FFF;
    height: 65px
}

@media (min-width: 1200px) {
    div#page-header-container {
        margin-bottom: 20px
    }
}

div#page-header-container h1 {
    line-height: 65px;
    margin: 0
}

@media (min-width: 992px) {
    div#page-header-container {
        height: 85px
    }

    div#page-header-container h1 {
        line-height: 85px;
        margin: 0
    }
}

div.input-header-video {
    position: relative
}

div.input-header-video div.video-overlay {
    opacity: 1;
    color: #FFF;
    cursor: pointer;
    position: absolute;
    background: url(../svg/playIcon.svg) no-repeat center center rgba(0, 0, 0, .3);
    width: 100%;
    height: 100%;
    z-index: 1
}

div.input-header-video div.video-overlay p {
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    bottom: 30%;
    margin: 0 auto;
    width: 100%
}

div.input-header-video div.video-overlay:focus, div.input-header-video div.video-overlay:hover {
    opacity: .75
}

div.input-header-video img {
    width: 100%;
    height: auto
}

div.input-header-img {
    width: 100%
}

div.input-header-img img {
    width: 100%;
    height: auto
}

div.input-header-img div.input-header-img-content {
    color: #fff;
    position: absolute;
    padding: 20px
}

div.input-header-img div.input-header-img-content h1 {
    margin-top: 0;
    font-size: 40px
}

div.input-header-img div.input-header-img-content p {
    font-size: 17px
}

div.input-header-audio {
    position: relative
}

div.input-header-audio div.audio-overlay {
    opacity: 1;
    cursor: pointer;
    position: absolute;
    color: #FFF;
    background: url(../svg/playIcon-audio.svg) no-repeat center center rgba(0, 0, 0, .25);
    width: 100%;
    height: 100%;
    z-index: 1
}

div.input-header-audio div.audio-overlay p {
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    bottom: 30%;
    margin: 0 auto;
    width: 100%
}

div.input-header-audio div.audio-overlay:focus, div.input-header-audio div.audio-overlay:hover {
    background: url(../svg/playIcon-audio.svg) no-repeat center center rgba(0, 0, 0, .5)
}

div.input-header-audio img.cover {
    position: relative;
    width: 100%
}

div.input-header-audio audio {
    position: relative;
    width: 100%;
    z-index: 2
}

div.main-footer {
    width: 100%;
    margin: 1px 0 0;
    line-height: 45px;
    color: #FFF
}

@media (min-width: 768px) {
    div.main-footer {
        line-height: 90px;
        height: 90px
    }
}

@media (min-width: 1200px) {
    div.main-footer {
        margin: 20px 0
    }
}

div.main-footer ul {
    margin: 0;
    padding: 10px 12px;
    text-align: center
}

@media (min-width: 768px) {
    div.main-footer ul {
        padding: 0 12px;
    }
}

div.main-footer ul li {
    display: inline-block;
    list-style-type: none;
    margin-right: 12px
}

div.main-footer ul li a:active, div.main-footer ul li a:focus, div.main-footer ul li a:hover {
    color: #FFF;
    text-decoration: none
}

div.main-footer ul li .text, div.main-footer ul li a {
    color: #99d7ff;
    font-size: 14px
}

@media (min-width: 768px) {
    div.main-footer ul li .text, div.main-footer ul li a {
        font-size: 15px
    }
}

div.main-footer ul li.coop span {
    padding-right: 20px
}

div.main-footer ul li.coop a img {
    opacity: .5
}

div.main-footer ul li.coop a:hover img {
    opacity: 1
}

@media (min-width: 768px) {
    div.main-footer ul li.coop {
        float: right
    }
}

.footer-gradient {
    background: #1b9efd
}

@media (min-width: 1200px) {
    .footer-gradient {
        background: #1b9efd;
        background: -moz-linear-gradient(top, #1b9efd 0, #0e62c1 100%);
        background: -webkit-linear-gradient(top, #1b9efd 0, #0e62c1 100%);
        background: linear-gradient(to bottom, #1b9efd 0, #0e62c1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b9efd', endColorstr='#0e62c1', GradientType=0)
    }
}

@media (max-width: 767px) {
    div.g-recaptcha iframe {
        transform: scale(.96);
        transform-origin: 0 0
    }
}

span.twitter-typeahead {
    width: 100%
}

span.twitter-typeahead input[type=search].tt-input {
    background-image: url(../svg/icon-lupe.svg);
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-right: 44px;
    background-position: 93% 14px
}

@media (min-width: 768px) {
    span.twitter-typeahead input[type=search].tt-input {
        background-position: 97% 14px
    }
}

@media (min-width: 992px) {
    span.twitter-typeahead input[type=search].tt-input {
        background-position: 98% 14px
    }
}

span.twitter-typeahead .input-lg {
    padding-left: 20px
}

div.tt-menu {
    position: absolute;
    top: auto;
    left: 0;
    width: 100%;
    background-color: #FFF;
    border-left: 1px solid #BBB;
    border-right: 1px solid #BBB;
    font-family: DWTheAntiquaB, Georgia, serif;
    font-weight: 400;
    z-index: 1001;
    padding-left: 0
}

.tt-suggestion {
    display: block;
    width: 100%;
    margin-bottom: 0;
    padding: 20px;
    font-family: DWTheAntiquaB, Georgia, serif;
    font-weight: 400;
    color: #666;
    text-decoration: none;
    border-bottom: 1px solid #BBB
}

.tt-suggestion em, .tt-suggestion span.hilite, .tt-suggestion strong {
    font-family: DWTheAntiquaBBold, Georgia, serif;
    font-weight: 400;
    color: #000
}

.tt-suggestion.tt-cursor, .tt-suggestion:hover {
    background-color: #F5F4F2
}

.tt-suggestion strong {
    color: inherit
}

.progress-icon {
    position: relative;
}

.progress-icon.half {
    background-color: #FFF;
    height: 16px;
    width: 8px;
    margin-right: 8px;
    border-radius: 16px 0 0 16px
}

.progress-icon.half:after {
    content: "";
    background-color: transparent;
    border: 2px solid #FFF;
    height: 16px;
    width: 16px;
    position: absolute;
    border-radius: 16px
}

.progress-icon.full {
    background-color: #FFF;
    height: 16px;
    width: 16px;
    border-radius: 16px
}

.progress-icon.none {
    background-color: transparent;
    border: 2px solid #FFF;
    height: 16px;
    width: 16px;
    border-radius: 16px
}

.progress-icon.gray {
    background-color: #BBB
}

.progress-icon.gray:after {
    border-color: #BBB
}

.progress-icon.gray.none {
    background-color: transparent;
    border-color: #BBB
}

.progress-icon.good {
    background-color: transparent;
    border: none;
    height: 20px;
    width: 20px;
    background: url(../svg/star-white.svg) top left no-repeat
}

.progress-icon.cert {
    background-color: transparent;
    border: none;
    width: 16px;
    height: 24px;
    background: url(../svg/icon-course-cert-gray.svg) top left no-repeat
}

.progress-icon.gray.good {
    background: url(../svg/star-gray.svg) top left no-repeat
}

.progress-icon.black.good {
    background: url(../svg/star.svg) top left no-repeat
}

.progress-icon.black.cert {
    background: url(../svg/icon-course-cert-k.svg) top left no-repeat
}

a.audio-example h4.modal-title {
    background-image: url(../svg/icon-bubble-answer-3e.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position-y: 4px;
    text-indent: 24px
}

a.audio-example h2 {
    background-image: url(../svg/icon-bubble-answer-3e.svg);
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position-y: 3px;
    text-indent: 27px;
    text-decoration: none;
    color: #3e3e3e
}

a.audio-example:hover h2 {
    background-image: url(../svg/icon-bubble-answer-audio.svg);
    text-decoration: underline;
    color: #0098ff
}

p a.audio-example {
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position-x: 4px;
    background-position-y: 3px;
    text-decoration: none
}

@media (min-width: 768px) {
    p a.audio-example {
        background-size: 15px 15px;
        background-position-x: 7px;
        background-position-y: 3px;
    }
}

@media (min-width: 992px) {
    p a.audio-example {
        background-size: 15px 15px;
        background-position-x: 7px;
        background-position-y: 4px;
    }
}

@media (min-width: 1200px) {
    p a.audio-example {
        background-size: 17px 17px;
        background-position-x: 6px;
        background-position-y: 4px;
    }
}

p a.audio-example:hover {
    text-decoration: none;
    border-bottom: 2px dotted #0098FF
}

.container {
    width: 100%
}

@media (min-width: 768px) {
    .container {
        width: 100%;
        margin: 0 auto
    }
}

@media (min-width: 992px) {
    .container {
        width: 100%
    }
}

@media (min-width: 1200px) {
    .container {
        margin-right: auto;
        margin-left: auto;
        padding-left: 20px;
        padding-right: 20px;
        width: 1240px
    }
}

.container.page-container {
    background: #FFF;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden
}

@media (min-width: 1200px) {
    .container.page-container {
        background: #FFF;
        margin: 40px auto;
        padding: 0 20px;
        min-height: 600px
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .container.page-container {
        min-height: 600px
    }
}

@media (max-width: 991px) {
    .container.page-container {
        min-height: 500px
    }
}

.row {
    margin-left: -20px;
    margin-right: -20px
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-left: 20px;
    padding-right: 20px
}

body {
    background: #FFF
}

@media (min-width: 1200px) {
    body {
        background: url(../images/bg-dw-desktop.jpg) center top no-repeat #f5f4f2;
        width: 100%;
        clear: both;
        padding-bottom: 30px
    }
}

.section.exercise-container {
    padding: 0 20px
}

@media (min-width: 768px) {
    .section.exercise-container {
        padding: 0
    }
}

.section.exercise-container.grid .row {
    border-bottom: 1px solid #fff;
    margin-bottom: 20px
}

.section.exercise-container.grid .row [class*=col-] {
    background-color: #F08C00;
    height: 40px;
    border-right: 1px solid #fff
}

.section.exercise-container.template {
    padding: 20px;
    font-size: 20px;
    line-height: 36px
}

.valign-wrapper {
    display: flex;
    align-items: center
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: middle
}

.template .section.grid .row {
    border-bottom: 1px solid #fff;
    margin-bottom: 20px
}

.template .section.grid .row [class*=col-] {
    background-color: #F08C00;
    height: 40px;
    border-right: 1px solid #fff
}

.padding-right {
    padding-right: 0 !important
}

@media (min-width: 1200px) {
    .padding-right {
        padding-right: 20px !important
    }
}

.padding-left {
    padding-left: 0 !important
}

@media (min-width: 1200px) {
    .padding-left {
        padding-left: 20px !important
    }
}

.padding {
    padding-left: 0 !important;
    padding-right: 0 !important
}

@media (min-width: 1200px) {
    .padding {
        padding-left: 20px !important;
        padding-right: 20px !important
    }
}

.padding-right-none {
    padding-right: 0 !important
}

@media (min-width: 1200px) {
    .padding-right-none {
        padding-right: 0 !important
    }
}

.padding-left-none {
    padding-left: 0 !important
}

@media (min-width: 1200px) {
    .padding-left-none {
        padding-left: 0 !important
    }
}

.padding-none {
    padding-left: 0 !important;
    padding-right: 0 !important
}

@media (min-width: 1200px) {
    .padding-none {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
}

.breakpoint-indicator {
    bottom: 50px;
    left: 0;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: -1
}

.breakpoint-indicator span {
    display: none
}

@media (max-width: 767px) {
    .breakpoint-indicator span.screen-xs {
        display: block
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .breakpoint-indicator span.screen-sm {
        display: block
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .breakpoint-indicator span.screen-md {
        display: block
    }
}

@media (min-width: 1200px) {
    .breakpoint-indicator span.screen-lg {
        display: block
    }
}

.background-container {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover
}

.collapse.in {
    overflow: hidden
}

div#bpIndicator {
    position: fixed;
    top: 0;
    left: 10vw;
    z-index: 9999;
    padding: 6px 10px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #fff;
    font: 14px/14px Helvetica, Arial, sans-serif;
    background-color: rgba(123, 96, 229, .85)
}

.img-responsive {
    width: 100%;
    height: auto
}

.keyboard-opener {
    display: none
}

@media (min-width: 992px) {
    .keyboard-opener {
        display: inline;
        margin: 0 10px 0 -5px
    }
}

.keyboard-opener.textarea {
    display: none
}

@media (min-width: 992px) {
    .keyboard-opener.textarea {
        display: inline;
        margin: 10px 0 0 0;
        float: right
    }
}

div.main-course-overview-container {
    position: relative;
    text-align: center;
    height: 800px
}

div.main-course-overview-container .main-course-overview a.main-course-container {
    text-decoration: none;
    color: #FFF
}

div.main-course-overview-container .main-course-overview a.main-course-container:active, div.main-course-overview-container .main-course-overview a.main-course-container:focus, div.main-course-overview-container .main-course-overview a.main-course-container:hover {
    color: rgba(255, 255, 255, .75)
}

div.main-course-overview-container div.main-course-overview-title {
    color: #FFF;
    margin: 20px 0 20px 0
}

@media (min-width: 768px) {
    div.main-course-overview-container div.main-course-overview-title {
        margin: 40px 0 40px 0
    }
}

@media (min-width: 992px) {
    div.main-course-overview-container div.main-course-overview-title {
        margin: 80px 0 80px 0
    }
}

@media (min-width: 1200px) {
    div.main-course-overview-container div.main-course-overview-title {
        margin: 220px 0 0 0
    }
}

div.main-course-overview-container div.main-course-overview-title h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-top: 0
}

div.main-course-overview-container div.main-course-overview-title p {
    font-family: Helvetica, Arial, sans-serif
}

div.respHeaderImgContainer {
    display: block;
    width: 100%;
    height: 240px;
    position: relative;
    background-color: rgba(128, 128, 128, .75);
    color: #fff;
    overflow: hidden
}

@media screen and (min-width: 768px) {
    div.respHeaderImgContainer {
        height: 320px
    }
}

.respHeaderImgContainer .course-headline-wrapper {
    width: 100%;
    position: absolute;
    bottom: 0;
    margin-bottom: 15px;
    left: 0;
    z-index: 2
}

@media screen and (max-width: 439px) {
    .respHeaderImgContainer img {
        height: 100%;
        width: inherit;
        max-width: none;
        border-color: transparent
    }
}

.respHeaderImgContainer img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1
}

.course-headline h1, .course-headline p {
    font-family: DWTheAntiquaB, Georgia, serif;
    font-weight: 400;
    margin: 0
}

.course-headline h1 {
    margin-bottom: 20px
}

.course-headline span {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    opacity: .5;
    filter: alpha(opacity=50)
}

@media (min-width: 768px) {
    .course-headline {
        height: 280px
    }

    .course-headline h1 {
        margin-bottom: 90px
    }
}

@media (min-width: 1200px) {
    .course-headline {
        height: 300px
    }
}

.course-headline .course-headline-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.course-headline .course-headline-wrapper div[class^=col-]:first-child {
    position: absolute;
    top: 90px
}

.course-headline .course-headline-wrapper div[class^=col-]:first-child h1 {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis
}

.course-headline .course-headline-wrapper div[class^=col-]:last-child {
    position: absolute;
    bottom: 14px
}

@media (min-width: 768px) {
    .course-headline .course-headline-wrapper div[class^=col-]:first-child h1 {
        white-space: normal;
        overflow-x: auto;
        overflow-y: hidden
    }

    .course-headline .course-headline-wrapper div[class^=col-]:first-child {
        position: absolute;
        top: 130px
    }
}

.course-list {
    background-color: #F5F4F2;
    margin: 0;
    overflow: hidden
}

@media (min-width: 1200px) {
    .course-list > [class*=col-]:nth-child(2n) {
        background-color: #fff
    }
}

.course-list .row {
    border-top: 1px solid rgba(128, 128, 128, .5)
}

.course-list .row h2 {
    color: #4A4A4A;
    padding: 50px 30px 60px 20px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 23px
}

.course-list .row h2 span {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    opacity: .5;
    filter: alpha(opacity=50)
}

@media (max-width: 1199px) {
    .course-list .row h2 {
        padding: 15px 40px 25px 20px
    }

    .course-list .row h2:after {
        position: absolute;
        right: 20px;
        width: 24px;
        height: 20px;
        content: '';
        background: transparent url(../svg/nav-arrow-up-black.svg) no-repeat top left
    }
}

.course-list .row a {
    display: block;
    text-decoration: none;
    color: inherit
}

@media (max-width: 1199px) {
    .course-list .row a.collapsed h2:after {
        position: absolute;
        right: 20px;
        width: 24px;
        height: 20px;
        content: '';
        background: transparent url(../svg/nav-arrow-down-black.svg) no-repeat top left
    }
}

.course-list .row h3 {
    font-family: DWTheAntiquaBBold, Georgia-Bold, serif;
    color: #3e3e3e;
    font-size: 17px;
    line-height: 24px;
    margin-top: 11px;
    margin-bottom: 3px;
    padding-left: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 260px
}

@media (min-width: 768px) {
    .course-list .row h3 {
        width: 75%
    }
}

@media (min-width: 1200px) {
    .course-list .row h3 {
        width: 250px
    }
}

.course-list .row p {
    color: #9B9B9B;
    font-size: 14px;
    line-height: 21px
}

.course-list .row p span {
    display: block
}

@media (min-width: 768px) {
    .course-list .row p span {
        display: inline-block
    }
}

.course-list .row p span strong {
    color: rgba(0, 0, 0, .7)
}

@media (min-width: 1200px) {
    .course-list .row p span strong {
        color: inherit
    }
}

.course-list .row p span.title {
    font-family: DWTheAntiquaB, Georgia, serif;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-y: hidden
}

.course-list .row p span.desciption {
    font-family: DWTheAntiquaB, Georgia, serif;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.course-list .row p span.desciption, .course-list .row p span.headline, .course-list .row p span.title {
    overflow: hidden;
    width: calc(100vw - 80px)
}

@media (min-width: 1200px) {
    .course-list .row p span.desciption, .course-list .row p span.headline, .course-list .row p span.title {
        width: 230px
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .course-list .row p span.desciption, .course-list .row p span.title {
        text-overflow: inherit;
        overflow: inherit
    }
}

.course-list .row .progress-icon {
    float: right;
    margin-right: 20px
}

.course-list .row .progress-icon.half {
    margin-right: 30px
}

.course-list .row + .row {
    border-top: none
}

.course-list .row + .row [class*=col-] {
    display: table;
    width: 100%;
    height: 102px;
    border-top: 1px solid rgba(128, 128, 128, .5)
}

.course-list .row + .row a {
    display: block;
    height: 90px;
    text-decoration: none;
    color: inherit
}

.course-list .row + .row img {
    width: 90px
}

.course-list .row + .row p {
    padding-top: 0;
    padding-left: 20px;
    width: 100%
}

.course-list .row + .row .progress-icon {
    margin-top: -22px
}

.course-list .row + .row img, .course-list .row + .row p {
    vertical-align: top;
    display: table-cell
}

.course-list .row [class*=col-] {
    padding: 0
}

.course-list [class*=col-] > .row:first-child {
    background-color: #FFF
}

.course-list:after {
    width: 100%;
    height: 1px;
    border-top: 1px solid rgba(128, 128, 128, .5)
}

.course {
    margin: 0
}

.course-lead {
    border-top: 1px solid rgba(128, 128, 128, .5);
    margin: 0;
    padding: 0 20px 60px
}

@media (min-width: 768px) {
    .course-lead {
        padding: 15px 20px 25px
    }
}

@media (min-width: 992px) {
    .course-lead {
        padding: 50px 20px 60px
    }
}

.course-lead a h2 {
    color: #000
}

.course-lead a:active, .course-lead a:hover, .course-lead a:visited {
    text-decoration: none;
    outline: none transparent
}

.course-lead h2 {
    font-size: 22px;
    line-height: 23px
}

@media (max-width: 767px) {
    .course-lead h2 {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        margin-right: 30px
    }
}

.course-lead h2.nav-arrow:after {
    position: absolute;
    top: 28px;
    right: 20px;
    width: 24px;
    height: 20px;
    content: '';
    background: transparent url(../svg/nav-arrow-up-black.svg) no-repeat top left
}

@media (min-width: 768px) {
    .course-lead h2.nav-arrow:after {
        top: 42px
    }
}

@media (min-width: 992px) {
    .course-lead h2.nav-arrow:after {
        top: 78px
    }
}

.course-lead h2.nav-arrow.mump:after {
    background: transparent url(../svg/nav-arrow-down-black.svg) no-repeat top left
}

.course-lead h2 span {
    opacity: .5
}

.course-lead a.nav-arrow {
    z-index: 1;
    position: absolute;
    top: 28px;
    right: 20px;
    width: 24px;
    height: 20px;
    content: '';
    background: transparent url(../svg/nav-arrow-up-black.svg) no-repeat top left
}

@media (min-width: 768px) {
    .course-lead a.nav-arrow {
        top: 42px
    }
}

@media (min-width: 992px) {
    .course-lead a.nav-arrow {
        top: 78px
    }
}

.course-lead a.nav-arrow.collapsed {
    background: transparent url(../svg/nav-arrow-down-black.svg) no-repeat top left
}

.course-reset {
    position: absolute;
    top: 55px;
    right: 15px;
    z-index: 10;
    color: #fff;
    background-color: #bbb;
    padding-bottom: 2px
}

@media (min-width: 768px) {
    .course-reset {
        top: 46px;
        right: 53px
    }
}

@media (min-width: 992px) {
    .course-reset {
        top: 55px;
        right: 20px
    }
}

.course-lead .course-reset {
    position: absolute;
    top: 60px;
    left: 20px;
    right: inherit;
    z-index: 30;
    color: #fff;
    background-color: #bbb;
    padding-bottom: 6px
}

@media (min-width: 768px) {
    .course-lead .course-reset {
        top: 31px;
        left: inherit;
        right: 150px
    }
}

@media (min-width: 992px) {
    .course-lead .course-reset {
        top: 68px;
        left: inherit;
        right: 150px
    }
}

.course-lead .course-certificate {
    position: absolute;
    top: 67px;
    left: 90px;
    right: inherit;
    z-index: 40;
    color: #bbb;
    background-color: transparent;
    padding-bottom: 6px
}

@media (max-width: 767px) {
    .course-lead .course-certificate .progress-icon.gray.half {
        position: absolute;
        right: -50px
    }
}

@media (min-width: 768px) {
    .course-lead .course-certificate {
        top: 37px;
        left: inherit;
        right: 80px
    }
}

@media (min-width: 992px) {
    .course-lead .course-certificate {
        top: 73px;
        left: inherit;
        right: 90px
    }
}

.course-lead-overview {
    border-top: none;
    padding: 30px 20px
}

.course-lead-overview .course-reset {
    top: 15px;
    left: inherit;
    right: 80px
}

.course-lead-overview .course-certificate {
    top: 23px;
    left: inherit;
    right: 45px
}

.course-score {
    position: absolute;
    top: 33px;
    right: 15px;
    z-index: 20;
    font-size: 14px;
    color: #aaa
}

@media (min-width: 768px) {
    .course-score {
        top: 14px;
        right: 56px
    }
}

@media (min-width: 992px) {
    .course-score {
        top: 33px;
        right: 20px
    }
}

.course-score .low {
    color: #BE232D
}

.course-score .mid {
    color: #666
}

.course-score .good {
    color: #82B905
}

.learn-status .hide {
    display: none
}

.learn-status .row p span.desciption, .learn-status .row p span.headline, .learn-status .row p span.title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100vw - 90px)
}

@media (min-width: 1200px) {
    .learn-status .row p span.desciption, .learn-status .row p span.headline, .learn-status .row p span.title {
        width: 210px
    }
}

div.main-info-content {
    padding: 10% 5%;
    font-family: DWTheAntiquaB;
    background-color: #F4F3F1
}

@media (min-width: 1200px) {
    div.main-info-content {
        padding: 10% 20%
    }
}

div.main-info-content h2 {
    font-size: 30px;
    line-height: 1.1em;
    margin-top: 0;
    margin-bottom: 1em
}

div.main-info-content p {
    color: #4A4A4A
}

div.main-info-content p b, div.main-info-content p strong {
    font-family: DWTheAntiquaBBold, Georgia, serif;
    font-weight: 400;
    color: #3e3e3e
}

div.main-info-content p em, div.main-info-content p i {
    font-family: DWTheAntiquaBItalic, Georgia, serif;
    font-weight: 400;
    font-style: normal
}

div.start-lecture {
    text-align: center;
    margin: 70px 0 50px
}

div.lecture-nav-header {
    background: #F08C00;
    color: #FFF;
    height: 85px;
    padding: 10px
}

div.lecture-nav-header h1 {
    margin: 0
}

div.section.vocabulary {
    background-color: #F4F3F1
}

div.section.vocabulary.copy {
    font-family: DWTheAntiquaB, serif
}

div.row.vocabulary {
    margin-bottom: 0;
    color: #666
}

.vocabulary-entry:first-child {
    border-top: 1px solid #BBB
}

.vocabulary-entry:first-child .richtext-content-container p strong {
    font-family: DWTheAntiquaBBold, Georgia, serif;
    font-weight: 400;
    font-size: 105%;
    color: #3e3e3e
}

@media (min-width: 768px) {
    .vocabulary-entry {
        border-top: 1px solid #BBB
    }
}

.richtext-content-container:empty {
    margin-top: -20px
}

div.row.vocabulary.list-end {
    margin-bottom: 20px
}

.exercise-headline.standalone {
    margin-top: -10px
}

.exercise-headline.standalone p {
    margin-bottom: 0
}

@media (min-width: 768px) {
    .exercise-headline.standalone {
        margin-top: 30px
    }

    .exercise-headline.standalone p {
        margin-bottom: 10px
    }
}

@media (min-width: 1200px) {
    .exercise-headline.standalone {
        margin-top: 50px
    }

    .exercise-headline.standalone p {
        margin-bottom: 20px
    }
}

.result-headline {
    padding: 60px 30px;
    text-align: center
}

.result-headline h1 {
    font-size: 70px;
    line-height: 70px;
    margin: 0
}

.result-headline p {
    font-size: 18px;
    line-height: 25px;
    margin: 0
}

@media (min-width: 992px) {
    .result-headline h1 {
        font-size: 90px;
        line-height: 90px
    }
}

.result-headline.score {
    background-color: #A9A094;
    color: #fff
}

.result-headline.recommendation {
    background-color: #F5F4F2;
    color: #3e3e3e
}

@media (max-width: 767px) {
    .main-course[class*=assess] {
        height: 180px
    }

    .main-course[class*=assess] h2 {
        font-size: 36px;
        line-height: 40px;
        display: inline;
        float: initial;
        width: auto;
        margin: 0
    }

    .main-course[class*=assess] p {
        max-width: 100%;
        max-height: 100%;
        overflow: visible;
        opacity: 1
    }
}

.row.breakout {
    margin-left: -40px;
    margin-right: -40px
}

@media (min-width: 768px) {
    .row.breakout {
        margin-left: -20px;
        margin-right: -20px
    }
}

div.section.vocabulary.alphabet {
    background-color: #fff
}

div.section.vocabulary.alphabet .row.vocabulary p {
    text-align: center
}

.row.alphabet-not-visited {
    opacity: .33
}

h2.konsonant, h2.vokal {
    text-align: center;
    font-size: 60px;
    line-height: 60px
}

@media (min-width: 768px) {
    h2.konsonant, h2.vokal {
        font-size: 65px;
        line-height: 60px
    }
}

@media (min-width: 992px) {
    h2.konsonant, h2.vokal {
        font-size: 70px;
        line-height: 70px
    }
}

@media (min-width: 1200px) {
    h2.konsonant, h2.vokal {
        font-size: 80px;
        line-height: 80px
    }
}

h2.konsonant {
    color: #1464A5
}

h2.vokal {
    color: #E1500F
}

.exercise-questions.inactive {
    opacity: 1
}

.exercise-questions .inactive {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .65 !important;
    filter: alpha(opacity=65) !important;
    -webkit-box-shadow: none;
    box-shadow: none
}

.exercise-questions .dropwdowns-inline p:not(:first-child) {
    display: inline
}

.lecture-exercise-nav .lecture-nav-container {
    background-color: #F08C00
}

.exercise-input-container {
    margin: 0
}

@media (min-width: 992px) {
    .exercise-input-container {
        margin: 0 -40px
    }
}

.exercise-container[data-type=trainer-1] {
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.exercise-container[data-type=trainer-1] [data-for-step] {
    display: none
}

.exercise-container[data-type=trainer-1] [data-for-step].active {
    display: block
}

.exercise-container[data-type=trainer-1] .bubble .hint {
    display: block;
    font-size: 80%;
    font-style: italic
}

.exercise-container[data-type=trainer-1] .audio.disabled {
    cursor: default;
    padding-left: 20px;
    text-decoration: none
}

.exercise-container[data-type=trainer-1] .audio.disabled .exercise-play-audio {
    display: none
}

.exercise-container[data-type=trainer-1] .answer-multiple-text:hover:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    border-left-color: #0098FF
}

.exercise-container[data-type=trainer-1] a.smileys {
    display: block;
    float: none
}

.exercise-container[data-type=trainer-1].ready {
    opacity: 1
}

.exercise-container[data-type=trainer-1].busy {
    opacity: 0
}

.exercise-container[data-type=trainer-1].ok a.smileys[data-is-correct="1"] circle.dot {
    fill: #91B423 !important
}

.exercise-container[data-type=trainer-1].not-ok a.smileys[data-is-correct="0"] circle.dot {
    fill: #E1500F !important
}

.exercise-container .headline-container.row {
    margin-bottom: 60px
}

.exercise-container .headline-container.row.textOnlyIntro {
    margin-top: 60px;
    margin-bottom: 10px
}

.exercise-container .question-row, .exercise-container .row {
    margin-top: 0;
    margin-bottom: 50px
}

.exercise-container .row.noVMargins, .exercise-container .row.noVMargins .row {
    margin-top: 0;
    margin-bottom: 0
}

.exercise-container .exercise-nav {
    width: 100%;
    position: relative;
    text-align: center
}

.exercise-container .exercise-nav a {
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 23px
}

.exercise-container .exercise-nav a.prev-exercise {
    background: url(../svg/arrow-left.svg);
    left: 0
}

.exercise-container .exercise-nav a.prev-exercise:active, .exercise-container .exercise-nav a.prev-exercise:focus, .exercise-container .exercise-nav a.prev-exercise:hover {
    background: url(../svg/arrow-left-hover.svg)
}

.exercise-container .exercise-nav a.next-exercise {
    background: url(../svg/arrow-right.svg);
    right: 0
}

.exercise-container .exercise-nav a.next-exercise:active, .exercise-container .exercise-nav a.next-exercise:focus, .exercise-container .exercise-nav a.next-exercise:hover {
    background: url(../svg/arrow-right-hover.svg)
}

.exercise-container .exercise-nav {
    height: 28px;
    margin: 16px 0
}

.exercise-container .exercise-nav.bottom {
    margin: 0 0 60px
}

.exercise-container .exercise-questions.finished a.answer-link-container {
    pointer-events: none
}

.exercise-container .exercise-questions.finished a.answer-link-container:active .answer, .exercise-container .exercise-questions.finished a.answer-link-container:focus .answer, .exercise-container .exercise-questions.finished a.answer-link-container:hover .answer {
    background-color: #f4f3f1;
    color: #333;
    margin-left: 0
}

.exercise-container .exercise-questions.finished a.answer-link-container:active .answer.answer-text-audio, .exercise-container .exercise-questions.finished a.answer-link-container:active .answer.choice, .exercise-container .exercise-questions.finished a.answer-link-container:active .answer.pronunciation-text-choice, .exercise-container .exercise-questions.finished a.answer-link-container:active .answer.text-choice, .exercise-container .exercise-questions.finished a.answer-link-container:focus .answer.answer-text-audio, .exercise-container .exercise-questions.finished a.answer-link-container:focus .answer.choice, .exercise-container .exercise-questions.finished a.answer-link-container:focus .answer.pronunciation-text-choice, .exercise-container .exercise-questions.finished a.answer-link-container:focus .answer.text-choice, .exercise-container .exercise-questions.finished a.answer-link-container:hover .answer.answer-text-audio, .exercise-container .exercise-questions.finished a.answer-link-container:hover .answer.choice, .exercise-container .exercise-questions.finished a.answer-link-container:hover .answer.pronunciation-text-choice, .exercise-container .exercise-questions.finished a.answer-link-container:hover .answer.text-choice {
    pointer-events: none
}

.exercise-container .exercise-questions.finished .image-choice:active, .exercise-container .exercise-questions.finished .image-choice:focus, .exercise-container .exercise-questions.finished .image-choice:hover {
    border: 5px solid #F5F4F2
}

.exercise-container .exercise-nav-title {
    font-size: 17px;
    line-height: 28px;
    color: #938A7F
}

.exercise-container .exercise-nav-title em {
    font-style: normal
}

.exercise-container .exercise-nav-title span {
    color: #D1C9C2
}

@media (min-width: 768px) {
    .exercise-container .exercise-nav {
        height: 30px;
        margin: 27px 0
    }

    .exercise-container .exercise-nav-title {
        font-size: 21px;
        line-height: 30px
    }
}

@media (min-width: 992px) {
    .exercise-container .exercise-nav {
        height: 30px;
        margin: 30px 0
    }

    .exercise-container .exercise-nav-title {
        font-size: 24px;
        line-height: 30px
    }
}

@media (min-width: 1200px) {
    .exercise-container .exercise-nav {
        height: 30px;
        margin: 50px 0
    }
}

.exercise-container .exercise-content [class*=col-] {
    padding-left: 0;
    padding-right: 0
}

@media (min-width: 992px) {
    .exercise-container .exercise-content [class*=col-] {
        padding-left: 20px;
        padding-right: 20px
    }
}

.exercise-container .answer, .exercise-container .bubble {
    position: relative;
    padding: 20px;
    margin-bottom: 30px
}

@media (min-width: 768px) {
    .exercise-container .answer, .exercise-container .bubble {
        margin-bottom: 0
    }
}

.exercise-container .bubble {
    background-color: #0098FF;
    color: #fff;
    margin-right: 0;
    display: block
}

.exercise-container .bubble:after {
    display: block;
    position: absolute;
    z-index: 10;
    content: '';
    top: 30px;
    top: calc(38%);
    left: -20px;
    height: 4px;
    width: 0;
    background-color: #0098FF;
    border-top: 20px solid #FFF;
    border-right: 20px solid #0098FF
}

.exercise-container .bubble.audio {
    cursor: pointer;
    min-height: 61px;
    position: relative;
    padding-right: 50px
}

.exercise-container .bubble.audio:focus {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #99d7ff
}

.exercise-container .bubble.audio:focus:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    border-right: 20px solid #000
}

.exercise-container .bubble.audio.playing {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #000
}

.exercise-container .bubble.audio.playing:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    border-right: 20px solid #000
}

.exercise-container .bubble.audio.ending {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #0098FF;
    border-right-color: #0098FF
}

.exercise-container .bubble.audio.ending:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    border-right: 20px solid #0098FF
}

.exercise-container .bubble.audio.right:focus {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #99d7ff
}

.exercise-container .bubble.audio.right:focus:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    border-right: 0 solid #000
}

.exercise-container .bubble.audio.right.playing {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #000
}

.exercise-container .bubble.audio.right.playing:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    border-right: 0 solid #000
}

.exercise-container .bubble.audio.right.ending {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #0098FF;
    border-right-color: #0098FF
}

.exercise-container .bubble.audio.right.ending:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    border-right: 0 solid #0098FF
}

.exercise-container .bubble.audio .exercise-play-audio {
    background: url(../svg/icon-bubble-question-audio.svg) no-repeat;
    width: 20px;
    height: 19px;
    position: absolute;
    right: 18px;
    top: 22px
}

.exercise-container .bubble.text {
    background-color: #A9A094
}

.exercise-container .bubble.text:after {
    display: block;
    position: absolute;
    z-index: 10;
    content: '';
    top: 30px;
    top: calc(38%);
    left: -20px;
    height: 4px;
    width: 0;
    background-color: #A9A094;
    border-top: 20px solid #fff;
    border-right: 20px solid #A9A094
}

.exercise-container .bubble.image {
    background-color: #A9A094;
    padding: 0 0 64px 0
}

.exercise-container .bubble.image:after {
    display: block;
    position: absolute;
    z-index: 10;
    content: '';
    top: 30px;
    top: calc(38%);
    right: -20px;
    height: 4px;
    width: 0;
    background-color: #A9A094;
    border-top: 20px solid #fff;
    border-right: 20px solid #A9A094
}

.exercise-container .bubble-image-container img {
    width: 100%
}

.exercise-container .bubble-image-container .bubble-text-image {
    min-height: 61px;
    padding: 20px
}

.exercise-container .answer {
    background-color: #f4f3f1;
    color: #333;
    margin-left: 0
}

.exercise-container .answer:after {
    display: block;
    position: absolute;
    z-index: 10;
    content: '';
    top: 30px;
    top: calc(38%);
    right: -20px;
    height: 4px;
    width: 0;
    background-color: #f4f3f1;
    border-top: 20px solid #fff;
    border-left: 20px solid #f4f3f1
}

.exercise-container .answer.audio {
    min-height: 61px;
    width: 160px
}

.exercise-container .answer.audio .answer-text-audio {
    position: relative
}

.exercise-container .answer.audio .answer-text-audio.removeHover:hover {
    background-color: #F4F3F1
}

.exercise-container .answer.audio .exercise-play-audio {
    background: url(../svg/icon-bubble-answer-audio.svg) no-repeat;
    width: 20px;
    height: 19px;
    position: relative;
    right: 10px
}

.exercise-container .answer.cloze-text input.input-cloze {
    width: 80px;
    height: 34px;
    display: inline;
    margin: 0 0 25px 0;
    border-radius: 0;
    border: 1px dashed #A9A094
}

.exercise-container .answer.cloze-text span:first-child {
    margin: 0 10px 0 0
}

.exercise-container .answer.cloze-text span {
    margin: 0 10px
}

.exercise-container a.answer-link-container {
    color: #333;
    text-decoration: none
}

.exercise-container a.answer-link-container:active, .exercise-container a.answer-link-container:hover {
    text-decoration: none;
    color: #FFF
}

.exercise-container a.answer-link-container:active .choice, .exercise-container a.answer-link-container:active .pronunciation-text-choice, .exercise-container a.answer-link-container:active div.answer.text-choice, .exercise-container a.answer-link-container:hover .choice, .exercise-container a.answer-link-container:hover .pronunciation-text-choice, .exercise-container a.answer-link-container:hover div.answer.text-choice {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #0098FF;
    color: #FFF
}

.exercise-container a.answer-link-container:active .choice.removeHover:hover, .exercise-container a.answer-link-container:active .pronunciation-text-choice.removeHover:hover, .exercise-container a.answer-link-container:active div.answer.text-choice.removeHover:hover, .exercise-container a.answer-link-container:hover .choice.removeHover:hover, .exercise-container a.answer-link-container:hover .pronunciation-text-choice.removeHover:hover, .exercise-container a.answer-link-container:hover div.answer.text-choice.removeHover:hover {
    background-color: #f4f3f1;
    color: #000
}

.exercise-container a.answer-link-container:focus {
    text-decoration: none;
    color: #FFF
}

.exercise-container a.answer-link-container:focus .choice, .exercise-container a.answer-link-container:focus .pronunciation-text-choice, .exercise-container a.answer-link-container:focus div.answer.text-choice {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #99d7ff;
    color: #FFF
}

.exercise-container .dotted-outline {
    position: relative;
    background: #fff;
    border: 2px dotted #D1C9C2;
    min-height: 110px;
    overflow: hidden;
    padding: 14px 0 0 0
}

.exercise-container .dotted-outline:after, .exercise-container .dotted-outline:before {
    left: 100%;
    top: 50%;
    content: " ";
    height: 4px;
    width: 0;
    right: 0;
    position: absolute;
    pointer-events: none
}

.exercise-container .dotted-outline:after {
    z-index: 10;
    top: 50%;
    background-color: #f4f3f1;
    border-top: 20px solid #fff;
    border-left: 20px solid #D1C9C2
}

.exercise-container .dotted-outline:before {
    z-index: 11;
    top: calc(51%);
    border-top: 18px solid transparent;
    border-left: 18px solid #fff
}

.exercise-container .answer-sorting-collection {
    margin-top: 20px;
    padding-left: 0;
    padding-right: 0;
    text-align: right
}

.exercise-container .answer-sorting-collection .answer-sorting-btn {
    white-space: normal;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
    text-align: right
}

.exercise-container .answer-sorting-collection-image {
    margin-top: 20px;
    padding-left: 20px;
    text-align: right
}

.exercise-container .answer-sorting-collection-image .answer-sorting-btn {
    margin-left: 10px
}

.exercise-container .answer-sorting-collection-image .answer-sorting-image {
    margin-left: 10px
}

.exercise-container .answer-sorting-target {
}

.exercise-container .answer-sorting-target .answer-sorting-btn {
    margin-right: 5px;
    margin-left: 5px;
    white-space: normal;
    height: auto;
    padding-left: 8px;
    padding-right: 8px;
    -webkit-transition: margin .3s ease-in, padding .4s ease-out .3s;
    -moz-transition: margin .3s ease-in, padding .4s ease-out .3s;
    -o-transition: margin .3s ease-in, padding .4s ease-out .3s;
    transition: margin .3s ease-in, padding .4s ease-out .3s
}

.exercise-container .answer-sorting-target.merged .answer-sorting-btn:not(:first-child) {
    border-left-width: 0;
    margin-left: 0;
    padding-left: .02em
}

.exercise-container .answer-sorting-target.merged .answer-sorting-btn:not(:last-child) {
    border-right-width: 0;
    margin-right: 0;
    padding-right: 0
}

.exercise-container .answer-sorting-target-image {
    padding-left: 20px;
}

.exercise-container .answer-sorting-target-image .answer-sorting-image {
    margin-right: 10px
}

.exercise-container .answer-sorting-btn {
    width: auto;
    background: #3e3e3e;
    color: #FFF;
    text-transform: none;
    font-size: 16px;
    height: 30px;
    padding: 5px 8px;
    margin-bottom: 10px;
    border-radius: 0;
    line-height: 18px
}

.exercise-container .answer-sorting-btn:active, .exercise-container .answer-sorting-btn:hover {
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
    background-color: #0098FF;
    color: #FFF
}

.exercise-container .answer-sorting-btn:focus {
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
    background-color: #99d7ff;
    color: #FFF
}

.exercise-container .answer-sorting-btn.wrong {
    background-color: #be232d !important
}

.exercise-container .answer-sorting-btn.correct {
    background-color: #82b905 !important
}

.exercise-container .answer-sorting-btn.solved:focus {
    background-color: #000 !important
}

.exercise-container .answer-sorting-btn.removeHover:hover {
    background-color: #3e3e3e
}

.exercise-container .answer-sorting-image {
    width: auto;
    height: 60px;
    text-transform: none;
    padding: 0;
    margin-bottom: 14px;
    border-radius: 0;
    line-height: 18px;
    border: 2px solid #FFF
}

.exercise-container .answer-sorting-image:active, .exercise-container .answer-sorting-image:hover {
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
    border-color: #0098FF
}

.exercise-container .answer-sorting-image:focus {
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
    border-color: #99d7ff
}

.exercise-container .answer-sorting-image img {
    width: auto;
    height: 56px
}

.exercise-container .answer-sorting-image.removeHover:hover {
    border-color: #fff
}

.exercise-container .answer.choice, .exercise-container .answer.text-choice {
    text-align: center;
    margin-bottom: 2px
}

.exercise-container .answer.choice:active, .exercise-container .answer.choice:hover, .exercise-container .answer.text-choice:active, .exercise-container .answer.text-choice:hover {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #0098FF;
    color: #FFF
}

.exercise-container .answer.choice.removeHover:hover, .exercise-container .answer.text-choice.removeHover:hover {
    background-color: #F4F3F1
}

.exercise-container .answer.choice:focus, .exercise-container .answer.text-choice:focus {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #99d7ff;
    color: #FFF
}

.exercise-container .answer-multiple-text {
    position: relative;
    margin-bottom: 30px
}

.exercise-container .answer-multiple-text:after {
    display: block;
    position: absolute;
    z-index: 10;
    content: '';
    top: 30px;
    top: calc(44%);
    right: -20px;
    height: 4px;
    width: 0;
    background-color: #f4f3f1;
    border-top: 20px solid #fff;
    border-left: 20px solid #f4f3f1
}

.exercise-container .answer-multiple-text .answer.pronunciation-text-choice {
    margin-bottom: 2px;
    text-align: center
}

.exercise-container .answer-multiple-text .answer.pronunciation-text-choice span {
    color: #000;
    font-weight: 700;
    text-decoration: underline
}

.exercise-container .answer-multiple-text .answer.pronunciation-text-choice:active, .exercise-container .answer-multiple-text .answer.pronunciation-text-choice:hover {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #0098FF;
    color: #FFF
}

.exercise-container .answer-multiple-text .answer.pronunciation-text-choice.removeHover:hover {
    background-color: #F4F3F1
}

.exercise-container .answer-multiple-text .answer.pronunciation-text-choice:focus {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #99d7ff;
    color: #FFF
}

.exercise-container .answer-multiple-text .answer.pronunciation-text-choice:after {
    display: none
}

.exercise-container .answer-multiple-text .answer.pronunciation-text-choice.solved span {
    color: #FFF;
    font-weight: 700;
    text-decoration: underline
}

.exercise-container .answer-multiple-text .answer.pronunciation-text-choice.selected span {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important
}

.exercise-container .answer-multiple-text .answer.text-choice {
    margin-bottom: 2px
}

.exercise-container .answer-multiple-text .answer.text-choice:after {
    display: none
}

.exercise-container .answer-multiple-image {
    position: relative;
    border: 5px solid #F5F4F2;
    margin-bottom: 50px
}

.exercise-container .answer-multiple-image a.image-choice {
    display: block;
    float: left;
    border: 5px solid #F5F4F2;
    z-index: 0;
    padding: 0;
    position: relative;
    width: 50%;
    text-align: center
}

.exercise-container .answer-multiple-image a.image-choice img {
    width: 100%;
    height: auto;
    margin: 0
}

.exercise-container .answer-multiple-image a.image-choice:active, .exercise-container .answer-multiple-image a.image-choice:hover {
    border: 5px solid #0098FF;
    z-index: 1
}

.exercise-container .answer-multiple-image a.image-choice.removeHover:hover {
    border: 5px solid #E6E1DD
}

.exercise-container .answer-multiple-image a.image-choice:focus {
    border: 5px solid #99d7ff;
    outline: dotted thin;
    outline: -webkit-focus-ring-color auto 5px;
    outline-offset: -2px;
    z-index: 1
}

.exercise-container .answer-multiple-audio {
    position: relative
}

@media (min-width: 992px) {
    .exercise-container .answer-multiple-audio {
        padding-right: 0
    }
}

.exercise-container .answer-multiple-audio:after {
    display: none
}

.exercise-container .answer-multiple-audio .answer.audio-choice {
    color: #0098FF;
    margin-bottom: 2px;
    cursor: pointer;
    display: block
}

.exercise-container .answer-multiple-audio .answer.audio-choice .answer-text-audio {
    position: relative;
    margin-left: 30px
}

.exercise-container .answer-multiple-audio .answer.audio-choice .answer-text-audio.removeHover:hover {
    background-color: #F4F3F1
}

.exercise-container .answer-multiple-audio .answer.audio-choice .exercise-play-audio {
    background: url(../svg/icon-bubble-answer-audio.svg) no-repeat;
    width: 20px;
    height: 19px;
    position: absolute;
    right: 35px;
    top: 22px
}

.exercise-container .answer-multiple-audio .answer.audio-choice:focus {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #99d7ff
}

.exercise-container .answer-multiple-audio .answer.audio-choice:focus:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #000
}

.exercise-container .answer-multiple-audio .answer.audio-choice.playing {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #000
}

.exercise-container .answer-multiple-audio .answer.audio-choice.playing:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #000
}

.exercise-container .answer-multiple-audio .answer.audio-choice.ending {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    background-color: #f4f3f1
}

.exercise-container .answer-multiple-audio .answer.audio-choice.ending:after {
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.exercise-container .answer-multiple-audio .answer.choice {
    margin-bottom: 2px
}

.exercise-container .answer-multiple-audio .answer:after {
    display: none
}

.exercise-container .answer-multiple-audio-choice {
    position: relative;
    text-align: center
}

@media (min-width: 992px) {
    .exercise-container .answer-multiple-audio-choice {
        padding-left: 0
    }
}

.exercise-container .answer-multiple-audio-choice:after {
    display: block;
    position: absolute;
    z-index: 10;
    content: '';
    top: 30px;
    top: calc(44%);
    right: -20px;
    height: 4px;
    width: 0;
    background-color: #f4f3f1;
    border-top: 20px solid #fff;
    border-left: 20px solid #f4f3f1
}

.exercise-container .answer-multiple-audio-choice .answer.choice {
    margin-bottom: 2px
}

.exercise-container .answer-multiple-audio-choice .answer.choice:after {
    display: none
}

.exercise-container .exercise-hint {
    position: relative;
    min-height: 60px;
    padding: 50px 20px 7px;
    margin: 20px 0
}

@media (min-width: 768px) {
    .exercise-container .exercise-hint {
        padding: 17px 20px 19px
    }
}

.exercise-container .exercise-hint span.hint {
    position: absolute;
    display: inline-block;
    top: 16px;
    left: calc(50% - 9px)
}

@media (min-width: 768px) {
    .exercise-container .exercise-hint span.hint {
        left: 0
    }
}

.exercise-container .exercise-hint p {
    color: #3e3e3e;
    text-align: center
}

@media (min-width: 768px) {
    .exercise-container .exercise-hint p {
        margin: 0 20px 0 20px;
    }
}

.exercise-container .exercise-check {
    position: relative;
    text-align: center;
    margin: 10px 0 30px 0
}

.exercise-container .exercise-check .btn[disabled] {
    pointer-events: none
}

.exercise-container .exercise-check .btn[disabled]:hover {
    color: #fff;
    background-color: #0098FF
}

.exercise-container .exercise-result-row-headlines {
    margin: 40px 0 10px 0;
    height: 20px;
    color: #A9A094;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px
}

.exercise-container .exercise-result-row {
    background: #F5F4F3;
    color: #333;
    height: 60px;
    line-height: 60px;
    padding: 0 10px;
    margin-bottom: 10px
}

.exercise-container .exercise-result-row .result-statistic {
    display: inline;
    color: #A9A094
}

.exercise-container .exercise-result-row .result-points {
    display: inline;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 0 18px;
    width: 100%;
    text-align: right
}

.exercise-container .exercise-result-row .result-points.low {
    color: #BE232D
}

.exercise-container .exercise-result-row .result-points.neutral {
    color: #333
}

.exercise-container .exercise-result-row .result-points.high {
    color: #82B905
}

.exercise-container .exercise-finish-text {
    text-align: center;
    margin: 40px 0 20px 0
}

.exercise-container .exercise-infos {
    text-align: center;
    margin: 40px 0
}

.exercise-container .exercise-cloze-text-big {
    position: relative;
    background-color: #F4F3F1;
    padding: 20px;
    line-height: 40px
}

.exercise-container .exercise-cloze-text-big input.answer-input-cloze-small {
    width: 85px;
    height: 34px;
    display: inline;
    padding: 6px 7px !important;
    font-size: 17px !important;
    text-align: center;
    margin: 0 5px;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: #FFF;
    border-bottom: 1px solid #000;
    color: #000
}

.exercise-container .exercise-cloze-text-big input.answer-input-cloze-medium {
    width: 150px;
    height: 34px;
    display: inline;
    padding: 6px 7px !important;
    font-size: 17px !important;
    text-align: center;
    margin: 0 5px;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: #FFF;
    border-bottom: 1px solid #000;
    color: #000
}

.exercise-container .exercise-cloze-text-big input.answer-input-cloze-full {
    width: 95%;
    height: 34px;
    display: inline;
    padding: 6px 2% !important;
    font-size: 17px !important;
    text-align: center;
    margin: 0 5px 0 0;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: #FFF;
    border-bottom: 1px solid #000;
    color: #000
}

@media (min-width: 992px) {
    .exercise-container .exercise-cloze-text-big input.answer-input-cloze-full {
        width: 50%
    }
}

.exercise-container .exercise-cloze-text-big p {
    line-height: 40px
}

.exercise-container .cloze-text .form-group {
    margin-bottom: 0;
    line-height: 40px
}

.exercise-container .cloze-sorting-target {
    display: inline-block;
    background-color: #fff;
    border: 2px dotted #D1C9C2;
    height: 30px;
    width: 80px;
    margin-bottom: -8px
}

.exercise-container .cloze-sorting-target.filled {
    border: 0 none transparent;
    background-color: transparent;
    height: auto;
    width: auto
}

.exercise-container .exercise-next {
    position: relative;
    text-align: center;
    margin: 10px 0 45px 0
}

.exercise-result-title {
    white-space: nowrap;
    text-overflow: ellipsis
}

.answer-select-dropdown-container button.dropdown-toggle {
    opacity: 1
}

.answer-select-dropdown-container button.dropdown-toggle.wrong-input {
    background-color: #a81f28 !important;
    text-shadow: #fff 0 0 10px;
    color: #FFF !important;
    -webkit-text-fill-color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.answer-select-dropdown-container button.dropdown-toggle.wrong-input:active, .answer-select-dropdown-container button.dropdown-toggle.wrong-input:hover {
    background: #FFF !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important
}

.answer-select-dropdown-container button.dropdown-toggle.wrong-input:focus {
    background: #99d7ff !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important
}

.answer-select-dropdown-container button.dropdown-toggle.wrong-input.removeHover:hover {
    background-color: #3e3e3e
}

.answer-select-dropdown-container button.dropdown-toggle.correct-input {
    background-color: #71a004 !important;
    text-shadow: #fff 0 0 10px;
    color: #FFF !important;
    -webkit-text-fill-color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.answer-select-dropdown-container button.dropdown-toggle.correct-input:active, .answer-select-dropdown-container button.dropdown-toggle.correct-input:hover {
    background: #FFF !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important
}

.answer-select-dropdown-container button.dropdown-toggle.correct-input:focus {
    background: #FFF !important;
    color: #99d7ff !important;
    -webkit-text-fill-color: #000 !important
}

.answer-select-dropdown-container button.dropdown-toggle.correct-input.removeHover:hover {
    background-color: #3e3e3e
}

.selected {
    background-color: #0098FF !important;
    color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.selected:active, .selected:hover {
    background-color: #0098FF !important;
    -webkit-text-fill-color: #FFF !important
}

.selected:focus {
    background-color: #99d7ff !important;
    -webkit-text-fill-color: #FFF !important
}

.wrong {
    background-color: #be232d !important;
    color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.wrong:active, .wrong:hover {
    background: #be232d !important
}

.wrong:focus {
    background: #99d7ff !important
}

.solved {
    background-color: #000 !important;
    border-color: #FFF !important;
    color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.solved:active, .solved:focus, .solved:hover {
    background-color: #000 !important;
    -webkit-text-fill-color: #FFF !important
}

.solved:focus {
    background-color: #99d7ff !important;
    -webkit-text-fill-color: #FFF !important
}

.correct {
    background-color: #82b905 !important;
    color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.correct:active, .correct:hover {
    background: #82b905 !important
}

.correct:focus {
    background: #99d7ff !important
}

.selected-image {
    border: 5px solid #0098FF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.selected-image:active, .selected-image:focus, .selected-image:hover {
    border: 5px solid #0098FF !important
}

.wrong-image {
    border: 5px solid #be232d !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.wrong-image:active, .wrong-image:hover {
    border: 5px solid #be232d !important
}

.wrong-image:focus {
    border: 5px solid #be232d !important
}

.solved-image {
    border: 5px solid #000 !important;
    color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.solved-image:active, .solved-image:hover {
    border: 5px solid #000 !important
}

.solved-image:focus {
    border: 5px solid #99d7ff !important
}

.correct-image {
    border: 5px solid #82b905 !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.correct-image:active, .correct-image:focus, .correct-image:hover {
    border: 5px solid #82b905 !important
}

.wrong-input {
    background-color: #be232d !important;
    color: #FFF !important;
    -webkit-text-fill-color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.wrong-input:active, .wrong-input:focus, .wrong-input:hover {
    background: #FFF !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important
}

.correct-input {
    background-color: #82b905 !important;
    color: #FFF !important;
    -webkit-text-fill-color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.correct-input:active, .correct-input:hover {
    background: #FFF !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important
}

.correct-input:focus {
    background: #99d7ff !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important
}

.solved-input {
    background-color: #000 !important;
    color: #FFF !important;
    -webkit-text-fill-color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.solved-input:active, .solved-input:hover {
    background-color: #000 !important;
    color: #FFF !important;
    -webkit-text-fill-color: #FFF !important
}

.solved-input:focus {
    background-color: #99d7ff !important;
    color: #FFF !important;
    -webkit-text-fill-color: #FFF !important
}

.solved-input .dropdown-menu li a {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important
}

.correct-outline {
    border-color: #82b905 !important;
    color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    border-style: solid !important
}

.correct-outline:active, .correct-outline:hover {
    border-color: #82b905 !important
}

.correct-outline:focus {
    border-color: #99d7ff !important
}

.wrong-outline {
    border-color: #be232d !important;
    color: #FFF !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    border-style: solid !important
}

.wrong-outline:active, .wrong-outline:focus, .wrong-outline:hover {
    border-color: #be232d !important
}

.correct-textarea {
    border-color: #82b905 !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.wrong-textarea {
    border-color: #be232d !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

.solved-textarea {
    border-color: #D1C9C2 !important
}

div.form-group a.btn.answer-sorting-btn {
    margin-bottom: 3px
}

div.form-group a.btn.answer-sorting-image {
    margin-bottom: 3px
}

ul.dropdown-menu {
    min-width: inherit
}

.container.evaluation .exercise-questions .btn.wrong {
    background-color: #be232d !important;
    cursor: default
}

.container.evaluation .exercise-questions .btn.wrong:hover {
    background-color: #be232d !important
}

.container.evaluation .exercise-questions .btn.solved {
    cursor: default
}

.container.evaluation .exercise-questions .solved-textarea.correct-textarea {
    border-color: #82b905 !important
}

.container.evaluation .exercise-questions .solved-textarea.wrong-textarea {
    border-color: #be232d !important
}

.exercise-cloze-text-big .row.inline-check, .pair-select-container .row.inline-check {
    margin-bottom: 0
}

.row.inline-check .btn {
    border-radius: 20px;
    line-height: 26px;
    height: 40px;
    text-transform: none
}

.row.inline-check .btn.main {
    border-color: #0098FF;
    background-color: transparent;
    color: #0098FF
}

.row.inline-check .btn.main:active, .row.inline-check .btn.main:hover {
    color: #fff;
    background-color: #0098FF
}

.row.inline-check .btn.disabled {
    color: #938A7F;
    border-color: #938A7F
}

.xPaddingRight {
    padding-right: 10px
}

.xPaddingLeft {
    padding-left: 10px
}

@media (min-width: 768px) {
    .xPaddingRight {
        padding-right: 20px
    }

    .xPaddingLeft {
        padding-left: 20px
    }
}

.row.inline-check.inBox .btn.secondary {
    margin-left: 10px;
    margin-right: -10px
}

.row.inline-check.inBox .btn.main {
    margin-left: -10px
}

.row + .row.inline-check {
    margin-top: -50px
}

p.exerciseStats {
    text-align: center;
    color: #9B9B9B
}

p.exerciseStats span {
    color: #000
}

p.exerciseStats span.darkgray {
    color: #9B9B9B
}

div.answer .btn-group .btn {
    margin-top: -5px;
    padding: 3px 12px 6px
}

.pair-select-container {
    position: relative;
    background-color: #F4F3F1;
    padding: 20px;
    line-height: 40px
}

div.row.pairsToUse {
    margin-bottom: 0
}

.pair-select-container .pairsToUse .btn {
    margin-top: 0;
    width: auto;
    max-width: 100%;
    background-color: #0098FF;
    color: #fff;
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.pair-select-container .pairsToUse .btn.image-pair-right {
    width: auto;
    height: 66px;
    padding: 2px;
    background-color: #FFF;
    margin-top: 10px;
    margin-bottom: 5px
}

.pair-select-container .pairsToUse .btn.image-pair-right img {
    width: auto;
    height: 60px
}

.pair-select-container .pairsToUse .btn.image-pair-right:hover {
    background-color: #0098FF
}

.pair-select-container .pairsToUse .btn.image-pair-left {
    width: auto;
    height: 66px;
    padding: 20px 12px;
    margin-top: 10px;
    margin-bottom: 5px;
    overflow: hidden
}

.pair-select-container .pairsToUse .btn:active, .pair-select-container .pairsToUse .btn:hover {
    background-color: #000
}

.pair-select-container .pairsToUse .btn:focus {
    background-color: #000
}

.pair-select-container .pairsToUse .btn.waiting, .pair-select-container .pairsToUse .btn.waiting:hover, .pair-select-container .pairsToUse.used .btn, .pair-select-container .pairsToUse.used .btn:hover {
    background-color: #A9A094;
    cursor: pointer
}

.pair-select-container .pairsToUse .btn.waiting.correct, .pair-select-container .pairsToUse .btn.waiting:hover.correct, .pair-select-container .pairsToUse.used .btn.correct, .pair-select-container .pairsToUse.used .btn:hover.correct {
    cursor: default
}

.pair-select-container .pairsToUse .btn.tapped, .pair-select-container .pairsToUse .btn:hover {
    background-color: #000;
    color: #fff
}

.answer-pairs-target.pairsToUse.used .btn.wrong:hover, .answer-pairs-target.pairsToUse.used .btn:hover {
    background-color: #000 !important;
    color: #fff
}

.answer-pairs-target.pairsToUse.used .btn.correct:hover {
    background-color: #82b905 !important;
    color: #fff
}

.pair-select-container .pairsToUse .btn {
    font-size: 14px;
    padding: 6px 12px;
    margin-bottom: 10px
}

.pair-select-container .pairsToUse .btn.removeHover:hover {
    background-color: #1594ff
}

.pair-select-container .pairsToUse .btn.removeHover.image-pair-right {
    background-color: #fff
}

.pair-select-container .pairsToUse .btn.removeHover.tapped, .pair-select-container .pairsToUse .btn.removeHover.tapped:hover {
    background-color: #000
}

@media (min-width: 768px) {
    .pair-select-container .pairsToUse .btn {
        font-size: 16px;
        padding: 8px 15px;
        margin-bottom: 15px
    }
}

@media (min-width: 992px) {
    .pair-select-container .pairsToUse .btn {
        font-size: 18px;
        padding: 12px 20px;
        margin-bottom: 20px
    }
}

.pair-select-container .pairsToUse .left {
    padding-right: 10px
}

.pair-select-container .pairsToUse .right {
    padding-left: 10px
}

.pair-select-container .pairsToUse .left .btn {
}

.pair-select-container .pairsToUse .right .btn {
    float: right;
    clear: right
}

.pair-select-container .pairsToUse.used .left .btn {
    float: right;
    clear: right
}

.pair-select-container .pairsToUse.used .right .btn {
}

.pair-select-container p {
    margin: 20px;
    text-align: center
}

textarea.dictation {
    width: 100%;
    padding: 5px 10px;
    border: 2px solid #D1C9C2;
    resize: vertical;
    max-width: 100%
}

textarea.dictation.correct-textarea {
    border-color: #82b905 !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

textarea.dictation.wrong-textarea {
    border-color: #be232d !important;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}

textarea.dictation.wrong-textarea.solved-textarea {
    border-color: #be232d !important
}

textarea.dictation.solved-textarea {
    border-color: #D1C9C2 !important
}

textarea[disabled] {
    opacity: .65
}

.dropdown-menu {
    padding: 0
}

.dropdown-menu > li > a {
    padding: 14px
}

.exercise-summary {
    padding: 0 0 25px
}

@media (min-width: 768px) {
    .exercise-summary {
        padding: 0 0 60px
    }
}

@media (min-width: 992px) {
    .exercise-summary {
        padding: 20px 0 70px
    }
}

.course-headline.allcourses-title {
    height: 240px;
    text-align: center
}

.course-headline.allcourses-title h1 {
    font-family: DWTheAntiquaB, Georgia, serif;
    font-weight: 400;
    font-size: 30px;
    text-transform: none;
    margin: 0 auto auto;
    width: 100%
}

.course-headline.allcourses-title p {
    font-family: DWTheAntiquaB, Georgia, serif;
    font-size: 16px;
    width: 80%;
    margin: 5px auto 67px;
    line-height: 1.2
}

@media (min-width: 768px) {
    .course-headline.allcourses-title {
        height: 360px
    }

    .course-headline.allcourses-title h1 {
        font-size: 44px;
        line-height: 48px;
        width: 80%
    }

    .course-headline.allcourses-title p {
        font-size: 20px;
        margin-bottom: 120px;
        width: 80%
    }
}

@media (min-width: 992px) {
    .course-headline.allcourses-title {
        height: 400px
    }

    .course-headline.allcourses-title h1 {
        font-size: 54px;
        line-height: 60px
    }

    .course-headline.allcourses-title p {
        font-size: 23px
    }
}

div.allcourses {
    display: block;
    width: 100%
}

div.allcourses a.main-course-container {
    text-decoration: none;
    color: #FFF
}

div.allcourses a.main-course-container:active, div.allcourses a.main-course-container:focus, div.allcourses a.main-course-container:hover {
    color: rgba(255, 255, 255, .5)
}

.main-course {
    width: 100%;
    height: 90px;
    padding: 10px;
    border-top: 1px solid #FFF
}

.main-course h2 {
    font-size: 36px;
    line-height: 62px;
    font-family: Helvetica, Arial, sans-serif;
    margin: 3px 0 0 6px;
    display: inline-block;
    width: 58px
}

.main-course p {
    font-size: 14px;
    line-height: 19px;
    font-family: DWTheAntiquaB, Georgia, serif;
    max-width: 70%;
    max-height: 34px;
    overflow: hidden;
    opacity: .9
}

.main-course p.course-title {
    font-family: DWTheAntiquaBBold, Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    margin: 15px 0 0;
    opacity: 1
}

.main-course span.progress-icon {
    float: right;
    margin: 5px 5px 0 0
}

.main-course span.progress-icon.half {
    margin-right: 14px
}

.main-course.alpha {
    background-color: #E1500F
}

.main-course.one {
    background-color: #F08C00
}

.main-course.a1 {
    background-color: #DC1978
}

.main-course.a2 {
    background-color: #BE0046
}

.main-course.b1 {
    background-color: #91B423
}

.main-course.b1-plus {
    background-color: #55911E
}

.main-course.empty {
    background-color: #0098FF
}

.main-course.dw {
    background-color: #1464A5
}

.main-course.assess1 {
    background-color: #f4f3f2 !important;
    color: #F08C00 !important
}

.main-course.assess2 {
    background-color: #f4f3f2 !important;
    color: #E1500F !important
}

.main-course.assess3 {
    background-color: #f4f3f2 !important;
    color: #DC1978 !important
}

.main-course.assess4 {
    background-color: #f4f3f2 !important;
    color: #BE0046 !important
}

@media (min-width: 768px) {
    .main-course {
        width: 50%;
        height: 180px;
        padding: 5px 20px 20px;
        border-right: 1px solid #FFF
    }

    .main-course h2 {
        font-size: 54px;
        line-height: 64px;
        display: inline;
        width: auto;
        margin: 0
    }

    .main-course p.course-title {
        font-size: 22px;
        line-height: 25px;
        margin: 32px 7px 0 16px;
        display: inline-block
    }

    .main-course p.course-title.einstufung {
        margin: 32px 7px 7px 0
    }

    .main-course p {
        font-size: 15px;
        line-height: 20px;
        max-width: 95%;
        max-height: 60%;
        overflow: visible
    }

    .main-course span.progress-icon {
        margin: 15px 0 0 0
    }

    .main-course span.progress-icon.half {
        margin-right: 10px
    }

    [class*=assess] {
        height: 205px !important
    }
}

@media (min-width: 992px) {
    .main-course {
        width: 25%;
        height: 250px;
        padding: 0 20px 20px;
        border-right: 1px solid #FFF
    }

    .main-course h2 {
        font-size: 70px;
        line-height: 84px;
        display: block
    }

    .main-course p {
        font-size: 16px;
        line-height: 25px;
        display: block
    }

    .main-course p.course-title {
        font-size: 23px;
        display: block;
        margin: 0 0 7px 0
    }

    .main-course span.progress-icon {
        margin: 20px 0 0 0
    }

    .main-course span.progress-icon.half {
        margin-right: 10px
    }

    .main-course.one {
        border-right: 1px solid #FFF
    }

    [class*=assess] {
        height: 380px !important
    }
}

@media (max-width: 992px) {
    .main-course.alpha {
        border-right: 0
    }

    .main-course.a2 {
        border-right: 0
    }

    .main-course.b1-plus {
        border-right: 0
    }

    .main-course.dw {
        border-right: 0
    }
}

@media (min-width: 992px) {
    .main-course.a2 {
        border-right: 0
    }

    .main-course.dw {
        border-right: 0
    }

    .main-course [class*=assess] {
        height: 300px !important
    }
}

.help-list {
    background-color: #F5F4F2;
    margin: 0;
    overflow: hidden
}

.help-list .row {
    border-top: 1px solid rgba(128, 128, 128, .5)
}

.help-list .row h2 {
    color: #4A4A4A;
    padding: 60px 0;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 23px
}

.help-list .row h2 span {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    opacity: .5;
    filter: alpha(opacity=50)
}

@media (max-width: 1199px) {
    .help-list .row h2 {
        padding: 20px 0;
        margin-left: 20px
    }

    .help-list .row h2:after {
        position: absolute;
        right: 20px;
        width: 24px;
        height: 20px;
        content: '';
        background: transparent url(../svg/nav-arrow-up-black.svg) no-repeat top left
    }
}

.help-list .row a {
    display: block;
    text-decoration: none;
    color: inherit
}

@media (max-width: 1199px) {
    .help-list .row a.collapsed h2:after {
        position: absolute;
        right: 20px;
        width: 24px;
        height: 20px;
        content: '';
        background: transparent url(../svg/nav-arrow-down-black.svg) no-repeat top left
    }
}

.help-list .row p {
    color: #9B9B9B;
    font-size: 14px;
    line-height: 17px
}

.help-list .row p span {
    display: block
}

@media (min-width: 768px) {
    .help-list .row p span {
        display: inline-block
    }
}

.help-list .row p span strong {
    color: rgba(0, 0, 0, .7)
}

@media (min-width: 1200px) {
    .help-list .row p span strong {
        color: inherit;
        font-weight: 400
    }
}

.help-list .row p span.headline {
    display: block;
    color: #333;
    font-size: 17px;
    line-height: 23px;
    margin-bottom: 5px
}

.help-list .row p span.title {
    display: block
}

.help-list .row p span.desciption {
    display: block
}

@media (min-width: 768px) and (max-width: 1199px) {
    .help-list .row p span.desciption, .help-list .row p span.title {
        width: auto;
        text-overflow: inherit;
        overflow: inherit
    }
}

.help-list .row .progress-icon {
    float: right;
    margin-right: 20px
}

.help-list .row .progress-icon.half {
    margin-right: 30px
}

.help-list .row + .row {
    border-top: none
}

.help-list .row + .row [class*=col-] {
    display: table;
    width: 100%;
    height: 90px;
    border-top: 1px solid rgba(128, 128, 128, .5)
}

.help-list .row + .row a {
    display: block;
    height: 90px;
    text-decoration: none;
    color: inherit;
    display: table-row
}

.help-list .row + .row img {
    width: 90px
}

.help-list .row + .row p {
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    width: 100%
}

.help-list .row + .row .progress-icon {
    margin-top: 10px
}

.help-list .row + .row img, .help-list .row + .row p {
    vertical-align: top;
    display: table-cell
}

.help-list .row [class*=col-] {
    padding: 0
}

.help-list [class*=col-] > .row:first-child {
    background-color: #FFF
}

.help-list:after {
    width: 100%;
    height: 1px;
    border-top: 1px solid rgba(128, 128, 128, .5)
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

.ui-keyboard {
    text-align: center;
    padding: .3em;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 16000
}

.ui-keyboard-has-focus {
    z-index: 16001
}

.ui-keyboard div {
    font-size: 1.1em
}

.ui-keyboard-button {
    height: 2em;
    min-width: 2em;
    margin: .1em;
    cursor: pointer;
    overflow: hidden;
    line-height: 2em;
    -moz-user-focus: ignore
}

.ui-keyboard-button span {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    display: inline-block
}

.ui-keyboard-button-endrow {
}

.ui-keyboard-space {
    width: 15em
}

.ui-keyboard-empty span, .ui-keyboard-space span {
    font: 0/0 a;
    text-shadow: none;
    color: transparent
}

.ui-keyboard-preview-wrapper {
    text-align: center;
    position: relative;
    overflow: hidden
}

.ui-keyboard-preview {
    margin: 0 0 3px;
    display: inline;
    width: 99%
}

.ui-keyboard-keyset {
    text-align: center;
    white-space: nowrap
}

.ui-keyboard-input {
}

.ui-keyboard-input-current {
    -moz-box-shadow: 0 0 5px #4d90fe;
    -webkit-box-shadow: 0 0 5px #4d90fe;
    box-shadow: 0 0 5px #4d90fe
}

.ui-keyboard-placeholder {
    color: #888
}

.ui-keyboard-nokeyboard {
    color: #888;
    border-color: #888
}

.ui-keyboard-spacer {
    display: inline-block;
    width: 1px;
    height: 0;
    cursor: default
}

.ui-keyboard-LRM span, .ui-keyboard-NBSP span, .ui-keyboard-RLM span, .ui-keyboard-ZWJ span, .ui-keyboard-ZWNJ span, .ui-keyboard-ZWSP span {
    font-size: .5em;
    line-height: 1.5em;
    white-space: normal
}

.ui-keyboard-button.ui-keyboard-combo.ui-state-default {
    border-color: #ffaf0f
}

button.ui-keyboard-accept.ui-keyboard-valid-input {
    border-color: #0c0;
    background: #080;
    color: #fff
}

button.ui-keyboard-accept.ui-keyboard-valid-input:not([disabled]):hover {
    background: #0a0
}

button.ui-keyboard-accept.ui-keyboard-invalid-input {
    border-color: #c00;
    background: #800;
    color: #fff;
    opacity: .5;
    filter: alpha(opacity=50)
}

button.ui-keyboard-accept.ui-keyboard-invalid-input:not([disabled]):hover {
    background: #a00
}

.ui-keyboard-caret {
    background: #c00;
    width: 1px;
    margin-top: 3px
}

div.ui-body.ui-keyboard button.ui-keyboard-button.ui-btn {
    padding: .5em 1em;
    border-color: transparent
}

.ui-body .ui-keyboard-button {
    width: 3em;
    height: 3em;
    display: inline-block
}

.ui-body .ui-keyboard-widekey {
    width: 5.5em
}

.ui-body .ui-keyboard-space {
    width: 15em
}

.ui-body .ui-keyboard-space span {
    visibility: hidden
}

.ui-body .ui-keyboard-keyset {
    line-height: .5em
}

.ui-body input.ui-input-text, .ui-body textarea.ui-input-text {
    width: 95%
}

.ui-body .ui-btn-inner {
    height: 2em;
    padding: .2em 0;
    margin: 0
}

.ui-body .ui-btn {
    margin: 0;
    font-size: 13px
}

button.ui-keyboard-button.btn {
    padding: 1px 6px
}

button.ui-keyboard-toggle span {
    width: .8em;
    height: .8em;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==)
}

.ui-keyboard-dark-theme button.ui-keyboard-toggle span {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==)
}

button.ui-keyboard-toggle.ui-keyboard-disabled span {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=)
}

.ui-keyboard-dark-theme button.ui-keyboard-toggle.ui-keyboard-disabled span {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=)
}

.ui-keyboard.ui-keyboard-disabled button:not(.ui-keyboard-toggle), .ui-keyboard.ui-keyboard-disabled input {
    opacity: .5
}

.ui-keyboard-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5)
}

.ui-keyboard-popup {
    display: inline-block;
    max-width: 22em
}

div.ui-keyboard-extender {
    margin-left: 5px
}

button.ui-keyboard-extender span {
    width: .9em;
    height: .9em;
    display: inline-block;
    margin-bottom: 3px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6IzExMSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzExMSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+)
}

.ui-keyboard-dark-theme button.ui-keyboard-extender span {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I2VlZSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2VlZSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+)
}

@media all and (max-width: 319px) {
    .ui-keyboard div {
        font-size: 9px
    }

    .ui-keyboard .ui-keyboard-input {
        font-size: 12px
    }

    .ui-body .ui-btn {
        margin: 0;
        font-size: 9px
    }

    .ui-body .ui-keyboard-button {
        width: 1.8em;
        height: 2.5em
    }

    .ui-body .ui-keyboard-widekey {
        width: 4em
    }

    .ui-body .ui-keyboard-space {
        width: 8em
    }

    .ui-body .ui-btn-inner {
        height: 2.5em;
        padding: .3em 0
    }
}

@media all and (min-width: 320px) and (max-width: 479px) {
    .ui-keyboard div {
        font-size: 9px
    }

    .ui-keyboard .ui-keyboard-input {
        font-size: 14px
    }

    .ui-body .ui-btn {
        margin: 0;
        font-size: 11px
    }

    .ui-body .ui-keyboard-button {
        width: 1.8em;
        height: 3em
    }

    .ui-body .ui-keyboard-widekey {
        width: 4.5em
    }

    .ui-body .ui-keyboard-space {
        width: 10em
    }

    .ui-body .ui-btn-inner {
        height: 3em;
        padding: .7em 0
    }
}

@media all and (min-width: 480px) and (max-width: 767px) {
    .ui-keyboard div {
        font-size: 13px
    }

    .ui-keyboard .ui-keyboard-input {
        font-size: 14px
    }

    .ui-body .ui-btn {
        margin: 0;
        font-size: 10px
    }

    .ui-body .ui-keyboard-button {
        height: 2.5em
    }

    .ui-body .ui-btn-inner {
        height: 2.5em;
        padding: .5em 0
    }
}

/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
* Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-helper-hidden {
    display: none
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none
}

.ui-helper-clearfix:after, .ui-helper-clearfix:before {
    content: "";
    display: table;
    border-collapse: collapse
}

.ui-helper-clearfix:after {
    clear: both
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0)
}

.ui-front {
    z-index: 100
}

.ui-state-disabled {
    cursor: default !important;
    pointer-events: none
}

.ui-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat
}

.ui-widget-icon-block {
    left: 50%;
    margin-left: -8px;
    display: block
}

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin: 2px 0 0 0;
    padding: .5em .5em .5em .7em;
    font-size: 100%
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default
}

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0
}

.ui-menu .ui-menu {
    position: absolute
}

.ui-menu .ui-menu-item {
    margin: 0;
    cursor: pointer;
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
}

.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 3px 1em 3px .4em
}

.ui-menu .ui-menu-divider {
    margin: 5px 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width: 1px 0 0 0
}

.ui-menu .ui-state-active, .ui-menu .ui-state-focus {
    margin: -1px
}

.ui-menu-icons {
    position: relative
}

.ui-menu-icons .ui-menu-item-wrapper {
    padding-left: 2em
}

.ui-menu .ui-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .2em;
    margin: auto 0
}

.ui-menu .ui-menu-icon {
    left: auto;
    right: 0
}

.ui-button {
    padding: .4em 1em;
    display: inline-block;
    position: relative;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: visible
}

.ui-button, .ui-button:active, .ui-button:hover, .ui-button:link, .ui-button:visited {
    text-decoration: none
}

.ui-button-icon-only {
    width: 2em;
    box-sizing: border-box;
    text-indent: -9999px;
    white-space: nowrap
}

input.ui-button.ui-button-icon-only {
    text-indent: 0
}

.ui-button-icon-only .ui-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px
}

.ui-button.ui-icon-notext .ui-icon {
    padding: 0;
    width: 2.1em;
    height: 2.1em;
    text-indent: -9999px;
    white-space: nowrap
}

input.ui-button.ui-icon-notext .ui-icon {
    width: auto;
    height: auto;
    text-indent: 0;
    white-space: normal;
    padding: .4em 1em
}

button.ui-button::-moz-focus-inner, input.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0
}

.ui-controlgroup {
    vertical-align: middle;
    display: inline-block
}

.ui-controlgroup > .ui-controlgroup-item {
    margin-left: 0;
    margin-right: 0
}

.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus, .ui-controlgroup > .ui-controlgroup-item:focus {
    z-index: 9999
}

.ui-controlgroup-vertical > .ui-controlgroup-item {
    display: block;
    float: none;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

.ui-controlgroup-vertical .ui-controlgroup-item {
    box-sizing: border-box
}

.ui-controlgroup .ui-controlgroup-label {
    padding: .4em 1em
}

.ui-controlgroup .ui-controlgroup-label span {
    font-size: 80%
}

.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
    border-left: none
}

.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
    border-top: none
}

.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
    border-right: none
}

.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
    border-bottom: none
}

.ui-controlgroup-vertical .ui-spinner-input {
    width: 75%;
    width: calc(100% - 2.4em)
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
    border-top-style: solid
}

.ui-checkboxradio-label .ui-icon-background {
    box-shadow: inset 1px 1px 1px #ccc;
    border-radius: .12em;
    border: none
}

.ui-checkboxradio-radio-label .ui-icon-background {
    width: 16px;
    height: 16px;
    border-radius: 1em;
    overflow: visible;
    border: none
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    background-image: none;
    width: 8px;
    height: 8px;
    border-width: 4px;
    border-style: solid
}

.ui-checkboxradio-disabled {
    pointer-events: none
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0
}

.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em
}

.ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev-hover {
    top: 1px
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px
}

.ui-datepicker .ui-datepicker-next {
    right: 2px
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px
}

.ui-datepicker .ui-datepicker-next span, .ui-datepicker .ui-datepicker-prev span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 45%
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: 700;
    border: 0
}

.ui-datepicker td {
    border: 0;
    padding: 1px
}

.ui-datepicker td a, .ui-datepicker td span {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
}

.ui-datepicker.ui-datepicker-multi {
    width: auto
}

.ui-datepicker-multi .ui-datepicker-group {
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0
}

.ui-datepicker-rtl {
    direction: rtl
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group {
    float: right
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px
}

.ui-datepicker .ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    left: .5em;
    top: .3em
}

.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative
}

.ui-dialog .ui-dialog-title {
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 20px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: 0 0;
    overflow: auto
}

.ui-dialog .ui-dialog-buttonpane {
    border-width: 1px 0 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer
}

.ui-dialog .ui-resizable-n {
    height: 2px;
    top: 0
}

.ui-dialog .ui-resizable-e {
    width: 2px;
    right: 0
}

.ui-dialog .ui-resizable-s {
    height: 2px;
    bottom: 0
}

.ui-dialog .ui-resizable-w {
    width: 2px;
    left: 0
}

.ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw, .ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw {
    width: 7px;
    height: 7px
}

.ui-dialog .ui-resizable-se {
    right: 0;
    bottom: 0
}

.ui-dialog .ui-resizable-sw {
    left: 0;
    bottom: 0
}

.ui-dialog .ui-resizable-ne {
    right: 0;
    top: 0
}

.ui-dialog .ui-resizable-nw {
    left: 0;
    top: 0
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move
}

.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none
}

.ui-resizable {
    position: relative
}

.ui-resizable-handle {
    position: absolute;
    font-size: .1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none
}

.ui-resizable-autohide .ui-resizable-handle, .ui-resizable-disabled .ui-resizable-handle {
    display: none
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px
}

.ui-progressbar {
    height: 2em;
    overflow: hidden
}

.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height: 100%
}

.ui-progressbar .ui-progressbar-overlay {
    background: url(data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==);
    height: 100%;
    filter: alpha(opacity=25);
    opacity: .25
}

.ui-progressbar-indeterminate .ui-progressbar-value {
    background-image: none
}

.ui-selectable {
    -ms-touch-action: none;
    touch-action: none
}

.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted #000
}

.ui-selectmenu-menu {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none
}

.ui-selectmenu-menu .ui-menu {
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 1px
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    padding: 2px .4em;
    margin: .5em 0 0 0;
    height: auto;
    border: 0
}

.ui-selectmenu-open {
    display: block
}

.ui-selectmenu-text {
    display: block;
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis
}

.ui-selectmenu-button.ui-button {
    white-space: nowrap;
    width: 14em
}

.ui-selectmenu-icon.ui-icon {
    float: right;
    margin-top: 0
}

.ui-slider {
    position: relative;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0
}

.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit
}

.ui-slider-horizontal {
    height: .8em
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0
}

.ui-slider-vertical {
    width: .8em;
    height: 100px
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%
}

.ui-slider-vertical .ui-slider-range-min {
    bottom: 0
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0
}

.ui-sortable-handle {
    -ms-touch-action: none;
    touch-action: none
}

.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    vertical-align: middle
}

.ui-spinner-input {
    border: none;
    background: 0 0;
    color: inherit;
    padding: .222em 0;
    margin: .2em 0;
    vertical-align: middle;
    margin-left: .4em;
    margin-right: 2em
}

.ui-spinner-button {
    width: 1.6em;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: default;
    display: block;
    overflow: hidden;
    right: 0
}

.ui-spinner a.ui-spinner-button {
    border-top-style: none;
    border-bottom-style: none;
    border-right-style: none
}

.ui-spinner-up {
    top: 0
}

.ui-spinner-down {
    bottom: 0
}

.ui-tabs {
    position: relative;
    padding: .2em
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .5em 1em;
    text-decoration: none
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px
}

.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    cursor: text
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: 0 0
}

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px
}

body .ui-tooltip {
    border-width: 2px
}

.ui-widget {
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
    font-size: 1.1em
}

.ui-widget .ui-widget {
    font-size: 1em
}

.ui-widget button, .ui-widget input, .ui-widget select, .ui-widget textarea {
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
    font-size: 1em
}

.ui-widget.ui-widget-content {
    border: 1px solid #ccc
}

.ui-widget-content {
    border: 1px solid #ddd;
    background: #eee url(../images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
    color: #333
}

.ui-widget-content a {
    color: #333
}

.ui-widget-header {
    border: 1px solid #e78f08;
    background: #f6a828 url(../images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
    color: #fff;
    font-weight: 700
}

.ui-widget-header a {
    color: #fff
}

.ui-button, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, html .ui-button.ui-state-disabled:active, html .ui-button.ui-state-disabled:hover {
    border: 1px solid #ccc;
    background: #f6f6f6 url(../images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
    font-weight: 700;
    color: #1c94c4
}

.ui-button, .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button {
    color: #1c94c4;
    text-decoration: none
}

.ui-button:focus, .ui-button:hover, .ui-state-focus, .ui-state-hover, .ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-focus, .ui-widget-header .ui-state-hover {
    border: 1px solid #fbcb09;
    background: #fdf5ce url(../images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
    font-weight: 700;
    color: #c77405
}

.ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, a.ui-button:focus, a.ui-button:hover {
    color: #c77405;
    text-decoration: none
}

.ui-visual-focus {
    box-shadow: 0 0 3px 1px #5e9ed6
}

.ui-button.ui-state-active:hover, .ui-button:active, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active {
    border: 1px solid #fbd850;
    background: #fff url(../images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
    font-weight: 700;
    color: #eb8f00
}

.ui-icon-background, .ui-state-active .ui-icon-background {
    border: #fbd850;
    background-color: #eb8f00
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #eb8f00;
    text-decoration: none
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fed22f;
    background: #ffe45c url(../images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
    color: #363636
}

.ui-state-checked {
    border: 1px solid #fed22f;
    background: #ffe45c
}

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
    color: #363636
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
    border: 1px solid #cd0a0a;
    background: #b81900 url(../images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
    color: #fff
}

.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
    color: #fff
}

.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
    color: #fff
}

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
    font-weight: 700
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    font-weight: 400
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none
}

.ui-state-disabled .ui-icon {
    filter: Alpha(Opacity=35)
}

.ui-icon {
    width: 16px;
    height: 16px
}

.ui-icon, .ui-widget-content .ui-icon {
    background-image: url(../images/ui-icons_222222_256x240.png)
}

.ui-widget-header .ui-icon {
    background-image: url(../images/ui-icons_ffffff_256x240.png)
}

.ui-button:focus .ui-icon, .ui-button:hover .ui-icon, .ui-state-focus .ui-icon, .ui-state-hover .ui-icon {
    background-image: url(../images/ui-icons_ef8c08_256x240.png)
}

.ui-button:active .ui-icon, .ui-state-active .ui-icon {
    background-image: url(../images/ui-icons_ef8c08_256x240.png)
}

.ui-button .ui-state-highlight.ui-icon, .ui-state-highlight .ui-icon {
    background-image: url(../images/ui-icons_228ef1_256x240.png)
}

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
    background-image: url(../images/ui-icons_ffd27a_256x240.png)
}

.ui-button .ui-icon {
    background-image: url(../images/ui-icons_ef8c08_256x240.png)
}

.ui-icon-blank {
    background-position: 16px 16px
}

.ui-icon-caret-1-n {
    background-position: 0 0
}

.ui-icon-caret-1-ne {
    background-position: -16px 0
}

.ui-icon-caret-1-e {
    background-position: -32px 0
}

.ui-icon-caret-1-se {
    background-position: -48px 0
}

.ui-icon-caret-1-s {
    background-position: -65px 0
}

.ui-icon-caret-1-sw {
    background-position: -80px 0
}

.ui-icon-caret-1-w {
    background-position: -96px 0
}

.ui-icon-caret-1-nw {
    background-position: -112px 0
}

.ui-icon-caret-2-n-s {
    background-position: -128px 0
}

.ui-icon-caret-2-e-w {
    background-position: -144px 0
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px
}

.ui-icon-triangle-1-s {
    background-position: -65px -16px
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px
}

.ui-icon-arrow-1-s {
    background-position: -65px -32px
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px
}

.ui-icon-arrowthick-1-n {
    background-position: 1px -48px
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px
}

.ui-icon-arrow-4 {
    background-position: 0 -80px
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px
}

.ui-icon-extlink {
    background-position: -32px -80px
}

.ui-icon-newwin {
    background-position: -48px -80px
}

.ui-icon-refresh {
    background-position: -64px -80px
}

.ui-icon-shuffle {
    background-position: -80px -80px
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px
}

.ui-icon-folder-open {
    background-position: -16px -96px
}

.ui-icon-document {
    background-position: -32px -96px
}

.ui-icon-document-b {
    background-position: -48px -96px
}

.ui-icon-note {
    background-position: -64px -96px
}

.ui-icon-mail-closed {
    background-position: -80px -96px
}

.ui-icon-mail-open {
    background-position: -96px -96px
}

.ui-icon-suitcase {
    background-position: -112px -96px
}

.ui-icon-comment {
    background-position: -128px -96px
}

.ui-icon-person {
    background-position: -144px -96px
}

.ui-icon-print {
    background-position: -160px -96px
}

.ui-icon-trash {
    background-position: -176px -96px
}

.ui-icon-locked {
    background-position: -192px -96px
}

.ui-icon-unlocked {
    background-position: -208px -96px
}

.ui-icon-bookmark {
    background-position: -224px -96px
}

.ui-icon-tag {
    background-position: -240px -96px
}

.ui-icon-home {
    background-position: 0 -112px
}

.ui-icon-flag {
    background-position: -16px -112px
}

.ui-icon-calendar {
    background-position: -32px -112px
}

.ui-icon-cart {
    background-position: -48px -112px
}

.ui-icon-pencil {
    background-position: -64px -112px
}

.ui-icon-clock {
    background-position: -80px -112px
}

.ui-icon-disk {
    background-position: -96px -112px
}

.ui-icon-calculator {
    background-position: -112px -112px
}

.ui-icon-zoomin {
    background-position: -128px -112px
}

.ui-icon-zoomout {
    background-position: -144px -112px
}

.ui-icon-search {
    background-position: -160px -112px
}

.ui-icon-wrench {
    background-position: -176px -112px
}

.ui-icon-gear {
    background-position: -192px -112px
}

.ui-icon-heart {
    background-position: -208px -112px
}

.ui-icon-star {
    background-position: -224px -112px
}

.ui-icon-link {
    background-position: -240px -112px
}

.ui-icon-cancel {
    background-position: 0 -128px
}

.ui-icon-plus {
    background-position: -16px -128px
}

.ui-icon-plusthick {
    background-position: -32px -128px
}

.ui-icon-minus {
    background-position: -48px -128px
}

.ui-icon-minusthick {
    background-position: -64px -128px
}

.ui-icon-close {
    background-position: -80px -128px
}

.ui-icon-closethick {
    background-position: -96px -128px
}

.ui-icon-key {
    background-position: -112px -128px
}

.ui-icon-lightbulb {
    background-position: -128px -128px
}

.ui-icon-scissors {
    background-position: -144px -128px
}

.ui-icon-clipboard {
    background-position: -160px -128px
}

.ui-icon-copy {
    background-position: -176px -128px
}

.ui-icon-contact {
    background-position: -192px -128px
}

.ui-icon-image {
    background-position: -208px -128px
}

.ui-icon-video {
    background-position: -224px -128px
}

.ui-icon-script {
    background-position: -240px -128px
}

.ui-icon-alert {
    background-position: 0 -144px
}

.ui-icon-info {
    background-position: -16px -144px
}

.ui-icon-notice {
    background-position: -32px -144px
}

.ui-icon-help {
    background-position: -48px -144px
}

.ui-icon-check {
    background-position: -64px -144px
}

.ui-icon-bullet {
    background-position: -80px -144px
}

.ui-icon-radio-on {
    background-position: -96px -144px
}

.ui-icon-radio-off {
    background-position: -112px -144px
}

.ui-icon-pin-w {
    background-position: -128px -144px
}

.ui-icon-pin-s {
    background-position: -144px -144px
}

.ui-icon-play {
    background-position: 0 -160px
}

.ui-icon-pause {
    background-position: -16px -160px
}

.ui-icon-seek-next {
    background-position: -32px -160px
}

.ui-icon-seek-prev {
    background-position: -48px -160px
}

.ui-icon-seek-end {
    background-position: -64px -160px
}

.ui-icon-seek-start {
    background-position: -80px -160px
}

.ui-icon-seek-first {
    background-position: -80px -160px
}

.ui-icon-stop {
    background-position: -96px -160px
}

.ui-icon-eject {
    background-position: -112px -160px
}

.ui-icon-volume-off {
    background-position: -128px -160px
}

.ui-icon-volume-on {
    background-position: -144px -160px
}

.ui-icon-power {
    background-position: 0 -176px
}

.ui-icon-signal-diag {
    background-position: -16px -176px
}

.ui-icon-signal {
    background-position: -32px -176px
}

.ui-icon-battery-0 {
    background-position: -48px -176px
}

.ui-icon-battery-1 {
    background-position: -64px -176px
}

.ui-icon-battery-2 {
    background-position: -80px -176px
}

.ui-icon-battery-3 {
    background-position: -96px -176px
}

.ui-icon-circle-plus {
    background-position: 0 -192px
}

.ui-icon-circle-minus {
    background-position: -16px -192px
}

.ui-icon-circle-close {
    background-position: -32px -192px
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px
}

.ui-icon-circle-check {
    background-position: -208px -192px
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px
}

.ui-corner-all, .ui-corner-left, .ui-corner-tl, .ui-corner-top {
    border-top-left-radius: 4px
}

.ui-corner-all, .ui-corner-right, .ui-corner-top, .ui-corner-tr {
    border-top-right-radius: 4px
}

.ui-corner-all, .ui-corner-bl, .ui-corner-bottom, .ui-corner-left {
    border-bottom-left-radius: 4px
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-br, .ui-corner-right {
    border-bottom-right-radius: 4px
}

.ui-widget-overlay {
    background: #666 url(../images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
    opacity: .5;
    filter: Alpha(Opacity=50)
}

.ui-widget-shadow {
    -webkit-box-shadow: -5px -5px 5px #000;
    box-shadow: -5px -5px 5px #000
}