/* CSS Document B2B-Shop*/
*{box-sizing: border-box;}
body, td, th { font-family: Arial, sans-serif; font-size: 11pt;}
html, body { height: 100%; width: 100%; }
body {
	margin:0;
	padding:0;
	font-family: sans-serif;
	xfont-size: 12pt;
}
#idFullPage {
	width: 100%;
	height: 100%;
	
	display: grid;
	gap: .2rem .5rem;
	grid-template-columns: 1fr 50% 25% 1fr;	
	grid-template-rows: 8rem 1fr 3rem;
	grid-template-areas: 
		'. pageHeader pageHeader .'	
		'. mainLeft mainRight .'	
		'. pageFooter pageFooter .'
}

#idPageHeader {
	grid-area: pageHeader;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}
#idPageFooter {
	grid-area: pageFooter;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	font-size: .8rem;
}
#pageFooter > div { margin-left: .5em; }

#idMainLeft {
	xbackground-color: #ffc;
	grid-area: mainLeft;
}
#idMainRight {
	xbackground-color: #cfc;
	grid-area: mainRight;
}

div.wkTop {
	display: none;
}
div.wkRight {
	display: flex;
}
div.wkInfo {
	display:flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-content: center;
	align-items: flex-start;	
}

div.flexRow {
	display: inline-flex;
	flex-direction: row;
}

/* Style the header links */
a.menuBtn {
	background-color: white;
	color: black;
	padding: .3em .5em;
	margin: 0px 0;
	margin-left: .2em;
	border: 1px solid gray;
	border-radius: 4px;
	cursor: pointer;
	text-decoration:none;
	font-size: 12pt;
	display:inline-block;
	min-width:6em;
	white-space:nowrap;
	text-align:center;
}
a.menuBtn:hover {
  background-color: #039;
  color: white;
}

/* ------------ allg Klassen ------ */
.right { text-align:right;}
.left { text-align:left;}
.center { text-align:center;}
.top { vertical-align:top;}
.middle { vertical-align:middle;}
.bottom { vertical-align:bottom;}

.maxWidth { width:100%; }
.maxHeight { height:100%; }

.bk-ok     { background-color:#bfb;}
.bk-warn   { background-color:#ff9;}
.bk-error  { background-color:#fbb;}
.bk-hint   { background-color:#bbf;}
.bk-info   { background-color:#bbf;}
.bk-inactiv{ background-color:#bbb;}

div.banner-ok    { padding:1em 2em; font-size: 1.2em; font-weight:bold; background-color:#bfb;}
div.banner-warn  { padding:1em 2em; font-size: 1.2em; font-weight:bold; background-color:#ff9;}
div.banner-error { padding:1em 2em; font-size: 1.2em; font-weight:bold; background-color:#fbb;}
div.banner-info  { padding:1em 2em; font-size: 1.2em; font-weight:bold; background-color:#bbf;}

.hidden { display:none !important; }
.nowrap { white-space:nowrap; }
.pre { white-space: pre; }
.pre-line { white-space: pre-line; }

table {
	border-collapse: collapse;
}
table.grid {border-collapse:collapse}
table.grid td { border:1px solid gray; padding: 2px 5px;}
table.grid th { border:1px solid gray; padding: 2px 5px;}
tr.nogrid > td { border:none; }

h1 {color: #003399; font-size: 2.0rem;}
h2 {color: #003399; font-size: 1.6rem;}
h3 {color: #003399; font-size: 1.2rem;}
h4 {color: #003399; font-size: 1.0rem; font-weight:bold; margin-top:.3rem; margin-bottom:.1rem;}

/***** button, link ******/
a.button { display:inline-block; }
button, a.button {
	background-color: #003399;
	color: white;
	padding: .8rem .5rem;
	margin: 0px 0;
	border: none;
	cursor: pointer;
	white-space:nowrap;
	font-size:.9rem;
	text-decoration:none;
	width: 10rem;
	xheight: 1.6em;
	text-align:center;
}
button.inactive {
	background-color: #ccc;
	color: #666;
	border-color: #666;
}
button:hover, a:hover {
	opacity: 0.8;
}
.quietLink{
	color: black;
	text-decoration:none;
	cursor: pointer;
}

.menuKachel{
	border:2px solid #003399; 
	border-radius:0.5rem; 
	box-shadow: 5px 5px 8px #003399; 
	margin:1rem;
	padding:0.5rem;
	font-size: 2em;

	display:flex;
	align-items: center;
    justify-content: space-evenly;
    
	color: black;
	text-decoration:none;
	cursor: pointer;
}
.menuKachel img{
	max-width:10rem; 
	vertical-align: middle;
}


img.artImage {
	margin-top: 1rem;
	width: auto;
	max-width: 800px;
	height: auto;
	max-height: 600px;
}

@media only screen and (max-width: 900px) {
	#idFullPage {
		grid-template-columns: 66% 33%;	
		grid-template-rows: 8rem 1fr 3rem;
		grid-template-areas: 
			'pageHeader pageHeader'	
			'mainLeft mainRight'	
			'pageFooter pageFooter';
	
	}
}
@media only screen and (max-width: 700px) {
	#idFullPage {
		grid-template-columns: 100%;	
		grid-template-rows: 8rem auto 1fr 3rem;
		grid-template-areas: 
			'pageHeader'
			'mainRight'	
			'mainLeft'	
			'pageFooter';
	
	}
	div.wkTop {
		display: flex;
		justify-content: space-evenly;
		xborder-top: 2px solid gray; 
		xborder-bottom: 2px solid gray; 
		xpadding-top:0.5rem;
		xpadding-bottom:0.5rem;
	}
	div.wkRight {
		display: none;
	}
	div.wkInfo {
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	img.artImage {
		width: 100%;
		max-width: 400px;
	}
}

/**************************************************************************************/
.loginform {
  xmargin: 0 20%;
  padding: 2em;
}
.loginform input[type=text] {
	min-width: 20em;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
.loginform input[type=password] {
	min-width: 20em;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
.loginform button {
	background-color: #003399;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	cursor: pointer;
	min-width: 20em;
	border: 2px solid #003399;
}
.loginform button:hover {
	opacity: 0.8;
}

.loginform a.button {
	background-color: #003399;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	cursor: pointer;
	min-width: 20em;
	border: 2px solid #003399;
}
.loginform a.button:hover {
	opacity: 0.8;
}

.loginform button.buton-white {
	color: #003399;
	background-color: white;
}
.loginform button.buton-white:hover {
	background-color: #6699FF;
	border: 2px solid #6699FF;
}

.loginform button.button-1-3 {
	min-width: 6em;
}
.loginform button.button-2-3 {
	min-width: 13em;
}

/**************************************************************************************/
.suchform {
	display: inline-flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;  

	margin: 0 5%;
	padding: 1em;
  
}
/**************************************************************************************/
.kataloge {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    align-content: center;
}
.kataloge div{
	margin: 1em;
	border: 1px solid gray;
}
/* Container needed to position the overlay. Adjust the width as needed */
.overlay-container {
  position: relative;
  xwidth: 50%;
  xmax-width: 300px;
}
/* The overlay effect - lays on top of the container and over the image */
.title-overlay {
  position: absolute;
  left: -1em;
  bottom: -1em;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
}
/* When you mouse over the container, fade in the overlay title */
.overlay-container:hover .title-overlay {
  opacity: 1;
}
/**************************************************************************************/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/**************************************************************************************/
/* Popup-Modal  */
#idPopupModal {

  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
#idPopupModal.grid {
	display: grid;
	align-items: center;
	justify-items: center;

	position: fixed;
}
#idPopupFrame {
	xmax-height: 90%;

	background-color: #fff;
	border: 2px solid #eee;
	border-radius: .4em;
}

#idPopupFrame.position {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}

#idPopupFrame #idPopupContent {
	margin: .5em;
	margin-top: 1.5em;
}
#idPopupFrame .close {
  color: black;
  float: right;
  margin-top: -5px;
  font-size: 28px;
  font-weight: bold;
}
#idPopupFrame .close:hover,
#idPopupFrame .close:focus {
  color: #C33;
  text-decoration: none;
  cursor: pointer;
}

/**************************************************************************************/
img.smallArtPic{
	xwidth: 100px;
	max-width: 100px;
	max-height: 100px;
}

table.artliste td{
	xborder: 1px solid gray;
	padding: .3em;
}
table.wkListe{
	xborder: 1px solid gray;
	padding: .3em;
}
table.wkRight td{
	padding: .3em;
}
.warnBestand {
	padding: .2em .4em;
	background-color: rgba(200,200,50, .8);
	border-radius: .8em;
}
.alertBestand {
	padding: .2em .4em;
	background-color: rgba(250,80,80, .6);
	border-radius: .8em;
}

table.markLine tr:hover {
	background-color: rgba(0,0,0,.1);
}
table.markLine tr.noMark {
	background-color: inherit;
}

.flexContainerWrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.flexContainerWrap > div {
  margin-left: .5em;
}
/**************************************************************************************/