<style>

.retmodalchatiframe {
	position:fixed; top:0%; left:0%; border: 10px solid #275929;	
	border-radius:20px;  margin:0px;   
	z-index: 99; resize:both;overflow:auto;	width:399px; height:755px;  display:none; animation:chatanimate;
}

modalchatiframe {
	position:fixed; top:0%; left:0%; background-color:#005aa1; color:white;	
	border-radius:20px; border: 10px solid #275929; margin:0px; z-index: 99; resize:both;overflow:auto;	
	width:399px; height:755px;  display:none; animation:chatanimate;
}

.chatanimate {
  -webkit-animation: chatanimatezoom 0.6s;
          animation: chatanimatezoom 0.6s
}
@-webkit-keyframes chatanimatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} }
@keyframes chatanimatezoom { from {transform: scale(0)}   to {transform: scale(1)} }


.retmodalchatmovex {float:left; height:5%; width:100%; background-color:#3e8e41;}
.modalchatmovex {float:left; height:5%; width:100%; background-color:#003a66;}
.modalchatmove {float:left; height:100%; width:90%; cursor:move;}
.modalchatframe {height:95%; width:100%; border:none;}

.retmodalchatclose {position:absolute; right:15px;  top: 1px; height:20px;  font-size: 35px;  font-weight: bold; color: red; margin-top:0px;}
.modalchatclose {float:right;font-size: 35px;  height:20px;  font-weight: bold; color: red; margin-top:0px;}
.modalchatclose:hover,
.modalchatclose:focus {  color: red;  cursor: pointer;}

.modalchat {float:left;  width:98%; height:95%; min-height:40%;display:none; background-color:#005aa1; color:white;}

.chatverlauf {	width: 93%; height:38%;
  border: 1px solid white;  border-radius: 5px;
  padding: 10px;  margin: 15px 0 10px 0;  
   background-color: lightgrey;
   overflow: auto;  
}
		.chatlinks {  float:left;  resize: vertical;   
			width:70%;  min-width:50%;  max-width:100%; 
			max-height: 0; max-height:700px; 
			border: 2px solid #dedede; border-radius: 5px;  padding: 1px;  margin: 1px 0;
			overflow: scroll;
			background-color: #005aa1; color:white ; overflow:auto;
		}
		.chatrechts {  float:right;    resize: vertical;
			width:70%; min-width:50%; max-width:100%; 
			max-height:700px; 
			border: 2px solid #dedede;border-radius: 5px;  padding: 1px;  margin: 1px 0;
			overflow: scroll;
			background-color: white; color:#005aa1; overflow:auto;
  
		}
		.termlinks { float:left;
			border: 2px solid #dedede;border-radius: 5px;  padding: 1px;  margin: 1px 0;  margin-right: 60%;
			background-color: #005aa1; color:white; overflow:auto;
		}
		.termrechts {  float:right;
			border: 2px solid #dedede;border-radius: 5px;  padding: 1px;  margin: 1px 0;  margin-left: 60%;
			background-color: white; color:black; overflow:auto;
		}

		.cdatumlinks {	float:right;  background-color:#005aa1; oolor:white; font-size: 10px; }
		.cdatumrechts {	float:right; background-color:white; oolor:#005aa1; font-size: 10px;}

.chatter {
	float:left;  width:98%; height:95%; border: 3px solid #f1f1f1; border-radius:20px;
	display:block; 
	 background-color:#0074cc; color:white;
	overflow:auto;
}

.chatalpha {	width: 98%;height:100px;
  border: 1px solid white;  border-radius: 5px;
	margin: 10px 0;  
   background-color: #005aa1; color:white;
   overflow: auto;  
   float:left;
}

.chatbtn {cursor:pointer; background-color:#e6f2ff; color:white; background-image: linear-gradient(to right, #005aa1,#33a7ff); 
	border-radius:5px; border-width:0.2px; font-size:10px; margin-left: 10px;}

.chatsu {	width: 95%; height:50px;
  border: 1px solid white;  border-radius: 5px;
  padding: 10px;  margin: 10px 0;  
   background-color: lightgrey;
      float:left;
	  overflow:scroll;
}


	.chatsuche {	width: 95%;height:50px;
		border: 1px solid white;  border-radius: 5px;
		padding: 10px;  margin: 10px 0;  
		background-color: #005aa1; color:white;
		overflow: auto;  
		float:left;
			display:none;
	}

	.chatbutton {
		border: none;

		background-color:#005aa1;
		color: white;

		text-align: left;
		cursor: pointer;
		padding:0 0.5px 0 0;

		border: 1px solid #3983ab;
		border-radius:2px;

		font-size:14px;
		
		float:left;

	}

#tchitchat {
  width: 98%;  height: 9em;
  padding: 2px 1px;  box-sizing: border-box;  border: 2px solid #ccc;  border-radius: 4px;
  font-size: 16px;
  resize: none;
  background-color: white;
  color: black;
 }


.chitstart  {height:1.3em; width:1.3em; bottom: 1px; margin-left:1px; display:block; cursor:pointer; float:right; border-radius:20px; border: 2px solid #0091ff;}

.chitbild  {height:1.5em; width:1.5em; bottom: 1px; margin-left:1px; display:block; cursor:pointer; float:left;}

.subild  {height:1em; width:1em; margin-left:3px; display:block; cursor:pointer; float:left;}
.subildr  {height:1em; width:1em; margin-right:0px; display:block; cursor:pointer; float:right;}
.subildrund  {height:1em; width:1em; margin-right:0px; display:block; cursor:pointer; float:right; border-radius:50px; margin-left:10px;}

.chatradio {float:left; margin:3px;}
.chatsendbildr  {height:2em; width:2em; bottom: 1px; margin-right:20px; display:block; cursor:pointer; float:right; border-radius:50px; background-color:black;}

.divbild { position: absolute; height:3em; width:3em; cursor:move; overflow: hidden;                background-color: #CDAE7E;
                -webkit-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;     
                user-select: none;
				transition:width 2s;
				resize:both;
            }
.divbild:hover{filter:sepia(50%);}	



.vdiv { position: relative; height:3em; width:98%; overflow: hidden; 
		margin:2px; cursor:pointer; border-radius:15px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;     
                user-select: none;
				transition:width 2s;
            }
.vdiv:hover{filter:sepia(50%);}	
.vtext  {float:right;  width:80%; overflow:hidden; font-size:15px;}
.vbild  {float:left; height:3em;  width:3em;  cursor:pointer; margin-top:5px;}
.vbtext  {float:right;  width:80%; overflow:hidden; font-size:15px;}



.sdiv { position: relative; height:2em; width:2em; overflow: hidden; margin:2px; cursor:pointer; border-radius:5px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;     
                user-select: none;
		transition:width 2s;
            }
.sdiv:hover{filter:sepia(50%);}	
.sbild 	 {  position: absolute; left:20%;  top:0%; 		height:70%;  width:50%;  cursor:pointer; }
.sttext  {  position: absolute; left:0;  bottom:15%; 		height:15%;  width:100%; overflow:hidden; font-size:12px;  text-align:center;}
.sbtext  {  position: absolute; left:0;  bottom:0%; 		height:15%;  width:100%; overflow:hidden; font-size:12px; text-align:center;}






.xdiv {float:left; cursor:pointer;
	transform: translateX(calc(-0.15em * 3 - 0.08em * 2));		
	border-radius:15px; 
	margin:0 10px 5px 0;
}
.xbild { float-left;  height:1.4em; width:1.4em; border-radius:50px; border: 2px solid #0091ff;}
.xbild:hover{filter:sepia(50%); transform:scale(1.5,1.5)}	

.xbtext  { float:left; overflow:hidden; font-size:16px;  text-align:center; margin: 0 10px 0 10px; }
.xttext  { float:left; overflow:hidden; font-size:12px;  text-align:center; margin: 5px 0 0 10px;}



.ldiv {float:left; cursor:pointer;
	border-radius:15px; 
	margin:0 10px 5px 0;
}
.lbild { float-left;  height:1.4em; width:1.4em; border-radius:50px; border: 2px solid #FFA500;}
.lbild:hover{filter:sepia(50%);  transform:scale(1.5,1.5)}	

.lbtext  { float:left; overflow:hidden; font-size:16px;  text-align:center; margin: 0 10px 0 10px; }
.lttext  { float:left; overflow:hidden; font-size:14px;  text-align:center; margin: 5px 0 0 10px;}




.retxdiv { float:left; height:4em; overflow: hidden; color:black; margin:2px; cursor:pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;     
                user-select: none;
				transition:width 2s;
            }
.retxdiv:hover{filter:sepia(50%);transform: scale(1.1,1.1)}	
.retxbild 	 {  float:left; margin-left:40%; height:30px;  width:30px;  cursor:pointer; border-radius:50px; }
.retxbtext  {  float:left;  width:100%; color: white; overflow:hidden; font-size:12px; text-align:center;}
.retxttext  {  float:left;  width:100%; color: white; overflow:hidden; font-size:12px; text-align:center;}





.lestext  { position: absolute; right:0;  bottom:10%;  	font-size:16px; color: red; display:none; margin-right:3%; }
.sutext  { position:relative; float:left; background-color:white;outline: none; border: 1px solid #3983ab; margin-left:3px;}

.dtrbildr {float:right; height:23px; width:23px;  overflow:auto; border-radius:50px;
	text-align:center; padding:0;
	border-color:black; cursor:pointer;
	margin-right:15px;
	}
.dtrbildl {float:left; height:23px; width:23px;  overflow:auto; border-radius:50px;
	text-align:center; padding:0;
	border-color:black;  cursor:pointer;
	}


.cchats {float:left; height:3.3em; width:100%;  overflow:auto; 
	text-align:center; padding:0; margin-bottom:10px;
	display:none;
	}

.callchat {float:left;  min-height:90%; width:42%;  overflow:auto; 
	text-align:center; padding:0; 
	border: 0.2px solid black; border-radius:5px;
	}
	/* lightblue */
.clchatter {float:left; width: 95%;  margin-top:1px; overflow:auto; border:none; display:block; font-size:14px;}
.cxchatter {float:left; width: 95%;  margin-top:1px; overflow:auto; border:none; display:block; font-size:14px;}
.cschatter {float:left; width: 95%;  margin-top:1px; overflow:auto; border:none; display:block; font-size:11px;}
.cvchatter {float:left; width: 95%;  margin-top:1px; overflow:auto; border:none; display:block; font-size:10px;}
.cfchatter {float:left; width: 95%;  margin-top:1px; overflow:auto; border:none; display:block; font-size:10px;}



/* 100% Image Width on Smaller Screens */
									
@media only screen and (max-width: 700px){ 
	
}

@media only screen and (max-width: 370px){ 
.cchats {float:left; max-height:6em; width:100%; color:white;overflow:auto; 
	text-align:center; padding:0; margin-bottom:10px;
	display:none;
	}

.callchat {float:left;  height:4.5em; width:40%; color:white; overflow:auto; 
	text-align:center; padding:0; 
	border: 0.2px solid black; border-radius:5px;
	}


.xdiv {float:left; cursor:pointer;
	transform: translateX(calc(-0.15em * 3 - 0.08em * 2));		
	border-radius:15px; 
	margin:0 10px 5px 0;
}
.xbild { float-left;  height:20px; width:20px; border-radius:50px; border: 2px solid #0091ff;}
.xbild:hover{filter:sepia(50%); transform:scale(1.5,1.5)}	

.xbtext  { float:left; overflow:hidden; font-size:16px;  text-align:center; margin: 0 10px 0 10px; }
.xttext  { float:left; overflow:hidden; font-size:14px;  text-align:center; margin: 5px 0 0 10px;}



.ldiv {float:left; cursor:pointer;
	border-radius:15px; 
	margin:0 10px 5px 0;
}
.lbild { float-left;  height:1.4em; width:1.4em; border-radius:50px; border: 2px solid #FFA500;}
.lbild:hover{filter:sepia(50%);  transform:scale(1.5,1.5)}	

.lbtext  { float:left; overflow:hidden; font-size:16px;  text-align:center; margin: 0 10px 0 10px; }
.lttext  { float:left; overflow:hidden; font-size:14px;  text-align:center; margin: 5px 0 0 10px;}



}


</style>