/* ==========================================================================
   Overlay
   ========================================================================== */
#overlay {
    width:              100%;
    height:             100vh;
    position:           fixed;
    z-index:            99;
    top:                0;
    left:               0;
    background-color:   rgba(0, 0, 0, .6);
    box-shadow:         inset 0 0 35em rgba(0, 0, 0, .8);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    opacity:            0;
    -webkit-transition: opacity .6s, transform .6s ease;
    transition:         opacity .6s, transform .6s ease;
    overflow:           auto;
    transform:          translateY(-100vh);
}

.showOverlay #overlay {
    opacity:   1;
    transform: translateY(0);
}

.showOverlay #mainContainer {
    -webkit-filter: blur(2px);
    filter:         blur(2px);
}

#overlayWindow {
    position:           relative;
    background:         #FFF;
    border-radius:      5px;
    height:             auto;
    width:              90%;
    max-width:          500px;
    -webkit-transition: all .2s;
    transition:         all .2s;
}

.showOverlay #overlayWindow {
    box-shadow: 0 2em 5em rgba(0, 0, 0, 0.4);
}

.windowHeader {
    position:       relative;
    border-bottom:  1px solid #CCC;
    border-radius:  4px 4px 0 0;
    color:          var(--antipolis);
    font-family:    Oswald, Arial, sans-serif;
    font-size:      1.6em;
    font-weight:    300;
    padding:        1em;
    line-height:    1.2em;
    text-transform: uppercase;
}

.windowClose {
    position:                absolute;
    right:                   0;
    top:                     0;
    background:              var(--antipolis);
    color:                   #FFF;
    width:                   40px;
    height:                  40px;
    line-height:             35px;
    cursor:                  pointer;
    border-top-right-radius: 5px;
    text-align:              center;
    -webkit-transition:      all .3s;
    transition:              all .3s;
    font-size:               .9em;
    font-family:             Oswald, Arial, sans-serif;
}

.windowClose:hover {
    background: transparent;
    color:      var(--antipolis);
}

.windowContent {
    position:      relative;
    overflow:      auto;
    border-radius: 0 0 4px 4px;
    padding:       .5em 1.5em;
    box-sizing:    border-box;
    height:        auto;
    min-height:    180px;
    color:         #333;
}

.windowContent p {
    font-size:   1em;
    font-weight: normal;
    line-height: 150%;
    margin:      5px 0 15px;
}

.windowContent #insertButton {
    clear:   both;
    margin:  1em 0;
    display: none;
}

.windowContent #desc {
    font-size: .9em;
}

.windowContent #desc h4 {
    font-family: 'Roboto Condensed', Arial, sans-serif;
}

@media only screen and (min-width: 500px) {
    #overlay {
        position: fixed;
    }

    #overlayWindow {
    }
}

/* ==========================================================================
   Common rules
   ========================================================================== */
.infoBlue {
    color: #0A77D5;
}

.inv {
    display: none;
}

.small {
    padding: 4px;
}

.selectionLink {
    padding:    1em 0;
    text-align: center;
}

.actualStep {
    font-family:   Oswald, Arial, sans-serif;
    font-size:     1.5rem;
    font-weight:   300;
    margin-bottom: 1.5em;
    color:         #AAA;
}

span.placeholderSpan {
    display:       inline-block;
    border-bottom: 1px solid #BBB;
    width:         auto;
    color:         var(--antipolis);
}

p.nextStep {
    margin-top: 2em;
}

input[type="submit"].right {
    margin-right: 2em;
}

.code {
    display:          inline-block;
    border:           1px solid #DBDBDB;
    padding:          .5em;
    background-color: var(--warmGrey);
    color:            var(--antipolis);
    font-family:      Monospace, Serif, serif;
    font-size:        1.3rem;
    cursor:           pointer;
}

/* ==========================================================================
   Inputs
   ========================================================================== */

.inputSpamField {
    display: none;
}

.requiredField {
    font-size:      0.8em;
    vertical-align: top;
    color:          #9F3636;
}

*:focus { outline: none; }

.inputField, .inputSelect, .textarea {
    -webkit-transition: all 0.2s ease-in-out;
    transition:         all 0.2s ease-in-out;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    color:              #333;
    background-color:   #FFF;
    border:             1px solid #CCC;
    font-family:        'Roboto', sans-serif;
    font-size:          1em;
    padding:            12px;
    display:            block;
}

select.inputField[multiple="multiple"] {
    height: 300px;
}

select {
    background-image:    url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23333%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
    background-repeat:   no-repeat;
    background-position: right center;
    -webkit-appearance:  none;
    -moz-appearance:     none;
    appearance:          none;
    padding-right:       25px;
    font-weight:         400;
}

.inputField:hover, .inputSelect:hover, .textarea:hover {
    background-color: #FCFCFC;
    border:           1px solid #BBB;
}

.inputField:focus, .inputSelect:focus, .textarea:focus {
    background-color: #FFF;
    border:           1px solid #666;
}

input.dateTimeField,
select.dateTimeField {
    background-color: rgba(0, 0, 0, .3);
    border:           1px solid rgba(0, 0, 0, .6);
    padding:          5px;
    width:            auto;
    height:           auto;
    color:            #FFF;
}

input.dateTimeField:hover,
select.dateTimeField:hover {
    background-color: rgba(0, 0, 0, .4);
    border:           1px solid rgba(0, 0, 0, .8);
}

optgroup {
    font-weight: normal;
    font-style:  normal;
    line-height: 2em;
    font-size:   1.2em;
    padding:     4px;
    color:       #EB690B;
}

optgroup option {
    color:          #333;
    font-size:      .8em;
    text-transform: capitalize;
    padding:        4px 0 4px 20px;
}

input[type=range] {
    -webkit-appearance: none;
    width:              auto;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    height:        6px;
    cursor:        pointer;
    box-shadow:    0 0 0 rgba(0, 0, 0, 0.5), 0 0 0 rgba(13, 13, 13, 0.5);
    background:    rgba(14, 15, 17, 0.4);
    border-radius: 0;
    border:        0 solid #010101;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow:         1px 1px 1px rgba(0, 0, 0, 0.54), 0 0 1px rgba(13, 13, 13, 0.54);
    border:             2px solid rgba(0, 0, 0, 0.1);
    height:             21px;
    width:              21px;
    border-radius:      50px;
    background:         #FFFFFF;
    cursor:             pointer;
    -webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: rgba(26, 27, 31, 0.4);
}

input[type=range]::-moz-range-track {
    height:        6px;
    cursor:        pointer;
    box-shadow:    0 0 0 rgba(0, 0, 0, 0.5), 0 0 0 rgba(13, 13, 13, 0.5);
    background:    rgba(14, 15, 17, 0.4);
    border-radius: 0;
    border:        0 solid #010101;
}

input[type=range]::-moz-range-thumb {
    box-shadow:    1px 1px 1px rgba(0, 0, 0, 0.54), 0 0 1px rgba(13, 13, 13, 0.54);
    border:        2px solid rgba(0, 0, 0, 0.1);
    height:        21px;
    width:         21px;
    border-radius: 50px;
    background:    #FFFFFF;
    cursor:        pointer;
}

input[type=range]::-ms-track {
    height:       6px;
    cursor:       pointer;
    background:   transparent;
    border-color: transparent;
    color:        transparent;
}

input[type=range]::-ms-fill-lower {
    background:    rgba(2, 3, 3, 0.4);
    border:        0 solid #010101;
    border-radius: 0;
    box-shadow:    0 0 0 rgba(0, 0, 0, 0.5), 0 0 0 rgba(13, 13, 13, 0.5);
}

input[type=range]::-ms-fill-upper {
    background:    rgba(14, 15, 17, 0.4);
    border:        0 solid #010101;
    border-radius: 0;
    box-shadow:    0 0 0 rgba(0, 0, 0, 0.5), 0 0 0 rgba(13, 13, 13, 0.5);
}

input[type=range]::-ms-thumb {
    box-shadow:    1px 1px 1px rgba(0, 0, 0, 0.54), 0 0 1px rgba(13, 13, 13, 0.54);
    border:        2px solid rgba(0, 0, 0, 0.1);
    height:        21px;
    width:         21px;
    border-radius: 50px;
    background:    #FFFFFF;
    cursor:        pointer;
}

input[type=range]:focus::-ms-fill-lower {
    background: rgba(14, 15, 17, 0.4);
}

input[type=range]:focus::-ms-fill-upper {
    background: rgba(26, 27, 31, 0.4);
}

.rangeOutput {
    margin-top: -8px;
    text-align: right;
}

.fieldError,
select.dateTimeField.fieldError {
    border: 1px solid #9F3636;
}

input.inputField[readonly="readonly"] {
    color:      #FFF;
    background: rgba(0, 0, 0, .3);
    border:     1px solid rgba(0, 0, 0, .6);
}

.inputSelect option {
    text-shadow: none;
    padding:     0;
    margin:      5px 0 5px 0;
}

.textarea {
    height:      150px;
    font-size:   1em;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4em;
}

/** Checkboxes */

input[type="checkbox"].chkBox {
    border:   0;
    clip:     rect(0 0 0 0);
    height:   1px;
    margin:   -1px;
    overflow: hidden;
    padding:  0;
    position: absolute;
    width:    1px;
}

input[type="checkbox"].chkBox + label {
    position:            relative;
    padding:             0;
    padding-left:        2em;
    vertical-align:      middle;
    -webkit-user-select: none;
    -moz-user-select:    none;
    -ms-user-select:     none;
    user-select:         none;
    cursor:              pointer;
    display:             inline-block;
    text-align:          left;
}

input[type="checkbox"].chkBox + label:before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    width:      22px;
    height:     22px;
    background: #FFF;
    font-size:  22px;
    text-align: center;
    border:     1px solid #333;
}

input[type="checkbox"].chkBox + label:after {
    content:            '';
    background-color:   transparent;
    position:           absolute;
    top:                7px;
    left:               5px;
    width:              12px;
    height:             6px;
    border-color:       var(--antipolis);
    border-style:       solid;
    border-width:       0 0 2px 2px;
    -webkit-transform:  rotate(-50deg) scale(0);
    -ms-transform:      rotate(-50deg) scale(0);
    transform:          rotate(-50deg) scale(0);
    -webkit-transition: -webkit-transform 150ms ease-out;
    transition:         transform 150ms ease-out;
}

input[type="checkbox"]:checked + label:after {
    -webkit-transform: rotate(-50deg) scale(1.3);
    -ms-transform:     rotate(-50deg) scale(1.3);
    transform:         rotate(-50deg) scale(1.3);
}


/** Radios */
input[type="radio"] {
    border:   0;
    clip:     rect(0 0 0 0);
    height:   1px;
    margin:   -1px;
    overflow: hidden;
    padding:  0;
    position: absolute;
    width:    1px;
}

input[type="radio"] + label {
    position:            relative;
    padding:             0 10px 0 2em;
    vertical-align:      middle;
    -webkit-user-select: none;
    -moz-user-select:    none;
    -ms-user-select:     none;
    user-select:         none;
    cursor:              pointer;
    display:             inline-block;
    text-align:          left;
}

input[type="radio"] + label:before {
    content:    '';
    position:   absolute;
    top:        2px;
    left:       0;
    width:      22px;
    height:     22px;
    background: #FFF;
    font-size:  22px;
    text-align: center;
    border:     1px solid #333;
}

input[type="radio"] + label:after {
    content:            '';
    background-color:   var(--antipolis);
    position:           absolute;
    top:                6px;
    left:               4px;
    width:              14px;
    height:             14px;
    -webkit-transform:  scale(0);
    -ms-transform:      scale(0);
    transform:          scale(0);
    -webkit-transition: -webkit-transform 150ms ease-out;
    transition:         transform 150ms ease-out;
}

input[type="radio"]:checked + label:after {
    -webkit-transform: scale(1);
    -ms-transform:     scale(1);
    transform:         scale(1);
}

input[type="radio"] + label:before,
input[type="radio"] + label:after {
    border-radius: 50%;
}

.groupSelectionContainer {
    position:   relative;
    width:      100%;
    margin-top: 2em;
}

.groupSelectionItem {
    position:           relative;
    margin-bottom:      2em;
    -webkit-transition: all .3s;
    transition:         all .3s;
    border:             1px solid #DDD;
}

.groupSelectionItem:hover {
    box-shadow: 0 1em 2em rgba(0, 0, 0, .2);
}

.groupSelectionItem h4 {
    background: var(--warmGrey);
    color:      #333;
    margin:     0;
    padding:    .5em;
    text-align: center;
    font-size:  1rem;
}

.groupSelectionItem .description {
    color:       #333;
    margin:      0;
    padding:     .5em .5em 3.5em;
    font-size:   .9rem;
    line-height: 1.3rem;
    text-align:  center;
}

.groupSelectionItem .description h3 {
    font-size:  1rem;
    text-align: center;
}

.groupSelectionItem .select {
    position: absolute;
    bottom:   0;
    width:    100%
}

.groupSelectionItem .select a {
    width:   100%;
    display: block;
}

@media only screen and (min-width: 768px) {
    .groupSelectionContainer {
        display:     flex;
        /*justify-content: center;*/
        flex-wrap:   wrap;
        width:       calc(100% + 1em);
        margin-left: -.5em;
    }

    .groupSelectionItem {
        width:        calc(33.3% - 1em);
        margin-left:  .5em;
        margin-right: .5em;
    }
}

input[type="text"].userFill {
    border:             1px solid #EEE;
    border-bottom:      1px solid #BBB;
    background:         #FAFAFA;
    padding:            5px;
    font-family:        'Roboto', sans-serif;
    font-size:          inherit;
    display:            inline-block;
    margin:             0 5px;
    color:              #333;
    -webkit-transition: all .3s;
    transition:         all .3s;
    width:              100px;
}

input[type="text"].userFill:focus {
    border:        1px solid #BBB;
    border-bottom: 1px solid var(--antipolis);
    background:    #EEE;
}

textarea.userFill {
    position:              relative;
    width:                 100%;
    height:                500px;
    border:                1px solid #BBB;
    background-attachment: local;
    background-image:      linear-gradient(to right, white 10px, transparent 10px),
                           linear-gradient(to left, white 10px, transparent 10px),
                           repeating-linear-gradient(white, white 30px, #DDD 30px, #DDD 31px, white 31px);
    line-height:           31px;
    padding:               7px 10px;
    font-family:           'Roboto', sans-serif;
    font-size:             inherit;
}


/* ==========================================================================
   Opposite table
   ========================================================================== */
table.opposite {
    border: 0;
    width:  100%;
}

table.opposite td {
    padding:       5px 3em 5px 0;
    border-bottom: 1px solid #EEE;
    width:         50%;
}

table.opposite tr:last-of-type td {
    border: 0;
}

table.opposite td input[type="text"].userFill {
    width: 100%;
}

/* ==========================================================================
   TrueFalse table
   ========================================================================== */
table.trueFalse {
    border: 0;
    width:  100%;
}

table.trueFalse td {
    padding:        5px 3em 5px 0;
    border-bottom:  1px solid #EEE;
    width:          70%;
    vertical-align: top;
}

table.trueFalse td:nth-of-type(2) {
    width: 30%;
}

table.trueFalse tr:last-of-type td {
    border: 0;
}

table.trueFalse td div {
    display: inline-block;
}

/* ==========================================================================
   Fragen
   ========================================================================== */
.questionBlock {
    margin-bottom:  1.5em;
    padding-bottom: 1.5em;
    border-bottom:  1px dashed #DDD;
}

.questionImage {
    margin-bottom: 1em;
}

.questionDescription {
    color:         #888;
    margin-bottom: 1em;
}

.question tr td:first-of-type {
    padding-top: 10px;
}

.points {
    border-top:  1px solid rgba(0, 0, 0, .1);
    padding:     5px;
    text-align:  right;
    margin-top:  1em;
    margin-left: -10px;
}

.pointsTotal {
    background:  rgba(0, 0, 0, .05);
    border:      1px solid rgba(0, 0, 0, .1);
    padding:     5px;
    text-align:  right;
    margin-top:  1em;
    margin-left: -10px;
}

.question td,
.question p,
.question div {
    position: relative;
}

/* ==========================================================================
   MultipleChoice
   ========================================================================== */

.question div {
    padding-top: 5px;
}

/* ==========================================================================
   Auswertungen
   ========================================================================== */

table td.correct,
p.correct,
div.correct,
table td.wrong,
p.wrong,
div.wrong {
    padding-left: 1.5em;
}

td.correct:before,
p.correct:before,
div.correct:before,
td.wrong:before,
p.wrong:before,
div.wrong:before {
    position:    absolute;
    top:         2px;
    left:        -5px;
    content:     '\f058';
    font-family: 'Font Awesome 5 Pro';
    font-size:   1.5em;
    color:       #0E7705;
}

td.wrong:before,
p.wrong:before,
div.wrong:before {
    content: '\f057';
    color:   #C9321C;
}

td.correct:before,
td.wrong:before {
    top: 10px;
}

div.correct:before,
div.wrong:before {
    top: 6px;
}

.multipleAssignCorrectValue {
    float: right;
    color: #0E7705;
}

.greenOk {
    color: #0E7705;
    float: right;
}

.mlft {
    margin-left: -8px;
}

.copyable {
    cursor:             pointer;
    -webkit-transition: all .3s;
    transition:         all .3s;
    border:             1px solid #DDD;
    color:              #AAA;
}

.copyable:hover {
    opacity: .8;
    border:  1px solid #CCC;
}

/** Password strength ************************************************************************************************************************************/

#pwdStrengthContainer {
    width:    100%;
    height:   4px;
    position: absolute;
    display:  block;
    bottom:   -4px;
}

#pwdStrength {
    position:           absolute;
    top:                0;
    left:               0;
    width:              0;
    height:             100%;
    display:            block;
    -webkit-transition: all .3s;
    -moz-transition:    all .3s;
    -ms-transition:     all .3s;
    -o-transition:      all .3s;
    transition:         all .3s;
}


#pwdStrength.bad {
    background-color: #333;
    width:            10%;
}

#pwdStrength.lowest {
    background-color: #990000;
    width:            20%;
}

#pwdStrength.low {
    background-color: #EE0000;
    width:            40%;
}

#pwdStrength.medium {
    background-color: #EE8226;
    width:            60%;
}

#pwdStrength.better {
    background-color: #0E7705;
    width:            80%;
}

#pwdStrength.perfect {
    background-color: #0EC505;
    width:            100%;
}

p label small {
    color: #AAA;
}

.registerOk,
.registerTip,
.registerError {
    color:        #0EC505;
    font-size:    3em;
    float:        left;
    margin-right: 1em;
}

.registerError {
    color: #EE0000;
}

.registerTip {
    color: #0073EE;
}

form h4 {
    margin-top: 1.5em;
}

/*#page > h2 {*/
/*    margin-bottom: 10px;*/
/*    position:      relative;*/
/*}*/

/*#page > h2:before {*/
/*    width:         80px;*/
/*    border-bottom: 1px solid #CCC;*/
/*    position:      absolute;*/
/*    content:       '';*/
/*    bottom:        -5px;*/
/*}*/

h2.lowercase,
h3.lowercase,
h4.lowercase {
    text-transform: inherit;
}

h3.lowercase {
    color: #555;
}

/* ==========================================================================
   ArticleList
   ========================================================================== */

#articleList {
    list-style-type: none;
    margin:          2em 0 0 0;
    padding:         0;
}

#articleList .articleItem {
    position:           relative;
    border:             1px solid #DDD;
    margin-bottom:      2em;
    -webkit-transition: all .3s;
    transition:         all .3s;
}

#articleList .articleItem:hover {
    box-shadow: 0 1em 2em rgba(0, 0, 0, .15);
}

#articleList .articleItem.active {
    border-color: var(--antipolis);
}

.articleItem h3 {
    text-align:     left;
    padding:        1em 90px 0 1em;
    text-transform: inherit;
    font-size:      1.2em;
    color:          #333;
    min-height:     70px;
}

.articleItem .price,
.standAlonePrice {
    position:      absolute;
    top:           -40px;
    right:         -5px;
    width:         100px;
    height:        100px;
    line-height:   100px;
    background:    var(--antipolis);
    color:         #FFF;
    border:        1px dashed #FFF;
    border-radius: 50%;
    text-align:    center;
    margin:        1em auto 1em;
    font-size:     1.5rem;
    font-family:   Oswald, Arial, sans-serif;
    font-weight:   600;
    box-shadow:    0 0 0 3px var(--antipolis);
}

.articleItem .images img {
    display:       block;
    margin-top:    2em;
    margin-bottom: 0;
    border-top:    1px solid #DDD;
    border-bottom: 1px solid #DDD;

}

.articleItem .image img {
    display:       block;
    margin-top:    0;
    margin-bottom: 2em;
    border:        1px solid #DDD;
}

.articleItem .description {
    padding: 1em;
    color:   #888;
}

.articleItem .description dl {
    width:  100%;
    margin: 0 0 1em;
}

.articleItem .description dt,
.articleItem .description dd {
    width:   50%;
    display: inline-block;
    float:   none;
    margin:  0;
}

.articleItem .description dd {
    text-align: right;
    width:      48%;
}

.articleItem .description .infoTable {
    padding:       1em;
    background:    rgba(0, 0, 0, .05);
    border:        1px solid #CCC;
    width:         100%;
    margin-bottom: 1em;
}

@media only screen and (min-width: 768px) {

    #articleList {
        display:        flex;
        flex-direction: row;
        flex-wrap:      wrap;
        width:          calc(100% + 2em);
        margin-left:    -1em;
    }

    #articleList .articleItem {
        width:           calc(50% - 2em);
        margin:          0 1em 2em;
        display:         flex;
        flex-direction:  column;
        justify-content: space-between;
    }

    .articleItem .price {
        right: -15px;
    }
}

.finishedInfo {
    border:        1px solid #CCC;
    padding:       1em;
    margin-bottom: 2em;
    background:    rgba(0, 0, 0, .05);
}

table#subscriptionTable {
    width:         100%;
    margin-bottom: 2em;
    border:        none;
}

table#subscriptionTable td a.startGroup {
    color: var(--antipolis);
}

table#subscriptionTable td a.startGroup:hover {
    color: #AAA;
}

table#subscriptionTable td {
    padding: 5px;
}

table#subscriptionTable tr.tableHeader td {
    font-weight:   300;
    font-size:     1.25rem;
    font-family:   Oswald, Arial, sans-serif;
    color:         #333;
    border-bottom: 1px solid #CCC;
}

table#subscriptionTable td:nth-of-type(1) {
    text-align: right;
}

table#subscriptionTable td:nth-of-type(3) {
    text-align: right;
}

table#subscriptionTable td:nth-of-type(4) {
    text-align: right;
}

#page .message ul {
    margin:  0;
    padding: 0;
}

#page .message ul li {
    padding: 16px 0 16px 50px;
}

.message.ok,
.message.error,
.message.errorFix,
.message.info,
.message.tip {
    box-shadow:    .1px .1px 1px rgba(0, 0, 0, .4);
    margin-bottom: 2em;
}