/* PCM-Box css */

:root {
	--pcm-blue: #1a2b3d;
}
* {
  box-sizing: border-box;
}
html, body {
	margin:0; padding: 0;
	width:100%; height:100%;
	font-family: Arial, sans-serif;
	font-size: 11pt;
	background-color: rgba(255,255,255,0.5);
	color: var(--pcm-blue);
}

/* Allgemeines */
h1,h2,h3,h4,h5,hr,p {
	margin: 0;
	padding: 0;
}

.left   { text-align: left;   }
.center { text-align: center; }
.right  { text-align: right;  }

table { border-collapse:collapse; }
th,td { 
	border:1px solid gray;
	padding: 0.5rem; 
}

/***** Page *****/
.pageBanner {
	padding: 0.5rem;
	border-bottom: 2px solid var(--pcm-blue);
}

.pageContent {
	padding: 0.5rem;
	display: grid;
	justify-content: center;
}

.pageContent .gridBox {
	xbackground-color: #ccFFcc;
	xborder: 2px solid blue;	
}

/***** Button *****/

.button-working{
	background-color: #44FF44;
}

.btnVorlage{
	display:inline-block;
	text-decoration:none;
	border: 1px solid gray;
	margin: .15em;
	padding: .2em;
}
.btnVorlage:hover{
	background-color:#ddddff;
}

/*********** Button ***********************************************/
button { cursor:pointer; }
@keyframes button2 {
	0%   {  
		box-shadow        : 0 4px 12px rgba(0,0,0,0);
		-moz-box-shadow   : 0 4px 12px rgba(0,0,0,0);
		-webkit-box-shadow: 0 4px 12px rgba(0,0,0,0);
	}
	100% {
		box-shadow        : 0 4px 12px rgba(0,0,0,0.4);
		-moz-box-shadow   : 0 4px 12px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.4);
	}
}
@keyframes button3 {
	0%   {  
		box-shadow        : 0 2px 6px rgba(0,0,0,0);
		-moz-box-shadow   : 0 2px 6px rgba(0,0,0,0);
		-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0);
	}
	100% {
		box-shadow        : 0 2px 6px rgba(0,0,0,0.4);
		-moz-box-shadow   : 0 2px 6px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.4);
	}
}

.button {
	padding: 5px 10px;
	text-align: center;
	border: solid 2px var(--pcm-blue);
    border-radius: 6px;
	display: inline-block;
	cursor: pointer;
	background-color: #ccf;
	text-decoration: none;
	color: var(--pcm-blue);
	font-weight: normal;
	font-size: 10pt;
	font-family: 'Arial', sans-serif;
}
.button span{
	display: block;
	font-size: .8em;
    font-weight: normal;
}
.button:hover {
	animation-name: button2;
    animation-duration: .3s;
	box-shadow        : 0 4px 12px rgba(0,0,0,0.4);
	-moz-box-shadow   : 0 4px 12px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.button-small {
	padding: 0px 10px;
	text-align: center;

	border: solid 1px var(--pcm-blue);
    border-radius: 6px;
	display: inline-block;
	cursor: pointer;
	xbackground: linear-gradient( lightsteelblue, white, lightsteelblue);
	background-color: #ccf;
	text-decoration: none;
	color: var(--pcm-blue);
	font-weight: normal;
	font-size: 8pt;
	font-family: 'Arial', sans-serif;
}
.button-small i { font-size: .9em;}
.button-small:hover {
	animation-name: button3;
    animation-duration: .3s;
	box-shadow        : 0px 2px 6px rgba(0,0,0,0.4);
	-moz-box-shadow   : 0px 2px 6px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 2px 6px rgba(0,0,0,0.4);
}
.button-white { background-color:white; }

/***** Login *****/

.formLogin input{
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #1a2b3d;
	padding: .5rem;
	color: #1a2b3d;
}
.formLogin button{
	padding: .5rem 1rem;
	color: #1a2b3d;
	border: 2px solid #1a2b3d;
	border-radius: 4px;	
}
.formLogin button:hover{
	background-color: rgb(26,43,61);
	color: rgb(229,212,194);
}