/*Update Isabella, 06.03.19 */

/* Fonts import */
@font-face {
    font-family: 'Hermes';
    /*First url is for IE, it can't read other fonts, it also has to have a maching name to the font-family (metadata of the font), otherwise it will not work */
    src: url('./hermes-regular.eot?#iefix') format('embedded-opentype'),
         url('./hermes-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Avenir';
    src: url('./avenir.eot?#iefix') format('embedded-opentype'),
         url('./avenir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* GENERAL CHANGES */
    body {
        background-color: #ffffff;
        font-family: 'Avenir';
        font-size: 1em;
        color: #00375a;
    }
    button {
        font-family: 'Hermes';
        font-size: 0.75em !important;
    }
    a {
        color: #0096cd; 
    }
    h1, h2, h3, h4, h5, h6, h7, h8 {
        color: #00375a;
        font-family: 'Hermes';
    }
    .gamification-element .gamification-tag.positive.active {
        background: #00375a !important;
    }
    .gamification-element .gamification-tag.positive.active span {
        background-color: #00375a;
    }
/* Buttons */
    .el-button.el-button--primary {
        background: #0096cd !important;
        border: 1px solid #0096cd;
    }
    .el-button.el-button--primary:hover, .el-button.el-button--primary:focus {
        background: #ffffff !important;
        color: #0096cd !important;
        border: 1px solid #0096cd;
    }
    .el-button.el-button--default {
        background-color: #ffffff !important;
        border: 1px solid #0096cd;
        color: #0096cd !important;
    }
    .el-button.el-button--default:hover, .el-button.el-button--default:focus {
        background-color: #0096cd !important;
        color: #ffffff !important;
        border: 1px solid #0096cd;
    }
    .el-button.el-button--warning {
        background: #ff46aa !important;
    }
/* Inputs */
    .el-input__inner {
        background: #ffffff;
        border: 1px solid #919faa;
    }
/*side menu submenu item */
    .el-menu .el-submenu .el-menu-item {
        background-color: #0096cd !important;
    }
    .el-menu .el-submenu .el-menu-item a {
        color: #ffffff;
    }
/* Tooltip popover */
    .el-tooltip__popper.is-dark {
        background: #0096cd;
    }
/* Tooltip popover arrow */
    .el-tooltip__popper.is-dark[x-placement^=top] .popper__arrow {
        border-top-color: #0096cd;
    }
    .el-tooltip__popper.is-dark[x-placement^=top] .popper__arrow:after {
        border-top-color: #0096cd;
    }
/*** END GENERAL CHANGES ***/

/*** HEADER ***/
    /* The two colors on the top */
        header {
            border-top: 10px solid #00375a;
            background: #ffffff;
            box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
            -webkit-box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
            -moz-box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
            -o-box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
        }
    /* Icon before user name */
        header .navbar-right li a i:before {
            display: none;
        }
    /* User name */
        header .navbar-right ul li {
            font-size: 0.9em;
            font-weight: bold;
        }
    /* User avatar image */
        header .navbar-right ul li .avatar {
            margin: 0 5px -35px 0;
            border: none;
            width: 65px;
        }
/*** END HEADER ***/

/*** APPLY FOR FOR APPLICANTS ***/
    .register-form__topbar {
        background: #919faa;
    }
    /* background color and font */
    .register-form {
        background: #919faa;
        font-family: 'PT Sans', Helvetica, sans-serif;
    }
    /* Unselected tab */
    .register-form .el-tabs__nav .el-tabs__item {
        background-color: #aaaaaa;
    }
    /* Buttons */
    .register-form .el-button.el-button--primary {
        color: #ffffff;
        background: #b4c05b;
    }
    /* Image header */
    .register-form .register-form__header {
        background-image: url('/images/recruiting/application_bg.jpg');
        /* background-image: url(/storage/custom/apply_bg.png); */
    }
    /* Image header thanks page */
    .register-form .register-form__header--applied {
        background-image: url('/images/recruiting/thanks.jpg');
        /* background-image: url(/storage/custom/apply_thanks.png); */
    }
/*** END APPLY FORM ***/

/*** HUB/KNOWLEDGE LIBRARY ***/
    /* Header points */
        header .navbar-right ul li #gamification-points-display span.points {
            color: #FF46AA;
            font-size: 1.8em;
            font-weight: normal;
        }
    /* Header points image */
        header .navbar-right ul li #gamification-points-display img {
            height: 38px;
        }
    /* Gamification inactive element */
        .gamification-element .gamification-tag.positive.inactive {
            background-color: #00375a !important;
        }
        .gamification-element .gamification-tag span {
            background-color: #00375a;
        }
        .gamification-element .gamification-tag span.points {
            background: #0096cd !important;
        } 
        .gamification-element .gamification-tag span.points span {
            background: #0096cd !important;
        }
    /*User Board and Challenges */
        .kl-dashboard__left-wrapper {
            background: url('/storage/custom/custom_bg.jpg');
        }
        /** delete the background from the original component **/
        .user-board .user-avatar-upload, .user-board-mobile__popover .user-avatar-upload {
            background: none !important;
        }
        /*User board wrapper */
        .kl-dashboard__left-wrapper .user-board__profile {
            background: none;
        }
        /* title text before user name */
        .kl-dashboard__left-wrapper .user-board__profile h3 {
            color: #0096cd;
            font-size: 1.4em;
        }
        /* User name */
        .kl-dashboard__left-wrapper .user-board__profile h3 span {
            color: #ff46aa;
        }
        /* Text */
        .kl-dashboard__left-wrapper .user-board__profile p {
            color: #ffffff;
        }
        /* User badge icon */
        .user-board__profile .user-board-upload__icon {
            background-color: #0096cd;
        }
        /* User image delete icon */
        .user-board__profile .user-avatar-upload__image i.fa-trash {
            color: #ff46aa;
        }
        /* User progress circle */
        .user-board__profile .el-progress-circle__track {
            stroke: #0096cd !important;
            opacity: 0.4;
        }
        .user-board__profile .el-progress-circle__path {
            stroke: #0096cd !important;
            opacity: 0.9;
        }
        /*background for Userboard and mobile version */
        .user-board, .user-board-mobile__popover .user-board__profile {
            background: transparent;
        }
        .user-board-mobile__popover {
            background: url('/storage/custom/custom_bg.jpg');
        }
        /* X button on mobile popover */
        .user-board-mobile__close, .challenge-box__close {
            color: #ff46aa !important;
        }
        /* User assets */
        .user-board-assets {
            background-color: transparent !important;
        }
        /* Badges icon */
        .user-board-assets .fancy-icon img.badges-icon {
            content: url('/storage/custom/badges_icon.png');
        }
        /* Stati icon */
        .user-board-assets .fancy-icon img.status-icon {
            content: url('/storage/custom/status_icon.png');
        } 
        /* Name of the asset */
        .user-board-assets div {
            color: #ffffff;
        }
        /* Status of the asset */
        .user-board-assets div p {
            color: #0096cd;
            font-size: 1.1em;
        }
    /* Challenges (also changes mobile popover) */
        /* Ribbon image */
        .challenge-box .challenge-box__header--date {
            background: url('/storage/custom/banderole.png');
            background-repeat: no-repeat;
            background-position: 50%;
        }
        /* Date countdown text color */
        .challenge-box .challenge-box__header--date h4 {
            color: #ffffff !important;
        }
        /* Challenge name */
        .challenge-box .challenge-box__header h3 {
            color: #ff46aa;
        }
        /* Text under name */
        .challenge-box .challenge-box__header p {
            color: #919faa;
            font-size: 0.9em;
        }
        /* No prize challenge content */
        .challenge-box .challenge-box__content .challenge-content {
            color: #919faa;
        }
        /* single prize inner wrapper */
        .challenge-box .challenge-box__prizes .single-prize .el-row {
            background-color: #ffffff;
            border: 1px solid #ffffff;
        }
        /* Prize image wrapper*/
        .challenge-box .challenge-box__prizes .single-prize .single-prize__banner {
            padding: 0 !important;
        }
        /* Prize name/title */
        .challenge-box .challenge-box__prizes .single-prize .prize-text h4 {
            color: #FF46AA;
            font-size: 1em;
        }
        /* Prize desc */
        .challenge-box .challenge-box__prizes .single-prize .prize-text small {
            color: #919faa;
        }
        /* Special prize text */
        .challenge-box .challenge-box__prizes .prizes .single-prize--special .prize-text {
            background: #ffffff;
        }
        .challenge-box .challenge-box__terms .terms-dialog a.link {
            color: #919faa;
            text-transform: uppercase;
            font-size: 0.7em; 
        }
        /* mobile popover */
        .challenge-mobile__popover {
            background: #00375a;
        }
        /* Prizes popover button mobile */
        .challenge-mobile button.el-button.el-button--default span {
            font-size: 1em;
        }
        /* Buttons for challenges and mein status mobile */
        .challenge-mobile .challenge-button, .user-board-mobile .user-button {
            border-top: 1px solid #0096cd;
            border-bottom: none;
            border-left: none;
            border-right: none;
        }
        /* Image in front of "Mein Status" btn -> mobile */
        .user-board-mobile .user-button img.status-icon {
            content: url('/storage/custom/badges_icon.png');
            height: 12px !important;
        }
        /* Challenges button for popover */
        .challenge-mobile .challenge-button {
            box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.3) !important;
            -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.3) !important;
            -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.3) !important;
            -o-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.3) !important;
        }
        /*Icon in front of "Challenges" -> mobile */
        .challenge-mobile .challenge-button i.fa {
            color: #FF46AA;
        }
    /* Module slider */
        .big-slider {
            overflow: hidden;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
        }
        /* Slide */ 
            .big-slider .el-carousel .el-carousel__container .el-carousel__item {
                background-color: #ffffff !important;
            }
        /* Corner ribbon */ 
            .big-slider__slide-image .corner-ribbon {
                background-color: #0096cd !important;
                text-transform: uppercase;
                line-height: 35px;
                top: 35px;
                left: -45px;
                font-size: 0.8em;
            }
        /* Module name */ 
            .big-slider__slide-content__text-title {
                font-family: 'Hermes';
                font-size: 1.4em !important;
            }
        /* Slide indicators*/
            .big-slider .el-carousel .el-carousel__indicators .el-carousel__indicator button {
                width: 50px;
                height: 3px;
                margin-top: 10px;
            }
            .big-slider .el-carousel .el-carousel__indicators--outside button {
                background-color: #919faa;
            }
            .big-slider .el-carousel .el-carousel__indicators .el-carousel__indicator.is-active button {
                background-color: #0096cd !important;
            }
    /* Category/Module Tabs */
        .category-module-tabs {
            margin-top: 50px;
        }
        /* Header text for every tab */
        .tab-font {
            text-align: center;
            width: 70% !important;
            margin: 10px auto 25px;
            color: #919faa !important;
            font-size: 0.9em !important;
        }
        /* Navigation tabs */
            .category-module-tabs .el-tabs .el-tabs__item {
                font-size: 1em;
                color: #919faa;
                font-family: 'Hermes';
            }
            .category-module-tabs .el-tabs .el-tabs__item:hover {
                color: #0096cd;
            }
            /* Active tab */
            .category-module-tabs .el-tabs .el-tabs__item.is-active {
                color:  #00375a;
            }
        /* "Inspire me" categories */
            .random-categories__header {
                text-align: center;
            }
            /* Inspire me icon before button */
            .random-categories__header--button i.fa {
                background-color: #0096cd !important;
                width: 34px;
                height: 34px;
                line-height: 34px;
            }
            /* Inspire me button */
            .random-categories__header--button {
                text-align: left;
            }
            .random-categories__header--button .el-button, .random-categories__header--button .el-button:focus {
                background-color: transparent !important;
                position: relative;
                height: 34px !important;
                margin-left: -7px !important;
                border: 1px solid #0096cd;
            }
            .random-categories__header--button .el-button:hover {
                background-color: #0096cd !important;
            }
            .random-categories__header--button .el-button span, .random-categories__header--button .el-button:focus span {
                color: #0096cd;
            }
            .random-categories__header--button .el-button:hover span {
                color: #ffffff !important;
            }

            /* Button content change
            .random-categories__header--button .el-button span{
                visibility: hidden;
            }
            /* Button new content */
            /* .random-categories__header--button .el-button span::after{
                visibility: visible;
                color: #0096cd;
                content: "Inspiriere mich neu";
                text-transform: none;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            } */

            /* Single category - if category has no color */
            .random-categories__categories--single {
                border-width: 1px !important;
                border-color: #d0d0d0 !important;
                padding: 25px 0 0;
                background-color: #ffffff;
                color: #0096cd;
            }
            .random-categories__categories--single:hover {
                transform: scale(1.05);
                z-index: 20;
            }
                /*Single category top fake border */
                    .random-categories__categories--single--border {
                        display: none;
                    }
                /* Single category corner ribbon */
                    .random-categories__categories--single .corner-ribbon {
                        text-transform: uppercase;
                        background-color: #0096cd !important;
                        line-height: 35px;
                        top: 30px;
                        left: -55px;
                        font-size: 0.8em;
                    }
                /*Single category icon */
                    /* .random-categories__categories--single--icon i.fa:before {
                        display: none;
                    }
                    .random-categories__categories--single--icon i.fa {
                        color: #0096cd;
                    }
                    .random-categories__categories--single--icon i.fa::after {
                        content: "\f20e";
                        width: 20px;
                        height: 20px;
                        font-size: 80px;
                    } */
                /* Single category name */
                    .random-categories__categories--single--name {
                        font-family: 'Hermes';
                    }
                /* Single category module */
                    .category-module-tabs .random-categories__categories--single__modules-wrapper--module a:hover {
                        color: #00375a !important;
                    }
                /* Single category btn */
                    .random-categories__categories--single--button {
                        padding: 0 0 15px;
                        bottom: 0 !important;
                    }
                    .random-categories__categories--single--button .el-button {
                        height: 50px;
                        font-size: 0.6em !important;
                        width: 95% !important;
                        padding: 0;
                    }
                    .random-categories__categories--single:hover  .random-categories__categories--single--button .el-button {
                        background-color: #0096cd !important;
                        color: #ffffff !important;
                    }
        /* Meine Module */
            /* New/All modules button */
            .user-modules__header-button .el-button {
                text-transform: none !important;
                margin-left: -5px !important;
            }
            /* icon before button */
            .user-modules__header-button__icon {
                background-color: #0096cd !important;
            }
            .user-modules__header-button button.el-button span {
                text-transform: uppercase;
            }
            /* Single module */
            .el-tab-pane .simple-module {
                background-color: #ffffff !important;
                border: 1px solid #d0d0d0;
                border-left: 12px solid;
                border-left-color: #0096cd !important;
            }
                /* Gamification element / points */
                .simple-module--points .gamification-element .gamification-tag {
                    transform: none;
                }
                /* Module name */
                .simple-module--name {
                    font-size: 1em !important;
                }
                /* Module category */
                .simple-module--category {
                    color: #919faa;
                }
                /* Module progress circle default state */
                .module-progress__icon i.fa {
                    color: #0096cd;
                }
                .module-progress__icon .el-progress-circle__path {
                    stroke: #0096cd !important;
                }
                /* Module progress circle icon if progress is 0% */
                .module-progress__icon i.fa.red-font {
                    color: #0096cd !important;
                }
                /* Module progress circle icon if progress is 100% */
                .module-progress__icon i.fa.blue-font {
                    color: #0096cd !important;
                }
        /* Categories */
            /* Single Category */
            .el-tab-pane .all-categories__list-single {
                border-top: 1px solid #d0d0d0;
                border: 1px solid #d0d0d0;
                background-color: #ffffff !important;
            }
            .all-categories__list-single:hover {
                transform: scale(1.02);
            }
            /* Icon before button */
            .all-categories__search--button--icon {
                background-color: #0096cd !important;
            }
            /* Sort buttons */
            .all-categories__search--button .el-button {
                margin-left: -5px !important;
                color: #0096cd !important;
            }
            /* Category name */
            .all-categories__list-single__title h4 {
                font-size: 1.3em;
                font-weight: normal;
                font-family: 'Hermes';
            }
    /* Module overview */
        /* Top Banner */
            .banner .box {
                background: #ffffff !important;
            }
            /*Module subname */
            .banner .box h4 {
                color: #e1e1e1;
            }
            /*Stars default state */
            .banner .box .el-rate .el-rate__item .el-rate__icon {
                color: #e1e1e1 !important;
                margin-left: -5px;
            }
            /*Module name */
            .banner .box h1 {
                color: #00375a;
                font-size: 1.4em;
            }
            /*Start & Answers button */
            .banner .box button.el-button--default {
                color: #ffffff !important;
                background-color: #0096cd !important;
                border: 1px solid #0096cd;
                font-size: 0.6em !important;
            }
            .banner .box  button.el-button.el-button--default:hover, .banner .box button.el-button.el-button--default:focus {
                color: #0096cd !important;
                background-color: #ffffff !important;
                border: 1px solid #0096cd;
            }
            /*Progress circle */
                /* Default circle stroke */
                .banner .box .module-progress svg .el-progress-circle__track {
                    stroke: #ccd5dd !important;
                }
                /* Active circle stoke */
                .banner .box .module-progress svg .el-progress-circle__path {
                    stroke: #0096cd !important;
                }
                /* Text in the circle */
                .banner .box .module-progress .el-progress--circle .el-progress__text {
                    color: #0096cd !important;
                }
        /*Subnavigation bar */
            .subnav {
                background: #ffffff !important;
                z-index: 1;
                -webkit-box-shadow: 0px 11px 61px -10px rgba(0,0,0,0.1);
                -moz-box-shadow: 0px 11px 61px -10px rgba(0,0,0,0.1);
                box-shadow: 0px 11px 61px -10px rgba(0,0,0,0.1);
            }
            /* Image icon in front of first link */
            .subnav img {
                display: none !important;
            }
            /* Links */
            .subnav a {
                color: #00375a !important;
                margin-right: 30px;
                text-transform: uppercase;
                font-size: 0.7em;
            }
            /* New icon in front of first link */
            .subnav div div:first-child::before {
                content: "\f0e4";
                font-family: "FontAwesome";
                font-size: 1.3em;
                margin-right: 5px;
                vertical-align: sub;
            }
            /* Parent of subnav links */
            .subnav div div {
                color: #00375a !important;
            }
            /* Line between links */
            .subnav div div span.fs20 {
                display: none !important;
            }
            /*Link icon */
            .subnav div div i {
                font-size: 1.4em !important;
                margin-right: 5px;
                vertical-align: sub;
            }
            /* Names on the right: sector-name, module-name... */
            .subnav div:nth-child(2n).text-right {
                margin-top: 5px;
            }
        /*Content of module/chapters*/
            /*Chapter box */
            .chapters .box {
                background-color: #ffffff !important;
                border: 1px solid #d0d0d0;
            }
            /*Chapter number */
            .chapters .box .order {
                color: #0096cd;
                font-size: 3.5em !important;
            }
            /*chapter name */
            .chapters .box .name {
                color: #00375a;
            }
            /*Chapter desc */
            .chapters .box .description {
                color: #919faa;
                margin-top: 35px;
            }
            /* Gamification tag -> Done with the chapter */ 
            .chapters .gamification-element .gamification-tag.positive.active {
                background: #ff46aa;
            }
            /* Gamification tag icon wrapper -> Done with the chapter */
            .chapters .gamification-element .gamification-tag.positive.active span {
                background: #00375a;
            }
        /*One chapter -> lesson */
            /*Heading wrapper */
            .content-type-text-image .accordion-title {
                background-color: #ffffff !important;
                border: 1px solid #d0d0d0;
                min-height: 42px !important;
            }
            .content-type-text-image .accordion-title:hover {
                color: #0096cd !important;
            }
            /*Active heading */
            .content-type-text-image .accordion-title.active {
                background-color: #0096cd !important;
                color: #ffffff !important;
            }
            /*Number*/
            .content-type-text-image .accordion-title .order {
                background-color: #ffffff !important;
                color: #0096cd !important;
                height: 40px !important; 
                width: 40px !important;
                line-height: 40px !important;
                font-size: 1.6em !important;
            }
            .content-type-text-image .accordion-title.active .order {
                background-color: #0096cd !important;
                color: #ffffff !important;
                height: 40px !important; 
                width: 40px !important;
                line-height: 40px !important;
                font-size: 1.6em !important;
            }
            /*Title*/
            .content-type-text-image .accordion-title .name {
                text-transform: none !important;
                font-size: 1.2em !important;
                margin-left: 10px;
                font-family: 'Hermes';
            }
            /*Chapter title content */
            .content-type-text-image .accordion-content {
                padding: 0 30px !important;
            }
            /*chapter content normal text heading */
            .content-type-text-image .accordion-content h4 {
                font-size: 0.9em;
            }
            /*chapter content normal text */
            .content-type-text-image .accordion-content p {
                color: #00375a !important;
                font-size: 1em;
                line-height: 1.4em;
            }
            /*chapter content citation */
            .content-type-text-image .accordion-content cite {
                background-color: #0096cd !important;
                color: #ffffff;
            }
            /* chapter unordered list */
            .content-type-text-image .accordion-content ul {
                color: #00375a !important;
            }
            /* BeaMensch wheel */
            .content-type-text-image .accordion-content #bea-mensch svg .field.active {
                fill: #0096cd !important;
            }
            /* Chapter content buttons/"links" */
            .content-type-text-image .transition-wrapper .accordion-content .btn-shortcode-popup span {
                background: #0096cd;
            }
            /* Chapter buttons ("Weiter, popup buttons...") */ 
            #content-type .content-type-text-image .el-button--primary {
                background: #ffffff !important;
                color: #0096cd !important;
                border: 1px solid #0096cd !important;
            }
            #content-type .content-type-text-image .el-button--primary:hover, #content-type .content-type-text-image .el-button--primary:focus {
                background: #0096cd !important;
                color: #ffffff !important;
            }
            /* Learncontrol start button */ 
            #content-type .content-type-learn-control .learn-control-intro .el-button.el-button--primary {
                background: #ffffff !important;
                color: #0096cd !important;
                border: 1px solid #0096cd !important;
            }
            #content-type .content-type-learn-control .learn-control-intro .el-button.el-button--primary:hover {
                background: #0096cd !important;
                color: #ffffff !important;
                border: 1px solid #0096cd !important;
            }
            /* Chapter side navigation */
            nav.sidenav .kapitel, nav.sidenav a {
                background-color: #00375a !important;
                font-size: 1em !important;
            }
            nav.sidenav a.current {
                background-color: #0096cd !important;
            }
        /*LEARN CONTROL */
            /* Question wrapper */
            #content-type .content-type-learn-control .question-wrapper {
                background: #ffffff;
                padding: 0;
            }
            /*Question progress timer */
            #content-type .content-type-learn-control .question-wrapper .question-progress {
                float: right;
                margin: 75px 200px 0 0 !important;
                z-index: 1;
            }
            /*Question progress timer circle paths */
            #content-type .content-type-learn-control .question-wrapper .question-progress .el-progress .el-progress-circle .el-progress-circle__track {
                stroke: #ffffff;
            }
            #content-type .content-type-learn-control .question-wrapper .question-progress .el-progress .el-progress-circle .el-progress-circle__path {
                stroke: #919faa;
            }
            #content-type .content-type-learn-control .question-wrapper .question-progress .progress-time{
                color: #919faa;
            }
            /* Question text */
            .content-type-learn-control .question-wrapper h2 {
                margin: 0;
                text-align: left;
            }
            /* Question info */
            .content-type-learn-control .question-wrapper .info {
                float: none;
               text-align: left;
            }
            /* Answers */ 
            .content-type-learn-control .question-wrapper div.answers {
                text-align: left;
                margin: 0 0 30px !important;
            }
            /* One answer */
            .content-type-learn-control .question-wrapper div.answers label {
                display: block !important;
                max-width: 40%;
            }
            .content-type-learn-control .question-wrapper div.answers label .span-wrapper {
                max-height: 100000000px;
                min-height: 0px !important;
                border: 1px solid #d0d0d0 !important;
            }
            /* On click answer style */
            .content-type-learn-control .question-wrapper div.answers label input[type="checkbox"]:checked + .span-wrapper, .content-type-learn-control .question-wrapper div.answers label input[type="checkbox"]:checked + .span-wrapper span {
                background: #0096cd !important;
                color: #ffffff !important; 
            }
            .content-type-learn-control .question-wrapper div.answers label .span-wrapper span {
                width: 100% !important;
                justify-content: left !important;
                background: #ffffff;
            }
            /* Learncontrol weiter button */ 
            #content-type .content-type-learn-control .question-wrapper .el-button.el-button--primary {
                background: #ffffff !important;
                color: #0096cd !important;
                border: 1px solid #0096cd !important;
            }
            #content-type .content-type-learn-control .question-wrapper .el-button.el-button--primary:hover,
            #content-type .content-type-learn-control .question-wrapper .el-button.el-button--primary:focus {
                background: #0096cd !important;
                color: #ffffff !important;
                border: 1px solid #0096cd !important;
            }
            /* Answer control icons */
            .content-type-learn-control .question-wrapper .control i.fa-times {
                color: #ff46aa !important;
            }
            .content-type-learn-control .question-wrapper .control i.fa-check {
                color: #0096cd !important;
            }
            /* Dialog after Learncontrol process */
                /*dialog button */
                #content-type .content-type-learn-control .el-dialog__wrapper .el-dialog button.el-button.el-button--primary {
                    background: #ffffff !important;
                    color: #0096cd !important;
                    border: 1px solid #0096cd !important;
                }
                #content-type .content-type-learn-control .el-dialog__wrapper .el-dialog button.el-button.el-button--primary:hover,
                #content-type .content-type-learn-control .el-dialog__wrapper .el-dialog button.el-button.el-button--primary:focus {
                    background: #0096cd !important;
                    color: #ffffff !important;
                    border: 1px solid #0096cd !important;
                }
                /*Points Color*/ 
                span.orange {
                    color: #FF46AA;
                }
    /** BADGES **/
        /* Main title */
        .content .badges-index .main-title h1 {
            font-weight: normal;
            margin-bottom: 0;
            margin-top: 25px;
        }
        /*Text under title */
        .content .badges-index div p{
            width: 70%;
            margin: 15px auto 30px;
        }
        /*Corner flag */
        .content .badges-index__wrapper-flag {
            background: #ff46aa;
        }
        .content .badges-index__wrapper-flag:after {
            border: 15px solid #ff46aa;
            border-right-color: transparent;
            border-left-width: 10px;
        }
        /*Main slider wrapper */
        .content .badges-index__wrapper {
            background: url('/storage/custom/custom_bg.jpg');
            background-size: 100%;
            padding-top: 0px;
        }
        /*Platforms under badges */
        .content .badges-index__wrapper .badges-carousel__platform {
            display: none;
        }
        /*Badges wrapper carousel */
        .content .badges-index__wrapper-slider .el-carousel {
            max-width: 560px;
        }
        /*Inner wrapper of badges */
        .content .badges-index__wrapper-slider .el-carousel .el-carousel__container {
            height: 220px !important;
        }
        /* all the slider items/badges */
        .content .badges-index__wrapper-slider .el-carousel .el-carousel__item, .content .badges-index__wrapper-slider .el-carousel .el-carousel__mask {
            height: auto;
            top: 25%;
        }
        /*slider arrows */
        .content .badges-index__wrapper-slider .el-carousel .el-carousel__arrow {
            background-color: rgba(255, 255, 255, 0.95);
            color: #00375a;
            font-size: 1.6em !important;
        }
        /*Badge name */
        .content .badges-index__wrapper-details h3 {
            font-size: 1.8em;
            text-transform: none;
            font-weight: normal;
            margin-bottom: 15px;
        }
        /*Badge details wrapper */
        .content .badges-index__wrapper-details {
            background: #ffffff;
        }
        /*Text under badge name */
        .content .badges-index__wrapper-details small {
            color: #00375a;
            font-size: 0.8em;
            font-style: normal;
        }
        /*row from bronze to gold */
        .content .badges-index__wrapper-details__title div.el-row {
            width: 70%;
            margin: 0 auto;
        }
        /*Text under stars */
        .badges-index__wrapper-details__single-badge {
            font-size: 0.8em !important;
        }
        /*Star icon */
        .badges-index__wrapper-details__single-badge i.fa {
            font-size: 14px;
        }
        /*Active star */
        .badges-index__wrapper-details__single-badge--active i.fa {
            color: #0096cd !important;
        }
    /**STATUSES **/
        /*Statuses title*/
        .content .status-index .main-title h1 {
            font-weight: normal;
            margin-bottom: 0;
            margin-top: 25px;
        }
        .content .status-index .main-title p.status-index__intro {
            margin: 15px auto 0px;
            color: #00375a;
        }
        /*achieved status*/
        .content .status-index__table .achieved .status-index__table-tab {
            background: #0096cd;
        }
        /*current status */
        .content .status-index__table .current .status-index__table-tab {
            background: #FF46AA;
        }
        /*On click current status*/
        .content .status-index__table .current .status-index__table-tab.active {
            background-color: #FF46AA;
        }
        /*default status*/
        .content .status-index__table-tab {
            background: #00375a;
            padding: 16px 10px;
        }
        /*Title under status image */
        .content .status-index__table-single__title {
            font-size: 1.4em;
            min-height: 0;
            padding-bottom: 5px;
        }
        .content .status-index__table-single__title strong {
            font-weight: normal;
        }
        /*Status description */
        .content .status-index__table-single__description span {
            font-size: 0.8em;
            max-width: 50%;
        }
        /*Arrow pointer after current status*/
        .content .status-index__table-tabs .status-index__table-tab:after {
            border-left: 7px solid #FF46AA !important;
            border-top: 23px solid transparent !important;
            border-bottom: 23px solid transparent !important;
        }
        /*status info -> this month's obtained points*/
        .content .status-index__table-single__info--dark {
            background-color: #0096cd;
        }
        /*status info -> min amout of points, monthly points */
        .content .status-index__table-single__info--light {
            background-color: #ffffff;
        }

/*** END Knowledge Library/HUB ***/

/*** FOOTER ***/
    /* footer custom company logo to the left */ 
    /* footer div div {
        display: block;
        background-image: url('/storage/custom/logo.png');
        background-repeat: no-repeat;
        background-size: 6%;
        background-position: 13% 0%;
        height: 70px;
    } */
/*** FOOTER END ***/


/*** FEEDBACK POPOVER ***/
#feedback .main-button {
    border-bottom: none;
}
#feedback .main-button i.fa {
    color: #FF46AA;
}
.feedback-popover .el-popover__title {
    background: #0096cd;
}

/*** RESPONSIVE ***/
    /*Display*/
    @media screen and (max-width: 1440px) {
        button {
            font-size: 0.7em !important;
        }
        /*** User board welcome title */
        .kl-dashboard__left-wrapper .user-board__profile h3 {
            font-size: 1.1em;
        }
        
        /** Category/module tabs single tab item **/
        .category-module-tabs .el-tabs .el-tabs__item {
            font-size: 1em;
        }
        
        /** random categories single category button */
        .random-categories__categories--single--button .el-button {
            font-size: 0.6em !important;
            height: 40px;
        }

        /** random categories single category corner ribbon */
        .random-categories__categories--single .corner-ribbon {
            font-size: 0.7em;
            line-height: 30px;
            top: 33px;
            left: -52px;
        }

        /** single category top icon **/
        .random-categories__categories--single--icon i.fa::after {
            font-size: 70px;
        }
        #content-type {
            padding-top: 0 !important;
        }
    }
    /*Laptop*/
    @media screen and (max-width: 1200px) {
        /* General buttons */
        button {
            font-size: 0.55em !important;
        }
        
        /** random categories single category button */
        .random-categories__categories--single--button .el-button {
            font-size: 8.5px !important;
            height: 35px;
        }

        /** random categories single category corner ribbon */
        .random-categories__categories--single .corner-ribbon {
            font-size: 12px;
            line-height: 25px;
            top: 28px;
            left: -60px;
        }
        /* Random categories single category name */
        .random-categories__categories--single--name {
            font-size: 1.2em !important;
        }

        /* Module name in slider */
        .big-slider__slide-content__text-title {
            font-size: 1.35em !important; 
        }
        /** Slider item module desc **/
        .big-slider__slide-content__text-description {
            font-size: 0.8em;
        }

        /** Gamification points icon after points **/
        .gamification-element .gamification-tag img {
            height: 17px !important;
            padding: 3px 3px 3px 0 !important;
        }

        /** Simple module name **/
        .user-modules .simple-module .simple-module--name {
            font-size: 0.8em !important;
        }

        /*Learncontrol subnavigation links */
        .subnav a {
            font-size: 0.6em !important;
        }

        /* Category/module tabs */
        .category-module-tabs .el-tabs .el-tabs__item {
            font-size: 0.8em !important;
        }
        /*Simple module points*/
        .simple-module--points .gamification-element .gamification-tag .points {
            font-size: 0.5em !important;
        }

        .random-categories__categories--single .corner-ribbon {
            font-size: 0.6em !important;
        }
    }
    /*Tablet*/
    @media screen and (max-width: 992px) {
        /* Welcome back text */
        .welcome p {
            color: #0096cd;
        }
        /* Welcome back text user name */
        .welcome p span {
            color: #ff46aa;
        }
        h1 {
            font-size: 1.5em;
        }

        /** random categories single category button */
        .random-categories__categories--single--button .el-button {
            font-size: 0.65em !important;
            height: 35px;
        }
        /* Chapter sub-chapter name*/
        .content-type-text-image .accordion-title .name {
            font-size: 1.1em !important;
        }
        /* Question progress timer */
        #content-type .content-type-learn-control .question-wrapper .question-progress {
            margin: 100px 0 0 !important;
        }
        /*One answer label */
        .content-type-learn-control .question-wrapper div.answers label {
            max-width: 70% !important;
        }
        /*Answer text */
        .content-type-learn-control .question-wrapper div.answers label .span-wrapper span {
            font-size: 0.8em !important;
        }
        /*Feedback button */
        #feedback .main-button {
            border-top: 1px solid #0096cd;
            border-bottom: none;
            border-left: none;
            font-size: 0.7em !important;
            border-right: none;
        }
        /* Mobile user board button */
        .user-board-mobile button.el-button span {
            font-size: 1em !important;
        }
        /* header gamification points */
        header .navbar-right ul li #gamification-points-display span.points {
            font-size: 1.3em !important;
        }
    }
    /*Mobile*/
    @media screen and (max-width: 767px) {
        /*Slider corner ribbon */
        .big-slider__slide-image .corner-ribbon {
            left: -40px !important;
            width: 170px !important;
            line-height: 20px !important; 
        }

        /* Gamification element points */
        .gamification-element .gamification-tag .points {
            font-size: 13px !important;
        }
        .gamification-element .gamification-tag img {
            height: 13px !important;
            padding: 1px 3px 1px 0 !important;
        }
        /* Gamification currency img */
        header .navbar-right ul li #gamification-points-display img {
            height: 25px;
        }
        /* Header right list element */
        header .navbar-right ul li {
            vertical-align: top;
            margin-top: 7px;
        }

        /*Slider button */
        .big-slider .big-slider__slide-content__button .el-button.el-button--primary {
            padding: 7px 10px;
        }
        /* Slider module name */
        .big-slider__slide-content__text-title {
            font-size: 1em !important;
        }

        /* Category/modules tabs single tab */
        .category-module-tabs .el-tabs .el-tabs__item {
            font-size: 15px;
            background-color: #ffffff;
            border: none;
        }

        /*All categories single category icon */
        .all-categories__list-single__title::after {
            font-size: 40px;
        }
        /*all categories single category name */
        .all-categories__list-single__title h4 {
            font-size: 1.1em;
        }
        /* Tab header text */
        .tab-font {
            margin: 0 auto !important;
            text-align: center !important;
            font-size: 0.8em !important;
        }
        /*random categories single category icon */
        .random-categories__categories--single--icon i.fa::after {
            font-size: 35px;
        }

        /*Random categories single category button */
        .random-categories__categories--single--button .el-button {
            height: 30px;
        }

        /*random categories single category name */
        .random-categories__categories--single--name {
            margin: 15px 5px 50px 5px !important;
            text-align: center !important;
        }

        /*Single module name */
        .simple-module .simple-module--name {
            font-size: 0.6em !important;
        }

        /*Learn control subnavigation first link icon */
        .subnav div div:first-child::before {
            font-size: 17px;
            margin-right: 3px;
        }

        /* Subnav second link icon */
        .subnav div div i {
            font-size: 17px;
            margin-right: 3px;
            float: left;
        }

        /*Subnav links */
        .subnav a {
            margin-right: 0;
        }

        /*Subnav sector & module name links */
        .subnav .sector-name, .subnav .module-name {
            font-size: 0.6em;
        }

        h1 {
            font-size: 1.2em;
        }

        /* Chapter subchapter title */
        .content-type-text-image .accordion-title .name {
            font-size: 1em !important;
        }

        /* Question timer */
        #content-type .content-type-learn-control .question-wrapper .question-progress {
            margin: 0 !important;
        }

        /*Answer label */
        .content-type-learn-control .question-wrapper div.answers label {
            max-width: 100% !important;
            margin: 0 20px !important;
        }

        /*Question text */
        .content-type-learn-control .question-wrapper h2 {
            margin: 0 !important;
        }

        /*Answers wrapper */
        .content-type-learn-control .question-wrapper div.answers {
            margin-top: 90px !important;
        }

        /*Learn control before start screen */
        .content-banner {
            padding: 20px 0 !important;
        }
        .content-banner .box {
            font-size: 0.8em !important
        }

        /*Prizes button for popover */
        .challenge-mobile button.el-button.el-button--default span, .user-board-mobile button.el-button span {
            font-size: 0.65em !important;
        }
        
        /* feedback button */
        #feedback .main-button {
            font-size: 0.5em !important;
        }

        /*Statuses --- Title under status image */
        .content .status-index__table-single__title {
            font-size: 0.9em;
        }
        
        /*Statuses --- status tabs */
        .content .status-index__table-tab {
            padding: 16px 5px;
        }

        /*Status wrapper */
        .content .status-index__table-single {
            padding: 8px;
        }

        /*Badges desc wrapper */
        .content .badges-index__wrapper-details__title div.el-row {
            width: 100%;
        }

        /*Single badge desc --- all of them */
        .badges-index__wrapper-details__single-badge {
            font-size: 0.6em !important;
        }

        /*Badge stars icon */
        .badges-index__wrapper-details__single-badge i.fa {
            font-size: 12px;
        }
    }