/**
 * CSS Deklarationen für die Web-App
 *
 */

/* Debugging */
#wicketDebugLink { display: none; }

/* Hintergründe --------------------------- */
body.app {
  	background: #e9e9e9;
}

body.start {
	background-image: url("/assets/images/background/bg-amazing-road-in-pure-nature.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #dddddd;
	background-attachment: fixed;
	height: 100%;
}

/* Schriften, Farben & Co. ---------------- */
body { font-family: 'Open Sans', sans-serif; line-height: 1.25rem; }
.top-bar-section ul li > a { font-family: 'Open Sans', sans-serif; }

.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }
.minimal-padding { padding: 3px 6px; }

.friendly-for-reading { max-width: 900px; }
.friendly-compact-form { max-width: 700px; }

@media only screen and (max-width: 40em) { 
	.full-width-for-small { width: 100%; } }

/* Abstände ------------------------------- */
.m-0 { margin: 0; }
.m-1 { margin: 1rem; }
.m-2 { margin: 2rem; }
.m-3 { margin: 3rem; }

.my-1 { margin: 1rem 0; }
.my-15 { margin: 1.5rem 0; }
.my-2 { margin: 2rem 0; }

.mx-1 { margin: 0 1rem; }
.mx-15 { margin: 0 1.5rem; }
.mx-2 { margin: 0 2rem; }

.mt-0 { margin-top: 0; }
.mt-05 { margin-top: 0.5rem; }
.mt-08 { margin-top: 0.875rem; }
.mt-1 { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-05 { margin-bottom: 0.5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.ml-0 { margin-left: 0; }
.ml-05 { margin-left: 0.5rem; }
.ml-1 { margin-left: 1rem; }
.ml-15 { margin-left: 1.5rem; }

.mr-0 { margin-right: 0; }
.mr-05 { margin-right: 0.5rem; }
.mr-1 { margin-right: 1rem; }
.mr-15 { margin-right: 1.5rem; }

.p-0 { padding: 0; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }

.py-1 { padding: 1rem 0; }
.py-2 { padding: 2rem 0; }

.px-1 { padding: 0 1rem; }
.px-2 { padding: 0 2rem; }

.pt-1 { padding-top: 1rem; }
.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }

.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }

/* Utility Klassen --------------------------- */
.display-none { display: none; }
.display-block { display: block; }
.display-inline-block { display: inline-block; }

.vertical-align-wrapper { width: 100%; min-height: 3.5rem; display: table; }
.vertical-align { vertical-align: middle; display: table-cell; }

.hide-horizontal-scrollbar { overflow-x: hidden; }
.hide-vertical-scrollbar { overflow-y: hidden; }
.hide-scrollbar { overflow: hidden; }

.no-bg-grey-border { background: none !important; border: #ddd 1px solid; }
.no-bg { background: none !important; }

.cursor-pointer { cursor: pointer; }
.position-relative { position: relative; }

.fixed-width-15px { width: 15px; }
.fixed-width-30px { width: 30px; }

.grid-nowrap { flex-wrap: nowrap; }
.min-w-0 { min-width: 0; }

.rounded-border-on-top { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.rounded-border { border-radius: 24px; }

.line-height-tight { line-height: 1.25rem; }

/* Farben ------------------------------------ */
.bg-purple { background-color: #641767 !important; border-color: #641767; color: #fff !important; }
.bg-green { background-color: #298730!important; border-color: #298730; color: #fff !important; }
.bg-blue { background-color: #003a7a !important; border-color: #003a7a; color: #fff !important; }
.bg-darkgrey { background-color: #888 !important; border-color: #666; color: #fff !important; }
.bg-grey { background-color: #eee !important; border-color: #eee; color: #333 !important; }
.bg-midgrey { background-color: #ddd !important; border-color: #ddd; color: #888 !important; }

.bg-lightgrey { background-color: #f2f2f2 !important; border-color: #f2f2f2; color: #333 !important; }
.bg-lightgrey .detail-header .detail-header-text h5 { color: #333; }
.bg-lightgrey .detail-header .back-icon { color: #999; }

.bg-white { background-color: #fff; border-color: none; color: #222; }
.bg-white-opacity { padding: 0.25em; background: #fff; opacity: 0.7; }

.fg-black { color: #333 !important; }
.fg-purple { color: #831e87 !important; }
.fg-green { color: #3c9b3a !important; }
.fg-blue { color: #024b91 !important; }
.fg-darkgrey { color: #666 !important; }
.fg-lightgrey { color: #ccc !important; }
.fg-white { color: #fff !important; }
.fg-gold { color: #E5C100 !important; }

/* Header ------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; margin-bottom: 1rem; }
h1 { font-weight: 700; }
h3, h4, h5 { font-weight: 600; }
h1 { font-size: 2.25rem; }
h2 { font-weight: 400; }
	@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
		h1 { font-size: 2rem; }
		h2 { font-size: 1.75rem; } 
	}
	@media only screen and (max-width: 40em) { 
		h1 { font-size: 1.75rem; }
	}
	@media only screen and (max-width: 64em) { 
		h5 { font-size: 1rem; } 
	}

/* Allgemeine Style ------------------------------- */
.grid-container { max-width: 80rem; }

small, .small, .small p, .small ul li, .small ol li, .showcase-row-only-text p.small { 
	font-size: 0.875rem; }
	@media only screen and (max-width: 64em) { 
		small, .small, .small p, .small ul li, .small ol li, .showcase-row-only-text p.small { font-size: 0.875rem; } 
	}
.error > label > small { font-size:  0.8rem; }
button.small, .button.small { 
	font-size: 0.875rem; 
	padding: .875rem 1.5rem .9375rem
}
/* Disabled Button wird mit span gerendert */
span.button.secondary { color: #999; border-color: #ccc; background: #f0f0f0; }

.small p { margin-bottom: 0.5rem; }

.tiny { 
	font-size: 0.8rem; }
	@media only screen and (max-width: 64em) { 
		.tiny { font-size: 0.8rem; } 
	}

.medium { 
	font-size: 1.25rem; }
	@media only screen and (max-width: 64em) { 
		.medium { font-size: 1rem; } 
	}
	
.big { 
	font-size: 1.5rem !important; }
	@media only screen and (max-width: 64em) { 
		.big { font-size: 1.25rem !important; } 
	}

.very-big { 
	font-size: 5rem !important; }
	@media only screen and (max-width: 64em) { 
		.very-big { font-size: 3rem !important; } 
	}

label.normal-size { font-size: 1rem; }

.block-element { display: block; }

.center { display:block; margin: 0 auto; }
.hideme { position:absolute; top:-32768px; left:-32768px; }

.info-button { padding: 1rem 1.5rem; margin-right: 1rem; color: #333; border: 1px #ccc solid; border-radius: 0.5em; }
	@media only screen and (max-width: 40em) { 
		.info-button { width: 100%; display: block; border-radius: 0; border: none; background: #f5f5f5; } 
	}

strong, .strong { font-weight: 600; }
em, .brand-name { font-style: italic; }
i { font-style: normal; }
.dimmed { color: #999; }
.dimmed-light { color: #bbb; }
.normal { color: #222 !important; font-weight: normal; font-style: normal; }
.black-text { color: #222 !important; }
.white-text { color: #fff !important; }
.light { font-weight: 300 !important; }
.critical { color: #831e87 !important; }
.warning { background:#fee; color:#400; padding: 0.5rem; }
.warning-no-bg { color:#831e87; }
.time-hint { color: #aaa; margin: 1rem 0; padding: 0.5em 0; width: 100%; border-top: 1px #eaeaea solid; border-bottom: 1px #eaeaea solid; }
.colored { color: #641767; }
.border-colored { border: 1px #641767 solid; padding: 0.15rem 0.5rem;  }
.template { color: #298730; }

blockquote { 
  	margin: 1rem 0; 
  	color: #333;
  	padding: 10px 0 0 35px; 
  	border-left: none;
  	background: url("../images/icons/grey/icon-blockquote.png") left top no-repeat; 
  	display: inline-block; 
}
blockquote p, .tile blockquote p { font-size: 1rem !important; line-height: 1.5em; }
blockquote footer { font-style: normal; color: #999; font-size: 0.875rem; }
  
.tile blockquote { color: #fff; }
.tile blockquote footer { color: #ccc; }
  
.curve-header { font-family: 'Times New Roman',Times; text-align: left; line-height: 1.25rem; font-size: 1.15rem; font-style:italic; }
	@media only screen and (max-width: 40em) { .curve-header { line-height: 1.1rem; font-size: 1rem; }}

ul { list-style-type: square; }
dl, ol, ul { line-height: 1.5rem; }

/* Normalize Mobile Browser */
html { 
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}
 
/* To-Do-Listen Zeichen */
.done label, .done .link-badge, .done .normal-badge, .done .text-badge, .done .label-text {
	font-size: 0.875rem !important; 
	color: #999 !important;  }

.overdue .normal-badge .due-date, .overdue.normal-badge, .normal-badge .overdue,
.overdue .text-badge .due-date, .overdue.text-badge, .text-badge .overdue, .overdue  {
	color: #9a239f !important; }

.to-do  label, .done  label, .to-do .label-text, .list-item .label-text { color: #222; font-weight: normal; }
.list-box .to-do  label, .list-box .done  label, .list-box .to-do  label p, .list-box .done  label p, 
.list-box .label-text, .list-box .label-text p  { 
	font-size: 1rem; }

.separator-bottom { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px #ddd solid; }

.margin-top-for-large { margin-top: 0; }
	@media only screen and (max-width: 64em) { .margin-top-for-large { margin-top: 0; } }
	
.less-line-height { line-height: 1.25rem; }

/* Große Aufzählungszeichen */
.count-character { 	
	color: #aaa;
	font-weight: bold;
	font-size: 2.5rem;
	display: inline-block;
}

.count-character-small { 	
	color: #aaa;
	font-weight: bold;
	font-size: 2rem;
	display: inline-block;
}

.count-character-medium { 	
	color: #fff;
	font-size: 4rem;
	display: inline-block; 
	padding-bottom: 0.5rem; 
	margin-top: 1rem; }
	@media only screen and (max-width: 40em) { 
		.count-character-medium { font-size: 3.5rem; padding-top: 0.5rem; margin-top: 0; }
	}

.count-character-colored, .count-character-colored-li { 	
	color: #fff;
	background: #641767;
	font-weight: bold;
	font-size: 1.75rem !important;
	margin-right: 0.5rem  !important;
	margin-bottom: 0.5rem  !important;
	display: inline-block;
	width: 2.5rem;
	text-align: center;
	border-radius: 50%;
	line-height: 1.5rem;
}

.count-character-grey, .count-character-grey-square {
	color: #666;
	background: #eee;
	font-weight: bold;
	font-size: 1.5rem !important;
	margin-right: 0.25rem  !important;
	display: inline-block;
	width: 2.75rem;
	text-align: center;
}

.count-character-grey {
	border-radius: 50%;
}

.count-character-colored, .count-character-grey { 	
	padding: 0.5rem  !important;
}

.count-character-colored-li, .count-character-grey-square { 	
	line-height: 2.5rem;
}

.count-character-white {
	color: #666;
	background: #fff;
	border: 1px #eee solid;
	border-radius: 50%;
	font-weight: bold;
	font-size: 1.25rem !important;
	padding: 5px;
	margin-right: 0.25rem  !important;
	display: inline-block;
	width: 2.5rem;
	text-align: center;
}

.count-character-white.active {
	background: #eee;
}

.count-character-tile { margin-top: 2.5rem; }
	@media only screen and (max-width: 40em) { 
		.count-character-tile { margin-top: 1.25rem; }
	}
	
/* Tabelle für Aufzählungszeichen */
table.count-character-table { background: none; margin-bottom: 0; border: none; }
table.count-character-table tr td { padding: 0 0.5rem 0 0; font-size: inherit; }
table.count-character-table tr td:first-child { width: 3rem; }

tbody, tfoot, thead {
    border: none;
    background: none;
}

/* Akkordeon */
ul.accordion { margin-left: 0; border: 1px #ddd solid; border-radius: 24px; background: #fff; }
ul.accordion > li { border-bottom: 1px #ddd solid; }
ul.accordion > li:last-child { border-bottom: none; }
.accordion .accordion-navigation > a { background: none; font-family: 'Open Sans', sans-serif; }
.accordion .accordion-navigation > a:hover, .accordion .accordion-navigation.active > a  { background: #f5f5f5; }
.accordion .accordion-navigation > .content.active, .accordion dd > .content.active { background: none; }
.accordion-title { border: none; color: #333; font-size: 1rem; text-align: left; }
.accordion-title:focus, .accordion-title:hover { background-color:#f9f9f9; }
.accordion-title::before { content: none; }
/* Foundation setzt im aufgeklappten Zustand ein "-" ueber .is-active -
   das ist spezifischer als die Regel darueber und braucht ein eigenes Reset. */
.is-active > .accordion-title::before { content: none; }
:last-child:not(.is-active) > .accordion-title { border-bottom: none; }
ul.accordion > li:first-child .accordion-title:focus,
ul.accordion > li:first-child .accordion-title:hover {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}
ul.accordion > li:last-child .accordion-title:focus,
ul.accordion > li:last-child .accordion-title:hover {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}


/* Aufklappbare Bereiche (Foundation Toggler) */
.toggle-content:not(.is-open) { display: none; }
.toggle-trigger { padding: 0; border: none; background: none; color: #1779ba; cursor: pointer;
	font-family: inherit; font-size: inherit; line-height: inherit; text-align: left; vertical-align: baseline; }
.toggle-trigger:hover, .toggle-trigger:focus { color: #126195; }


/* Slider */
.range-slider-handle, .range-slider-handle:hover { background: #641767; }
.range-slider-handle { width: 2rem; height: 1.5rem; }

/* Tabs (Foundation) */
.tabs { border-bottom: 1px #ddd solid; }
.tabs .tab-title.active, .tabs dd.active {  }
.tabs .tab-title.active > a, .tabs dd.active > a { color: #333; background-color: #fff; border: 1px #ddd solid; border-bottom: none; }
.tabs .tab-title > a, .tabs dd > a { font-family: 'Open Sans', sans-serif; color: #777; text-align: center; background-color: #eee; }

.tabs .dranbleiben-tab-1 { width: 50%; }
.tabs .dranbleiben-tab-2 { width: 50%; }
	@media only screen and (max-width: 40em) { 
		.tabs .dranbleiben-tab-1, .tabs .dranbleiben-tab-2 { width: 100%; }
	}
	@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
		.tabs .dranbleiben-tab-1 { width: 50%; }
		.tabs .dranbleiben-tab-2 { width: 50%; }
	}

/* Cards */
.card {
    border-radius: 24px;
}

/* Texte kürzen */
.crop-inside-container { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crop-width-120-for-small { display: inline-block; }
	@media only screen and (max-width: 40em) { 
		.crop-width-120-for-small { 
			width: 120px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis; } 			
	}

/* Bilder und Avatare */
.owner-avatar { width: 40px; height: 40px; object-fit: cover; }

.img-small-circle-wrapper img { 
	display: inline-block;
  	max-width:80px;
  	max-height:60px;
  	width: auto;
  	height: auto;
  	overflow: hidden;
  	border-radius: 12px;
}
img.img-small-circle { height: 60px; }
	@media only screen and (max-width: 40em) { 
		.img-small-circle-wrapper img { max-width:50px; max-height:50px;  }
		img.img-small-circle { height: 50px; }
	}

img.img-medium-circle { height: 150px; border-radius: 50%; }
img.img-circle { border-radius: 50%; } 

/* Runde Icons */
.purple-circle, .grey-circle { width: 3rem; height: 3rem; overflow: hidden; border-radius: 50%; text-align: center;	}
.purple-circle { background: #641767; }
.grey-circle { background: #aaa; }
.purple-circle span { line-height: 3rem; color: #fff; }
.grey-circle span { line-height: 3rem; color: #ddd; }

.done .purple-circle { background: #aaa; }
.done .purple-circle span { line-height: 3rem; color: #ddd; }

a .purple-circle:hover, a .purple-circle:focus  { /* background: #8b208f; */ }
.done a .purple-circle:hover, .done a .purple-circle:focus  { background: #bbb; }


/* Abstände */
.horizontal-separator-2em { margin-top: 2rem; padding-top: 2rem; border-top: #ccc 1px solid; }

/* Icon-Größen ----------------------------- */
.tile-icon { font-size: 4rem; padding-bottom: 0.5rem; text-align: center; }
	@media only screen and (max-width: 40em) { 
		.tile-icon { font-size: 3.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center; }
	}
.very-big-icon { font-size: 7rem; }
.medium-big-icon { font-size: 3.5rem; }
	@media only screen and (max-width: 40em) { 
		.very-big-icon { font-size: 5rem; } 
		.medium-big-icon { font-size: 2.5rem; }
	} 
.big-icon { font-size: 3rem; }
.medium-icon { font-size: 2rem; }
.h3-icon { font-size: 1.6875rem; }
.normal-icon { font-size: 1.25rem; }
.normal-2-icon { font-size: 1.5rem; }
.small-icon { font-size: 1rem; }
.small-transparent-icon { font-size: 0.875rem; color: #666; }
.dranbleiben-menu-icon { font-size: 1rem; padding-right: 0.5rem; }
.dranbleiben-menu-icon-small { font-size: 0.9rem; padding-right: 0.5rem; }

.caret-icon { font-size: 1.1rem; color: #333; margin-left: 0.25rem; }
.caret-down-icon { padding-left: 0.25rem; font-size: 1.1rem; color: #aaa;  }

.back-icon { color: #fff; font-size: 2rem; padding-right: 1rem; }
.back-icon:hover, .back-icon:focus { color: #fff; }
	@media only screen and (max-width: 64em) { 
		.back-icon { font-size: 2rem; } 
	} 
	@media print { .back-icon { display: none; } }

.tile-action-icon, .tile-action-icon-2, .tile-action-icon-3, .tile-action-icon-4 { 
	font-size: 1.5rem;
	display: block; 
	position: absolute; 
	padding: 5px;
	z-index: 5; }
	@media only screen and (max-width: 40em) { .tile-action-icon, .tile-action-icon-2, .tile-action-icon-3 { font-size: 1.75rem; } }
	
.tile-action-icon { 
	top: 0.5rem; 
	right: 1rem; }

.tile-action-icon-2 { 
	bottom: 1rem; 
	right: 1.5rem;
	padding: 10px; }

.tile-action-icon-3 { 
	bottom: 1rem; 
	left: 1.5rem;
	padding: 10px; }

.tile-action-icon-4 { 
	top: 0; 
	right: 1rem; }

.smiley-icon { font-size: 1.15rem; }

span.read-more a, span.read-less a { 
	color: #0078a0 !important; font-size: 0.8rem;
}
span.read-more a { padding: 2px 7px; border: 1px #ddd solid; border-radius: 24px; }
span.read-more a:hover, span.read-more a:focus { background: #f5f5f5; }
span.read-less a { display: inline-block; margin-bottom: 0.5rem; }

/* Sichtbarkeit -------------------------------------- */
@media only screen and (max-width: 64em) { 
	.dranbleiben-show-for-large-only { display: none; }
}

/* Buttons ------------------------------------------- */
/* Ausnahme für Kendo Buttons */
button:not(.k-button):not(.menu-icon):not(.trix-button):not(.close-button):not(.dropdown-menu-item):not(.toggle-trigger), .button {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	margin-bottom: 0.875rem;
	background: #298730;
	border: 1px #298730 solid; 
	border-radius: 24px;
	position: static; }
button:not(.k-button):not(.menu-icon):not(.trix-button):not(.close-button):not(.dropdown-menu-item):not(.toggle-trigger):hover,
.button:hover, .button:focus { background: #237429; }

button.secondary, .button.secondary {
    background: transparent !important;
    border-color: #ccc !important;
    color: #333 !important; }
button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
    background: #aaa !important;
    color: #fff; }
     
button.tiny, .button.tiny {
	font-size: 0.8rem;
}
     
button.white, .button.white {
   	border: 1px #fff solid !important;
    color: #fff !important; }

.small-text {  font-size: 0.875rem; }
.change-link {  font-size: 0.875rem; margin-right: 1rem; margin-bottom: 0.75rem; display: inline-block; }
.change-link.change-link-border { padding: 0.35rem 0.75rem; border: 1px #ccc solid; border-radius: 24px; }
.change-link.change-link-border:hover { background: #f0f0f0; }
.change-link.active {  color: #333; }
   	@media only screen and (max-width: 64em) { 
   		.change-link { 
   			display: inline-block; 
   			margin-right: 1rem;
   			margin-bottom: 0.75rem; }
   	}
   	
.menu-link {  margin-right: 1rem; }
.menu-link.active {  color: #333; }
   	
.block-link {  font-size: 0.875rem; display: inline-block;   }
   	@media only screen and (max-width: 40em) { .list-box.badges-with-space .block-link { margin-top: 0.5rem; } }
   	
.neutral-link { color: #333; }
.neutral-link:hover, .neutral-link:focus { color: #333; }

/* Button Group --------------------------------- */
.button-group {
    display: inline-block;
}
.button-group .button:first-child {
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}

.button-group .button:last-child {
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}
   
.button-group .button { 
	color: #999; 
	background: #e9e9e9;
	padding: 0.75rem 1rem;
	margin-right: -5px;
	border: 1px #ccc solid !important;
	border-radius: 0;
	font-size: 0.875rem;
	min-width: 5rem;}
.button-group li:first-child .button { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.button-group li:last-child .button { border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-right: 1px #ccc solid !important; }


.button-group .button.active { 
		color: #222; 
		background: #fff; }

.button-group.wider { width: 100%; }
.button-group.wider>li { width: 50%; }
.button-group.wider .button { width: 100%;  }

.button-group-stack .button-group.stack .button  {
	background: #f5f5f5;
	padding: 1rem;  
	border: 1px #ddd solid !important;
	border-radius: 24px;
	font-size: 1rem;
	color: #333;
}
.button-group-stack .button-group.stack .button.active, .button-group-stack .button-group.stack .button:hover {
	background: #eee;
	border-color: #999 !important;
	color: #333;
}

.button-group-stack .button-group.stack>li .button, .button-group-stack .button-group.stack>li>button {
	margin: 0 0 15px 0;
}

/* Reveal (modaler Dialog) */
.reveal-overlay {
    z-index: 10000;
}

.reveal .button-group-stack {
	max-height: 350px;
	overflow-y: auto;
}

.reveal {
    border-radius: 24px;
    padding: 3rem 1.875rem 1.875rem;
    border: 1px solid #999;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    top: 4rem; }
    @media only screen and (min-width: 40.063em) {
		.reveal { max-width: 45rem; }
	}

/* Buttons, Dropdowns ------------------------ */
.switch input:checked+label { background: #641767; }
.switch input[type="checkbox"] { width: auto; }
.switch input { display: none; }

.dropdown-pane { z-index: 999999; max-width: 300px; padding: 0; border-radius: 24px; }
.dropdown-pane li a, .dropdown-pane li button {
	color: #333 !important; padding: 1rem 0.5rem !important; font-size: 0.875rem !important; text-align: left; }
	@media only screen and (min-width: 64.063em) { 
		.dropdown-pane li a, .dropdown-pane li button { color: #333 !important; padding: 0.75rem; text-align: left; }
	}
.dropdown-pane li { border-bottom: 1px #ddd solid; width: 100%; }
.dropdown-pane li:last-child, .f-dropdown li:empty { border-bottom: none; }
.dropdown-pane.is-open { box-shadow: 0 2px 10px rgba(0,0,0,.2); margin-top: 5px; }
.dropdown-pane.wide { max-width: 400px; }
.dropdown-pane.medium-wide { max-width: 300px; }
.dropdown-pane:before, .dropdown-pane:after { display: none; }

.dropdown-menu-item {
	color: #888;
	font-size: 0.9rem;
	padding: 0.4em;
	margin-right: 1em;
}

.dropdown-button { 
	color: #666; 
	font-size: 0.9rem; 
	background: transparent; 
	padding: 0.35rem 1rem 0.35rem 1rem; 
	margin: 0 0 0.875rem;
	border: 1px #ccc solid;
	border-radius: 24px;
	display: inline-block; }
	@media only screen and (max-width: 40em) { 
		.dropdown-button { padding: 0.5rem 1rem 0.5rem 1rem; /* width: 100%; display: block; */ }
	}

.dropdown-button.simple { 
	color: #222; 
	font-size: 0.8rem; 
	background: transparent; 
	padding: 0.25rem 0; 
	border: none; 
}

.dropdown-button.main { 
	color: #fff; 
	font-size: 0.8rem; 
	background: #298730;
	border: 1px #298730 solid;
	padding: .525rem 1.25rem .5875rem;
}
.dropdown-button.main .caret-down-icon { color: #fff; }

.dropdown-button.secondary { 
	font-size: 0.8rem; 
	padding: .525rem 1.25rem .5875rem;
	border-color: #aaa;
}

.dropdown.button.inside-form {
	background: #f5f5f5;
	text-align: left;
	padding: 0.5rem 0.5rem;
}
.dropdown.button.inside-form:hover { color: #333; }
.dropdown.button.inside-form::after { right: 0.875rem; }

/* Panels, Tiles etc. ------------------------------------- */
.callout {
    border-radius: 24px;
    background-color: #f9f9f9;
}

.sticky-top-fixed {
	position: fixed;
	top: 0px;		
	width: auto;
}

.tile-container > .cell {
	padding-left: 5px;
	padding-right: 5px;
}

.tile-container.more-padding-for-comment .tile-comment { padding-top: 1rem; }

.tile-menu .column, .tile-menu .columns {
	padding-left: 5px;
	padding-right: 5px;
	margin: 0 0 20px;
}
@media only screen and (max-width: 40em) { 
	.tile-menu { width: 100%; margin: 0 0 10px; }
	.tile-menu .column, .tile-menu .columns { margin: 0 0 10px; }
}

.tile {
	padding: 10px 20px;
	height: 180px;
	width: 100%;
	border-radius: 24px;
	margin-bottom: 10px; }
	@media only screen and (max-width: 40em) { 
		.tile { height: 150px; padding: 10px; }
		.tile.less-height-for-small { height: 150px; }
	}

.tile.less-padding { padding: 10px; }

.image-tile {
	height: 180px;
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 24px;
	margin-bottom: 10px; }
	@media only screen and (max-width: 40em) { .image-tile { height: 150px; } }
.image-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center; }

.image-tile .image-tile-header { 
	position: absolute;
	z-index: 1;
	bottom: 0px; 
	right: 0px; 
	width: 100%;  
	padding: 0.5em; 
	opacity:0.8; }

.active .image-tile-header { background: #003a7a; }
.inactive .image-tile-header { background: #555; }
.completed .image-tile-header { background: #641767; }

.tile h3, .image-tile h3,
.tile h4, .image-tile h4 { color: #fff; font-weight: 400 !important; margin-bottom: 0.5rem; }
.tile h3 { font-size: 1.25rem; }
.image-tile h3 { font-size: 1rem; }
	@media only screen and (max-width: 40em) {
	    .tile h3 { font-size: 1.15rem !important; text-align: center; }
	    .tile h4 { margin-bottom: 0; }
	}

.tile-comment { margin-top: 0.5rem; line-height: 1.25rem; }
.tile-comment-no-margin { margin-top: 0.5rem; margin-bottom: 0.5rem; }
	@media only screen and (max-width: 40em) { 
   		.tile-comment { display: none; }
   		.tile-comment.show-always { display: block; margin-top: 0; }
   		.image-tile .tile-comment { display: block; }
   		.tile-comment-no-margin { margin-top: 2rem; }
   		.tile-comment-no-margin a { max-width: 70%; }
   	}

.tile  p, .image-tile  p, .tile  ul li, .tile .list-item, .tile-comment { color: #fff; font-size: 0.8125rem !important; }
.tile .list-item:hover, .tile .list-item:focus { background: none; }
.tile a, .image-tile a { color: #fff !important;  }
.tile .button, .image-tile .button { margin-bottom: 0;  }

.tile.bg-purple h3,
.tile.bg-blue h3,
.tile.bg-green h3,
.tile.bg-darkgrey h3,
.tile.bg-purple p,
.tile.bg-blue p,
.tile.bg-green p,
.tile.bg-darkgrey p,
.tile.bg-purple div,
.tile.bg-blue div,
.tile.bg-green div,
.tile.bg-darkgrey div { color: #fff; }
.tile.bg-lightgrey h3,
.tile.bg-lightgrey p { color: #666; }
.tile.bg-midgrey h3,
.tile.bg-midgrey p,
.tile.bg-midgrey .tile-comment { color: #666; }

.medium-tile {
	display: table;
 	text-align: center;
	padding: 0.5rem;
	height: 150px;
	width: 100%;
	color: #333;
	background: #fff;
	border-radius: 24px;
	opacity: 0.85;
	margin-bottom: 1rem; 
	font-size: 0.875rem; }
   .medium-tile div {
   		display: table-cell;
 		vertical-align: middle;
   }
   .medium-tile .count-character {
   		font-size: 3rem;
   		display: block;
   		padding: 0 0.25rem 1.5rem;
   }
   @media only screen and (max-width: 40em) { 
   		.medium-tile { min-height: 100px; }
   		.medium-tile .count-character { 
   			font-size: 2.5rem;
	   		padding: 0 0.25rem 1rem;
	    }
   	}
   
.small-tile {
	display: table;
 	text-align: center;
	padding: 0.5rem;
	height: 100px;
	width: 100%;
	color: #333;
	background: #fff;
	border-radius: 24px;
	opacity: 0.85;
	margin-bottom: 0.5rem; 
	font-size: 0.875rem; }
	@media only screen and (max-width: 40em) { 
   		.small-tile { min-height: 70px; }
   	}
   .small-tile:hover, .small-tile:active {
   		background: #f0f0f0;
   		color: #333;
   }
   .small-tile div {
   		display: table-cell;
 		vertical-align: middle;
   }
   .small-tile .count-character {
   		font-size: 1.25rem;
   		padding: 0 0.25rem;
   }
   .small-tile .small-tile-icon {
   		display: block;
   }
   .small-tile-comment-panel {
   		margin: 1rem 0 0.5rem;
   		font-size: 0.875rem;
   		color: #999;
   }
   .small-tile-comment-panel .count-character {
   		/* font-size: 1.15rem; */
   		font-size: 0.875rem;
   		padding: 0 0.25rem;
   		font-weight: 800;
   		color: #999;
   }
   .small-tile.no-hover {
   		background: #fff;
   }
 
 .very-small-tile {
	display: table;
 	text-align: center;
	padding: 0.5rem;
	height: 50px;
	width: 100%;
	color: #333;
	background: #eee;
	border-radius: 24px;
	opacity: 0.95;
	margin-bottom: 0.5rem; 
	font-size: 0.875rem; }
	@media only screen and (max-width: 40em) { 
   		.very-small-tile { min-height: 40px; }
   	}
.very-small-tile:hover, .very-small-tile:active {
    background: #ddd;
    color: #333;
}
.very-small-tile p {
    display: table-cell;
    vertical-align: middle;
}
   
.tipp, .tipp-2 { 
	margin: 1rem 0 0.5rem; 
	border-bottom: 1px #ddd solid;
	border-radius: 24px;
	background: transparent; 
	line-height: 1.5rem; 
	padding-left: 0;  }
.tipp p.title { font-size: 0.8125rem; color: #aaa; }
.tipp-2 p.title { color: #aaa; }
.tipp h5, .tipp-2 h5 { color: #666; font-size: 0.8125rem; }
.tipp p, .tipp div, .tipp li { font-size: 0.8125rem; color: #888; margin-bottom: 0.25rem; }
.tipp-2 p, .tipp-2 div, .tipp-2 li { color: #888; margin-bottom: 0.25rem; }
.tipp li, .tipp-2 li  { margin-bottom: 0; }
.tipp ul, .tipp-2 ul  { margin-bottom: 0; line-height: 1.5rem; }
.tipp .button, .tipp-2 .button { margin-bottom: 0; color: #888; }
	@media only screen and (max-width: 64em) { 
   		.tipp { display: none; }
   	} 
   	@media only screen and (min-width: 64.063em) { 
   		.tipp {  }
   	} 

.tipp.full-border, .tipp-2.full-border { border: 1px #ddd solid; padding: 1rem; }

.credit-item { margin-top: 4rem; width: 17rem; background: #f5f5f5; border: 1px #eee solid; padding: 1rem 0.5rem; }
.credit-item div { line-height: 1rem; }
.credit-item .count-character { line-height: 2rem; font-weight: normal; color: #ccc; }

/*--- Sticky Area ------------------------------------------*/
.sticky { z-index: 1000; }
.sticky.is-stuck { z-index: 2000; border-top-left-radius: 0; border-top-right-radius: 0; }

div.sticky-area-fixed {
	position: fixed;
	bottom: 0;
	height: 5rem;
	background: #fff;
	border: 1px #aaa solid;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	padding: 1rem;
	margin-left: -1rem;
	box-shadow: 0px 0px 3px #999;
	width: auto; 
	z-index: 1000; }
   
/* Tooltips ---------------------------------- */
.has-tip, .has-tip:hover, .has-tip:focus { color: #999; border-bottom: none; font-weight: normal; }
table .has-tip, table .has-tip:hover, table .has-tip:focus { color: #333; }

label.has-tip { color: #999; }
label.has-tip:after, .has-tip.show-tip-hint:after { content: '\00a0\00a0\00a0 [?]'; } 
.has-tip.level-badge.show-tip-hint:after { content: ''; } 

.tooltip { max-width: 400px; }
	@media only screen and (max-width: 40em) { .tooltip { max-width: 90%; } }

/* Listen ------------------------------------------------- */
ul.expandable { list-style-type: none; padding-left: 0; margin-left: 0; }
ul.expandable li { line-height: 1.5em; }

.message-content .message { padding: 1em 0 1em; color: #333; }

.list-box { padding: 0; }
.list-box .header {
	padding: 1rem 0;
	color: #999;
	font-size: 0.9rem;
}
.list-box .header h2 { margin-bottom: 0; }

.list-box.border .content { border: 1px #ddd solid; border-radius: 24px; padding: 1em; }
.list-box.border .content .list-item:last-child { margin-bottom: 0; }

.list-box .content { /* background: #fff; */ }
.list-box .content .new-item { padding: 2rem 0 1rem; }
.list-box .content .list-item:last-child { border-bottom: none; }
/* .list-box .content .list-item:nth-child(odd) { background: #fafafa; } */

.list-box .content ul { padding-left: 0; }
.list-box .content .redactor-editor ul { padding-left: 2em; }
.list-box .content ul li { margin-left: 0; }

.list-box .content p { margin-bottom: 0.5rem; line-height: 1.5rem; }
.list-box.no-item-margin .content p { margin-bottom: 0.25rem; }
	@media only screen and (max-width: 40em) { .list-box .content p, .list-box .list-item { line-height: 1.5rem; } }	
.list-box .content .text-item p { margin-bottom: 1.25rem; }
.list-box .content .toggle-close,
.list-box .content .toggle-open { margin-left: 1rem; }

.list-item { min-height: 2rem; padding: 0rem 0 1.5rem; /* border-bottom: 1px #ccc solid; */ }
.list-item:hover { /* background-color: #fafafa; */ }
.list-item img { border-radius: 12px;  }
.list-item .message-text img { display: none;  }
.list-item-without-border .list-item { padding: 0.5rem 0; border-bottom: none; }

.dranbleiben-title p { margin-bottom: 0.5rem; }

a.link-container div, a.link-container p { color: #222; } 
   
/* Wizard -------------------------------------------------------------------------- */
.wizard-overview { margin: 0.5rem 0; border-bottom: 1px #ddd solid; padding-bottom: 0.5rem; }
.wizard-steps { border-bottom: #ddd 1px solid; }
.wizard-steps div { margin-bottom: 0.5rem; }
.wizard-steps div span { font-size: 0.875rem; padding: 0.5rem 0; }
.wizard-steps .active { font-weight: bold; }
   

/* Forms etc. --------------------------------------------- */

/* Überschreiben der Foundation Styles */
.input-group > :last-child, .input-group > :last-child.input-group-button > * {
    border-radius: 24px;
}
.input-group-button {
    display: inline-block;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: none;
  -moz-transition: none;
  transition: none; 
  font-size: 1rem;
  border-radius: 24px;
  color: #222;
  padding-left: 12px; }
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
textarea:focus,
select:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-color: #aaa; 
    outline: none; 
    border-radius: 24px;
    background-color: #fff; }
 a:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-color: #aaa; 
    outline: none; 
    background-color: transparent; }
    
form { margin-bottom: 0; }

input[type="checkbox"], input[type="radio"] { 
	width: 1.5rem; 
	height: 1.5rem; 
	border: 1px #333 solid;
	border-radius: 1.5rem;
	margin-bottom: 0;
	cursor: pointer;
	position:relative;
	-webkit-appearance: none; 
	-moz-appearance: none;
	appearance: none;
	-webkit-transition: .30s; }
	@media only screen and (max-width: 64em) { 
		input[type="checkbox"], input[type="radio"] { width: 1.4rem; height: 1.4rem; border-radius: 1.4rem; }
	}
@-moz-document url-prefix() { 
	input[type="checkbox"], input[type="radio"] { width: 1.3rem; height: 1.3rem; }
}

input[type=checkbox]:checked, input[type="radio"]:checked {
	background-color: #641767;
	/* background-color: #aaa; */
	border-color: #aaa;
}

input[type="checkbox"]:checked:before, input[type="radio"]:checked:before {
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 1.5rem;
	text-align: center;
	color: #fff;
	font-family: 'icomoon';
	content: '\e370';
	}
	@media only screen and (max-width: 64em) { 
		input[type="checkbox"]:checked:before, input[type="radio"]:checked:before { line-height: 1.4rem; }
	}

input[type=checkbox]:active, input[type="radio"]:active {
	background-color: #ccc;
}

.list-item input[type=checkbox]:checked, .task-detail input[type=checkbox]:checked {
	background-color: #aaa;
	border-color: #aaa;
	color: #eee;
}
.list-item input[type="checkbox"]:checked:before, .task-detail input[type=checkbox]:checked:before {
	color: #eee;
}

input[type="checkbox"] + label, input[type="radio"] + label { color: #222; }
input[type="radio"] + label { margin-left: 0; margin-right: 0; padding: 0 0.5rem; }

input[type="file"] { width: auto; }

textarea { min-height: 5rem; resize: none; }
textarea.less-height { min-height: 2.3125rem !important; }
.editable-label textarea { min-height: 10rem; resize: none; }
textarea.autosize {
    field-sizing: content;
    min-height: 5rem;
	max-height: 500px !important;
	overflow: auto;
}

.editable-label:hover, .editable-label:focus  { cursor: pointer; }

input[type="search"] {  font-size: 0.875rem; border-radius: 20px; height: 2.5rem; }
.search-box { 
	font-size: 0.875rem; }
	@media only screen and (min-width: 64.063em) { .search-box { max-width: 250px; } } 

label, .label-text, .edit-panel .label-text {
	font-size: 1rem;
	color: #999;
  	margin-bottom: 0.5rem;
}
.edit-panel label {
	color: #999;
}
.label-header { font-size: 1rem; font-weight: 600; color: #333; }

select, select:hover { font-family: 'Open Sans', sans-serif; font-size: 1rem; background-color: #fff; padding: 0.25rem 0.5rem; }

input[type=color]:disabled, input[type=color][disabled],
input[type=color][readonly], input[type=date]:disabled, input[type=date][disabled],
input[type=date][readonly], input[type=datetime-local]:disabled,
input[type=datetime-local][disabled], input[type=datetime-local][readonly],
input[type=datetime]:disabled, input[type=datetime][disabled],
input[type=datetime][readonly], input[type=email]:disabled, input[type=email][disabled],
input[type=email][readonly], input[type=month]:disabled, input[type=month][disabled],
input[type=month][readonly], input[type=number]:disabled, input[type=number][disabled],
input[type=number][readonly], input[type=password]:disabled, input[type=password][disabled],
input[type=password][readonly], input[type=search]:disabled, input[type=search][disabled],
input[type=search][readonly], input[type=tel]:disabled, input[type=tel][disabled],
input[type=tel][readonly], input[type=text]:disabled, input[type=text][disabled],
input[type=text][readonly], input[type=time]:disabled, input[type=time][disabled],
input[type=time][readonly], input[type=url]:disabled, input[type=url][disabled],
input[type=url][readonly], input[type=week]:disabled, input[type=week][disabled],
input[type=week][readonly], textarea:disabled, textarea[disabled],
textarea[readonly] {
    background-color: #eee;
    border-radius: 24px;
}

input[type=submit] {
    border-radius: 24px;
}

/* Badges ------------------------------------ */
.transparent-badge { 
	font-size: 0.75rem; 
	color: #000; 
	padding: 0.025rem 0.5rem;
	background: #fff; 
	opacity: 0.8; 
	border-radius: 6px;
	display: inline-block; }

.feature-badge { 
	font-size: 0.85rem;
	font-weight: 700;
	color: #333; 
	padding: 0 0.35rem;
	background: #ddd;
	border-radius: 4px;
	vertical-align: middle;
	display: inline-block; 
	margin-bottom: 0.15rem; 
	margin-right: 0.5rem; 
	padding: 3px 5px; }

.simple-badge { 
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	line-height: 1.1;
	color: #fff;
	padding: 0 0.35rem;
	background: linear-gradient(90deg, rgba(227,48,126,1) 19%, rgba(223,141,177,1) 89%);
	border-radius: 4px !important;
	vertical-align: middle;
	display: inline-block;
	margin-bottom: 0; }

.normal-badge, .link-badge, .link-badge-2 {
	padding: 0.05rem 0.5rem;
	border-radius: 24px;
	text-align: center;
	font-size: 0.8125rem;
	display: inline-block;
	font-style: normal;	
	min-height: 24px;
	margin-bottom: 0.5rem;
	}
.normal-badge.tiny { 
	font-size: 0.8125rem;
}

.text-badge { 
	font-size: 0.875rem; 
	font-style: normal;	
	color: #999;
	display: inline-block;
	padding-bottom: 5px;
}

.normal-badge { background: #f5f5f5; color: #222; border: 1px #e0e0e0 solid; min-width: 70px; }
.link-badge, .link-badge-2 { background: transparent; border: 1px #aaa solid; min-width: 30px; }
.link-badge-2 { border-radius: 24px; margin: 0.25rem 0; }

.link-badge .icon-angle-right { font-size: 1.25rem; }

.level-badge { 
	font-size: 0.875rem; 
	text-align: center; 
	display: inline-block; 
 	color: #999;
 	padding-bottom: 5px;
}
.level-badge:hover, a.level-badge:focus, a.level-badge:active {
	text-decoration: none;
} 
.level-badge.high {  color: #298730 !important; }
.level-badge.medium { color: #0d234b!important; }
.level-badge.low { color: #9a239f !important; }

.list-box.badges-with-space .level-badge,
.list-box.badges-with-space .link-badge-2 { margin-right: 1rem; margin-top: 0.75rem; }
.list-box.badges-with-space .list-item { padding: 1.5rem 0; }

/* --------------- Tables -------------- */
.feedback-table { width: 100%; }
.feedback-table thead th { padding: 0; }
.feedback-table thead th:last-child { padding-right: 9rem; }
.feedback-table .row-header { width: 50%; font-size: .875rem; font-weight: normal; }

th.rotate { height: 11rem; white-space: nowrap; }
th.rotate > div {
  transform: 
    translate(1.25rem, 3rem)
    rotate(315deg);
  width: 2rem;
}
th.rotate > div > span {
  border-bottom: 1px solid #ddd;
  padding: 0 0.25rem 0.5rem;
}

/* Animationen --------------------------- */
.dranbleiben-fadein-500, .dranbleiben-fadein-1000,
.dranbleiben-fadein-fast-after-delay,
.dranbleiben-fadein-slow-after-1s-delay {
	opacity: 0;
	animation-name: fadein; 
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-delay: 0;
	/* fallback */
	-ms-animation: fadein 100ms; }
	@media all and (-ms-high-contrast:none) {
     	*::-ms-backdrop, .dranbleiben-fadein-500, .dranbleiben-fadein-1000,
		.dranbleiben-fadein-fast-after-delay, .dranbleiben-fadein-slow-after-1s-delay { opacity: 1; } /* IE11 */
    }

.dranbleiben-fadein-500 {
	animation-duration: 500ms;
}

.dranbleiben-fadein-1000 {
	animation-duration: 1000ms;
}

.dranbleiben-fadein-fast-after-delay {
	animation-duration: 100ms;
	animation-delay: 300ms;
}

.dranbleiben-fadein-slow-after-1s-delay {
	animation-duration: 1s;
	animation-delay: 750ms;
}
	
@keyframes fadein { 
	from { opacity: 0; } 
	to { opacity: 1; } 
}

@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* E-Mail Formatierung - wird auch in der Web-App gebracht ----- */
.infoBox { background-color: #f0f0f0; color: #222; padding: 0.5em; margin: 1em 0; }
.textBox { background-color: #f0f0f0; color: #000; padding: 0.5em 1em; margin: 1em 0; }