@font-face {
    font-family: 'Arquitecta';
    font-style: normal;
    font-weight: 100;
    src: url('https://static.loahelser.com/fonts/Arquitecta-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Arquitecta';
    font-style: normal;
    font-weight: 300;
    src: url('https://static.loahelser.com/fonts/Arquitecta-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Arquitecta';
    font-style: normal;
    font-weight: 600;
    src: url('https://static.loahelser.com/fonts/Arquitecta-Heavy.otf') format('opentype');
}

@font-face {
    font-family: 'Arquitecta';
    font-style: normal;
    font-weight: 800;
    src: url('https://static.loahelser.com/fonts/Arquitecta-Black.otf') format('opentype');
}


                    @font-face {
    font-family: 'Arquitecta';
    font-style: normal;
    font-weight: 100;
    src: url('https://static.loahelser.com/fonts/Arquitecta-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Arquitecta';
    font-style: normal;
    font-weight: 300;
    src: url('https://static.loahelser.com/fonts/Arquitecta-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Arquitecta';
    font-style: normal;
    font-weight: 600;
    src: url('https://static.loahelser.com/fonts/Arquitecta-Heavy.otf') format('opentype');
}

@font-face {
    font-family: 'Arquitecta';
    font-style: normal;
    font-weight: 800;
    src: url('https://static.loahelser.com/fonts/Arquitecta-Black.otf') format('opentype');
}


                    /*
 * ##########################################
 * ########## MEMBERMATE STYLESHEET #########
 * ##########################################
 *
 * ##### TABLE OF CONTENTS #####
 * 100. GENERAL STUFF
 * 200. BUTTONS
 * 300. FORMS
 * 400. ERROR MODAL
 * 500. ADMIN DATA FIELD
 * 600. REUSABLES
 * 700. REACT TOOLTIP
 * 800. BOX
 * 900. PRIVACY
 * 1000. FOOTER
 * 1100. GLOBAL HELP
 * 1200. DASHBOARD NUMBERS
 * 1300. AVATARS
 * 1400. TOP BAR
 * 1500. BREADCRUMBS
 * 1600. MMPOPUP
 * 1700. MMDIALOG
 * 1800. MMTABS
 * 1900. ADMIN AREA
 * 2000. HOME
 * 2100. SEARCH
 * 2200. LOGIN
 * 2300. COURSES
 * 2400. COMMUNITY
 * 2500. LIVE
 * 2600. COUNTDOWN
 * 2700. VISIONBOARD
 * 2800. ROUTINES
 * 2900. CHAT
 */





/*
 * ########## 100. GENERAL STUFF ##########
 */

body {
    font-size: 18px;
    color: #333;
}

body,
p,
div {
    font-family: "Arquitecta", Helvetica, Arial, sans-serif;
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Arquitecta", Helvetica, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 2.1px;
    color: rgb(51, 51, 51);
    text-transform: uppercase;
}


main.content {
    /*padding-top: calc(90px + 260px + 20px + 40px);*/
    padding-top: calc(90px);
    /*padding-bottom: 2rem;*/
    min-height: calc(100vh);
    background: rgb(253, 253, 253);
    background-size: 100% auto;
    background-attachment: fixed;
}

.page-pagebuilder-no-banner main.content {
    padding-top: calc(90px);
}

.page-with-breadcrumbs main.content {
    padding-top: calc(90px + 260px + 20px + 44px);
}

@media screen and (max-width: 640px) {
    main.content {
        /*padding-top: 200px !important;*/
        padding-top: calc(90px);
    }
}

.page-login main.content,
.page-signup main.content{
    padding-top: 90px;
}

@media screen and (max-width: 640px) {
    main.content {
        padding-top: calc(90px + 260px + 20px);
    }
}

section {
    padding-left: calc(20px * 2);
    padding-right: calc(20px * 2);
}

.hide-nav main.content {
    padding-top: 0;
}

.wrapper {
    position: relative;
    height: 100%;
}

.center-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

h1 {
    font-size: 1.8rem;
    color: rgb(51, 51, 51);
}

h2 {
    font-size: 1.4rem;
    color: #555;
    font-weight: 600;
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(51, 51, 51);
}

h4 {
    color: #555;
    font-size: 1.1rem;
    font-weight: 600;
}

a {
    font-size: inherit;
}

main.content a {
    cursor: pointer;
    color: rgb(51, 51, 51);
}

.link {
    cursor: pointer;
    color: rgb(51, 51, 51);
}

.link:hover {
    text-decoration: underline;
}

.primary.label {
    background-color: rgb(51, 51, 51);
}

.badge {
    font-weight: 800;
}

.help-cursor {
    cursor: help;
}

.loading {
    height: 75vh;
    text-align: center;
}

.loading p {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    margin: 0;
}

.loading .fa {
    font-size: 2rem;
}

.monospace {
    font-family: monospace;
}

.primary-text-color {
    color: rgb(51, 51, 51);
}

.heading-text-color {
    color: rgb(51, 51, 51);
}

.new-badge {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgb(170, 0, 0) !important;
    color: white !important;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0px 4px;
    position: relative;
    top: -2px;
}

.red-badge {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgb(170, 0, 0) !important;
    color: white !important;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0px 4px;
    position: relative;
    top: -2px;
}

/*
 * ########## 200. BUTTONS ##########
 */

.primary.button,
.secondary.button,
.success.button {
    font-weight: 600;
}

.button {
    margin-bottom: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-transform: uppercase;
}

.primary.button {
    font-weight: 600;
}

.primary.button,
.primary.button-group .button {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(51, 51, 51) !important;
    border: 1px solid rgb(51, 51, 51) !important;
}


.primary.hollow.button,
.primary.hollow.button-group .button {
    font-weight: normal;
    background: transparent !important;
    color: rgb(51, 51, 51) !important;
    border: 1px solid rgb(51, 51, 51) !important;
}

.primary.hollow.button-group .button:hover,
.primary.hollow.button:hover,
.primary.button:hover {
    background-color: rgb(51, 51, 51) !important;
    color: white !important;
    font-weight: 600 !important;
}

.buttons {
    text-align: right;
    padding-top: 20px;
}

.single-icon-button {
    margin-top: -10px;
    margin-right: -10px;
    color: rgb(51, 51, 51);
    padding: 10px;
    cursor: pointer;
}

.single-icon-button:hover {
    background: rgb(51, 51, 51);
    color: white;
}

.tiny.button.only-icon {
    padding: 5px 7px;
    font-size: 1.0rem /* vorher: 0.8rem */;
}

.very.tiny.button {
    padding: 5px 7px;
}

.page-buttons {
    margin: 1rem 0;
    text-align: right;
}

.page-buttons .button {
    margin-bottom: 0;
}

.small.button,
.small.button-group .button {
    font-weight: 700;
}

.text-right .button-group,
.medium-text-right .button-group {
    float: right;
}

@media screen and (max-width: 640px) {
    .text-right .button-group,
    .medium-text-right .button-group {
        float: none;
    }
}

.callout p:last-of-type {
    margin-bottom: 0;
}

.callout {
    color: #333;
}

.small.callout {
    line-height: 115%;
    font-size: 1.0rem /* vorher: 0.8rem */;
}



/*
 * ########## 300. FORMS ##########
 */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
    margin-bottom: 0;
    background: rgb(253, 253, 253);
    color: #333;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    background: rgb(253, 253, 253);
    color: #333;
}

label {
    color: #333;
}

/*
 * SAVING MODAL
 */

.saving-modal {
    z-index: 91000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.95);
}


.saving-modal .saving-popup {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.saving-modal .saving-popup .saving-popup-icon {
    text-align: center;
    font-size: 1.6rem;
}

.saving-popup-text {
    text-align: center;
    font-size: 1.2rem;
}

.saving-popup-extra-text {
    padding-top: 5px;
    font-size: 0.9rem;
    text-align: center;
}

.saving-popup-progressbar {
    text-align: center;
    width: 80%;
    max-width: 380px;
    margin: 20px auto;
}



/*
 * ########## 400. ERROR MODAL ##########
 */

.error-modal {
    z-index: 99950;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(250, 230, 230, 0.98);
}

.error-popup {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.error-popup-content .error-popup-icon {
    text-align: center;
    font-size: 1.4rem;
    color: rgb(170, 0, 0);
}

.error-popup h1 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: rgb(170, 0, 0);
}

.error-popup-errors .error-popup-error {
    padding: calc(20px / 2);
    margin-bottom: calc(20px / 2);

    background: rgba(255, 255, 255, 0.8);
}

.error-popup-errors .grid-x:nth-of-type(odd) {
    background: rgb(240, 240, 240);
}

.error-popup-errors .error-label {
    display: block;
    font-weight: 600;
    margin-right: 5px;
    padding: 6px 12px;
}

.error-popup-errors .error-text {
    display: block;
    font-family: monospace;
    padding: 6px 12px;
    word-wrap: break-word;
}

.error-popup-closemessage {
    padding: 0 20px;
    text-align: center;
}



/*
 * ########## 500. ADMIN DATA FIELD
 */

.admin-data-value {
}

.admin-data-edit-value {
    background-color: rgba(255, 255, 0, 0.2);
    color: #333 !important;
}

.admin-data-edit-value input,
.admin-data-edit-value select,
.admin-data-edit-value textarea,
.admin-data-edit-value input:focus,
.admin-data-edit-value select:focus,
.admin-data-edit-value textarea:focus {
    border: none;
    box-shadow: none;
    border-radius: 0;
    height: auto;
    margin: 0;
    padding: 3px 6px;
    background: transparent;
    color: #333;
    cursor: pointer;
}

.admin-data-label {
    font-size: 1.0rem /* vorher: 0.8rem */;
    color: #555;
    border-top: 1px solid rgb(230, 230, 230);
    margin-top: 2px;
}

.admin-data-edit-value label {
    font-size: 1rem !important;
}

.admin-tags-tag {
    display: inline-block;
    border: 1px solid rgb(230, 230, 230);
    border-radius: 10px;
    padding: 1px 10px;
    font-size: 0.9rem;
    margin-right: 10px;
    margin-top: 10px;
}

.admin-tag-deletebutton:hover {
    cursor: pointer;
    color: rgb(51, 51, 51);
}

.admin-tags-add-tag {
    padding-top: 20px;
}

.admin-tags-add-tag input {
    margin-bottom: 0;
    height: 40px;
    line-height: 40px;
}

.admin-tags-add-tag-button {
    margin-bottom: 0;
    height: 40px;
    width: 100%;
}

/*
 * ########## 600. REUSABLES ##########
 */

.reusable-loading {
    text-align: center;
    padding: 40px 0;
}

.reusable-loading .loading-icon {
    font-size: 2rem;
}

.reusable-loading .loading-text {
    font-weight: 600;
}

.reusable-loading .notfound {
    margin-top: calc(20px *3);
}

.reusable-loading p {
    font-size: 1.15rem;
}



/*
   * ########## 700. REACT TOOLTIP ##########
   */

.__react_component_tooltip.type-light {
    background: rgba(51, 51, 51, 0.14);
    border: 1px solid rgb(230, 230, 230);
}

.__react_component_tooltip.type-light:after {
    border-top-color: rgba(51, 51, 51, 0.14) !important;
    border-top-style: solid !important;
    border-top-width: 6px !important;
}

.__react_component_tooltip.type-dark {
    background: #666;
    border: 1px solid rgb(230, 230, 230);
    font-weight: 600;
}

.__react_component_tooltip.type-dark:after {
    border-top-color: #666 !important;
    border-top-style: solid !important;
    border-top-width: 6px !important;
}

/*
 * ########## 800. BOX ##########
 */

.box {
    display: block;
    width: 100%;
    border: 1px solid rgb(230, 230, 230);
    background: rgb(253, 253, 253);
    margin-bottom: 20px;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.box .box-title {
    color: rgb(51, 51, 51);
}

.box .box-content {
    padding: 20px;
}

a.box:hover {
    background: rgba(51, 51, 51, 0.14);
}

.small.box .box-content {
    padding: calc(20px / 2);
}

.small.box {
    margin-bottom: calc(20px / 2);
}

.no-margin.box {
    margin: 0;
}

.no-padding.box .box-content {
    padding: 0;
}

.no-padding.box  .admin-list .admin-list-item {
    padding: 0;
}

.padding {
    padding: 20px;
}

button.clickable,
a.clickable {
    display: block;
    width: 100%;
    text-align: left;
    line-height: inherit;
    cursor: pointer;
}

button.clickable:hover,
a.clickable:hover {
    background-color: rgba(51, 51, 51, 0.14) !important;
}

.clickable-box {
    cursor: pointer;
}

.clickable-box:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

/*
   * ########## 900. PRIVACY ##########
   */

.page-privacy  .privacy-switch label {
    font-size: inherit;
    position: relative;
    top: -4px;
    margin-left: 10px;
}

.page-privacy label {
    font-size: inherit;
    position: relative;
    top: 5px;
}

/*
   * ######### 1000. FOOTER ##########
   */

footer {
    background: rgb(0, 0, 0);
    color: white;
    font-size: 0.9rem;
    padding: calc(20px * 3) 0;
}

footer a {
    color: white !important;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer * {
    color: white;
}

footer p:last-of-type {
    margin-bottom: 0;
}

/*
 * ########## 1100. GLOBAL HELP ##########
 */

.global-help {
    background-color: #fbfbf0;
    -webkit-box-shadow: inset 2px 0px 13px -7px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 2px 0px 13px -7px rgba(0, 0, 0, 0.5);
    box-shadow: inset 2px 0px 13px -7px rgba(0, 0, 0, 0.5);
}

.global-help .global-help-content {
    padding: calc(90px + 44px + 20px) 20px 20px calc(20px * 1.3);
    overflow: auto;
}

.global-help h4 {
    font-size: 1rem;
}

.global-help p {
    line-height: 140%;
}


/*
 * ########## 1200. DASHBOARD NUMBERS ##########
*/

.dashboard-number {
    text-align: center;
}

.dashboard-number  .dashboard-number-label {
    color: #555;
}

.big.dashboard-number .dashboard-number-value {
    font-size: 3em;
}

.small.dashboard-number .dashboard-number-value {
    font-size: 1.4em;
}

.has-tooltip.dashboard-number {
    cursor: help;
}

.video-react-control-bar button,
.video-react-playback-rate,
.video-react-playback-rate * {
    color: white !important;
}




/*
 * ########## 1300. AVATARS ##########
 */

.avatar-no-image {
    background-color: #ddd;
    color: #888;
    text-align: center;
    font-weight: 600;
    display: inline-block;
    border-radius: 50%;
}

.avatar-size-forum-post {
    font-size: 20px;
    height: 110px;
    width: 110px;
    line-height: 110px;
}

@media screen and (max-width: 640px) {
    .avatar-size-forum-post {
        font-size: 18px;
        height: 50px;
        width: 50px;
        line-height: 50px;
    }
}

.avatar-size-forum-reply {
    font-size: 12px;
    height: 40px;
    width: 40px;
    line-height: 40px;
}

.avatar-size-chat {
    font-size: 14px;
    height: 40px;
    width: 40px;
    line-height: 40px;
}

.avatar-size-chat-userlist {
    font-size: 12px;
    height: 24px;
    width: 24px;
    line-height: 24px;
}

.avatar-size-forum-thread {
    font-size: 14px;
    height: 40px;
    width: 40px;
    line-height: 40px;
}

.avatar-size-userprofile {
    font-size: 48px;
    height: 180px;
    width: 180px;
    line-height: 180px;
}

.avatar-size-main-topbar {
    position: relative;
    top: -1px;
    font-size: 15px;
    font-weight: 700;
    height: 34px;
    width: 34px;
    line-height: 34px;
    margin-right: 8px;
}

.avatar-size-admin-dashboard-user-list {
    font-size: 12px;
    height: 30px;
    width: 30px;
    line-height: 30px;
}

.avatar-size-admin-user-list {
    font-size: 14px;
    height: 38px;
    width: 38px;
    line-height: 38px;
}

.avatar-size-admin-user-view {
    font-size: 22px;
    height: 100px;
    width: 100px;
    line-height: 100px;
}

.avatar-size-userinfo-tooltip {
    font-size: 12px;
    height: 40px;
    width: 40px;
    line-height: 40px;
}

.account-avatar-preview {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.account-delete-avatar {
    color: #666;
    text-decoration: underline;
    font-size: 0.8em;
    cursor: pointer;
    margin: 10px 0 17px 0;
}

.account-delete-avatar:hover {
    background-color: rgb(51, 51, 51);
    color: white;
    text-decoration: none;
}

#avatarDropZone {
    width: 100%;
    cursor: pointer;
    padding: 20px;
}

#avatarDropZoneText {
    text-align: center;
    padding: 50px 0;
}

#avatarDropZoneText .fa {
    font-size: 2.4em;
}

#avatarDropZone:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

.avatar-crop-heading {
    padding-top: 5px;
    padding-left: 5px;
}

.avatar-crop-buttons {
    padding-top: 8px;
    text-align: right;
}



/*
 * ########## 1400 TOP BAR ##########
 */

#mainTopbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 1000;

}

.top-welcome {
    height: 260px;
    line-height: 260px;
    background: #333 url('https://loauniverse.ptwd/storage/loa/top-welcome.jpg');
    background-size: cover;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

.top-default {
    height: 90px;
    line-height: calc(90px - 14px - 14px);
    padding-top: 14px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid rgb(68, 68, 68);

    background-color: rgb(0, 0, 0);
    background-size: cover;
    background-position: center;
    color: #FFF;
    z-index: 1100;
}

.topbar-supportbutton {
    padding: 8px 16px;
    margin-right: 5px;
    font-weight: 600;
    font-size: 0.8rem;
    background: #333;
    border: 1px solid #444;
    color: white;
}

.topbar-supportbutton:hover {
    color: white;
    border-color: #999;
}

#topBanner {
    /*height: 260px;*/
    background-image: url('/storage/loa/banner-bg.jpg');
    background-size: cover;
    padding: 15px 0;
    /*border-bottom: 1px solid #888;*/
}

#topBannerByLoaEmpty {
    padding-bottom: 10px;
    display: block;
    height: 65px;
    margin: auto;
    text-align: center;
}

#topBannerByLoaEmpty img {
    height: 100%;
    width: auto;
}

#topBannerLogo {
    display: block;
    height: 90px;
    margin: auto;
    text-align: center;
}

#topBannerLogo img {
    height: 100%;
    width: auto;
}

#topBannerByLoa {
    padding-top: 10px;
    display: block;
    height: 65px;
    margin: auto;
    text-align: center;
}

#topBannerByLoa img {
    height: 100%;
    width: auto;
}

.mainbanner-universe .top-banner {
    background-position-x: right;
    background-position-y: top;
    border-bottom-color: #ccc;
}

.mainbanner-universe #topBannerLogo {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mainbanner-truepower #topBannerLogo {
    margin-top: 20px;
    margin-bottom: 20px;
}

.banner-bw .top-banner {
    background-position-x: right;
    background-position-y: top;
    border-bottom-color: #ccc;
}

.banner-bw #topBannerLogo {
    margin-top: 10px;
    margin-bottom: 10px;
}

.banner-bw #topBannerByLoa,
.banner-bw #topBannerByLoaEmpty {
    height: 20px;
}

.banner-truepowerflow #topBannerByLoa,
.banner-truepowerflow #topBannerByLoaEmpty {
    height: 50px;
}

.banner-truepowerflow #topBannerLogo {
    height: 120px;
}

.banner-truepowerflow {
    text-align: center;
}

.banner-truepowerflow img {
    /*width: 1170px;*/
    width: 100%;
    height: auto;
}

.banner-universe #topBannerByLoa,
.banner-universe #topBannerByLoaEmpty {
    height: 30px;
}

.banner-universe #topBannerLogo {
    height: 120px;
}

.banner-universe {
    text-align: center;
}


.top-message img {
    height: calc(90px - 14px - 14px);
}

@media screen and (max-width: 640px) {
    .top-message img {
        height: auto;
        width: 80%;
    }
}

.top-message .fa {
    font-size: 1rem;
}

#maintenanceModeBar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    height: 26px;
    line-height: 26px;

    font-size: .8rem;
    font-weight: 600;
    text-align: center;

    z-index: 1100;
    padding-left: 10px;
    padding-right: 10px;

    background: #f8f4de;
    border-bottom: 1px solid rgb(230, 230, 230);
}

#maintenanceModeBar a {
    color: inherit;
    text-decoration: underline;
}

.maintenance-active #maintenanceModeBar {
    display: block;
}

.maintenance-active #mainTopbar,
.maintenance-active #breadcrumbs,
.maintenance-active main.content {
    margin-top: 26px !important;
}

.maintenance-active .main-menu {
    margin-top: 76px;
}

.hide-nav #mainTopbar,
.hide-nav #breadcrumbs {
    display: none;
}

#mainTopbar img.top-logo {
    height: calc(90px - 14px - 14px);
}

.topbar-page.grid-type-full {
    /*padding: 0 calc(20px *2);*/

}

@media screen and (max-width: 640px) {
    .topbar-page.grid-type-full {
        padding: 0 0;
    }
}


.dropdown-menu-wrapper {
    position: relative;
}

.dropdown-menu-trigger {
    cursor: pointer;
}

.dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu li a,
.dropdown-menu li button {
    display: block;
    width: 100%;
    cursor: pointer;
}

.dropdown-menu li.separator hr {
    margin: 0;
}

#userMenu {
    position: absolute;
    right: 0;
}

.topbar-username {
    color: rgb(255, 255, 255);
    font-family: "Arquitecta", Helvetica, Arial, sans-serif;
    font-weight: 600;
}

.topbar-username .fa-bars {
    font-size: 1.2rem;
    position: relative;
    top: 2px;
}

.topbar-username .avatar {
    border: 1px solid rgba(0, 0, 0, 0.2);
}


.topbar-login-button {
    color: rgb(51, 51, 51);
    cursor: pointer;
    font-weight: 400;
}

.topbar-login-button:hover {
    color: white;
}

#mobileNavButton {
    font-size: 1.4rem;
    margin-right: 10px;
    color: rgb(51, 51, 51);
}

.top-mainmenu-button {
    font-size: 1.4rem;
    cursor: pointer;
    margin-top: 5px;
    color: rgb(255, 255, 255);
}

.top-mainmenu-courses {
    font-weight: 600;
    margin-left: 20px;
    padding-left: 8px;
    padding-right: 8px;
    /*color: rgb(51, 51, 51);*/
    color: rgb(255, 255, 255);
}

.top-mainmenu-courses:hover {
    text-decoration: underline;
    color: rgb(51, 51, 51);
}

#mobileNav {
    z-index: 800;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    padding: calc(90px + 20px) 20px 20px 20px;
}

#mobileNav .mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobileNav li {
    text-align: center;
}

#mobileNav a,
#mobileNav button {
    padding: 10px;
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: rgb(51, 51, 51);
}

#mobileNav a:hover,
#mobileNav button:hover {
    background-color: rgb(51, 51, 51);
    color: white;
}

.main-menu-wrapper {
    position: fixed;
    top: calc(90px);
    right: 0;
    width: 270px;
    height: auto;
    background: rgb(0, 0, 0);
    z-index: 2500;
    border-left: 1px solid rgb(230, 230, 230);
    border-right: 1px solid rgb(230, 230, 230);
    border-bottom: 1px solid rgb(230, 230, 230);
}

@media screen and (max-width: 640px) {
    .main-menu-wrapper {
        width: 100%;
        height: 100vh;
        overflow: auto;
    }
}

.main-menu {
    margin: 0;
    padding: calc(20px / 2);
}

.main-menu .menu-close-button {
    height: 20px;
    width: auto;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.main-menu h1 {
    padding: 5px 10px;
    font-family: "Arquitecta", Helvetica, Arial, sans-serif;
    letter-spacing: 0.1em;
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-decoration: underline;
    color: inherit;
}

.main-menu .main-menu-list {
    list-style: none;
    margin:  0;
    padding: 0;
}

.main-menu .left-side.main-menu-list li {
    padding-right: 10px;
}

.main-menu .right-side.main-menu-list li {
    padding-left: 10px;
}

.main-menu li {

}

.main-menu hr {
    border-color: rgb(51, 51, 51);
    margin: -2px 0 14px 0;
}

.main-menu a,
.main-menu button {
    display: block;
    cursor: pointer;
    font-family: "Arquitecta", Helvetica, Arial, sans-serif;
    font-weight: 600 !important;
    font-size: 1rem;
    color: rgb(255, 255, 255) !important;
    width: 100%;
    padding: 10px 10px 8px 10px;
    text-transform: uppercase !important;
    text-align: center;
    margin-bottom: 0;
    border-bottom: 1px solid rgb(230, 230, 230);
}

.main-menu button.button-logout {
    border-bottom: none;
    padding: 10px 10px 10px 10px !important;
}

.main-menu a:hover,
.main-menu button:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(30, 30, 30) !important;
}

.main-menu li.separator {
    padding: 8px;
    display: none;
}

.menu-links .menu-link {
    padding: 8px 10px;
    color: #555;
    font-weight: 800;
}

.menu-links .menu-link:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

.menu-links .menu-link .block {
    display: inline-block;
    height: 14px;
    width: 14px;
    background: rgb(51, 51, 51);
    position: relative;
    top: 2px;
}


@media screen and (max-width: 640px) {
    .main-menu {
        width: 100%;
        margin: auto;
    }
}



.menu-modal {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    height: calc(100vh - 90px);
    background: rgba(255, 255, 255, 0.9);
    z-index: 1050;
}

.content-menu {
    position: fixed;
    top: calc(90px);
    left: 0;
    width: 900px;
    height: auto;
    z-index: 2500;

    border-left: 1px solid rgb(230, 230, 230);
    border-right: 1px solid rgb(230, 230, 230);
    border-bottom: 1px solid rgb(230, 230, 230);
    background: rgb(0, 0, 0);
}

@media screen and (max-width: 640px) {
    .content-menu {
        width: 100%;
        height: 100vh;
        overflow: auto;
    }
}

.content-menu-content {
    padding: 20px;
    color: rgb(255, 255, 255);
}

.content-menu h1 {
    text-align: center;
    font-weight: 800;
    font-size: 1.2rem;
    border-bottom: 1px solid #333;
    text-transform: uppercase;

    padding: 10px 0 10px 0;
    margin-bottom: 10px;
}

.content-menu h2 {
    margin-bottom: 15px !important;
}

.content-menu .menu-close-button {
    height: 20px;
    width: auto;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.content-menu-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-menu-menu li .icon {
    display: none;
}

.content-menu-menu li.selected button,
.content-menu-menu li.selected a {
    /*background: #333;
    color: white;*/
}

.content-menu-menu li.selected button .icon,
.content-menu-menu li.selected a .icon {
    display: inline-block;
}


.content-menu-menu button,
.content-menu-menu a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
    color: rgb(255, 255, 255);

    font-weight: 700;
    text-transform: uppercase;
}

.content-menu-menu a {
    padding: 4px 10px;
}

.content-menu-menu button:hover,
.content-menu-menu a:hover {
    /*background: #333;
    color: white;*/
    text-decoration: underline;
}

.content-menu-menu button:hover .icon,
.content-menu-menu a:hover .icon {
    display: inline-block;
}

.content-menu .content-menu-fb-group a {
    padding: 8px 10px;
}

.content-menu .content-menu-fb-group a:hover {
    color: white;
    background: #3b5998;
    text-decoration: none;
}

.content-menu h3 {
    padding-top: 10px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    font-size: 1rem;
}

.content-menu .video-description {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: justify;
}

.content-menu .responsive-embed {
    margin-bottom: 0;
}




.top-search-button {
    font-size: 1.3em;
    line-height: 1.8em;
    opacity: 0.4;
    color: #333;
}

.top-search-button:hover {
    cursor: pointer;
    opacity: 1;
    color: rgb(51, 51, 51);
}



/*
 * ########## 1500. BREADCRUMBS
 */

#breadcrumbs {
    display: none;
    z-index: 950;
    position: fixed;
    top: calc(90px + 260px);
    left: 0;
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0;
    color: #333;
    font-size: 0.8em;
    font-weight: 600;
    border-bottom: 1px solid rgb(230, 230, 230);
    background: white;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

    #breadcrumbs span {
    color: #333;
}

    #breadcrumbs a {
        color: rgb(51, 51, 51);
    }

    #breadcrumbs a * {
        color: rgb(51, 51, 51);
    }


    #breadcrumbs button.tiny {
    padding-top: 7px;
    padding-bottom: 6px;
    margin: 0;
}

    #breadcrumbs .primary.hollow.button:hover {
    color: white;
}

@media screen and (max-width: 640px) {
    #breadcrumbs {
        display: none;
    }
}



/*
 * ########## 1600. MMPOPUP ##########
 */

.mmpopup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1800;
    background: rgba(255, 255, 255, 0.95);
}

.mmpopup-popup {
    z-index: 1900;
    position: fixed;
    height: auto;
    max-height: 80vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 20px 15px 20px;
    overflow: auto;
    border: 1px solid rgb(230, 230, 230);
    background: rgb(253, 253, 253);
}

.mmpopup-popup.nopadding {
    padding: 0;
}

.mmpopup-small {
    width: 35%;
    min-height: 2rem;
    padding: 15px 15px 15px 15px;
}

.mmpopup-popup h2 {
    font-size: 1.4rem;
}

.mmpopup-small h3 {
    font-size: 1.1rem;
}

.mmpopup-medium {
    width: 50%;
    min-height: 2rem;
}

.mmpopup-large {
    width: 1200px;
    height: 96vh;
}

.mmpopup-fullscreen {
    width: 98%;
    height: calc(100vh - 60px - 4%);
    top: calc(60px + 2%);
    left: 1%;
    transform: none;
    padding: 60px 20px;
}

@media screen and (max-width: 640px) {
    .mmpopup-small {
        width: 100%;
        margin: 0;
        height: 100vh;
        padding-top: 50px;
    }

    .mmpopup-medium {
        width: 100%;
        margin: 0;
        height: 100vh;
        padding-top: 50px;
    }

    .mmpopup-large {
        width: 100%;
        margin: 0;
        height: 100vh;
        padding-top: 50px;
    }

    .mmpopup-fullscreen {
        width: 100%;
        margin: 0;
        height: 100vh;
        padding-top: 50px;
    }
}

.mmpopup-popup h3 {
    line-height: 40px;
}

.mmpopup-close-button {
    display: inline-block;
    position: absolute;
    top: 16px;
    right: 18px;
    cursor: pointer;
    z-index: 20000;
}

.mmpopup-close-button img {
    width: 26px;
    height: 26px;
}

.mmpopup-buttons {
    text-align: right;
}

.popup-buttons {
    text-align: right;
    padding-top: calc(20px / 2);
    padding-bottom: 20px;
}

.popup-buttons  .button {
    margin-bottom: 0;
}



/*
 * ########## 1700. MMDIALOG ##########
 */

.mmdialog-modal {
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.95);
}

.mmdialog-popup {
    position: relative;
    top: 50%;
    transform: translateY(-50%);

    width: 50%;
    margin: auto;
}


.mmdialog-popup-content  .mmdialog-popup-icon {
    text-align: center;
}
.mmdialog-popup-content  .mmdialog-popup-icon     .fa {
    font-size: 1.6rem;
}


.mmdialog-popup-text {
    text-align: center;
    font-size: 1.2rem;
}

.mmdialog-popup-extra-text {
    padding-top: 5px;
    font-size: 0.9rem;
    text-align: center;
}



/*
 * ########## 1800. MMTABS ##########
 */

.mmtabs {
    border-bottom: 1px solid rgb(230, 230, 230);
    margin-bottom: 20px;
}

@media screen and (max-width: 640px) {
    .mmtabs {
        border-bottom: none;
    }
}

.mmtab {
    position: relative;
    bottom: -1px;
    padding: 10px 20px;
    border: 1px solid rgb(230, 230, 230);
    background: rgb(253, 253, 253);
    color: #333;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.mmtab   .fa {
    font-size: 0.95em;
}


.mmtab:nth-child(2) {
    left: -1px;
}

.mmtab:nth-child(3) {
    left: -2px;
}

.mmtab:nth-child(4) {
    left: -3px;
}

.mmtab:nth-child(5) {
    left: -4px;
}

.mmtab:nth-child(6) {
    left: -5px;
}

.mmtab:nth-child(7) {
    left: -6px;
}

.mmtab:nth-child(8) {
    left: -7px;
}

.mmtab:nth-child(9) {
    left: -8px;
}

.mmtab:nth-child(10) {
    left: -9px;
}

.mmtab:nth-child(11) {
    left: -10px;
}

.mmtab:nth-child(12) {
    left: -11px;
}

.mmtab:nth-child(13) {
    left: -12px;
}

.mmtab:nth-child(14) {
    left: -13px;
}

.mmtab:hover {
    cursor: pointer;
    background-color: rgba(51, 51, 51, 0.14);
    color: rgb(51, 51, 51);
}

.selected.mmtab {
    background-color: rgb(253, 253, 253) !important;
    border-bottom: 1px solid rgb(253, 253, 253);
    color: #333;
    font-weight: 600;
}

@media screen and (max-width: 640px) {
    .selected.mmtab {
        border-bottom: 1px solid rgb(230, 230, 230);
        background-color: rgba(51, 51, 51, 0.14) !important;
    }
}




/*
 * ########## 1900. ADMIN AREA ##########
 */

    select {
        appearance: auto;
        -webkit-appearance: auto;
    }

    .admin-back-button a {
        color: rgb(51, 51, 51);
    }

    .admin-area {
        position: relative;
    }

    .admin-area .admin-nav {
        width: 200px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
    }

    .hide-nav .admin-nav {
        display: none;
    }

    @media screen and (max-width: 640px) {
        .admin-area .admin-nav {
            width: 100%;
            position: static;
            margin-bottom: 20px;
            background: rgb(253, 253, 253);
            text-align: center;
            border-bottom: 3px solid rgb(230, 230, 230);
        }
    }

    .admin-area .admin-content {
        padding-left: calc(200px + 20px);
    }

    .hide-nav .admin-content {
        padding-left: 0;
    }

    @media screen and (max-width: 640px) {
        .admin-content {
            padding-left: 0 !important;
        }
    }

    .admin-area.admin-menu-title {
        padding-bottom: 3px;
    }

    ul.admin-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    ul.admin-menu li {
        border-bottom: 1px solid rgb(230, 230, 230);
    }

    ul.admin-menu li a {
        font-weight: 600;
        text-transform: uppercase;
        display: inline-block;
        width: 100%;
        padding: 7px 12px 5px 12px;
        background: transparent;
        color: rgb(51, 51, 51);
    }

    ul.admin-menu li a * {
        color: rgb(51, 51, 51);
    }

    ul.admin-menu li a:hover {
        background: rgb(51, 51, 51);
        color: white;
        font-weight: bold;
    }

    ul.admin-menu li a:hover * {
        color: white;
    }

    ul.admin-menu li.selected a {
        background: rgb(51, 51, 51);
        color: white;
    }

    ul.admin-menu li.selected a * {
        color: white;
    }

    ul.admin-menu li:last-of-type {
        border-bottom: 0;
    }

    .admin-area .pretitle {
        color: #555;
        font-weight: 800;
        font-size: 0.9rem;
        padding: 0 0 0 1px;
        margin: 10px 0 -6px 0;
    }

    .admin-area h1 {
        margin-bottom: 0.8em;
    }

    .admin-area .admin-edit-button {
        position: relative;
        top: -3px;
        padding: calc(20px / 2);
        font-size: 1rem;
        cursor: pointer;
    }

    .admin-area .admin-edit-button:hover {
        background-color: rgba(51, 51, 51, 0.14);
    }

    .admin-area .admin-active {
        color: green;
    }

    .admin-area .admin-inactive {
        color: red;
    }

    .admin-area .admin-log {
        font-size: 0.9rem;
    }

    /*
         * ADMIN LIST
         */

    .admin-list-title {
        font-weight: 600;
        background-color: rgb(230, 230, 230);
    }

    .admin-list-title .padding {
        padding: calc(20px / 4) calc(20px / 4);
    }

    @media screen and (max-width: 640px) {
        .admin-list-title .padding {
            display: none;
        }
    }

    .admin-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .admin-list li a.clickable,
    .admin-list li button.clickable {
        display: block;
        height: 100%;
    }

    .admin-list a.clickable:hover,
    .admin-list button.clickable:hover {
        background-color: rgba(51, 51, 51, 0.14);
    }

    .admin-list .padding {
        padding: calc(20px / 2);
    }

    .admin-list .admin-list-item-title {
        color: rgb(51, 51, 51);
    }

    .admin-list .admin-list-item-subtitle {
        margin-top: -4px;
        font-size: 0.8em;
        color: #555;
    }

    .striped.admin-list li {
        background-color: rgb(253, 253, 253);
        color: #333;
    }

    .striped.admin-list li:nth-of-type(2n + 2) {
        background-color: rgb(245, 245, 245);
        color: #333;
    }

    .admin-profile-properties ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .admin-profile-properties ul li button {
        padding: 10px 20px;
    }

    .admin-profile-property-visible-icon {
        font-size: .8rem;
    }

    .admin-profile-properties-label {
        font-weight: 600;
    }

    .admin-profile-properties-type {
        font-size: .8rem;
    }

    .admin-profile-property.property-hidden,
    .property-hidden{
        opacity: .5;
    }

    .admin-profile-properties .drag-handle {
        font-size: 1.1rem;
        color: rgb(51, 51, 51);
        cursor: move;
    }

    .admin-profile-properties-add-button {
        text-align: center;
        font-size: 1.4rem;
        color: rgb(51, 51, 51);
    }

    .admin-profile-properties-add-button button {
        color: rgb(51, 51, 51);
        cursor: pointer;
    }

    .admin-community-areas {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .admin-community-areas h3 {
        margin-bottom: 0;
    }
    .admin-community-areas h3 .button {
        margin-top: -2px;
    }

    .admin-community-areas .area-description {
        font-size: 0.9rem;
    }

    .admin-community-areas .area-access {
        font-size: 0.7rem;
        font-weight: 600;
        font-style: italic;
        padding-top: calc(20px / 4);
    }

    .admin-community-areas .area-drag-handle-wrapper {
        text-align: center;
        margin-top: calc(20px / 2);
    }

    .admin-community-areas .drag-handle {
        font-size: 1.1rem;
        color: rgb(51, 51, 51);
        cursor: move;
    }

    .admin-community-boards {
        list-style: none;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .admin-community-boards h4 {
        font-size: 1rem;
        margin: 0;
    }

    .admin-community-boards .board-description {
        font-size: 1.0rem /* vorher: 0.8rem */;
    }

    .admin-community-boards .board-numbers {
        font-size: 1.0rem /* vorher: 0.8rem */;
    }

    .admin-community-boards .box {
        margin-bottom: calc(20px / 4);
    }

    .admin-community-boards .board-drag-handle-wrapper {
        text-align: center;
    }

    .admin-community-boards .drag-handle {
        font-size: 1rem;
        cursor: move;
    }

    .admin-community-add-board {
        text-align: center;
        font-size: 1.4rem;
        color: rgb(51, 51, 51);
    }

    .admin-community-add-board button {
        color: rgb(51, 51, 51);
        cursor: pointer;
    }

    .admin-community-access-list {
        padding: calc(20px / 2);
    }

    .admin-community-access-listul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .admin-community-access-list li label {
        cursor: pointer;
    }

    .admin-community-access-list li label input[type="checkbox"] {
        position: relative;
        top: 2px;
    }

    .admin-courses .course-name {
        font-weight: 600;
        color: rgb(51, 51, 51);
    }

    .admin-courses .course-description {
        color: #555;
        font-size: 0.9rem;
    }

    .admin-courses .drag-handle {
        font-size: 1.1rem;
        color: rgb(51, 51, 51);
        cursor: move;
    }

    .admin-courses-stats {
        margin-top: 10px;
        font-size: 1.0rem /* vorher: 0.8rem */;
    }

.admin-course-duplicate-checkbox {
    position: relative;
    top: 2px;
}

.admin-course-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-course-downloads {
    list-style: none;
    margin: 0;
    padding: 0;
}

.course-download-published {
    color: green;
    font-weight: 600;
}

.course-download-notpublished {
    color: rgb(170,0,0);
    font-weight: 600;
}

.course-categories-drag-handle-wrapper {
    text-align: center;
    margin-top: calc(20px / 2);
}

.course-categories-drag-handle-wrapper .drag-handle {
    font-size: 1.1rem;
    color: rgb(51, 51, 51);
    cursor: move;
}

.course-lessons-drag-handle-wrapper {
    text-align: center;
    margin-top: calc(20px / 2);
}

.course-lessons-drag-handle-wrapper .drag-handle {
    font-size: 1.1rem;
    color: rgb(51, 51, 51);
    cursor: move;
}

.course-downloads-drag-handle-wrapper {
    text-align: center;
    margin-top: calc(20px / 2);
}

.course-downloads-drag-handle-wrapper .drag-handle {
    font-size: 1.1rem;
    color: rgb(51, 51, 51);
    cursor: move;
}

.admin-course-lessons ul.admin-course-lessons-list {
    margin: 0;
    list-style: none;
}

.admin-course-lessons li {
    padding-left: calc(1.5 * 20px);
}

.admin-course-lessons .admin-course-lessons-list-lesson-publish {
    padding-left: 1em;
    opacity: 0.8;
    font-size: 0.8em;
}

.course-lesson-categorylist {
    text-transform: uppercase;
    font-weight: 800;
}

.admin-courses-add-download .box {
    border-style: dashed;
    color: rgb(51, 51, 51);
    text-align: center;
    cursor: pointer;
}

.admin-courses-add-download .box:hover {
    border-color: rgb(51, 51, 51);
}

.admin-courses-add-category .box {
    border-style: dashed;
    color: rgb(51, 51, 51);
    text-align: center;
    cursor: pointer;
}

.admin-courses-add-category .box:hover {
    border-color: rgb(51, 51, 51);
}

.admin-courses-add-lesson .box {
    border-style: dashed;
    color: rgb(51, 51, 51);
    text-align: center;
    cursor: pointer;
}

.admin-courses-add-lesson .box:hover {
    border-color: rgb(51, 51, 51);
}

.admin-course-edit-category {
    cursor: pointer;
}

.admin-course-edit-category:hover {
    color: rgb(51, 51, 51);
}

.admin-purchases-header {
    text-align: right;
    margin-bottom: 20px;
}

.admin-course-download {
    font-size: 1.0rem /* vorher: 0.8rem */;
    word-wrap: break-word;
}

.video-converting {
    height: 260px;
    text-align: center;
}

.video-converting .video-converting-icon .fa {
    font-size: 4em;
}

.video-converting .video-converting-text {
    font-size: 1.2em;
    padding-top: 20px;
}

.purchase-inactive {
    opacity: 0.4;
    font-style: italic;
}

.admin-pagination .pagination-page {
    display: inline-block;
    padding: 2px;
    min-width: 25px;
    text-align: center;
    margin-right: calc(20px / 4);
    border: 1px solid rgb(200, 200, 200);
    font-weight: 600;
}

.admin-pagination .current.pagination-page {
    border: 1px solid #b93016;
    font-weight: 800;
}

.admin-pagination .pagination-page:hover {
    cursor: pointer;
    background: rgba(51, 51, 51, 0.14);
}

.top.admin-pagination {
    margin-bottom: calc(20px / 2);
}

.bottom.admin-pagination {
    margin-top: calc(20px / 2);
}

.admin-pagination-per-page {
    text-align: right;
}

.admin-pagination-per-page select {
    width: auto;
    margin-right: 5px;
}

@media screen and (max-width: 640px) {
    .admin-settings-nav {
        margin-bottom: 20px;
        background: rgb(253, 253, 253);
        text-align: center;
        border-bottom: 3px solid rgb(230, 230, 230);
    }
}

.admin-settings-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-settings-nav li {
    border-bottom: 1px solid rgb(230, 230, 230);
}

.admin-settings-nav button,
.admin-settings-nav a {
    display: block;
    width: 100%;
    text-align: left;
    padding: calc(20px / 2);
    cursor: pointer;
    color: #333;
}

.admin-settings-nav button:hover,
.admin-settings-nav a:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

.admin-settings-nav li:last-of-type {
    border-bottom: none;
}

.admin-settings-nav li.selected button,
.admin-settings-nav li.selected a {
    background: rgba(51, 51, 51, 0.14);
}

.editor-editor {
    min-height: 240px !important;
    border: 1px solid rgb(230, 230, 230);
    background: rgb(253, 253, 253) !important;
    color: #333 !important;
    padding-left: 10px;
    padding-right: 10px;
}

.editor-editor blockquote {
    padding: 0.01rem 0;
}

.editor-editor .public-DraftStyleDefault-block {
    margin: 11px 10px !important;
}

.editor-editor .public-DraftStyleDefault-ul {
    margin: 0 !important;
    padding: 0 !important;
}

.editor-editor .public-DraftStyleDefault-unorderedListItem {
    margin-left: 2rem !important;
}

.editor-editor .public-DraftStyleDefault-block {
    margin: 0px 0px !important;
}

.large-editor .editor-editor {
    min-height: 500px !important;
}

.editor-mode-buttons {
    text-align: right;
}

.admin-settings-loading {
    text-align: center;
    padding: 30px 0;
}

.admin-settings-loading .fa {
    font-size: 1.8rem;
}

.admin-settings-buttons {
    margin-top: 3px;
}

.admin-settings-buttons button {
    width: 100%;
    text-align: center;
}

.admin-member-account-box label {
    display: inline;
    position: relative;
    top: -5px;
    padding-left: 5px;
}

.admin-member-stats .admin-member-stats-course ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-member-stats .admin-member-stats-course ul li {
    padding: calc(20px / 4) calc(20px / 2);
    border-bottom: 1px solid rgb(230, 230, 230);
}

.admin-member-stats-course .stats-course-category {
    background: rgb(51, 51, 51);
    color: rgb(253, 253, 253);
    font-weight: 600;
}

.admin-member-stats-course .stats-course-lesson .finished {
    color: green;
}

.admin-member-stats-course .stats-course-lesson-name {
    font-weight: 600;
}

.admin-member-stats-course .stats-course-lesson-label {
    padding-right: 20px;
}

.download-icon {
    font-size: .7rem;
    font-weight: 800;
    padding: 4px 4px 3px 4px;
    position: relative;
    top: -2px;
}

.react-datepicker__time-list-item,
.react-datepicker__month-select,
.react-datepicker__month-select option,
.react-datepicker__year-select,
.react-datepicker__year-select option {
    color: #333 !important;
}

.admin-editor-editor {
    min-height: 240px !important;
    border: 1px solid rgb(230, 230, 230);
    background: rgb(253, 253, 253) !important;
    color: #333 !important;
    padding-left: 10px;
    padding-right: 10px;
}

.admin-editor-editor blockquote {
    padding: 0.01rem 0;
}

.admin-editor-editor .public-DraftStyleDefault-block {
    margin: 11px 10px !important;
}

.admin-editor-editor .public-DraftStyleDefault-ul {
    margin: 0 !important;
    padding: 0 !important;
}

.admin-editor-editor .public-DraftStyleDefault-unorderedListItem {
    margin-left: 2rem !important;
}

.admin-editor-editor .public-DraftStyleDefault-block {
    margin: 0px 0px !important;
}

.admin-permission-yes {
    color: green;
}

.admin-permission-no {
    color: red;
}

.admin-list-item .member-admin-label {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 6px;
    margin-left: 10px;
}

.inactive.admin-list-item {
    opacity: 0.3;
}

.no-error.admin-status-content .box {
    //background: #e1faea;
}

.admin-status-errors .callout,
.admin-status-warnings .callout,
.admin-status-hints .callout {
    margin-top: calc(20px / 2);
    margin-bottom: 0;
    border-radius: 5px;
    color: #333;
}

.admin-status-errors .callout div,
.admin-status-warnings .callout div,
.admin-status-hints .callout div,
.admin-status-errors .callout p,
.admin-status-warnings .callout p,
.admin-status-hints .callout p {
    color: #333;
}

.admin-status-pretitle {
    font-weight: 600;
    font-size: .7rem;
}

.admin-dashboard-nextlivecall .admin-dashboard-nextlivecall-image {
    margin-bottom: calc(20px / 3);
}

.admin-dashboard-nextlivecall .admin-dashboard-nextlivecall-start {
    text-align: center;
}

.admin-dashboard-nextlivecall .admin-dashboard-nextlivecall-title {
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: rgb(51, 51, 51);
}

.admin-dashboard-nextlivecall-countdown {
    margin-top: calc(20px / 3);
    color: #333;
}

.admin-dashboard-nextlivecall-countdown .mm-countdown-time {
    color: #333;
}

.admin-dashboard-nextlivecall-countdown .mm-countdown-caption {
    color: #555;
}

.admin-mobile-header {
    text-align: center;
}

.admin-mobile-header h1 {
    margin: 0;
}

@media screen and (max-width: 640px) {
    .admin-page-actions {
        padding-bottom: 20px;
    }
}

.admin-license-active-until {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
}

.admin-license-modules ul {
    list-style: none;
}

.admin-license-modules li.not-selected {
    opacity: 0.5;
}

.admin-license-modules li.selected {
    opacity: 1;
}

.access-info {
    text-align: center;
    font-size: 1.0rem /* vorher: 0.8rem */;
    padding-top: calc(20px / 4);
}

.admin-tools .box-content {
    padding: 20px 20px 20px 0;
}

.admin-tools .admin-tools-icon {
    text-align: center;
}

.admin-tools .admin-tools-icon .fa {
    font-size: 1.6em;
    color: rgb(51, 51, 51);
}

.admin-tools-import-upload #avatarDropZone {
    border: 1px dashed rgb(230, 230, 230);
}

.admin-tools-import-table input[type="text"] {
    min-width: 140px;
    padding: 3px 6px;
    height: auto;
}

.admin-tools-import-table select {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

.admin-tools-import-counter {
    text-align: center;
}

.admin-tools-import-explanation {
    font-size: 0.8em;
    padding-top: 20px;
}

.admin-tools-import-purchase {
    padding-top: 20px;
}

.admin-tools-import-success code {
    font-size: 0.8em;
}

.admin-tools-webhook code {
    font-size: .8rem;
}

.admin-tools-webhook ul li {
    margin-top: 6px;
}

.dots-menu {
    width: 260px;
    border: 1px solid rgb(230, 230, 230);
    background: rgba(255,255,255,0.9);
    position: absolute;
    right: 0;
}

.dots-menu .dots-menu-content {
    font-size: 0.9em;
}

.dots-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dots-menu li {
    text-align: left;
    border-bottom: 1px solid rgb(230, 230, 230);
}

.dots-menu a,
.dots-menu button {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    padding: calc(20px / 2) !important;
    color: rgb(51, 51, 51);
    line-height: 1.2em;
    cursor: pointer;
}

.dots-menu a.disabled,
.dots-menu button.disabled {
    color: #555;
    cursor: not-allowed;
    opacity: 0.3;
}

.dots-menu a:hover,
.dots-menu button:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

.dots-menu li:last-of-type {
    border-bottom: none;
}

.admin-design-menu {
    width: 280px;
    float: right;
    height: 100vh;
    border-left: 1px solid black;
    background: white;
    position: relative;
    color: #333;
}

.admin-design-menu div,
.admin-design-menu li {
    color: #333;
}

.admin-design-menu .admin-back-button a {
    color: rgb(51, 51, 51) !important;
}

.admin-design-menu .admin-design-menu-content {
    padding: 20px;
}

.admin-design-menu .admin-design-menu-content h3 {
    margin-top: 5px;
    color: rgb(51, 51, 51) !important;
}

.admin-design-menu-buttons {
    border-top: 1px solid #ddd;
    text-align: center;
    padding: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.admin-design-menu-buttons button.primary {
    font-weight: 600 !important;
    width: 100%;
    border-color: rgb(51, 51, 51) !important;
    color: rgb(51, 51, 51) !important;
}

.admin-design-menu-lobby ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
}

.admin-design-menu-lobby ul li {
    cursor: pointer;
    padding: 4px 10px;
    border-bottom: 1px solid #ddd;
}

.admin-design-menu-lobby ul li:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

.admin-design-menu-lobby ul li:last-of-type {
    border-bottom: none;
}

.admin-design-menu-lobby ul li .fa-angle-right {
    font-weight: bold;
}

.admin-design-menu-theme-button {
    width: 100%;
    text-align: center;
}

.admin-design-theme {
    border: 1px solid transparent
}

.selected.admin-design-theme-wrapper .admin-design-theme {
    border-color: rgb(51, 51, 51);
}

.admin-design-theme-selected-label {
    visibility: hidden;
}

.selected.admin-design-theme-wrapper .admin-design-theme-selected-label {
    visibility: visible;
    background: rgb(51, 51, 51);
    color: white;
    font-size: .7rem;
    font-weight: 800;
    padding: 2px 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.admin-design-theme-screenshot {
    cursor: zoom-in;
}

.admin-design-theme-screenshot img {
    border: 1px solid rgb(230, 230, 230);
}

.admin-design-theme-text {
    cursor: pointer;
    padding: 20px calc(20px / 2);
    border: 1px solid transparent;
}

.admin-design-theme-text:hover {
    background: rgba(51, 51, 51, 0.14);
}

.admin-design-theme-name {
    color: rgb(51, 51, 51);
    font-weight: 600;
    margin-bottom: 10px;
}

.admin-design-color-text {
    position: relative;
    top: 3px;
    font-size: .9rem;
}

.admin-design-menu-title {
    font-weight: bold;
    cursor: pointer;
}

.admin-design-menu-title:hover {
    color: rgb(51, 51, 51);
}

.admin-design-subtitle {
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: rgb(51, 51, 51);
    border-bottom: 1px solid rgb(51, 51, 51);
    text-align: center;
}

.admin-design-menu-text {
    font-size: 1.0rem /* vorher: 0.8rem */;
    padding-left: 16px;
}

.admin-design-content {
    width: calc(100% - 280px);
    margin-right: 280px;
}

.admin-design-content iframe {
    width: 100%;
    height: 100vh;
    border: none;
}

.colorpicker-popup .sketch-picker {
    padding: 10px 0 0 0 !important;
    box-sizing: initial;
    border-radius: 0px;
    border: none !important;
    box-shadow: none !important;
}

.colorpicker-popup .colorpicker-esc {
    width: 100%;
    cursor: pointer;
    text-align: center;
    font-size: 1.0rem /* vorher: 0.8rem */;
    font-weight: 600;
    padding-bottom: 10px;
}

.colorpicker-popup .colorpicker-esc:hover {
    color: rgb(51, 51, 51);
}

.sizepicker-popup .sizepicker-esc:hover {
    color: rgb(51, 51, 51);
}

.sizepicker-popup .sizepicker-esc {
    width: 100%;
    cursor: pointer;
    text-align: center;
    font-size: 1.0rem /* vorher: 0.8rem */;
    font-weight: 600;
    padding-bottom: 10px;
}

.sizepicker-popup .sizepicker-slider {
    padding: 10px;
}

.admin-design-font-text {
    padding: 5px 3px 5px 3px;
}

.admin-support h4 {
    font-size: 1rem;
    color: #555 !important;
}

ul.support-tutorials {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgb(230, 230, 230);
}

ul.support-tutorials li button {
    border-bottom: 1px solid rgb(230, 230, 230);
    padding: calc(20px / 2) 20px;
    display: block;
    width: 100%;
    cursor: pointer;
    color: #333;
}

ul.support-tutorials li button:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

ul.support-tutorials li:last-of-type button {
    border-bottom: none;
}

.support-tutorial-content h4 {
    font-size: 1rem;
    margin-top: 20px;
}

.support-tutorial-content li {
    padding-bottom: 8px;
}

.support-tutorial-content .support-url {
    text-align: center;
    padding: 20px 0;
}

.admin-visionboard .visionboard-image {
    background-size: cover;
    background-position: center;
}

.admin-visionboard .big.visionboard-image {
    height: 300px;
}

.admin-visionboard .small.visionboard-image {
    height: 210px;
}

    /*
     * ########## 2000. HOME ##########
     */

.page-home h2 {
    color: rgb(51, 51, 51);
}

.home-hello {
    padding: 4.5rem 0 3rem 0;
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 100;
}

.home-grid {
    margin-bottom: 35px;
}

.home-item-wrapper .home-item {
    display: block;
    width: 100%;
    height: 220px;
    border: 1px solid rgb(230, 230, 230);
    position: relative;
    text-align: center;
    font-size: 1.6rem;
    color: white;
    font-weight: normal;
    background-size: cover;
}

.home-item-content {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
}

.home-item-text {
    color: white;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

a.home-item:hover,
button.home-item:hover {
    border-color: rgb(51, 51, 51);
    color: rgb(51, 51, 51);
}

a.home-item:hover .home-item-content {
    background-color: rgba(255, 255, 255, 0.6);
}

button.home-item:hover .home-item-content {
    background-color: rgba(255, 255, 255, 0.6);
}


.default.home-item {
    height: 150px;
}

.home-item-courses {
    /*background-image: url("https://static.membermate.net/images/home/courses.jpg");*/
}

.home-item-community {
    /*background-image: url("https://static.membermate.net/images/home/community.jpg");*/
}

.home-item-nextlivecall {
    /*background-image: url("https://static.membermate.net/images/home/livecall.jpg");*/
}

.home-item-routines {
    /*background-image: url("https://static.membermate.net/images/home/routines.jpg");*/
}

.home-item-nonextlivecall {
    font-size: 1.2rem;
}

.home-item-nextlivecall-started {
    background-color: rgba(255, 0, 0, 0.7);
    padding: 0 16px;
    border-radius: 10px;
}

.home-visionboard {
    margin-bottom: 35px;
}

.home-visionboard .visionboard-image {
    width: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.home-visionboard .big.visionboard-image {
    height: 240px;
}

.home-visionboard .small.visionboard-image {
    height: 180px;
}

.home-courses {
    padding-top: calc(20px * 2);
    color: #333;
}

.home-courses h2 {
    margin-bottom: 20px;
}

.home-courses-course {
    text-align: center;
}

.home-courses-course  .course-content {
    padding-top: 5px;
}

.page-home a {
    color: #333;
}

.page-home a.top-mainmenu-button {
    color: rgb(255, 255, 255);
}

.page-home a.topbar-supportbutton {
    padding: 8px 16px;
    margin-right: 5px;
    font-weight: 600;
    font-size: 0.8rem;
    background: #333;
    border: 1px solid #444;
    color: white;
}

.page-home a:hover .course-no-image {
    border: 1px solid rgb(230, 230, 230);
}

.home-sortable-grid-item-sortmode {
    cursor: move;
}
.home-sortable-grid-item-sortmode a,
.home-sortable-grid-item-sortmode button {
    cursor: move;
}

.home-grid-sort-switch {
    text-align: right;
}

.page-home .wiggle {
    animation: homeWiggle 1.5s;
    animation-iteration-count: infinite;
}

@keyframes homeWiggle {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.strich {
    text-align: center;
    margin: 2rem 0;
}

.strich img {
    width: 550px;
    height: auto;
}

section.home-welcome-video {
    padding: 30px 10% 50px 10%;
}

section.home-words-from-loa {
    padding-top: 50px;
    padding-bottom: 50px;
}

section.home-news  {
    padding-top: 0px;
    padding-bottom: 50px;
    text-align: center;
    /*background: rgb(245, 245, 245);*/
}

section.home-belowcountdown  {
    padding-top: 0px;
    padding-bottom: 50px;
    text-align: center;
}

.section.home-news img {
    width: 100%;
    height: auto;
}

section.home-countdown {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

section.home-categories {
    padding-top: 50px;
    padding-bottom: 50px;
}

section.home-map {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

section.home-map img {
    width: 50%;
}

@media screen and (max-width: 640px) {
    section.home-words-from-loa,
    section.home-news,
    section.home-countdown,
    section.home-categories,
    section.home-map,
    section.home-agenda,
    section.home-footerbottom {
        padding-left: 0;
        padding-right: 0;
    }

    section.home-map img {
        width: 100%;
    }
}

section.home-agenda {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

section.home-agenda img {
    width: 100%;
}

.home-words-from-loa .home-words-title {
    text-align: left;
    margin-bottom: 20px;
}

.home-words-from-loa .home-words-title img {
    height: 60px;
}

.home-words-slider {
    text-align: center;
}

.home-words-slider img {
    width: 100%;
    height: auto;
}

.home-words-slider .fa {
    font-size: 2.6rem;
}

.home-words-slider .fa:hover {
    cursor: pointer;
    color: #d2d9d1;
}

.home-banner img {
    height: 256px;
    width: auto;
}

a.home-countdown {
    display: block;
}

.home-countdown h3 {
    color: #888;
    font-size: 1rem;
}

.home-countdown h2 {
    position: relative;
    top: -10px;
    font-size: 1.6rem;
}

.home-countdown-button {
    text-align: center;
    padding-top: 20px;
}

.home-countdown-extratext {
    padding-top: 10px;
}

.home-categories-category .category-content {
    padding: calc(2 * 20px) 0;
}

.home-categories-category .category-content h3 {
    text-transform: uppercase;
    text-align: center;

}

.home-categories-category .category-image img {
    width: 100%;
    height: auto;
}

.home-categories-category .category-description {
    text-align: left;
    font-size: 20px;
    font-weight: 300;
    line-height: 120%;
}

.home-categories-category:hover img {
    -webkit-box-shadow: 3px 3px 18px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 18px -5px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 18px -5px rgba(0,0,0,0.75);
}

.home-categories-category:hover h3 {
    text-decoration: underline;
}

.home-latestvideo-video {
    position: relative;
    z-index: 100;
}

.home-welcome-video .responsive-embed,
.home-categories .responsive-embed,
.home-latestvideo-video .responsive-embed {
    margin-bottom: 0;
}

.home-latestvideo-overlay {
    display: block;
    cursor: pointer !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
    z-index: 150;
    /*background: rgba(255, 255, 255, 0.7);*/
    color: #333;
}

.home-latestvideo-overlay-content {
    text-align: center;
    color: #333;
    font-weight: 800;
    text-transform: uppercase;
}

.qa-popup-anonymous {
    text-align: center;
}

.qa-popup-anonymous .admin-data-edit-value {
    background: transparent;
}

.course-page-truepowerkurs5 .personalmessage {

}

.course-page-truepowerkurs5 h1 {
    text-align: center;
}

.course-page-truepowerkurs5 .category-description {
    font-size: 22px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.truepowerkurs5-grid {
    margin-top: 40px;
}

.truepowerkurs5-grid a,
.truepowerkurs5-grid .grid-item {
    display: block;
    padding: 20px;
}

.truepowerkurs5-grid a:hover,
.truepowerkurs5-grid a:hover * {
    background: #eee;
}

.truepowerkurs5-grid h1 {
    margin-bottom: 40px;
}

.truepowerkurs5-grid .grid-thumbnail-text {
    padding-top: 20px;
}

.truepowerkurs5-grid .grid-item {
    opacity: .2;
}

.course-page-truepowerflow .section,
.course-page-truepowerkurs5 .section {
    padding: 40px 0;
}

.course-page-truepowerflow h1 {
    line-height: 110%;
}


/*
 * ########## 2100. SEARCH ##########
 */

.main-search-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgb(0, 0, 0);
    z-index: 900;
}

.main-search {
    padding: calc(90px + 44px + 20px / 2) 0 20px 0;
}

.main-search .search-close-button {
    height: 30px;
    width: auto;
    margin-top: 5px;
    cursor: pointer;
}

.main-search .search-close-button .search-icon {
    text-align: right;
}

.main-search .search-close-button  .fa {
    font-size: 1.8em;
    line-height: 1.4em;
    opacity: 0.3;
}


.search-field {
    padding: 0 20px 20px / 1.5 20px;
    border-bottom: 1px solid rgb(230, 230, 230);
}

.search-field input[type="text"] {
    background: transparent;
    border: 1px dashed rgb(230, 230, 230);
    box-shadow: none;
    margin: 0;
}


.search-results {
    padding: 20px;
    overflow: auto;
    height: calc(100vh - 160px);
}

.search-results .search-results-pleaseinput {
    color: #555;
    font-size: 1.1em;
}

.search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-results-list li {
    border-bottom: 1px dashed rgb(230, 230, 230);
}

.search-results-list a {
    display: block;
    width: 100%;
    padding: calc(20px / 2);
}

.search-results-list a:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

.search-result-image {
    padding-right: 20px;
}

.search-result-image img {
    height: 100%;
    max-height: 67px;
    width: auto;
}

@media screen and (max-width: 640px) {
    .search-result-image img {
        margin-bottom: calc(20px / 2);
    }
}

.search-result-icon {
    padding-right: 20px;
    height: 67px;
    width: 146px;
    text-align: center;
}

.search-result-icon .fa {
    font-size: 1.8em;
    color: rgb(51, 51, 51);
}


.search-result-type {
    color: #555;
    font-size: 0.8em;
    font-weight: 600;
}

.search-result-title {
    font-weight: 600;
    color: rgb(51, 51, 51);
}


.search-results-list li:last-of-type {
    border-bottom: none;
}



/*
 * ########## 2200. LOGIN ##########
 */

.page-login main {
    padding-top: 40px !important;
}

.page-login h1 {
    text-align: center;
}

.page-login .callout {
    color: #333;
}

.page-login .callout  * {
    color: #333;
}

.page-login .callout a {
    color: rgb(51, 51, 51);
}


.page-login .box {
    background: rgba(255,255,255,0.0);
    border-color: rgb(100, 100, 100);

    color: #DDDDDD;
}

.page-login .box * {
    color: #DDDDDD;
}

.page-login .box input {
    background: rgba(0,0,0,0.7);
    color: #DDDDDD;
    border-color: rgb(100, 100, 100);
}

.page-login .box .button {
    color: white !important;
    border-color: white !important;
}


.login-logo {
    text-align: center;
    margin: 2rem 0 2.5rem 0;
}

.login-logo img {
    height: 75px;
}

@media screen and (max-width: 640px) {
    .login-logo img {
        width: 80%;
        height: auto;
    }
}


.login-form-loading {
    text-align: center;
    font-size: 1.2rem;
}

.login-form-loading .fa {
    font-size: 2rem;
    position: relative;
    top: 12px;
}

.passwordreset-message {
    margin-bottom: 0;
}

.login-password-forgotten {
    color: rgb(51, 51, 51);
    cursor: pointer;
    font-size: 1.0rem /* vorher: 0.8rem */;
}

.login-password-forgotten:hover {
    text-decoration: underline;
}

.login-forgotten-backlink {
    color: rgb(51, 51, 51);
    cursor: pointer;
    font-size: 1.0rem /* vorher: 0.8rem */;
    margin-right:calc(20px / 2);
}

.login-forgotten-backlink:hover {
    text-decoration: underline;
}

.login-buttons {
    margin-top: 1rem;
    text-align: right;
}

.login-buttons .button {
    margin-bottom: 0;
}


input.highlighted {
    border-color: rgba(255, 0, 0, 0.2);
    background: rgba(255, 0, 0, 0.05);
}

.login-join {
    padding: 32px 20px;
    margin-bottom: 40px;
    text-align: center;
    /*background: rgba(255,255,255,0.4);
    color: black;*/

    border: 1px solid rgb(100, 100, 100);
    background: transparent;
    color: white;
}

.login-join h3 {
    font-size: 1.4rem;
    line-height: 120%;
    color: rgba(255,255,255,0.8);
}

.login-join h3 span {
    /*font-weight: 900;
    font-size: 1.8rem;*/
}

.login-join-button {
    padding-top: 20px;
}

.login-join-button a {
    display: inline-block;
    padding: 16px 30px;
    margin-bottom: 0;
    color: rgba(255,255,255,0.8) !important;
    font-size: 1.1rem;
    font-weight: 600;
    border: 1px solid rgb(100, 100, 100) !important;
}

.login-join-button a:hover {
    background: white;
    color: black !important;
}


/*
 * ########## 2300. COURSES ##########
 */


.course-overview-course .course-content,
.course-overview-course .course-button {
    padding: calc(20px / 2);
}

.course-overview-course .course-button {
    text-align: center;
}


.course-overview-horizontal-separator {
    border-right: 1px solid rgb(230, 230, 230);
}

.course-course header h1 {
    text-transform: uppercase;
    font-weight: 800;
}

.course-lesson-pretitle {
    font-weight: 800;
    font-size: 1rem;
    color: #666;
    text-transform: uppercase;
    position: relative;
    top: 8px;
}

.course-category-title {
    text-transform: uppercase;
    font-weight: 600;
    padding: calc(20px / 3);
}

.course-category .category-description,
.course-category .category-description * {
    font-size: 22px;
    text-align: justify;
}

.course-category .category-banner {
    margin-bottom: calc(20px * 2);
}

section.course-category-subcategory {
    padding-top: 30px;
    padding-bottom: 30px;
}

section.course-category-subcategory h2 {
    font-size: 1.6rem;
    margin-top: 20px;
}

.course-category .course-category-qa h3 {
    text-align: center;
}

.course-category .course-category-qa .course-category-qa-text {
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 20px;
}

.course-category .course-category-qa .course-category-qa-text a {
    text-decoration: underline;
}

.course-category .course-category-qa .course-category-qa-text-hr {
    text-align: justify;
}

.course-category .course-category-qa .course-category-qa-button {
    text-align: center;
}

.course-category .course-category-qa .course-category-qa-button-hr button,
.course-category .course-category-qa .course-category-qa-button-hr a {
    width: 100%;
}

.course-category .course-category-qa .course-category-qa-button-hr button:hover,
.course-category .course-category-qa .course-category-qa-button-hr a:hover {
    background-color: #333 !important;
}

.course-no-image {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
}

.course-no-image  div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #999;
}


.course-no-image:hover {
    border-color: rgb(230, 230, 230);
}

.course-no-image:hover div {
    color: rgb(230, 230, 230);
}


.category-download {
    display: block;
    width: 100%;
    height: 180px;
    border: 2px solid #999;
    background-size: cover;
}

.big-download {
    height: 280px;
}

.small-download {
    height: 180px;
}

.category-download:hover {
    -webkit-box-shadow: 3px 3px 18px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 18px -5px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 18px -5px rgba(0,0,0,0.75);
}

.category-download-content {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 20px;
}

.download-text {
    margin-top: 12px;
}

.course-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.course-category-lessons {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1em;
}

.course-category-lesson:hover {
    text-decoration: underline;
}

.course-category-lesson {
    color: rgb(51, 51, 51);
}

.course-category-lesson a {
    color: rgb(51, 51, 51);
}

.course-lesson-dont-show-before {
    opacity: 0.3;
    cursor: default;
}

.selected.course-category-lesson {
    font-weight: 600;
}


@media screen and (max-width: 640px) {
    .course-lesson-list {
        position: absolute;
        top: 90px;
        left: 0;
        width: 100%;
        min-height: 100%;

        background: rgba(0, 0, 0, 0.9);
        padding: calc(2 * 20px) 20px;
    }

    .course-lesson-list h2 {
                             margin-bottom: 20px;
                         }
}


.course-progress-percent {
    color: rgb(51, 51, 51);
}

.course-open-category {
    cursor: pointer;
}

ul.course-downloads-area,
ul.course-category-downloads {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.course-downloads-area {
    margin-top: calc(2 * 20px);
}

ul.course-category-downloads {
    margin-left: 5px;
}

ul.course-category-downloads  li {
    margin-bottom: 8px;
}


.course-download-featured-image {
    margin-bottom: 10px;
}

.course-download-featured-image img {
    width: 60%;
    margin: 0 auto;
    border: 1px solid rgba(208, 169, 143, 0.5);
}


.download-file-icon {
    position: relative;
    top: -1px;
    margin-right: 5px;
    background-color: rgb(51, 51, 51);
    color: white;
    padding: 2px 6px;
    font-size: 1.0rem /* vorher: 0.8rem */;
    font-weight: 800;
}

.course-lesson-below-video-buttons {
    text-align: right;
}

.course-lesson-notes {
    padding-top: calc(20px / 2);
}

.course-lesson-notes-popup h3 {
    margin-top: 10px;
    margin-bottom: 0;
}

.course-lesson-notes-popup input {
    margin-bottom: 0;
}

.course-lesson-notes-popup-time {
    text-align: center;
}


.course-lesson-note .note-time button {
    color: #333;
    font-weight: 600;
    cursor: pointer;
}

.course-lesson-note .note-time button:hover {
    text-decoration: underline;
}


.note-buttons {
    text-align: right;
}

.note-buttons  .button {
    margin-bottom: 3px;
    width: 30px;
}

#videoPlayer {
    height: 100%;
}

#vimeoPlayerLoading {
    text-align: center;
    width: 100%;
    padding: 180px 0;
}

#vimeoPlayerLoading  .fa {
    font-size: 1.6rem;
}

.course-lesson-audio {
    margin-bottom: 20px;
}

.course-noaccess {
    text-align: center;
    padding-top: 100px;
}

.course-layout3 .course-lessonlist {
    border: 1px solid rgb(230, 230, 230);
    background: rgb(253, 253, 253);
    padding: calc(20px / 2);
}

.course-lessonlist .box,
.course-downloads .box,
.course-progress .box {
    margin-bottom: calc(20px / 2);
}

.course-lesson-finished {
    margin-right: 10px;
}

.course-downloads  ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.course-downloads    li {
    padding-left: 20px;
}

.course-downloads a {
    color: rgb(51, 51, 51);
}

.course-lesson-description-box {
    font-size: 22px;
}

.course-lesson-description p:last-of-type {
    margin-bottom: 0;
}


.course-category h1.category-name {
    text-align: center;
    margin: 40px 0 60px 0;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 2rem;
}

.course-category h1.category-name .category-course-name {
    font-size: 1.0rem /* vorher: 0.8rem */;
    color: #444;
    position: relative;
    top: 5px;
}

.course-category .category-image img {
    width: 100%;
    height: auto;
}

.course-category section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.course-category h2 {
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.course-category .category-lesson-image {
    background-size: cover;
}

.course-category .category-lesson-content h3 {
    margin-top: 20px;
    font-weight: 800;
    text-transform: uppercase;
}

.course-category .category-lesson-description {
    text-align: justify;
}


/*
 * ########## 2400. COMMUNITY ##########
 */

.community-header {
    margin-bottom: 3rem;
}

@media screen and (max-width: 640px) {
    .community-header {
        margin-bottom: 0.5rem;
    }
}

.community-header h1 {
    color: rgb(51, 51, 51);
}



@media screen and (max-width: 640px) {
    .community-header-buttons {
        margin-bottom: 20px;
    }
}

.community-areas .community-areas-area {
    margin-bottom: calc(20px * 3);
}

.community-areas .community-areas-area  h2 {
    font-weight: 500 !important;
    color: rgb(51, 51, 51);
    margin: 0 0 calc(20px / 3) calc(20px / 2);
}

.community-areas .community-areas-area .board-cell-titles {
    font-weight: 600;
    font-size: 1.0rem /* vorher: 0.8rem */;
    text-align: center;
    padding-bottom: calc(20px / 4);
}

.community-areas .community-areas-area .community-area-boards {
    background: rgb(253, 253, 253);
    border: 1px solid rgb(230, 230, 230);
}

.community-area-boards .community-area-boards-board {
    border-bottom: 1px solid rgb(230, 230, 230);
}

.community-area-boards .community-area-boards-board .padding {
    padding: calc(20px / 2);
}

.community-area-boards .community-area-boards-board .board-name {
    font-weight: 600;
}

.community-area-boards .community-area-boards-board .board-description {
    margin-top: -3px;
    font-size: 1.0rem /* vorher: 0.8rem */;
    color: #555;
}

.community-area-boards .community-area-boards-board .board-thread-count {
    text-align: center;
}

.community-area-boards .community-area-boards-board .board-post-count {
    text-align: center;
}

.community-area-boards .community-area-boards-board .board-last-post {
    text-align: center;
    font-size: 1.0rem /* vorher: 0.8rem */;
    line-height: 128%;
}


.locked.community-area-boards-board {
    color: rgb(200, 200, 200) !important;
}

.locked.community-area-boards-board .board-name,
.locked.community-area-boards-board .board-description {
    color: rgb(200, 200, 200) !important;
}


.community-area-boards-board:last-of-type {
    border-bottom: 0;
}

.community-areas-boards .message {
    padding: 20px;
    text-align: center;
}


.community-board .board-cell-titles {
    font-weight: 600;
    font-size: 1.0rem /* vorher: 0.8rem */;
    text-align: center;
    padding-bottom: calc(20px / 4);
}

.community-board-threads {
    background: rgb(253, 253, 253);
    border: 1px solid rgb(230, 230, 230);
}

.community-board-threads .message {
    text-align: center;
    padding: 20px;
}

.community-board-thread {
    border-bottom: 1px solid rgb(230, 230, 230);
}

.community-board-thread  .padding {
    padding: calc(20px / 2);
}

.community-board-thread  .thread-name {
    font-weight: 600;
}

.community-board-thread  .thread-author {
    margin-top: -3px;
    font-size: 1.0rem /* vorher: 0.8rem */;
    color: #555;
}

.community-board-thread  .thread-thread-count {
    text-align: center;
}

.community-board-thread  .thread-post-count {
    text-align: center;
}

.community-board-thread  .thread-last-post {
    text-align: center;
    font-size: 1.0rem /* vorher: 0.8rem */;
    line-height: 128%;
}


.locked.community-board-thread {
    color: rgb(200, 200, 200) !important;
}

.locked.community-board-thread  .board-name,
.locked.community-board-thread  .board-description {
    color: rgb(200, 200, 200) !important;
}


.community-board-thread:last-of-type {
    border-bottom: 0;
}

.community-thread-name-button {
    cursor: pointer;
    color: rgb(51, 51, 51);
    font-size: .8rem;
}


@media screen and (max-width: 640px) {
    .community-header-buttons {
        margin-top: 20px;
    }
}

.community-thread .community-thread-posts .community-post {
    background: rgb(253, 253, 253);
    border: 1px solid rgb(230, 230, 230);
    position: relative;
    margin-bottom: calc(20px / 2);
}

.community-thread .community-thread-posts .community-post .post-author-box {
    border: 1px solid rgb(230, 230, 230);
    background: rgb(253, 253, 253);
    padding: 20px 0 calc(20px / 2) 0;
    margin: calc(20px / 2);
    width: 190px;
    float: left;
    font-size: 0.9rem;
    text-align: center;
}

.community-thread .community-thread-posts .community-post .post-author-box   hr {
    margin: calc(20px / 2) 0;
    border-color: rgb(230, 230, 230);
}

.community-thread .community-thread-posts .community-post .post-author-box .post-author-avatar {
    margin-bottom: 1rem;
}

.community-thread .community-thread-posts .community-post .post-author-box .post-author-name {
    font-weight: 600;
    color: rgb(51, 51, 51);
    padding: 0 calc(20px / 2);
}

.community-thread .community-thread-posts .community-post .post-author-box .post-author-usertitle {
    font-weight: 600;
    font-size: 1.0rem /* vorher: 0.8rem */;
    margin-top: -3px;
    padding: 0 calc(20px / 2);
}

.community-thread .community-thread-posts .community-post .post-author-box .post-author-regdate,
.community-thread .community-thread-posts .community-post .post-author-box .post-author-postcount {
    font-size: 1.0rem /* vorher: 0.8rem */;
    padding: 0 calc(20px / 2);
}

@media screen and (max-width: 640px) {
    .post-name-subline {
        display: none;
    }
}

.community-thread .community-thread-posts .community-post .post-author-box .post-threadopener {
    font-size: 1.0rem /* vorher: 0.8rem */;
    font-weight: 600;
    padding: 0 calc(20px / 2);
    margin-top: 1rem;
    color: rgb(51, 51, 51);
}


.post-author-line {
    padding: calc(20px / 4);
    border-bottom: 1px solid rgb(230, 230, 230);
}

.post-author-line  .post-author-avatar {
    margin-right: calc(20px / 2);
}

.post-author-line  .post-author-usertitle {
    display: inline-block;
    margin-left: calc(20px / 4);
    padding: 1px 6px;
    background: rgb(51, 51, 51);
    color: white;
    font-size: 1.0rem /* vorher: 0.8rem */;
    font-weight: 600;
}

.post-author-line  .post-author-regdate,
.post-author-line  .post-author-postcount {
    display: inline-block;
    font-size: 0.9rem;
    color: #666;
}

.post-author-line  .post-threadopener {
    font-size: 1.0rem /* vorher: 0.8rem */;
    color: #666;
}

.post-author-line  .clearfix {
    height: calc(20px / 4);
}


.post-content {
    padding-left: calc(190px + 20px);
    height: 100%;
}

.post-content a {
    color: rgb(51, 51, 51);
}

@media screen and (max-width: 640px) {
    .post-content {
        padding-left: 0;
    }
}

.post-info {
    margin-top: calc(20px / 2);
    padding: 3px calc(20px / 2);
    color: #999;
    font-weight: 600;
    font-size: 1.0rem /* vorher: 0.8rem */;
    /* border-bottom: 1px solid rgb(230, 230, 230); */
}

.post-last-edit {
    padding-left: 1em;
    font-style: italic;
}

.post-text {
    font-size: 0.9rem;
    padding: 20px calc(20px / 2) calc(20px * 2)
    calc(20px / 2);
}

@media screen and (max-width: 640px) {
    .post-text {
        padding-bottom: 0;
    }
}

.post-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 3px calc(20px / 2) calc(20px / 1.7) calc(190px + 20px + 10px);
    width: 100%;
    font-size: 1.0rem /* vorher: 0.8rem */;
}

@media screen and (max-width: 640px) {
    .post-actions {
        float: none;
        clear: both;
        padding: 3px calc(20px / 2) calc(20px / 4) calc(20px / 2);
    }
}


.post-liked-by {
    font-style: italic;
    font-weight: 600;
}

@media screen and (max-width: 640px) {
    .post-liked-by {
        margin-bottom: 5px;
    }
}

.post-edit-button button,
.post-delete-button button,
.post-like-button button,
.post-quote-button button {
    cursor: pointer;
    color: rgb(51, 51, 51);
    margin-left: calc(20px / 1.5);
}

.post-edit-button button:hover,
.post-delete-button button:hover,
.post-like-button button:hover,
.post-quote-button button:hover {
    font-weight: 600;
    //color: rgb(51, 51, 51)Hover;
    text-decoration: rgb(51, 51, 51)HoverDecoration;
}

.post-edit-button strong,
.post-delete-button strong,
.post-like-button strong,
.post-quote-button strong {
    color: rgb(51, 51, 51)Hover;
}

.deleted.community-post {
    text-align: center;
    font-size: 1.0rem /* vorher: 0.8rem */;
    font-style: italic;
    padding: calc(20px / 2);
}


.community-reply-form .editor-editor {
    min-height: 240px !important;
    border: 1px solid rgb(230, 230, 230);
    background: rgb(253, 253, 253) !important;
    color: #333 !important;
    padding-left: 10px;
    padding-right: 10px;
}

.rdw-option-wrapper {
    color: #333;
}

.community-reply-form  blockquote {
    padding: 0.01rem 0;
}

.community-reply-form  .public-DraftStyleDefault-block {
    margin: 11px 10px !important;
}

.community-reply-form  .public-DraftStyleDefault-ul {
    margin: 0 !important;
    padding: 0 !important;
}

.community-reply-form  .public-DraftStyleDefault-unorderedListItem {
    margin-left: 2rem !important;
}

.community-reply-form    .public-DraftStyleDefault-block {
    margin: 0px 0px !important;
}

.reply-form-button {
    padding-top: calc(20px / 2);
    text-align: right;
    margin-bottom: 0;
}


.community-post-edit-popup .primary.button {
    margin-bottom: 10px;
}


.community-profile {
    color: #333;
}

.community-profile  h3 {
    color: rgb(51, 51, 51);
}

.community-profile .profile-box hr {
    margin: calc(20px / 2) 0;
    border-color: rgb(230, 230, 230);
}

.community-profile .profile-box .profile-avatar {
    margin-bottom: 1rem;
    text-align: center;
}

.community-profile .profile-box .profile-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(51, 51, 51);
    padding: 0 calc(20px / 2);
    text-align: center;
}

.community-profile .profile-box .profile-usertitle {
    text-align: center;
    font-weight: 600;
    font-size: 1.0rem /* vorher: 0.8rem */;
    margin-top: -3px;
    padding: 0 calc(20px / 2);
}

.community-profile .profile-box  .profile-regdate,
.community-profile .profile-box  .profile-postcount {
    font-size: 1.0rem /* vorher: 0.8rem */;
}

.community-profile .profile-box  .profile-birthday,
.community-profile .profile-box  .profile-profession,
.community-profile .profile-box  .profile-gender {
    font-size: 1.0rem /* vorher: 0.8rem */;
}

.community-nousername-checkicon {
    text-align: center;
    line-height: 40px;
}

.community-nousername-checkicon-success {
    color: green;
}

.community-nousername-checkicon-error {
    color: red;
}

.community-nousername-checkicon-loading {
    color: #666;
}

.community-nousername-checkmessage {
    text-align: center;
}

.community-thread-locked {
    text-align: center;
    padding: calc(20px * 4) 0;
}

.account-profile-add-link {
    display: block;
    width: 100%;
    cursor: pointer;
}

.account-profile-add-link .box {
    border-style: dotted;
    margin-bottom: 0;
}


.account-profile-add-link:hover .box {
    background-color: rgba(51, 51, 51, 0.14);
    border-color: rgb(51, 51, 51);
}


.account-profile-link-icon {
    text-align: center;
}

.account-profile-link-button {
    margin-left: 2px;
    cursor: pointer;
    color: rgb(51, 51, 51);
    padding: 2px 5px;
}

.account-profile-link-button:first-of-type {
    margin-left: 0px;
}

.account-profile-link-button:hover {
    background: rgb(51, 51, 51);
    color: white;
}


.profile-social-link {
    float: left;
    text-align: center;
    margin-right: calc(20px / 2);
}

.profile-social-link  .box {
    margin-bottom: 0;
    padding: 5px 5px 0 5px;
}

.profile-social-link  .fa {
    font-size: 2rem;
}

.profile-social-link  a:hover {
    cursor: pointer;
}

.profile-social-link a:hover .box {
    border-color: rgb(51, 51, 51);
}

#communityUploadZone {
    width: 100%;
    cursor: pointer;
    padding: 20px;
    border: 1px dashed rgb(230, 230, 230);
}

#communityUploadZoneText {
    text-align: center;
    padding: 0;
    font-size: .8rem;
}

#communityUploadZoneText .fa {
    font-size: 1.4rem;
}

#communityUploadZone:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

.community-post-upload-files {
    padding: calc(20px / 2) 0;
}

.community-post-upload-files ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.community-post-upload-files ul li {
    display: inline-block;
    padding-bottom: 5px;
}

.community-post-upload-file-wrapper {
    margin-right: 5px;
    text-align: center;
}

.community-post-upload-file {
    width: 130px;
    height: 85px;
    border: 1px dashed rgb(230, 230, 230);
    text-align: center;
    background-size: cover;
    background-position: center;
}

.community-post-upload-dimensions-v {
    height: 85px;
    width: 70px;
}

.community-post-upload-dimensions-q {
    height: 85px;
    width: 85px;
}

@media screen and (max-width: 640px) {
    .community-post-upload-file {
        width: 100px;
        height: 65px;
    }

    .community-post-upload-dimensions-v {
        height: 65px;
        width: 50px;
    }

    .community-post-upload-dimensions-q {
        height: 65px;
        width: 65px;
    }
}

.community-post-upload-file-uploading .fa,
.community-post-upload-file-error .fa,
.community-post-upload-file-success .fa {
    font-size: 1.2rem;
}

.community-post-upload-file-success,
.community-post-upload-file-success * {
    color: white;
    text-shadow: 3px 3px 4px #777;
}

.community-post-upload-file-name {
    font-size: .7rem;
}

.community-post-upload-file-delete-button {
    font-size: .7rem;
    cursor: pointer;
    color: rgb(51, 51, 51);
}

.post-files {
    margin-bottom: 40px;
}

@media screen and (max-width: 640px) {
    .post-files {
        padding: 0 calc(20px / 2);
    }
}

.post-files ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-files ul li {
    display: inline-block;
    margin-right: 5px;
}

.post-files .community-post-upload-file {
    cursor: pointer;
}

.post-files .community-post-upload-file:hover {
    border-color: rgba(51, 51, 51, 0.14);
}

    /*
     * ########## 2500. LIVE ##########
     */

.page-live header {
    padding: 20px 0;
}

.page-live .live-countdown {
    text-align: center;
}

.page-live  .countdown-image {
    margin-bottom: 20px;
}

.page-live h3 {
    font-size: 1.8rem;
}

.page-live  .countdown-number {
    font-size: 3rem;
    margin: 0 5px;
}

.page-live .countdown-number .time-label {
    font-size: 1.2rem;
    font-weight: 600;
}

.page-live .live-stream .live-stream-vimeo iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.page-live .live-zoom-iframe {
    width: 100%;
    min-height: 500px;
}

.admin-live-onair {
    font-weight: 800;
    background-color: red;
    color: white;
    font-size: 1.0rem /* vorher: 0.8rem */;
    border-radius: 6px;
    padding: 0px 4px;
}

.page-live .mm-countdown-time,
.page-live .mm-countdown-caption {
    color: #333;
}

.page-live .live-zoomlink-text {
    width: 50%;
    margin: 20px auto;
}

.admin-questions .admin-list .padding {
    padding: calc(20px / 4);
}

/*
 * ########### 2600. COUNTDOWN ##########
 */

.mm-countdown {
    color: #333;
}

.mm-countdown * {
    color: #333;
}

.mm-countdown-time {
    font-size: 2.6em;
    font-weight: 800;
}

.mm-countdown-caption {
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
}

.mm-countdown-alert {
    color: #333;
}

.mm-countdown-alert * {
    color: #333;
}



/*
 * ########### 2700. VISIONBOARD ##########
 */

.visionboard .visionboard-images {
    text-align: center;
}

.visionboard  .visionboard-image {
    width: 100%;
    background-size: cover;
    background-position: center;
    cursor: zoom-in;
}

 .visionboard-image-buttons {
    cursor: default;
    display: none;
    background: rgba(0, 0, 0, 0.2);
    padding-top: calc(20px / 2 - 5px);
    padding-right: calc(20px / 2);
    padding-bottom: calc(20px / 2 - 5px);

    text-align: right;
    color: white;
    font-size: 1.1rem;
}

 .visionboard-image-buttons button,
 .visionboard-image-buttons a {
    margin-left: calc(20px / 2);
    color: white;
     cursor: pointer;
}

 .visionboard-image-buttonsbutton:hover,
 .visionboard-image-buttonsa:hover {
    cursor: pointer;
    color: rgb(51, 51, 51);
}

.visionboard-image:hover .visionboard-image-buttons {
    display: block;
}


.big.visionboard-image {
    height: 340px;
}

.small.visionboard-image {
    height: 240px;
}

.visionboard-image-add {
    display: block;
    width: 100%;
    background: rgb(253, 253, 253);
    border: 1px dashed #999 !important;
    color: #999;
    cursor: pointer !important;
}

.visionboard-image-add  .fa {
    font-size: 1.6rem;
}


.visionboard-image-add:hover {
    background: rgba(51, 51, 51, 0.14);
    border-color: rgb(51, 51, 51);
}

.visionboard-select-layout {
    padding: 20px 0;
}

.visionboard-select-layout-select button.visionboard-select-layout-select-layout {
    display: block;
    width: 100%;
    cursor: pointer;
    padding: 5px 15px;
}

.visionboard-select-layout-select .visionboard-select-layout-select-layout-icon {
    text-align: center;
    padding: 3px 0 5px 0;
    color: green;
    visibility: hidden;
}


button.visionboard-select-layout-select-layout:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

button.visionboard-select-layout-select-layout.selected {
    background-color: rgba(51, 51, 51, 0.14);
}

button.visionboard-select-layout-select-layout.selected .visionboard-select-layout-select-layout-icon {
    visibility: visible;
}

.visionboard-select-layout-loading {
    text-align: center;
    font-size: 2rem;
    padding: 6rem;
}



/*
 * ########### 2800. ROUTINES ##########
 */


.routines-month-title {
    text-align: center;
}

.routines-month-title h2 {
    color: rgb(51, 51, 51);
}

.routines-weekdays {
    text-align: center;
    padding: calc(0.5 * 20px) 0;
}

@media screen and (max-width: 640px) {
    .routines-weekdays {
        visibility: hidden;
    }
}

.routines-week-weeknr {
    position: absolute;
    bottom: 5px;
    right: 10px;

    color: rgb(150, 150, 150);
    font-size: 1.0rem /* vorher: 0.8rem */;
    font-weight: 600;
}

.routines-day {
    border: 1px solid rgb(230, 230, 230);

    min-height: 120px;
    position: relative;
}

.routines-day .routines-day-shortname {
    text-align: left;
    color: #999;
    padding: 3px;
}

.routines-day .routines-day-day {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: right;
    font-weight: 800;
    font-size: 1.3rem;
    color: #333;
    padding: calc(20px / 3) calc(20px / 2);
}

.routines-day .routines-day-day * {
    color: #333;
}

.routines-day-check {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: rgba(17, 119, 22, 0.13);
}

.routines-day-check .fa {
    font-size: 2rem;
}

.routines-day-notes {
    position: absolute;
    right: 5px;
    bottom: 0;
}

.routines-day-notes .fa {
    font-size: 1rem;
}

.routines-day-check-list {
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
}

.routines-day-check-list-entry {
    font-size: 0.7rem;
    line-height: 110%;
    padding-top: 3px;
}

.routines-day-check-list-entry.not-finished {
    opacity: 0.5;
}

.weekend.routines-day {
    // background-color: rgb(250, 250, 250);
    // color: #333;


}

.today.routines-day {
    border-color: #b93016;
    background: rgba(51, 51, 51, 0.14);
}

.finished.routines-day {
    background-color: rgba(50, 125, 11, 0.2);
    border-color: rgba(50, 125, 11, 0.3);
}

.routines-day:hover {
    cursor: pointer;
    background-color: rgba(51, 51, 51, 0.14);
}

.past.routines-day,
.future.routines-day {
    background-color: rgb(253, 253, 253);
    border-color: rgb(250, 250, 250);
    color: rgb(250, 250, 250);
}

.past.routines-day .routines-day-day,
.future.routines-day .routines-day-day {
    color: rgb(250, 250, 250);
}

.past.routines-day .routines-day-shortname,
.future.routines-day .routines-day-shortname {
    color: inherit;
}

.past.routines-day:hover,
.future.routines-day:hover {
    cursor: default;
    background-color: inherit;
}

.weekend.past.routines-day:hover,
.weekend.future.routines-day:hover {
    cursor: default;
    background-color: rgb(250, 250, 250);
}

.routines-popup-routines h3 {
    padding-top: 0;
    margin-top: -15px;
}

.routines-popup-routine-switch {
    text-align: center;
}

.routines-popup-routine-notes {
    margin-top: 20px;
    font-size: 0.9rem;
}

.routines-popup-routine-notes-label {
    font-size: 1.0rem /* vorher: 0.8rem */;
    font-weight: 600;
}

.routines-popup-routine-notes-text,
.routines-popup-routine-notes-edit {
    border: 1px solid rgb(230, 230, 230);
    padding: calc(20px / 10);
}

.routines-popup-routine-notes-edit textarea {
    margin-bottom: 0;
}

.routines-popup-routine-notes-edit-buttons {
    text-align: right;
    padding: calc(20px / 2) 0;
}

.routines-popup-routine-notes-edit-buttons .button {
    margin-bottom: 0;
}

.routines-streak {
    background: rgb(253, 253, 253);
    padding: calc(20px / 2);
    font-size: 0.9rem;
    text-align: center;
}

.routines-streak h4 {
    margin-bottom: 0;
}

.routines-streak .routines-streak-length {
    font-weight: 600;
    color: #333;
}

.routines-streak:nth-child(odd) {
    background: rgb(245, 245, 245);
}

.routines-month-select {
    margin: calc(20px * 2) 0;
}

.routines-month-select .routines-month-select-arrow {
    line-height: 38px;
    font-size: 1.3rem;
}

.routines-month-select .routines-month-select-arrow button {
    cursor: pointer;
    color: #333;
}

.routines-month-select .routines-month-select-arrow button:hover {
    color: rgb(51, 51, 51);
}

button.routines-popup-suggestion {
    width: 100%;
    text-align: center;

    margin: 10px 0;

    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid transparent;

    color: #555;
    font-weight: 600;
}

button.routines-popup-suggestion:hover {
    border-color: rgb(51, 51, 51);
}

.routines-routine-header h2 {
    text-align: center;
}

.routines-routine-header-icons button {
    cursor: pointer;
    color: rgb(51, 51, 51);
    margin-left: 10px;
}

.routines-routine-header-icons button:hover {
    color: inherit;
}



/*
 * ########### 2900. CHAT ##########
 */

#membermateChatLoading {
    padding: 100px 0;
}

#membermateChat {
    display: none;
}

.chat-messages {
    overflow: auto;
    border: 1px solid rgb(230, 230, 230);
    padding: 20px;
}

.chat-reply-button {
    width: 100%;
    height: 2.4375rem;
}

.chat-no-messages {
    text-align: center;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 600;
    color: #999;
}

.chat-messages {
    font-size: .9rem;
}

.chat-message {
    clear: both;
}




.chat-message-content {
    margin-top: calc(20px / 1.5);
    display: inline-block;
}

.chat-message-avatar {
    width: 40px;
    float: left;
}

.chat-message-main {
    padding-left: calc(40px + 10px);
}

.chat-message-bubble {
    border: 1px solid rgb(230, 230, 230);
    border-radius: 10px;
    padding: calc(20px / 3) calc(20px / 2) calc(20px / 5) calc(20px / 2);
    background: rgba(255,255,255,0.9);
}

.chat-message-bubble p:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

.chat-message-moderator-links {
    display: none;
    font-size: .7rem;
}

.chat-message-moderator-links a,
.chat-message-moderator-links button {
    font-size: .7rem;
    cursor: pointer;
    color: rgb(51, 51, 51);
    font-weight: 600;
    text-decoration: none;
}

.chat-message-moderator-links a:hover,
.chat-message-moderator-links button:hover {
    text-decoration: underline;
}

.chat-message-bubble:hover .chat-message-moderator-links {
    display: block;
}

.chat-message-date {
    display: none;
    font-size: .7rem;
    color: #555;
}

.chat-message-name {
    font-size: .7rem;
    font-weight: 800;
    color: #555;
    text-transform: uppercase;
    text-align: left;
    padding: 0 7px;
}

.my.chat-message .chat-message-content {
    float: right;
}

.my.chat-message .chat-message-avatar {
    float: right;
}

.my.chat-message .chat-message-main {
    padding-left: inherit;
    padding-right: calc(40px + 10px);
}

.my.chat-message .chat-message-name {
    text-align: right;
}

#membermateChatUserList {
    border-top: 1px solid rgb(230, 230, 230);
    border-right: 1px solid rgb(230, 230, 230);
    border-bottom: 1px solid rgb(230, 230, 230);
    overflow: auto;
}

.chat-usercount {
    text-align: center;
    font-weight: 600;
    padding: calc(20px / 2);
    border-bottom: 1px solid rgb(230, 230, 230);
    background: rgb(51, 51, 51);
    color: white;
}

.chat-userlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat-userlist li {
    border-bottom: 1px dashed rgb(230, 230, 230);
    color: #333;
    line-height: 24px;
}

.chat-userlist li a:hover {
    background-color: rgba(51, 51, 51, 0.14);
}

.chat-userlist-avatar {
    float: left;
}

.chat-userlist-avatar a {
    display: block;
    padding: calc(20px / 2) calc(20px / 2) calc(20px / 2) calc(20px / 2);
}

.chat-userlist-name {
    padding: calc(20px / 2) calc(20px / 2) calc(20px / 2) calc(20px / 2 + 10px)
}

.chat-userlist-mute {
    display: block;
    float: right;
    color: #999;
    padding: calc(20px / 2) calc(20px / 2) calc(20px / 2) calc(20px / 2);
    line-height: inherit;
    border: none;
}

.chat-userlist-mute:hover {
    cursor: pointer;
    color: rgb(51, 51, 51);
}

.muted.chat-userlist-mute {
    font-weight: 600;
    color: rgb(51, 51, 51);
}


.chat-userlist-moderator-hint {
    border-bottom: 1px solid rgb(230, 230, 230);
    background: rgba(51, 51, 51, 0.14);
    font-size: .7rem;
    padding: 5px;
}

.chat-reply-muted {
    text-align: center;
    padding: calc(20px / 2);
}


/*.admin-dashboard-newestmembers,
.admin-dashboard-communityposters {
    display: none;
}*/


a.lessongrid-item:hover {
    background-color: rgba(51, 51, 51, 0.14);
}