@font-face {
    font-family: 'EON BrixSans';
    font-style: normal;
    font-weight: 400;
    src: url('/storage/theme/fonts/EON_BrixSans-Regular.ttf');
    src: local(''),
}
@font-face {
    font-family: 'EON BrixSans';
    font-style: italic;
    font-weight: 400;
    src: url('/storage/theme/fonts/EON_BrixSans-RegularItalic.ttf');
    src: local(''),
}
@font-face {
    font-family: 'EON BrixSans';
    font-style: normal;
    font-weight: 700;
    src: url('/storage/theme/fonts/EON_BrixSans-Bold.ttf');
    src: local(''),
}
@font-face {
    font-family: 'EON BrixSans';
    font-style: italic;
    font-weight: 700;
    src: url('/storage/theme/fonts/EON_BrixSans-BoldItalic.ttf');
    src: local(''),
}
@font-face {
    font-family: 'EON BrixSans';
    font-style: normal;
    font-weight: 600;
    src: url('/storage/theme/fonts/EON_BrixSans-Medium.ttf');
    src: local(''),
}

@font-face {
    font-family: 'EON BrixSans';
    font-style: normal;
    font-weight: 900;
    src: url('/storage/theme/fonts/EON_BrixSans-Black.ttf');
    src: local(''),
}
@font-face {
    font-family: 'EON BrixSans';
    font-style: italic;
    font-weight: 900;
    src: url('/storage/theme/fonts/EON_BrixSans-BlackItalic.ttf');
    src: local(''),
}



:root{
    --primary: #ea1b0a;
    --primary-lighten-15: #ea1b0a;
    --primary-lighten-50: #ea1b0a;
    --secondary: #b00402;
    --secondary-gradient: #b00402;

    --eon-alternate: #B0DADE;
    --eon-green: #1EA2B1;

    --action: #ea1b0a;
    --action-text-color: #EA1C0A;
    --action-gradient: #F05548;
    --action-mute: #8f8e8e;
    --action-mute-text-color: #e3e3e3;

    --info: #EA1b0a;
    --info-text-color: #ffffff;
    --warning: #EA1b0a;
    --warning-text-color: #ffffff;
    --error: #b00402;
    --error-text-color: #ffffff;
    --success: #00ce0a;
    --success-text-color: #ffffff;
    --help-text-color: #000;

    /** BASE **/
    --bg-color: #F9F6F4;
    --font-color: #262626;
    --muted-font-color: #999999;
    --contrast-font-color: #FFF;
    --font-size: 1rem;
    --font-family: 'EON BrixSans', sans-serif;
    --font-line-height: 1.6;
    --font-letter-spacing: 0.05em;

    --heading-font-family: var(--font-family);
    --heading-font-color: var(--primary);
    --heading-line-height: 1.2;
    --heading-letter-spacing: var(--font-letter-spacing);

    --border-radius: 20px;
    --border-radius-small: 10px;


    /** BUTTONS **/
    --button-bg: var(--action);
    --button-bg-gradient: var(--action);
    --button-text: #ffffff;

// not used:
--action-button-bg: #e00034;
    --action-button-gradient: var(--action);
    --action-button-text: #ffbc6b;

    /** BOX **/
    --box-color:  #ffffff;

    /** NAVIGATION **/
    --nav-height: 60px;
    --nav-bar-bg: #fff;
    --nav-icon-color: #666;

    /** TOOLTIP **/
    --tooltip-bg: #F7E8DA;
    --tooltip-text: #262626;

    /** SLIDESHOW **/
    --slideshow-text-bg: #F6C1B0;
    --slideshow-text-color: #262626;

    /** PROFILE **/
    --profile-bg:  #F9F6F4;
    --profile-element-bg: #f7e8da;

    --profile-toolbox-items-bg: none;
    --profile-history-item-border: none;
    --profile-history-item-shadow: none;
    --profile-history-font-color: #262626
    --profile-history-icon-color: #262626;
    --profile-history-item-bg: #EDEA6C;
    --profile-history-item-participant-bg: #eae744;
    --profile-history-item-participant-border: 1px solid #eae744;

    --profile-myprogress-bg: #F9F6F4;
    --profile-myprogress-box-bg: #F7E8DA;
    --profile-myprogress-font-color: #262626;

    /** LEVEL **/
    --level-header-bg: #f3f3f3;
    --level-bg-color: #FFFFFF;
    --level-header-padding: 1rem;
    --level-header-border: 2px solid #EA1C0A;
    --level-header-border-with: 2px;
    --level-header-border-radius: var(--border-radius-small);

    /** ELEMENTS **/
    --element-slideshow-bg: #ffffff;
    --element-slideshow-text-bg: #f6c1b0;
    --element-slideshow-progress: #8E0038;
    --element-slideshow-text-color: #262626;

    --element-selection-result-li-bg: rgba(255,255,255,0.4);

    --element-text-speech-bubble-bg: #e3e000;
    --element-text-speech-bubble-font-color: var(#b00402);
    --element-text-speech-bubble-font-size: 1.4rem;

    --elements-multiple-slider-border: none;
    --elements-multiple-slider-bg: #F9F6F4;
    --elements-multiple-slider-color: #262626;

    /** LINK COLLECTION **/
    --link-collection-bg: #f3f3f3;
    --link-collection-columns: 3;
    --link-collection-box-width: 400px;
    --link-collection-box-height: 300px;

    --moderator-text-bg: var(--eon-alternate);
    --moderator-text-color: var(--font-color);
    --moderator-text-font-size: 1rem;
    --moderator-text-toggle-bg: var(--primary);
    --moderator-text-toggle-color: var(--contrast-font-color);

    --ti-header-color: #262626;
    --ti-header-align: left;
    --ti-footer-card-bg: #F9F6F4;
    --ti-footer-card-color: #EA1B0A;
    --ti-footer-card-border-inactive: none;
    --ti-footer-card-border-active: none;
    --ti-footer-card-nr-border: none;
    --ti-footer-card-nr-bg: #fff;
    --ti-footer-card-headline: var(--primary);
    --ti-footer-card-nr-bg-inactive: #f9f6f4;
    --ti-footer-card-nr-color: #EA1B0A;
    --ti-footer-card-nr-color-inactive: #262626;
    --ti-footer-card-headline-inactive: #262626;
}

h1,h2,h3,h4{
    font-weight: 900;
}

#app-nav #app-nav-logo{
    width: 90px;
}

/** BEGINN: element selection slideshow special colors **/
.element.selection-element .slideshow-container .vueperslides .text-container{
    background: #ddd;
    color: #666;
}
.element.selection-element .slideshow-container .vueperslides .text-container h3{
    margin: 1rem 0;
    color: var(--secondary);
}
.element.selection-element .slideshow-container .vueperslides .text-container.checked{
    color: #fff;
}
.element.selection-element .slideshow-container .vueperslides .text-container.checked h3{
    color: #fff;
}
.element.selection-element .slideshow-container .vueperslides .text-container .item.checked{
    color: #fff;
}
/** END: element selection slideshow special colors **/

.element.accordion-element .accordion-item .accordion-header{
    background: var(--primary);
    opacity: 0.8;
}
.element.accordion-element .accordion-item.open .accordion-header,
.element.accordion-element .accordion-item .accordion-header:hover{
    background: var(--primary);
    opacity: 1;
}
.element.accordion-element .accordion-footer{
    background: var(--primary);
}

/** TICKET: Headlines bei Overview in e.on red **/
.link-collection .link-collection-box .link-content .link-title{
    color: var(--primary);
}
/** TICKET: Welcome Page erster Screen: keine center Headline, stattdessen rechtszentirert, nicht all caps, font color zu e.on red **/
.slideshow-page #content-slider .slide.center-text-slide{
    align-items: flex-end;
}
.slideshow-page #content-slider .slide.center-text-slide h1{
    color: var(--primary);
    text-transform: none;
}

.element.text-element.instruction .icon-container,
.element.text-element.info .icon-container{
    width: 40px;
    height: 40px;
    flex: 40px 0 0;
}


.eon-mtm{
    margin: 1rem 0;
    padding: 0.5rem;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

.eon-mtm .content{
    white-space: normal;
}

.eon-mtm .content .item{
    display: flex;
}

.eon-mtm .content .item > div{
    flex: calc(50% - 2rem) 0 0;
    margin: 0.5rem 1rem;
    padding: 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: var(--border-radius-small);
    color: #fff;
}

.eon-mtm .content .item .moment{
    justify-content: center;
    display: flex;
    align-items: center;
    border: 2px solid var(--secondary);
    font-style: italic;
}


.eon-mtm .content .row{
    flex: calc(50% - 2rem) 0 0;
    margin: 0.5rem;
    padding: 1rem;
    background: rgba(255,255,255,0.8);
    border-radius: var(--border-radius-small);
    color: #111;
    text-align: left;
    position: relative;
}

.eon-mtm .content .row ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.eon-mtm .content .row.moment{
    border: 1px solid var(--secondary);
    font-size: 1.4rem;
    font-weight: bold;
}

.eon-mtm .content .row strong{
    display: block;
}

.eon-mtm button{
    margin-right: 1rem;
    float: right;
    padding: 1rem 5rem;
}

.eon-mtm .content .text-input .title{
    font-weight: bold;
}


.link-collection.tiny-intervention-links{}
.link-collection.tiny-intervention-links .link-content{
    padding: 0;
    font-family: Arial;
}
.link-collection.tiny-intervention-links .link-content .link-title{
    flex: 50% 0 0;
    background: var(--secondary);
    color: #fff;
    font-weight: 400;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
    letter-spacing: 2px;
}
.link-collection.tiny-intervention-links .link-content .link-title:before{}
.link-collection.tiny-intervention-links .link-content .link-title:after{
    content: '';
    width: 30%;
    height: 5px;
    margin: 1rem 0 1rem -1rem;
    background: #fff;
    display: block;
    transition: all .5s ease-in-out;
}
.link-collection.tiny-intervention-links .link-collection-box:hover .link-content .link-title:after{
    width: 70%;
}

.link-collection.tiny-intervention-links .link-content .link-description{
    flex: 50% 0 0;
    padding: 1.5rem 1rem;
}

#app-content.tinyinterventions-index .tiny-interventions-container .inner>.header h1{
    margin: 0 150px 0 5px;
}

#app-content.profile-leadershipchallenge{
    background: none;
}

#app-nav-right .reward-panel{
    display: none
}