/*
	Public-Classes CSS
*/


/* ============================================ */
/* Service Classes								*/
/* ============================================ */

.disnone {
	display: none;
}

/* Float Classes */
.cmmp .public .left {
	float:left !important;
}
.cmmp .public .right {
	float:right !important;
}
.cmmp .public .clear {
	clear:both !important;
}

/* Text-Decoration Classes */
.cmmp .public .tdu {
	text-decoration:underline !important;
}
.cmmp .public .tdn {
	text-decoration:none !important;
}

/* Round corners */
.cmmp .public .rounded { 
	 -webkit-border-radius: 8px;
		-moz-border-radius: 8px;
			 border-radius: 8px;
}

/* Cursor */
.cursor-pointer {
	cursor:pointer !important;
}


/* Shadow */
.cmmp .shadow	{
	/*
				  Vertikaler  Farbe des 
				  Versatz     Schatten
					  |           |
	box-shadow: 10px 10px 15px silver inset;
				 |          |           |
		 Horizontaler       |           |
		 Versatz       Größe des     optional:
					   Schatten      Schatten nach innen
	*/
	-webkit-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
			box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.3);
}

/* Desaturate-Effect (Everything in shades of gray and on hover in color) */
.cmmp .desaturate {
    filter: grayscale(100%); /* Standard */
    -webkit-filter: grayscale(100%); /* Webkit */
/*    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit */
}

.cmmp .desaturate:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
}


.cmmp .zoom-pic img {
    -webkit-transform: scale(0.9,0.9);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(0.9,0.9);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    transform: scale(0.9,0.9);
    transition-timing-function: ease-out;
    transition-duration: 250ms;
}

.cmmp .zoom-pic:hover img {
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 400ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 400ms;
    transform: scale(1,1);
    transition-timing-function: ease-out;
    transition-duration: 400ms;
}



/* No Selection Class */
.cmmp .public .deselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
.cmmp .public .deselect ::selection,
.cmmp .public .deselect ::-moz-selection {
    background:transparent !important;
    color:inherit !important;
}

/* No Outline */
.cmmp .public .nool { 
	outline:none !important; 
}

/* Bild in original Größe anzeigen, aber nicht über 100% des Bereichs, 
   d.h. keine Scroller, auch nicht wenn das Bild grösser ist als der Viewport (einfach im Editor diese Klasse beim Bild mit angeben) */
.cmmp .max-width-100p {
	width:auto !important;
	height:auto !important;
	max-width:100% !important;
}

.cmmp .line-through				{ text-decoration:line-through; color:#CC0014; }
.cmmp .line-through span		{ color:#5B5B5B; }

.cmmp .button-round {
    display: inline-block;
    text-align: center;
    width: 28px;
    height: 28px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;

    background-color: #CC0014;
    color: #FFFFFF;
}

/* ============================================ */
/* Caddy 										*/
/* ============================================ */

/* Caddy */
.caddy .article_count_reduce,
.caddy .article_count_reduce.btn,
.caddy .article_count_increase,
.caddy .article_count_increase.btn {
	width:38px;
	font-weight:bold;
	cursor:pointer;
}

.caddy .article_count_reduce.input-group-text {
	padding-left:0.9rem;
}

.caddy .article_count_set_button {
	display:none;
	cursor:pointer;
}

.caddy .article_count_set_input {
	text-align:center;
}

.caddy .article_remove_one {
	margin-top:10px;
	font-size:12px;
	line-height:22px;
	text-align:center;
	cursor:pointer;
}

.caddy .order-value-sum {
	font-weight:bold;
}

/* Caddy Info */
#caddy_info {
	text-align:center;
}

#caddy_info img {
	width:auto;
	height:35px;

    filter: grayscale(100%); /* Standard */
    -webkit-filter: grayscale(100%); /* Webkit */
    filter: gray;  /* IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit */
}
#caddy_info img:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
}


#caddy_info .caddy-text {
	display:none;
}

@media (min-width: 992px) {
	#caddy_info img {
		width:auto;
		height:49px;
	}

	#caddy_info .caddy-text {
		display:block;
		font-size:14px;
		line-height:18px;
		margin-top:2px;
	}
}

/* ============================================ */
/* Product 										*/
/* ============================================ */

/* Category Group */
.p-catg-designation {
}

.p-catg-description {
}

.p-catg-step {
	position:relative;
	display:block;
	padding:15px !important;
	margin-bottom:15px;

	text-decoration:none;
	background-color:#FFFFFF;

	box-shadow: 4px 4px 12px rgba(0,0,0,.15);

	 -webkit-border-radius:16px 0px 16px 0px;
		-moz-border-radius:16px 0px 16px 0px;
			 border-radius:16px 16px 16px 16px !important;

	border-left:25px solid var(--color-primary);
}
.p-catg-step:hover {
	background-color:var(--color-primary) !important;
	color:var(--color-primary-text) !important;
}
.p-catg-step:hover:after {
	position:absolute;
	right:30px;
	top:15px;

	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	content:'\f054';
}

.p-catg-step-designation {
	font-weight:600;
}
.p-catg-step-description {
}

/* Category */

.p-cat-designation {
	margin-bottom:15px;
}

.p-cat-step-box	{
	display:block;
	/* justify-content:center;  x */
	/* align-items:center;  y */
	white-space: normal;

	position:relative;
	margin-bottom:30px;
	padding-left:0px !important;
	padding-right:0px !important;
	overflow:hidden;

	color:var(--color-primary) !important;

	border-radius:16px !important;
	box-shadow: 4px 4px 12px rgba(0,0,0,.15);

	transition: all .3s cubic-bezier(0,0,.5,1);

	background-position:center center !important;
	background-repeat:no-repeat !important;
	background-size:cover !important;

	height:260px;
	overflow:hidden;
}
@media (min-width: 768px) {
	.p-cat-step-box	{
		height:360px;
	}
}
.p-cat-step-box:hover {
	text-decoration:none !important;
}
.p-cat-step-box:focus {
}

.p-cat-step-designation {
	padding:10px;
	margin:0px;
	width:100%;

	text-align:center;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
	background-color:rgba(255,255,255,.5);
}

.p-cat-step-box:hover .p-cat-step-designation {
	text-shadow:none;

	background-color:rgba(204,0,20,.8);
	color:var(--color-primary-text);
}
.p-cat-step-box:focus .p-cat-step-designation {
	text-shadow:none;

	background-color:rgba(204,0,20,.8);
	color:var(--color-primary-text);
	text-decoration:underline;
}

.p-cat-step-details {
	position:absolute;
	left:auto;
	right:30px;
	bottom:30px;

	padding-top:15px;
	line-height:38px;
}

.public .p-cat-step-box .btn-primary {
	border-radius:16px !important;
	letter-spacing:2px;
	background-color:rgba(204,0,20,.9);
}
.public .p-cat-step-box .btn-primary:hover {
	background-color:rgba(255,255,255,.9) !important;
}

/* Product */
.p-designation {
	margin-bottom:0px;
}

.p-short-msg {
}

.p-description {
	margin-bottom:30px;
}

.p-picture {
}
.p-picture img {
	border:1px solid #CC0014;

	 -webkit-border-radius: 16px;
		-moz-border-radius: 16px;
			 border-radius: 16px !important;
}

/* Variationen */
.p-var-headline {
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:10px;
	 -webkit-border-radius: 16px 16px 0px 0px;
		-moz-border-radius: 16px 16px 0px 0px;
			 border-radius: 16px 16px 0px 0px !important;
}

.p-var-step {
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:0px;
	border-bottom:1px solid #5B5B5B;

	font-size:20px;
}
.p-var-step:nth-child(odd) {
	background-color:rgba(220,220,220, .3);
}

.p-var-step-designation {
	font-weight:bold;
}

.p-var-step-shortmsg {
	text-align:right;
}
@media (min-width: 992px) {
	.p-var-step-shortmsg {
		text-align:left;
	}
}

.p-var-step-ordernumber {
	text-align:right;
}
@media (min-width: 992px) {
	.p-var-step-ordernumber {
		text-align:left;
	}
}

.p-var-step-special-price-text {
	color:#CC0014;
}

.p-var-step-price {
	font-weight:bold;
}

.p-var-step-price.special {
}

/* Optionen */
.p-opt-headline {
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:10px;
	 -webkit-border-radius: 16px 16px 0px 0px;
		-moz-border-radius: 16px 16px 0px 0px;
			 border-radius: 16px 16px 0px 0px !important;
}

.p-opt-step {
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:0px;
	border-bottom:1px solid #5B5B5B;
}
.p-opt-step:nth-child(odd) {
	background-color:rgba(220,220,220, .3);
}


.p-opt-step-designation {
	font-weight:bold;
}

.p-var-step-info {
	font-size:16px;
	line-height:1.2;
}

.p-var-step-out-of-stock-text {
	color:#CC0014;
}

.p-var-delivery-text {
}

.p-opt-step-price {
	font-weight:bold;
	text-align:right;
}

.p-opt-step-shortmsg {
	font-size:16px;
	line-height:1.2;
}

/* Add to Caddy */
.p-js-off {
}
.p-js-on {
	display:none;
}

.p-add-caddy-wrapper {
	padding:30px 0px 30px 0px;
	background-color:rgba(220,220,220, .5);
	border-top:2px solid var(--color-primary);
	border-bottom:2px solid var(--color-primary);
	width:100%;
}

.p-add-caddy-price {
	padding:5px 0px 5px 0px;
	text-align:right;
	font-weight:bold;
	font-size:32px;
	vertical-align:middle;
}

.p-add-caddy-text-tax {
	font-size:16px;
	line-height:20px;
}

.p-add-caddy-count {
	width:80px !important;
	flex:none !important;
}

.p-add-to-caddy {
	text-align:right;
	justify-content:right;
	align-items:right;
	padding-top:10px;
}
@media (min-width: 992px) {
	.p-add-to-caddy {
		text-align:left;
		justify-content:left;
		align-items:left;
		margin-top:0px;
	}
}

.p-add-caddy-button {
	width:auto !important;
	padding-left:30px;
	padding-right:30px;
	font-weight:bold;
	letter-spacing:1px;
}

.p-add-caddy-not-possible {
	text-align:center;
	font-weight:bold;
}

/* Relatet Products */
.p-rel-wrapper {
	margin:30px 0px 30px 0px;
}

.p-rel-step {
	padding:15px;
}

.p-rel-step-designation {
	font-size:24px;
	text-align:center;
	margin-bottom:15px;
}

/* MwSt. und Versandkosten Hinweis am Ende der Seite */
.p-notice {
	text-align:center;
}

/* Fotorama Bildslider */
.fotorama {
	width:100%;
	margin-bottom:15px;
	overflow:hidden; 
}


.fotorama__fullscreen-icon {
	background-color:#CC0014 !important;
	border-radius:50%;
	top:15px;
	right:15px;
}

.fotorama__thumb-border {
	border-color: #CC0014;

	 -webkit-border-radius: 8px;
		-moz-border-radius: 8px;
			 border-radius: 8px !important;
}


.fotorama__thumb {
	 -webkit-border-radius: 8px;
		-moz-border-radius: 8px;
			 border-radius: 8px !important;
}


.fotorama__stage {
	 -webkit-border-radius: 16px;
		-moz-border-radius: 16px;
			 border-radius: 16px !important;

	border:1px solid var(--color-primary);
}

/* ============================================ */
/* Checkout										*/
/* ============================================ */

.delivery-adress {
	display:none;
}

/* =================================================================== */
/* block-box und popup-box 											   */
/* =================================================================== */

/* Sperrt Klicks */
.block-box {
	position:fixed;
	left:0px; top:0px;
	right:0px; bottom:0px;
	z-index:9001;
	background:url("/packages/exsys_cmmp/src/ExsysCmmp/media/service/transparent-white-50.png") left top repeat;
}
.block-box.absolute {
	position:absolute;
	z-index:9000;
}

.block-box.bg-transparent {
	background:url("/packages/exsys_cmmp/src/ExsysCmmp/media/service/transparent.png") left top repeat;
}
.block-box.bg-white {
	background:url("/packages/exsys_cmmp/src/ExsysCmmp/media/service/transparent.png") left top repeat;
}

.popup-block-box {
	/* bekommt über .block-box z-index:9000 */
}
.popup-button {
}

.popup-box {
	display:none;

	position:fixed;
	left:25px; right:25px; top:25px; bottom:25px;
	z-index:9002; /* .block-box hat z-index:9000, .block-box.absolute z-index:9001 */

	background-color:#FFFFFF;

	border:4px solid #B4CC1E;
	 -webkit-border-radius: 18px;
		-moz-border-radius: 18px;
			 border-radius: 18px;

	-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
			box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

}
.popup-box.bg-transparent {
	background:url("/packages/exsys_cmmp/src/ExsysCmmp/media/service/transparent-white-35.png") left top repeat;
}

.popup-box.h350 {
	top:calc(50vh - 175px); 
	bottom:calc(50vh - 175px);
}

.popup-box-content {
	position:absolute;
	left:15px; top:15px; right:20px; bottom:10px;
	padding:10px;
	overflow: auto;
	text-align:left;
	line-height:20px;
}

/* Ab Small -sm- Darstellen */
@media (min-width: 576px) {
	.popup-box-content {
		line-height:26px;
	}

	.popup-box {
		left:calc( 50vw - 200px ); right:auto;
		top:calc( 50vh - 240px ); bottom:auto;
		width:400px;
		height:480px;
	}
}
/* Ab Medium -md- Darstellen */
@media (min-width: 768px) {
	.popup-box {
		left:calc( 50vw - 300px ); right:auto;
		top:calc( 50vh - 210px ); bottom:auto;
		width:600px;
		height:420px;
	}
}
/* Ab Large -lg- Darstellen */
@media (min-width: 992px) {
	.popup-box {
		left:calc( 50vw - 300px ); right:auto;
		top:calc( 50vh - 210px ); bottom:auto;
		width:600px;
		height:420px;
	}
}
/* Ab Extra Large -xl- Darstellen */
@media (min-width: 1200px) {
	.popup-box {
		left:calc( 50vw - 300px ); right:auto;
		top:calc( 50vh - 210px ); bottom:auto;
		width:600px;
		height:420px;
	}
}

.popup-box-close-button {
	position:absolute;
	right:-25px; top:-25px;
	width:50px; height:50px;

	line-height:50px;
	text-align:center;

	 -webkit-border-radius: 25px;
		-moz-border-radius: 25px;
			 border-radius: 25px;

	background-color:#B4CC1E;
	color:#FFFFFF;

	font-size:36px;
	font-weight:bold;

	cursor:pointer;
}
.popup-box-close-button::before {
	content: "X";
}

/* Cunstom Project */

	.cmmp.startseite {
		margin-bottom:45px;
	}

	.cmmp.startseite .p-cat-designation {
		text-align:center;
		margin-bottom:30px;
		background-color:var(--color-primary);
		color:var(--color-primary-text);
		font-weight:500;
		padding:10px;
		 -webkit-border-radius: 16px;
			-moz-border-radius: 16px;
				 border-radius: 16px !important;
	}

	.cmmp.startseite .p-cat-step-designation {
		font-size:24px;
		line-height:1.2;
		text-align:center;
	}
	@media (min-width: 1400px) {
		.cmmp.startseite .p-cat-step-designation {
			font-size:20px;
		}
	}
	@media (min-width: 1800px) {
		.cmmp.startseite .p-cat-step-designation {
			font-size:24px;
		}
	}

	.cmmp.startseite [class *= "p-cat-step-box-"] { 
		display:none; 
	}

	/*
	.cmmp.startseite .p-cat-step-box	{
		height:380px;
	}

	@media (min-width: 576px) {
		.cmmp.startseite .p-cat-step-box	{
			height:520px;
		}
	}
	@media (min-width: 768px) {
		.cmmp.startseite .p-cat-step-box	{
			height:280px;
		}
	}
	@media (min-width: 992px) {
		.cmmp.startseite .p-cat-step-box	{
			height:380px;
		}
	}
	@media (min-width: 1200px) {
		.cmmp.startseite .p-cat-step-box	{
			height:420px;
		}
	}
	@media (min-width: 1400px) {
		.cmmp.startseite .p-cat-step-box	{
			height:260px;
		}
	}
	@media (min-width: 1800px) {
		.cmmp.startseite .p-cat-step-box	{
			height:340px;
		}
	}
	@media (min-width: 2000px) {
		.cmmp.startseite .p-cat-step-box	{
			height:320px;
		}
	}
	@media (min-width: 2200px) {
		.cmmp.startseite .p-cat-step-box	{
			height:360px;
		}
	}
	*/



/* jconfirm */
.jconfirm.jconfirm-white .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box {
    border-radius:16px;
	border:3px solid var(--color-primary);
}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    overflow:visible;
}