/* Box
-------*/

	.app-ui-box {
		display: block;
		background-color: #FFFFFF;
		position: relative;
		margin-top: 20px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 2px 6px -3px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 2px 6px -3px rgba(0,0,0,0.75);
		box-shadow: 0px 2px 6px -3px rgba(0,0,0,0.75);
	}

/* Header
----------*/

	.app-ui-box--header {
		font-size: 16px;
		padding: 10px 20px 10px 20px;
		font-weight: 600;
		color: #424242;
		border-bottom: 1px solid #DDDDDD;
		background-color: #F8F8F8;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.app-ui-box--header:hover {
		color: #333333;
	}

/* Box-Header Icon
-------------------*/

	.app-ui-box--header img {
		display: block;
		float: left;
		height: 18px;
		vertical-align: sub;
		margin-right: 5px;
		position: relative;
		top: 3px;
		opacity: 0.8;
	}

/* Box-Inhalt
--------------*/

	.app-ui-box--body {
		padding: 0 20px 20px 20px; /*** nach oben immer offen, weil alles 20px Abstand hat ***/
		position: relative;
	}

		.app-ui-box--body:after {
			content: '';
			clear: both;
			display: table;
		}

/* Footer
----------*/

	.box-footer {
		padding: 0 20px 20px 20px;
	}

	.box hr {
		border: none;
		padding-top: 0;
		margin: 20px -21px 20px -21px;
		height: 20px;
		background-color: #eff1f3;
		border-bottom: 1px solid #e6e6e6;
		border-top: 1px solid #e6e6e6;
	}

/* Akkordeon-Funktion
----------------------*/

	.box-accordion-header {
		position: relative;
		padding: 20px 20px 0 20px;
		border-bottom: 1px solid #efefef;
		cursor: pointer;
	}

	.box-accordion-header.is-open {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.box-accordion-header:hover {
		background-color: #F6F6F6;
	}

	.box-accordion-header.is-open:hover {
		background-color: #FFFFFF;
	}

	/* Pfeil
	---------*/

	.box-accordion-header:before {
		content: "\f105";
		font-family: FontAwesome;
		display: block;
		position: absolute;
		height: 100%;
		width: 30px;
		font-size: 30px;
		top: 28px;
		right: 20px;
	}

	.box-accordion-header.is-open:before {
		content: "\f107";
		right: 28px
	}

	.box-accordion-content {
		display: none;
		padding: 0 20px 20px 20px;
	}

	.box-accordion-content h3 {
		margin-top: 0;
	}

/* Aufklappbar
---------------*/

	.box--collapsible {
		border-bottom: none;
	}

	.box--collapsible {
		border-bottom: none;
	}

	.box--collapsible.open .app-ui-box--body {
		border-bottom: 1px solid #DDDDDD;
	}

	.box--collapsible .box-header {
		cursor: pointer;
	}

	.box--collapsible .box-header:before {
		content: '';
		float: left;
		position: absolute;
  		top: 13px;
		right: 10px;
		display: block;
		height: 16px;
		width: 16px;
		margin-right: 5px;
		background-image: url('/core/nureinshop/ui/box/pub/img/caret-right.svg');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 14px auto;
	}

	.box--collapsible.open .box-header:before {
		background-image: url('/core/nureinshop/ui/box/pub/img/caret-down.svg');
	}

	.box--collapsible.open .box-header,
	.box--collapsible.open .box-header * {
		color: #000000;
	}

	.box--collapsible .box-header:hover {
		opacity: 0.8;
	}

	.box--collapsible app-ui-box--body {
		display: none;
	}