body {
    background: #F5F5F5;
    font: 18px/1.5 sans-serif; }
h1, h2 {
    line-height: 1.2;
    margin: 0 0 .5em; }
h1 { font-size: 36px; }
h2 {
    font-size: 21px;
    margin-bottom: 1em; }
h3 {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
h4 {
    margin-top: 24px !important;
    font-weight: normal !important; }
p { margin: 0 0 1em 0; }
a { color: #0000F0; }
a:hover { text-decoration: none; }
code {
    background: #F5F5F5;
    max-width: 100px;
    padding: 2px 6px;
    word-wrap: break-word; }
#wrapper {
    background: #fff;
    margin: 0 auto;
    max-width: 1000px;
    width: 95%;
    }
#container { padding: 4px 24px 16px; }
#headerClientName { text-align: center; margin-bottom: 4px; font-size: 0.8rem; color: #888; }
#welcome, #status { margin-bottom: 2em; }
#welcome h1 span {
    display: block;
    font-size: 75%; }
.tableList .row {
    padding-top: 4px;
    padding-bottom: 4px; }
table tr.even { background-color: #f6f6f6; }
label { font-weight: normal !important; }
.highlight {
    color: orange;
    font-weight: bold; }
.softMessage {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    padding: 80px;
    font-style: italic;
    color: #888;
    text-align: center;
    font-weight: normal;
    font-size: 12px; }
.feeMessage {
    background-color: #f8f8f8;
    border: 3px solid #eee;
    border-radius: 6px;
    padding: 80px 12px;
    color: #666;
    text-align: center;
    font-weight: normal; }
.loginForm label {
    width: 120px;
    margin-right: 6px;
    text-align: right; }
.loginForm input { width: 180px; }
.errorMessage {
    padding: 40px;
    text-align: center;
    font-style: italic;
    background-color: #ffe2dd;
    border: 2px solid #ee1a03;
    border-radius: 6px;
    margin-bottom: 12px; }
.successMessage {
    padding: 40px;
    text-align: center;
    background-color: #d0ffcb;
    border: 2px solid #369156;
    border-radius: 6px;
    margin-bottom: 12px;}
.form-divider { height: 32px; }
select.form-control { margin-right: 8px; }
.label {
    font-size: 0.8em;
    color: #888;
    margin-top: 12px; }
.softColor { color: #aaa; }
.bigButtonContainer .bigButton {
    margin-bottom: 12px;
    margin-right: 4px;
    text-align: left;
    color: black;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #888;
    background-color: #f4f4f4;
    display: inline-block;
    padding: 6px;
    width: 100%; }
.bigButtonContainer .bigButton:hover { background-color: #eee; }
.bigButtonContainer .bigButton .buttonHeader { font-weight: bold; }
.bigButtonContainer .bigButton .buttonInfo,
.bigButtonContainer .bigButton .buttonText { font-size: 0.8em; }
.bigButtonContainer .bigButton .buttonText { color: #888; }
.commentGrey {
    color: #888;
    font-style: italic; }
.commentSmaller {
    color: #888;
    font-size: 0.8rem; }
.smallPaddingRight {
    padding-right: 4px; }
.eventTag {
    display: inline-block;
    margin-top: 8px;
    font-size: 16px;
    border-radius: 3px;
    padding: 2px 8px; }
.eventTag.online {
    color: #666;
    background-color: #eee;
    border: 1px solid #ccc; }
.eventTag.fullyBooked {
    color: darkred;
    background-color: #ffc9bf;
    border: 1px solid #cb9e9e; }
.linkInfo {
    background-color: #ccc;
    padding: 2px 8px;
    border: 1px solid #bbb;
    display: inline-block;
    text-decoration: none !important;
    font-weight: normal;
    font-size: 0.8em;
    margin: 6px 0 12px;
    border-radius: 3px;
    text-align: center;
}
.formInfoOnly {
    color: #888;
    padding: 0 8px 8px 0; }
.colorFileType-pdf        { color: #d14424; }
.colorFileType-word       { color: #2c64a9; }
.colorFileType-excel      { color: #2d965a; }
.colorFileType-powerpoint { color: #d14424; }
.colorFileType-video      { color: #d14424; }
.events .odd { background-color: #f5f5f5; }
.progressMessage { padding-left: 42px; }
.progressMessage .element { margin: 18px 0; }
.progressMessage .element i { margin-right: 8px; }

/* styling of form help messages */
span.help-block ul {
    background-color: #ffffc6;
    padding: 4px;
    border: 1px solid #d6d600;
    border-radius: 3px;
    margin-top: 3px; }

footer {
    background-color: #fff;
    margin-top: 42px;
    font-size: 0.8em;
    border-top: 1px solid #ccc;
    padding-top: 24px; }
footer div.footerElement {
    padding-bottom: 12px;
    display: inline-block;
    margin: 0 12px; }
footer div.footerElementLanguage {
    padding-bottom: 12px;
    display: inline-block;
    margin: 0 6px; }
footer div { color: #888; }

nav.navbar .navbarUser {
    font-size: 0.8em;
    float: right; }
nav.navbar .navbarUser a { color: rgba(0,0,0,.7); }
nav.navbar .dropdown-item.active {
    background-color: #eee;
    color: #666; }
a.linkBlack { color: #212529; }
a.linkBlack:hover, a.linkBlack:visited, a.linkBlack:link, a.linkBlack:active {
    color: #212529;
    text-decoration: none; }
a.linkBlack:hover { border-bottom: 1px #212529 dashed; }
a.linkBlack.noHover:hover { border-bottom: none; }
.agreementText {
    font-size: 0.85em;
    padding-bottom: 12px;
    color: #888; }
.agreementText p {
    margin-bottom: 0.7rem; }
form.formAgreements ul { margin-top: 12px; }
form.formAgreements label {
    background-color: #eee;
    border-radius: 3px;
    padding: 8px 16px; }
.sectionHeader {
    background-color: #eaf7d4;
    padding: 8px;
    font-size: 0.8em;
    color: #888;
    border-radius: 3px;
    margin-top: 24px;
    margin-bottom: 12px;
}
.sectionHeader.sectionHeader-warning {
    text-align: center;
    background-color: #ffdada;
    border: 1px solid #f3b8b8;
    color: #666;
    font-size: 1.2rem;
}
.buttonBoard a {
    margin-right: 64px; }
table.table.table-small-text {
    font-size: 0.8rem; }
.iconButton {
    background-color: #eaf7d4;
    padding: 0 4px;
    margin: 2px 4px;
    border-radius: 3px;
    border: 1px solid #d5e1c1;
    display: inline-block;
    color: #333; }
.attributeBox {
    width: 24px;
    height: 24px;
    text-align: center;
    color: #aaa;
    display: inline-block; }
.dynamicElement {
    display: inline-block;
    background-color: #d9eed6;
    padding: 0 3px;
    border-radius: 3px;
}
.badge.badge-newsletter   { font-weight: normal; color: white; background-color: #2ab646; }
.badge.badge-letter       { font-weight: normal; color: white; background-color: #005889; }
.badge.badge-formerMember { font-weight: normal; color: white; background-color: #c21406; }
.badge.badge-marker       { font-weight: normal; color: #333;  background-color: #ddd; border: 1px solid #eee; }
.badge.reminder1 { background-color: #eee   ; border: 1px solid #aaa   ; }
.badge.reminder2 { background-color: #fde8ab; border: 1px solid #aaa   ; }
.badge.reminder3 { background-color: #ffc9c7; border: 1px solid #f66161; }

.statusBadge {
    font-size: 0.8rem;
    border-radius: 4px;
    padding: 0 4px;
    margin: 2px 0;
    white-space: nowrap;
    display: inline-block;
}
.statusBadge.s1-inPreparation { font-weight: normal; color: #666;  background-color: #ffefc1; }
.statusBadge.s2-inProgress    { font-weight: normal; color: white; background-color: #3db957; }
.statusBadge.s3-archived      { font-weight: normal; color: white; background-color: #aaa   ; }

.codeBlock {
    font-family: Consolas, "Courier New", monospace;
    border: 1px solid #ccc;
    padding: 4px;
    border-radius: 3px;
    font-size: 0.9em;
    background-color: #f7f7f7;
    color: #666;
    margin: 4px 0; }
.imprintBlock {
    font-size: 0.85em;
    padding-bottom: 12px;
    color: #888; }
.inputError {
    color: #721c24;
    padding: 6px;
    padding-left: 0; }
div.error,
select.error,
input.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.processWithSteps {
    display: inline-block;
    margin-bottom: 44px;
}
.processWithSteps div { display: inline-block; }
.processWithSteps .step {
    padding: 3px 24px;
    font-size: 0.85rem;
    margin: 4px 12px;
    border-radius: 3px;
}
.processWithSteps .step.done    { background-color: #d9d9d9; color: #333; border: 1px solid #959595; }
.processWithSteps .step.current { background-color: #a1e196; color: #333; border: 1px solid #668e5f; }
.processWithSteps .step.future  { background-color: #f6f6f6; color: #aaa; border: 1px solid #f6f6f6; }
.processWithSteps div i.fas { color: #aaa; }
div.mandatoryField div.form-group label,
label.mandatoryField { border-bottom: 1px solid #ffac00; }
.superAdminLink       { display: inline-block; border-radius: 4px; width: 18px; height: 10px; }
.superAdminLink:hover { background-color: #eee; }

.fileBox img,
.fileBox .placeholderThumb {
    background-color: white;
    margin: 12px;
    width: 130px;
    border: 1px solid #ccc;
    box-shadow: 4px 4px 4px #ccc;
    vertical-align: top;
    border-radius: 3px; }
.fileBox .placeholderThumb {
    background-color: #fffaf1;
    display: inline-block;
    height: 120px; }
.fileBox .description {
    display: inline-block;
    padding-top: 8px; }
.fileBox .description .title a {color: black; font-size: 16px; }
.fileBox .description .author { color: #888; font-size: 0.85rem; }

.progressBar, .progressBar .bar { height: 18px; }
.progressBar { border-radius: 4px; overflow: hidden; background-color: #e9ecef; margin-top: 2px; }
.progressBar .bar { display: inline-block; border-right: 1px solid white; box-sizing: border-box; float: left; }

.storageLegend { margin: 8px 0; }
.storageLegend .dot { display: inline-block; height: 12px; width: 12px; background-color: #ccc; border-radius: 3px; margin-left: 12px; }
.progressBar .bar.moduleFiles      , .storageLegend .dot.moduleFiles       { background-color: #5fba7d; }
.progressBar .bar.moduleFeedback   , .storageLegend .dot.moduleFeedback    { background-color: #fcca02; }
.progressBar .bar.moduleVideos     , .storageLegend .dot.moduleVideos      { background-color: #3498db; }
.progressBar .bar.moduleAttachments, .storageLegend .dot.moduleAttachments { background-color: #ea873b; }

.commentSmaller .progressBar { border-radius: 2px; }
.commentSmaller .progressBar .bar.moduleFiles,
.commentSmaller .progressBar .bar.moduleFeedback { background-color: #ccc; }
.commentSmaller .progressBar .bar.moduleVideos { background-color: #ccc; }
.commentSmaller .progressBar, .commentSmaller .progressBar .bar { height: 10px; }

.tag,
.tagValue {
    display: inline-block;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 4px;
    margin: 2px;
}
.tagValue { background-color: #fff2bd; }
.toImplement { background-color: #ffd0c6 !important; }
.err {
    padding: 0 4px;
    border: 1px solid #dfa3a3;
    border-radius: 3px;
    background-color: #ffbaba; }
.feeRequestJustification {
    font-size: 0.85rem;
    color: #888;
    border: 1px solid #888;
    border-radius: 4px;
    padding: 8px;
    background-color: #f8f8f8;
}
.memberGroup,
.feeTag {
    color: #434a52;
    border: 1px solid #717171;
    display: inline-block;
    padding: .25em .4em;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    margin-right: 4px;
    margin-bottom: 4px; }
.memberGroup { background-color: #eff0f1; }
.feeTag { background-color: #d8dada; }

.memberGroup.inactive {
    color: #ccc;
    border: 1px dashed #ccc; }
table tr th {
    color: #888;
    font-weight: normal; }
table tr th,
table tr td { padding: 2px 8px; }
table tr td { vertical-align: top; }
table tr.odd td { background-color: #f8f8f8; }
table tr.table-metadata th {
    background-color: #eee;
    text-align: center;
    border-left:  2px solid white;
    border-right: 2px solid white;
    border-radius: 4px;
    font-style: italic;
    font-size: 0.85rem; }
.faqs { margin-top: 24px; }
.faqs .faq-q {
    font-weight: bold;
}
.faqs .faq-a {
    padding-left: 24px;
}
.faqs .faq i.far {
    color: #888;
    margin-left: 12px;
    visibility: hidden;
}
.faqs .faq {
    padding: 0 4px;
    border-radius: 3px;
}
.faqs .faq:hover {
    background-color: #eee;
    cursor: pointer;
}
.faqs .faq:hover>i.far {
    visibility: visible;
}
.faqs .faq-e .form-control {
    margin-bottom: 4px;
}
.faqs .faq-e {
    margin-bottom: 12px;
}
.instructors span.place {
    margin-left: 12px;
    color: #aaa;
}

.bigLinks {
    display: flex;
    margin-top: -12px;
    margin-bottom: 12px; }
.bigLinks .bigLink {
    text-align: center;
    background-color: #eee;
    flex: 0 0  33.333%;
    max-width: 33.333%;
    display: block; padding: 8px;
    margin: 2px; }
.bigLinks .bigLink.active { background-color: #ccc; }
.bigLinks.links2 .bigLink {
    flex: 0 0  50%;
    max-width: 50%; }

.profilePic {
    display: inline-block;
    background-size: cover;
}
.profilePic.pic240 {
    border-radius: 8px;
    border: 1px solid #eee;
    width: 240px;
    height: 240px;
}
.profilePic.pic128 {
    border-radius: 8px;
    border: 1px solid #eee;
    width: 128px;
    height: 128px;
}
.profilePic.pic32 {
    border-radius: 16px;
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
div.radio {
    display: inline-block;
    margin-right: 32px;
}
.label {
    color: #888;
    font-size: 0.85rem;
}
.deleteBox {
    padding: 16px;
    background-color: #fdf4f4;
    border: 3px solid #ffb3b3;
    border-radius: 4px;
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
    margin-top: 12px;
    margin-bottom: 32px; }

.paginator {
    text-align: center;
    margin-bottom: 4px;
}
.paginator a {
    padding: 2px 6px;
    display: inline-block;
    border: 2px solid transparent;
    border-radius: 4px;
    color: #333;
    font-size: 0.85rem;
}
.paginator a:hover {
    border-color: #95ca95;
    text-decoration: none;
    background-color: #e2eae2;
}
.paginator a.paginator-active {
    border-color: green;
    background-color: #c9dbc9;
}
.filters {
    font-size: 0.85rem;
}
.filter {
    display: inline-block;
    padding: 1px 15px;
    margin: 0 3px 6px 0;
    border-radius: 4px;
    color: #999;
    border: 1px solid transparent;
}
.filter:hover {
    background-color: #eee;
    text-decoration: none;
    color: #666;
}
.filter.filter-active {
    background-color: #ddd;
    color: #333;
}
.filter.filter-active:hover {
    border: 1px solid #aaa;
}
table tr.hidden td,
table tr.hidden td a {
    color: #ccc !important;
}
table tr.hidden td .badge.badge-danger {
    background-color: #f8cdd1;
}
table tr.hidden td .badge.badge-warning {
    background-color: #fce6a9;
    color: #c3c3c3; }
img.screenshot {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 2px 2px 10px #ccc;
    width: 227px;
    height: 321px; }
.documentRow { display: flex; }
.documentRow>img { margin-right: 24px; }
.documentRow>div {
    width: 100%;
    padding: 12px; }
.iconFile {
    width: 16px;
    height: 16px; }
.yearBadge {
    min-width: 44px;
    display: inline-block;
    text-align: center;
    font-size: 0.85rem;
    background-color: #eee;
    border: 1px solid #ddd;
    padding: 0 4px;
    margin: 4px 0;
    border-radius: 3px; }
table.stripped tr:nth-child(odd) { background-color: #f5f5f5; }
.img-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    margin-top: -3px;
}
.registrationSystemBadge {
    font-size: 0.7rem;
    color: #888;
    padding: 2px 4px;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #f8f8f8; }
.statusYes {
    background-color: #deefde;
    padding: 2px 6px 4px;
    border-radius: 3px;
    border: 1px solid #afd7af; }
.statusNo {
    background-color: #efdede;
    padding: 2px 6px 4px;
    border-radius: 3px;
    border: 1px solid #d7afaf; }