/* The Modal (background) Aufruf z.B. aus HTML-I-USER */
.modal {
	  display: none; 					/* Hidden by default */
	  position: fixed; 					/* Stay in place */
	  z-index: 999; 						/* Sit on top */
	  overflow: auto; 					/* Enable scroll if needed */
	  margin: 5px auto 5px auto; 				/* 5% from the top, 15% from the bottom and centered */
	top:0%; left:0%;
	min-width:51%;
	resize:both;
	border-radius:20px; 
	border: 2px solid black;

	min-height:50%;
	background-color: #005aa1; 				/* #800000 Fallback color */
	color:white;
}

.fmodal {
	  display: none; 					/* Hidden by default */
	  position: fixed; 					/* Stay in place */
	  z-index: 9; 						/* Sit on top */
	  overflow: auto; 					/* Enable scroll if needed */
	  margin: 1% 1% 1% auto; 				/* 5% from the top, 15% from the bottom and centered */
	top:0%; left:0%;
	min-width:300px;
	resize:both;
	border: 1px solid black;

	width:99%; height:97%;
	background-color: #005aa1; 				/* #800000 Fallback color */
}


.cmodalmoveclose {float:left; height:20px; width:100%; background-color:black;}
	.cmodalmove {float:left; height:20px; width:95%; cursor:move; text-align: center; color:white; font-size:12px; color:lightgrey;}

		.cmodalmovespan {float:left; height:20px; width:95%;  text-align: center; cursor:move;}

		/* The Close Button (x) */
	/* Center the image and position the close button */
	.imgcontainer {  text-align: center;  height:20px; position: relative; margin:0px;}

		.close {float:right; height:20px; width: 20px; font-size: 20px;  font-weight: bold; color: red;}
		.close:hover,
		.close:focus {  color: red;  cursor: pointer;}

.cmodaliframe {float:left; height:98%; width:99%; border:none;}





/* Modal Content/Box */
.modal-content {
  background-color: #005aa1;
	
  
  width: 100%; /* Could be more or less, depending on screen size */
  height:100%;
}

.cmodalein {position:absolute; left:130px; background-color:white; outline: none; border: 1px solid #3983ab; 
		max-width:60%;}
.cmodalread {position:absolute; left:130px; background-color:lightgrey; color:black; outline: none; border: 1px solid #3983ab; max-width:99%;}
.cmodallabel {font-family:'Arial'; color:white; font-size:12px;}





.buchst {height:15px; width:10px; padding:0px;border:none;margin-left:0.5px; cursor:pointer;}

button:hover {  opacity: 0.8;}

/* Extra styles for the cancel button */
.cancelbtn {  width: auto;  padding: 10px 18px;  background-color: #f44336;}


.container {  margin: 10px; overflow:hidden;}


img.avatar {  width: 10%;  border-radius: 50%;}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}


@media only screen and (max-width: 450px){ 
.modal {
	  display: none; 					/* Hidden by default */
	  position: fixed; 					/* Stay in place */
	  z-index: 999; 						/* Sit on top */
	  overflow: auto; 					/* Enable scroll if needed */
	  margin: 1% auto 1% auto; 				/* 5% from the top, 15% from the bottom and centered */
	top:0%; left:0%;
	resize:both;
	border-radius:20px; 
	border: 2px solid black;

	width:99%; 
	height:70%;
	background-color: #005aa1; 				/* #800000 Fallback color */
}

}