body {
    font-family: "Open Sans", sans-serif;
    /*font-family: "Roboto", sans-serif;*/
    margin-left: 80pt;
    margin-right: 60pt;
}

.tiny-text {
    font-size: 8pt;
}

.small-text {
    font-size: 10pt;
}

.headline-gray {
    color: #777;
}

.title {
    text-align: left;
    padding-top: 20pt;
    padding-bottom: 15pt;
    color:#117281;
    font-weight: 700;
}

.bert-image {
    margin-right: 10pt;
    width: 20pt;
}

.intro-text-container {
    padding-bottom: 15pt;
}

.intro-text {
    color: #666;
    font-size: 10pt;
    font-weight: 300;
    width: 100%;
}

.intro-title {
    font-weight: 700;
    font-size: 11pt;
    color:#117281;
    margin-bottom: 5pt;
}

.footnote-id {
    font-weight: 300;
    font-size: 8pt;
    color: #117281;
}

.footnotes {
    width: 50%;
    font-size: 9pt;
    font-weight: 300;
    margin-top: 100pt;
}

input, textarea, select { font-family:inherit; font-weight: 400; }

.intro-text-left {
    margin-right:5pt;
}

.intro-text-right {
    margin-left:5pt;
}

.answer-highlighted {
    color: purple;
    font-weight: bold;
    font-size: 11pt;
}

.no-wrap-text {
    white-space:nowrap;
}

.own-example-input {
    margin-left: 10pt;
}

input[type=text] {
    height: 25px;
    font-size: 10pt;
    margin-bottom: 5pt;
}

.form-label {
    font-size: 9pt;
    font-weight: bold;
    margin: 0;
    float: left;
}

.form-label-inside {
    float: None;
}

.layer-label {
    font-size: 9pt;
    font-weight: bold;
    margin-top: 10pt;
}

.layer-label-large {
    font-size: 12pt;
    font-weight: bold;
}

.slider-container {
    width: 50%;
    padding-top: 20pt;
    padding-bottom: 5pt;
    text-align: left;
}

.task-tab-wrapper {
    background-color: #f4f7f8;
    text-align: center;
    font-size: 11pt;
}

.task-tab {
    border-top: None;
    border-left: None;
    border-right: None;
    font-weight: normal;
    border-bottom: solid #bbb 1px;
    cursor: pointer;
}

.task-tab-active {
    border-top: solid #bbb 1px;
    border-left: solid #bbb 1px;
    border-right: solid #bbb 1px;
    font-weight: bold;
    border-bottom: None;
}

.task-tab-deactived {
    color: #666;
    cursor: default;
}

.form-container {
    padding: 10pt  10pt 20pt 20pt;
    background-color: #f4f7f8;
    margin-bottom: 10pt;
    border-top: solid #ccc 1px;
    border-left: solid #ccc 1px;
    border-right: solid #ccc 1px;
    border-bottom: solid #ccc 1px;
    box-shadow: 8px 8px 10px #88888833;
}

.form-textarea {
    font-size: 10pt;
    margin-bottom: 5pt;
    margin-top: 15pt;
}

.form-button {
    margin-top: 10pt;
}

.id-switcher-input {
    margin-top: 11pt;
    width: 150pt;
    color: #495057;
    margin-left: -3pt;
    margin-right: -3pt;
    border-radius: .25rem;
    border: 1px solid #ced4da;
    padding: .25rem .25rem;
}

.id-switcher-input:disabled, .id-switcher-input[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.id-switcher-label {
    font-size: 10pt;
    font-weight: bold;
    margin-left: 2pt;
    margin-right: 2pt;
    cursor: pointer;
    color: #212529;
    user-select:none;
}

.id-switcher-label-inactive {
    color: #808080;
    cursor: default;
}

@media (max-width: 1015px) {
    .own-example-input {
        margin-left: 0;
        display: block;
    }
}

@media (max-width: 715px) {
    body {
        margin-left: 15pt;
        margin-right: 10pt;
    }
    .title {
        text-align: center;
    }
    .intro-text {
        font-size: 9pt;
    }
    .own-example-input {
        margin-left: 0;
        display: block;
    }
    .footnotes {
        width: 100%;
    }
    .id-switcher-input {
        width: 60pt;
    }
    .id-switcher-label {
        font-size: 8pt;
    }
    .form-textarea {
        font-size: 8pt;
    }
    .form-label {
        font-size: 8pt;
    }
}