:root{
    --primary: #024589;
    --primary-lighten-15: #146aff;
    --primary-lighten-50: #659fff;
    --secondary: #397a94;
    --secondary-lighten-15: #2ab0dc;
    --secondary-lighten-50: #68bfda;
    --secondary-gradient: #FDC24E;

    --action: #B58526;
    --action-text-color: var(--primary);
    --action-gradient: #B58526;
    --action-mute: #8f8e8e;
    --action-mute-text-color: #e3e3e3;

    --info: #09afcd;
    --info-text-color: #d2f0f5;
    --warning: #e2aa34;
    --warning-text-color: #fff5e1;
    --error: #cb3636;
    --error-text-color: #ffdcdc;
    --success: #83b86f;
    --success-text-color: #e3ffda;
    --help-text-color: #666;

    /** BASE **/
    --bg-color: #EEEEEE;
    --font-color: #666666;
    --muted-font-color: #999999;
    --contrast-font-color: #FFF;
    --font-size: 1rem;
    --font-family: 'Montserrat', 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: var(--font-line-height);
    --heading-letter-spacing: var(--font-letter-spacing);
    --heading-h1-font-size: 2rem;
    --heading-h2-font-size: 1.4rem;
    --heading-h3-font-size: 1.2rem;
    --heading-h4-font-size: 1rem;
    --heading-margin: 0 0 1em 0;

    --border-radius: 0;
    --border-radius-small: 0;


    /** BUTTONS **/
    --button-bg: #14885e;
    --button-bg-gradient: linear-gradient(35deg, #14885e, #14885e);
    --button-text: #ffffff;

    // not used:
    --action-button-bg: #e00034;
    --action-button-gradient: linear-gradient(35deg, #e00034, #ff5f85);
    --action-button-text: #ffbc6b;

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

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

    /** TOOLTIP **/
    --tooltip-bg: #00A9E0;
    --tooltip-text: #cbe5ee;

    /** SLIDESHOW **/
    --slideshow-text-bg: #333;
    --slideshow-text-color: #fff;

    /** PROFILE **/
    --profile-bg: #fff;
    --profile-element-bg: #fafafa;
    --profile-myprogress-bg: linear-gradient(40deg, #dbe2ea, #e9ebed);
    --profile-myprogress-box-bg: #fff;
    --profile-myprogress-font-color: var(--font-color);

    --profile-toolbox-items-bg: var(--bg-color);
    --profile-history-item-border: 1px solid var(--secondary);
    --profile-history-item-shadow: var(--element-box-shadow);
    --profile-history-font-color: #fff;
    --profile-history-icon-color: #fff;
    --profile-history-item-bg: var(--secondary);
    --profile-history-item-participant-bg: var(--primary);
    --profile-history-item-participant-border: 1px solid var(--primary);

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

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

    /** ELEMENTS **/
    --element-bg: transparent;
    --element-result-bg: var(--element-bg);
    --element-padding: 0;
    --element-box-shadow: 0 0 15px 0px rgb(0 0 0 / 15%);
    --element-border: none;
    --element-result-border: none;

    --element-text-input-share-info-bg: rgba(255,255,255,0.3);
    --element-text-input-share-info-border: 1px solid var(--info);

    --element-slideshow-bg: rgba(0,0,0,0.8);
    --element-slideshow-text-bg: #024589;
    --element-slideshow-text-color: var(--contrast-font-color);
    --element-slideshow-progress: var(--secondary);
    --element-slideshow-font-size: 1rem;

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

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

    // SELECTION SLIDESHOW
    --element-selection-slideshow-bg: #aaa;
    --element-selection-slideshow-color: var(--contrast-font-color);
    --element-selection-slideshow-selected-bg: var(--secondary);
    --element-selection-slideshow-selected-color: var(--secondary);
    --element-selection-slideshow-selected-item-bg: rgba(255, 255, 255, 0.4);
    --element-selection-slideshow-selected-item-color: var(--bg-color);

    /** LINK COLLECTION **/
    --link-collection-bg: #f3f3f3;
    --link-collection-columns: 3;
    --link-collection-box-width: 400px;
    --link-collection-box-height: 300px;
    --link-collection-highlight-border-animation-time: 8s;
    --link-collection-highlight-border-color: var(--font-color);

    /** TINY INTERVENTIONS **/
    --ti-header-color: var(--heading-font-color);
    --ti-header-align: center;
    --ti-footer-card-bg: #ffffff;
    --ti-footer-card-color: #000;
    --ti-footer-card-border-inactive: 2px solid #ccc;
    --ti-footer-card-border-active: 2px solid var(--primary);
    --ti-footer-card-nr-border: 1px solid #fff;
    --ti-footer-card-nr-bg: var(--primary);
    --ti-footer-card-headline: var(--primary);
    --ti-footer-card-nr-bg-inactive: #ccc;
    --ti-footer-card-nr-color: #fff;
    --ti-footer-card-nr-color-inactive: #fff;
    --ti-footer-card-headline-inactive: #ccc;
    
    /** WELCOME JOURNEY **/
    --welcome-journey-overlay-bg: rgba(0,0,0,0.6);
    --welcome-journey-modal-bg: var(--primary);
    --welcome-journey-modal-color: #fff;
    --welcome-journey-modal-border-radius: var(--border-radius);
    --welcome-journey-modal-headline-color: var(--secondary);
    --welcome-journey-modal-arrow-color: var(--secondary);

    /** GUIDED TOUR **/
    --guided-tour-message-bg: var(--primary);
    --guided-tour-message-shadow: 0 0 15px 0px rgb(255 255 255 / 15%);
    --guided-tour-message-arrow: var(--secondary);
    --guided-tour-message-title-bg: var(--secondary);
    --guided-tour-message-title-color: #fff;
    --guided-tour-message-content-color: #fff;
    --guided-tour-message-footer-bg: rgba(255,255,255,0.1);
    --guided-tour-message-hint-color: #fff;
    --guided-tour-message-close-color: #fff;
}

#app-nav #app-nav-logo{
  background-size: auto 75%;
}


.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: #0f8dbb;
  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;
}

.element.bubble-map-element .participants-container .slideshow-container .vueperslides .vueperslide .nr {
 background: var(--action)
}

h1{
  text-transform: none;
}
.element.bubble-map-element .bubble-map-container .bubble {
 background: var(--action)
}
.element.accordion-element .accordion-item .accordion-header {
  background: var(--primary)
}

.element.selection-element{
  background: #fff;
}

/** TEAM CANVAS **/
body.modern-layout #app-content section.screen.team-canvas{
  background: url('/storage/canvas/Universum_3.jpg') no-repeat center center/cover transparent;
}

body.modern-layout #app-content section.screen.team-canvas .screen-options > *,
body.modern-layout #app-content section.screen.team-canvas .screen-options .moderator-text .moderator-text-toggle{
  color: var(--action) !important;
  fill: var(--action) !important;
}

#team-canvas{
  margin: 2rem 4rem;
  min-height: 50vh;
}
#team-canvas .columns{
  display: flex;
  align-items: stretch;
  justify-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
#team-canvas .column{
  flex: calc((100% - 3rem) / 4) 0 0;
  position: relative;
}
#team-canvas .column:first-child{
  border: none;
}
#team-canvas .column h2{
  line-height: 1.3;
  min-height: 20%;
  word-break: all;
}
#team-canvas .column img{
    width: 75px;
    height: 75px;
    object-fit: contain;
    object-position: center center;
}
#team-canvas .column .content-container{
    padding: 10px;
    background: rgb(222 234 247);
    min-height: 20vh;
    display: flex;
    align-items: center;
    font-size: 1.3rem;
}

#team-canvas .column .content-container .tiny-intervention-voting .entry{
  background: none;
  color: var(--font-color);
}
#team-canvas .column .content-container .tiny-intervention-voting .entry .rank{
  display: none;
}

#team-canvas .column .content-container .plan{
    padding-bottom: 5px;
    margin-bottom: 5px;
}


#team-canvas .column .column-heading{
    display: flex;
    justify-content: space-between;
    background: #ffffff8c;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 150px;
    align-items: end;
}


/** REPORT **/
#app-content.tinyinterventions-report #report #report-header #report-header-logo{
  background:  url(/storage/theme/report_logo.png) no-repeat 50%/200px auto #f2e7ce;
}

#app-content.tinyinterventions-report #report .inner{
  border-top: 10px solid var(--action);
}

#app-content.tinyinterventions-report #report .inner:before{
  background: #078DBB;
}

#app-content.tinyinterventions-report #report .inner:after{
  background: var(--primary);
}

#app-content.tinyinterventions-report #report #report-moderation-ranking #award-container>.award .img{
  background-color: #98965A;
}

#app-content.tinyinterventions-report #report #report-moderation-ranking #award-container>.award.communication .img{
  background-color: #8D9E78;
}

#app-content.tinyinterventions-report #report #report-moderation-ranking #award-container>.award.team-spirit .img{
  background-color: #82A595;
}

#app-content.tinyinterventions-report #report #report-moderation-ranking #award-container>.award.actionable-steps .img{
  background-color: #6B9A97;
}

#app-content.tinyinterventions-report #report #report-moderation-ranking #award-container>.award.disscussions .img{
  background-color: #528A95;
}

#app-content.tinyinterventions-report #report #report-moderation-ranking #award-container>.award.active .img{
  background-color: #367A93;
}
/** STEP 3 TI **/
#app-content.tinyinterventions-index .tiny-interventions-container .footer > .card.card-step-3,
#app-content .screen .tiny-intervention-element .tiny-interventions-container .footer > .card.card-step-3{
  background: var(--primary);
  color: #fff;
}

#app-content.tinyinterventions-report #report #report-ti-ranking .result .result-container > div:first-child .item{
  background: #30667C;
  color: #fff;
}

#app-content.tinyinterventions-report #report #report-ti-ranking .result .result-container > div:first-child .item:nth-child(3){
  background: #60897A;
  color: #fff;
}
#app-content.tinyinterventions-report #report #report-ti-ranking .result .result-container > div:first-child .item:nth-child(4){
  background: #896931;
  color: #fff;
}

#app-content.tinyinterventions-report #report #report-ti-ranking .result .result-container > div:first-child .item span{
  color: #fff;
  border: 2px solid #fff;
}

#app-content.tinyinterventions-report #report #report-ti-ranking .result .result-container > div:nth-child(2) .item{
  background: #AFCED1;
}

#app-content.tinyinterventions-report #report #report-ti-ranking .result .result-container > div:nth-child(2) .item:nth-child(3){
  background: #B3C9C0;
}
#app-content.tinyinterventions-report #report #report-ti-ranking .result .result-container > div:nth-child(2) .item:nth-child(4){
  background: #CBC7AD;
}

#app-content.tinyinterventions-index .tiny-interventions-container .footer > .card.card-step-3 .content h2, 
#app-content .screen .tiny-intervention-element .tiny-interventions-container .footer > .card.card-step-3 .content h2,
#app-content.tinyinterventions-index .tiny-interventions-container .footer > .card.card-step-3 .minimizer, 
#app-content .screen .tiny-intervention-element .tiny-interventions-container .footer > .card.card-step-3 .minimizer,
#app-content.tinyinterventions-index .tiny-interventions-container .footer > .card .plan-list h3, 
#app-content .screen .tiny-intervention-element .tiny-interventions-container .footer > .card .plan-list h3{
  color: #fff;
}
#app-content.tinyinterventions-index .tiny-interventions-container .footer > .card .plan-list .plan, 
#app-content .screen .tiny-intervention-element .tiny-interventions-container .footer > .card .plan-list .plan{
  color: #333;
}

#profile-rewards .toolbox-rewards .toolbox-item p{
  font-size: 0.85rem;
}

#app-content .screen .tiny-intervention-element .tiny-interventions-container .inner>.header .header-info .seperator, 
#app-content.tinyinterventions-index .tiny-interventions-container .inner>.header .header-info .seperator,
#app-content .screen .tiny-intervention-element .tiny-interventions-container .inner>.header .header-info .session-name-input, 
#app-content.tinyinterventions-index .tiny-interventions-container .inner>.header .header-info .session-name-input{
  display: none;
}

.mx-btn-text{
  background: #fff;
}

.login-content .btn.btn-action {
  display: none;
}