HTML CSS JSResult
EDIT ON
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

*,
*::before,
*::after {
  box-sizing: border-box; 
}



table tr td{background-color:transparent !important;}
.koala-chatroom-fieldset{width:100%;max-height:39px;}
.navi-oben__kalender,.navi-oben__videochat, .navi-oben__KS, .navi-oben__Chat, .navi-oben__mpm{padding-top: 8px;width:10%;min-height:45px;float:left;border:1px solid white; background-color:#0693e3;color:white !important;text-align:center;vertical-align:bottom;font-weight:bold;}
.navi-oben__kalender:hover, .navi-oben__KS:hover, .navi-oben__Chat:hover ,.navi-oben__videochat:hover, .navi-oben__mpm:hover{
  background-color: #214B63;
}

ul{
    margin-bottom: 0em !important;
}

.appshinzufuegen > div > ul > li, .appshinzufuegen > ul > li{
    margin: 15px;
    
}


.dropdown-menu.show {

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff !important;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;

}

.Idee-context-menu, .videoload-context-menu , .chat-context-menu, .termin-context-menu, .users-context-menu, .termin-aendern-context-menu, .event-context-menu{
  left: 25% !important;
}

.Select-Box{
   /*  display:none !important; */
   padding-left: 40%;
 max-width:14%;
     background-color:#7bdcb5;
    border-radius: 100px 0px 0px 100px!important; /*Wenn Selection Box unsichtbar */
    margin-left:10%;
    float:left;
    width:14% !important; 
    height:2.8em;
  
}



.class_koala_chat_usermsg_none, .class_koala_chat_usermsg_block{
  
     max-width:76% !important;
  
	width:76% !important;
        
}

.chat-context-settings_menu{
    width:45%;
    margin-left:35%;
}

.users-context-menu, .users-context-menu--active{
      width:45%;
}


.navi-oben__Teilnehmer{padding-top: 8px;width:80%;min-height:45px;float:left;border-left:1px solid white; background-color:#0693e3;color:white !important;text-align:center;vertical-align:bottom;font-weight:bold;}
.navi-oben__Teilnehmer:hover{
      background-color: #e3e39d;
}



.footer_c {
  width:100%;
 height:500px;
 bottom:0px;

   }
 



.setting_image_mobile{height:32px;width:32px}


.kt-class-wrap-window{width:100%;text-align: left;
  margin: 0 auto;vertical-align:middle; height:80vh;} 

form#form1{max-height:170px;height:170px;}

  #a{
  margin-left:10em;
  position:absolute;
  left:6px;
  top:5.8em;
  width:10px;
  height:3px;
  transform:rotate(-45deg);
  background:black;
}


#b{ 
  margin-left:10em;
  position:absolute;
  left:10px;
  top:5.8em;
  width:10px;
  height:3px;
  transform:rotate(+45deg);
  background:black;
}

.Bilderrahmen{margin-top:6em;margin-left:6.4em;width:8em;height:5em;border:7px solid black;border-radius: 3px 3px 3px 3px;}

/* Large */
@media screen and (min-width:1000px) {
  .large-1 {width:33.333333%;z-index: 20}
  .large-2 {width:66.666666%;}
  .large-3 {width:100%;}
}



blockquote::before, blockquote::after {
  position: absolute;	
  display: block; 
  font-family: 'Chewy', sans-serif;
  font-size: 10em;
  color: #c32e04;  
}


#oben {width:100%;
height: 103px;

border: 0px dashed #00ff22;                                               
}
  
.mitte {
	height: 69vh ;
	width:100%;
	float:right;
	padding:5px;
}


.textbox-left-1, .textbox-left-2{
	
	width:30%;	margin-right:0px;text-align:right;vertical-align:bottom;
}
.textbox-middle-1, .textbox-middle-2{
text-align:right !important;
	width:58%;vertical-align:middle;
max-height:10px !important;height:10px !important;
}



.textbox-right{
	
	width:4%;	max-height:40px;margin-left:0px;text-align:left;vertical-align:top;
}

#text {

width:100%;
margin: 0 auto;
padding:0px 20px 0 35px;
border: 0px dashed #0011fe;
position:absolute;
}

#prev {
height: 10px;

margin: 0 auto;
background-color: yellow;
border: 1px dashed #0011fe;
position:absolute;
}


/* Globale CSS-Klassen */

.thumb img {
	max-width:100%;
height: auto;}
	
.thumb{
	text-align:center;
	margin: 10px 5px 0 0;
	width: 100%;

	vertical-align:middle;background: hsla(350,50%,50%,0.3);
}

.row { 
  width:100%;
  margin: 0 auto;
  top: 50%;

}





.div.col-4{
         background-color: transparent !important;
    
    
}


.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {

  clear: both;
}

.columns {
  float:left;
}
.h_mobile_gruppen{
	font-size:2.3em;
	padding-left:1em;
	
}

.class_container_Talkroom_erstellen{overflow-y:auto;}
.navi-oben__raum_auswahl{
	
	display: none;
	
	}
.Fenster_main{min-height:300px;height:74vh;float:left;overflow-y:none;margin:10px;}

#myForm{bottom:0px;}
.navi-oben__name_gruppe{min-height:45px;float:left;color:black !important;padding-left:20px;font-weight:bold !important;vertical-align:bottom;}
.navi-oben__user_anzahl{padding-top:0px;width:20%;min-height:40px;float:left;border:0px solid black; text-align:center;vertical-align:bottom;font-weight:bold;color:white;background-color:#0693e3;}
.navi-oben__user_anzahl:hover{
      background-color: #e3e39d;
}
.navi-oben__einstellungen{width:12%;float:right;text-align:right;padding-right:10px;}

.beitreten_container {}



 


input[required] {
  border:10px;
border-color: #C1E2ff;
  border-radius: 10px;
}

.mittig_schrift{display: flex;
justify-content: center;
align-items: center;
color:#6EC1E4;}
.mobile-container {
 
  margin: auto;

  height: 25px;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #23282d;
  position: relative;
    color:white !important; 
	
}

.topnav a {
  float: left;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}



.topnav #myLinks {

}



.active {
 
  color: black;
}



  #main {
 
   min-height: 650px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
		   
   }

  #main > article {
   margin: 0px;
   padding: 0px;
   border: 0px solid #cccc33;
   border-radius: 7pt;

   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }

  #main > nav {
   margin: 0px;
   padding: 0px;color:#000;
   border: 0px solid #23282d;
   border-radius: 0pt;

   -webkit-flex: 1 6 5%;
           flex: 1 6 5%;
   -webkit-order: 1;
           order: 1;
   }

  #main > aside {
   margin: 0px;
   padding: 0x;
   border: 0px solid #23282d;
   border-radius: 7pt;
   background: #23282d;
   -webkit-flex: 0 0 0%;
           flex: 0 0 0%;
   -webkit-order: 3;
           order: 3;
   }






















table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin: 0 0 0em !important;
}



.main_window{width:100%;
	vertical-align:middle  !important;
   min-height: 60px;
  
}


.class_label_image_preview{background-color:#D9F3FF;width:100%;}
.class_image_preview{background-color:#D9F3FF}

.cls_navi-oben__user_anzahl input {
		border:0px solid  black;
	
	
}







.koala-chatroom{
justify-content: center;
align-items: center;
margin-left:0px;
border:0px solid black;  border-radius: 15px 15px 0px 0px; 
height:60px;      
}

div.koala-chatroom-left{

    justify-content: center; 
    align-items: center;


}

.XYZ img{

    justify-content: center; 
    align-items: center;
margin-left:25%;

}


.koala-chat-window{background-color:#fbfbfb;}



.wp-block-spacer{height:5px !important;}

.cls_chatroom__beitreten{
	color:green;border:0px solid black;
}

.cls_chatroom__ablehnen{
	color:red;border:0px solid black;
}

.cls_chatroom__spam{
	color:orange;border:0px solid black;
}

.class_eintreten{background-color:#6385ff;margin-top:5px;margin-bottom:14px;min-width:5em;color:#FFF; width: 90px; border-radius: 10px}


.wrap {  }
.spalte-1 {text-align:center; width: 60%;margin: 0 auto; background: #fdfdfd; }
.spalte-2 {text-align:center; width: 60%;margin: 0 auto; background: #fdfdfd;color:#A89F9D;
 }


.wrap { 
    
    background-image: 
        linear-gradient( 
           to right, 
          #fdfdfd  0%, #fdfdfd 100%, 
          #fdfdfd 0%, #fdfdfd 100%, 
          #fdfdfd 66%, #fdfdfd 100%);
}
.wrap:after { 
    content:" "; display: table; margin-bottom: 2em;
}

 #viewimage_2{ 
	width: 66.666666%;
    bottom:130px;
	padding:10px; 
	position:absolute;
	opacity: 95%;
	z-index:10;
	max-width:1100px;
	
}
.koala-chatroom-left{

	width: 34.666666%;
    bottom:8em;
	padding:10px; 
	position:absolute;
	opacity: 95%;
	
	

 justify-content: center;
 align-items: center;
 
	z-index:10;max-width:1100px;
}






textarea.txt_chat_melden:invalid {border: 1px solid red}
textarea.txt_chat_melden:invalid~input[type="submit"] { display:none}

textarea.txt_Talkroom_Titel_aendern:invalid {border: 1px solid green; }
textarea.txt_Talkroom_Titel_aendern:invalid~input[type="submit"] { display:none}
textarea.txt_Talkroom_Titel_aendern{ font-weight: bold;}

textarea.txt_Talkroom_Beschreibung_aendern:invalid {border: 1px solid green}
textarea.txt_Talkroom_Beschreibung_aendern:invalid~input[type="submit"]{display:none}

.div_area_Chat__melden_show{
 display: none;
}

.container-chat {
  margin: 0 auto;
  padding: 0 24px;
  max-width: 960px;
  max-height: 80vh;
}

.cs-user__exclude{
	color:red;
}

.cs-user__include{
	width:100%; color:blue;float:right;
}

/* primary header */

.primary-header {
  padding: 24px 0;
  text-align: center;
  border-bottom: solid 2px #cfcfcf;
}

.primary-header__title {
  color: #393939;
  font-size: 36px;
}

.primary-header__title small {
  font-size: 18px;
  color: #898989;
}

/* content */

.content {
  padding: 48px 0;
  border-bottom: solid 2px #cfcfcf;
}

.content__footer {
  margin-top: 12px;
  text-align: center;
}

/* footer */

.primary-footer {
  padding: 24px 0;
  color: #898989;
  font-size: 14px;
  text-align: center;
}

/* tasks */

.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.task {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: solid 1px #dfdfdf;
}

.task:last-child {
  border-bottom: none;
}



.cls_Fenster_chat_anfragen_oben{
		width:100%;background: #FAF8F8;
	 
}

.cls_Fenster_chat_anfragen_Links{background-color:#23282d;color:#FFF;float:left;color:white; height: 670px;min-height: 670px;padding:10px;}



/*.float1 {position: absolute; top: 0px; float:left; }
.float2 {position: absolute; top: 0px; right:0px; }
.inhalt {position: absolute; top:400px; float:left;}
.float3 {position: absolute; top: 400px; right:0px; }
.float4 {position: absolute; top: 450px; right:0px; }
.float7 {position: absolute; top: 400px; right:0px; }
*/
.h2{
	text-align:center;
	color:#2ECCFA !important;
}

.class_einladen_in_gruppe{float:left;}
a:link{}

.page-element_chatrooms {
	float:left;
	overflow: auto;	height:30em;	
	min-height: 650px; 
}


.page-element_chatroom{display: none;}
		
fieldset {
			border: 0px solid #bbb !important;
		}

table td{padding:3px !important}
table {margin: 0 0 0 !important}


.div-js-copytextarea{
   
   width:250px;
   margin:0 auto;
   padding:2px;
   border: 2px solid #d2d2d2;
   border-radius: 8px;
	
}


.cs-user__include:hover { background: #f0f0f0; }
.navi-links__chat_anfragen{
	
   display:inline;
   float:left;
   padding:0px;
   border:0px black solid;
   overflow-y:auto;
 ;
	}

.fs_chatroom{
	display:inline;float:left;}
	
.wrap-window-leftright{overflow:hidden;

}

.preview { 
	
    margin-left: -150px;
width:75%;
max-height:75%;
}




.preview img{ 
	
    
max-height:530px;
}
 
.class_input_talkroom_name{
	max-width:400px;
}
.class_input_talkroom_name, .navi-oben__name_gruppe{
display:inline;
 margin: 0 15px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      min-width: 80px;
      font: normal normal normal normal 15px / 34.2857px Montserrat, 'Montserrat', sans-serif, sans-serif;


}
.btn-gruppen-inhalt-anzeigen{max-width: 360px !important;padding: 10px;}
.abgeschnittener_text{display:inline;
	
}

.btn-gruppen-inhalt-anzeigen:hover{
    background-color:#f3bafd !important
}


.cls_chatroom_eintreten{
	display:block;
	background:#33C3FF;
	color:black;height:2em; 
	text-align: center;
	
	
}

.cls_chatroom_eintreten:hover{
	border-color: #666 #aaa #bbb #888;
	border-width:4px 3px 3px 4px;
	color:#FFF;	
}

.cCreateOf_TR{
	display:block;
	border-style:solid;
	border-color:#eee #888 #666 #aaa;
	border-width:3px 4px 4px 3px;
	width:9em;
	height:2em;
	
	color:#333;
	line-height:2;
	text-align:center;
	text-decoration:none;
	font-weight:900;
}
.cCreateOf_TR:hover{
	border-color: #666 #aaa #eee #888;
	border-width:4px 3px 3px 4px;
	color:#000;
}





#dropzone {
	width: 90%;
	height: 200px;
	padding: 2%;
	background: white;
	border: 1px solid #666;
}

img.image_shortcut{width:150px;
}


.demoInputBox{
	 display: none;
}

.image-upload>input { 
 display: none;
}

.sound-upload>input {
  display: none;
}

.chat {
    width: 650px;
}


.zeituser{
	font-size:0.7em;
display:block;
clear:both;
}

.neueid{ 

display:block;
clear:both;
}

.neueroutput{
	display:block;
}

.chat {
    width: 650px;
}

img.bubble.img{
	
	max-width:260px;
        padding: 30px 30px 0px 20px;
}


.bubble{
  	word-wrap: break-word;
    border-radius: 14px;
    display: block;
        padding: 2px 0px 0px 20px;
    position: relative;
	max-width:30vw;
	min-width:30px;

	clear: both;
	color:black;
	
}


.me {
    float: left;   
    margin: 5px 45px 5px 20px;   
    background-color:     #E4E4E4;
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;         
    background-color:  #E4E4E4;
}

.you {
    float: right;   
    margin: 5px 20px 5px 45px;  
    background-color:     #CEECF5 ;
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;    
    background-color:#C1E1FF;
}

.koala-talk{
	
	position: relative;
}

.koala-chat-bottom{
  display:inline-block;
	margin:20px;
	text-decoration:none;
	font-family:Arial;
	font-size:16px;
	border:1px solid #fff;
	border-radius:15px;
	color:#fff;
	background-color:#A8BCD0;
	padding:5px 15px;
	font-weight:bold;
	box-shadow:3px 3px 4px #8CA0B2;
	text-shadow:1px 1px 2px #6E91B2;
}

.koala-chat-bottom:hover{
	background-color:#8BA7C1;
} 

.koala-chat-window{
	height:500px;	
 max-height:700px;
    overflow-y:auto;
  overflow-x:none;
  border:0px solid black;
}
.container-out-overflow-x1 {
  padding: 0 0em;
 height:88vh;overflow-y:auto;  width: 100%;margin
}s

.vorschau_bild{
  position: absolute; /* positionieren */
  left: 23.333333%;

  /* weitere Angaben */


 
}

.cls_Anfragen_aside{display:none;}
.cls_Fenster_footer{}


.class_koala_chat_submit{
	
	float:right;
	
	color: #0a0a0a;
	border-color: #FFF;
	border-radius:20px; 
	
}
.koala-sent-items-window{
	max-width:100%;
	padding:10px 0px 10px 0px;
}










.main-controls {
  padding-bottom: 0.7em;
  height: 170px;
}


.sound-clips {
  box-shadow: inset 0 3px 4px rgba(0,0,0,0.7);
  background-color: rgba(0,0,0,0.1);
  height: calc(100% - 240px - 0.7rem);
  overflow: scroll;
}

fieldset { 
 
    margin: 20px; 
 
    padding: 0 10px 10px; 
 
    border: 0px solid #666; 
 
    border-radius: 0px; 
 
        background-color: transparent !important;
	height:30px;
    padding-top: 10px; 
 
} 
 
#koalateilnehmer { 
 
    padding: 0px 0px; 
 

 
    /* F�r bessere Lesbarkeit gegen den Kastenschatten */ 
 
} 


.div_class_quad_rahmen{
	border-radius: 5px;
	background-color: #D9F3FF;
	width:100%;
	max-height:18em;
	height:18em;
	border:1px solid black;
	margin-bottom:0.5em;
	top: 50%;
	left: 50%;
}


.div_class_quad_ausseres{
	background-color: #D9F3FF;
	width:12em;
	height:15em;
	max-height:15em;
	margin: 0;
	position: relative;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
} 



.img_button_quadrat{
	max-width:7em;
	width:7em;
	height:7em;
		margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
    
}

.div_label_class_quad_rahmen_ausgabe_unten, .div_label_class_quad_rahmen_ausgabe_oben
{
	background-color: #AED2FF;
	width:100%;
	box-sizing: border-box;height:1.5em;
	border:0px solid black;
    text-align:center;
}


.label_innen_class_quad_rahmen_ausgabe_unten{
	background-color: #FFF;width: 60%;margin: 0px auto;
box-sizing: border-box;height:1.5em;
border-radius:30px 30px 0px 0px;;
}

/* Think boublbles */
	*{
  margin:0px;
  padding:0px;
}

.circular-sb-CR {
  width: 200px;
  border: 2px solid #00bfb6;
  padding: 60px 0px;
	float:right;
  margin-right:60px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: 200;
  font-family: arial;
  position: relative;
  color: #00bfb6;
  clear:both;
}


.circular-sb-CL {
  width: 200px;
  border: 2px solid #00bfb6;
  padding: 60px 0px;
	float:left;
  margin-right:60px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: 200;
  font-family: arial;
  position: relative;
  color: #00bfb6;
  clear:both;
}

/*right circle shape speech bubble*/

.circle1 {
  border: 2px solid #00bfb6;
  position: absolute;
  width: 25px;
  padding: 20px;
  border-radius: 50%;
  right: -35px;
  bottom: 23px;
}

.circle1:before {
  content: "";
  position: absolute;
  width: 25px;
  padding: 20px;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
  background: #fff;
}

.circle2 {
  border: 2px solid #00bfb6;
  position: absolute;
  width: 5px;
  padding: 10px 15px;
  border-radius: 50%;
  right: -60px;
  bottom: 5px;
}


/*left circle shape speech bubble*/

.circle3 {
  border: 2px solid #00bfb6;
  position: absolute;
  width: 25px;
  padding: 20px;
  border-radius: 50%;
  left: -10px;
  bottom: 10px;
}

.circle3:before {
  content: "";
  position: absolute;
  width: 25px;
  padding: 20px;
  border-radius: 50%;
  right: 0px;
  bottom: 0px;
  background: #fff;
}

.circle4 {
  border: 2px solid #00bfb6;
  position: absolute;
  width: 5px;
  padding: 10px 15px;
  border-radius: 50%;
  left: -60px;
  bottom: 5px;
}



/* Lämpchen Idee */
.Idee-Container-CR, .Bug-Container-CR, .Gdmma-Container-CR, .Wdw-Container-CR, .D2d-Container-CR{
	
	max-width:380px;
	
	/*background-image:url("../img/neue_idee_gelb.png") ;
	background-size: 240px 200px;*/
}


.Bug-Container-CL img{
	width:25% ;
}

/* Lämpchen Idee */
.Idee-Container-CL, .Bug-Container-CL, .Gdmma-Container-CR, .D2d-Container-CR, .Wdw-Container-CR{
	max-width:380px;
	
	
	/*background-image:url("../img/neue_idee_weiss.png");
	background-size: 240px 180px;*/
}

/* Centered text */
.centered-CR {
position: relative;

 
text-align: right;
margin: 0 auto;
color:#000;

}


/* Centered text */
.centered-CL {
position: relative;

transform: translate(-50%,-50%); 
text-align:center;
margin: 0 auto;
color:#000;

}



.class_btn_Talkroom_aendern{
	padding:5px 10px 6px 10px;
	border:0px solid rgba(0,0,0,0.4);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0px 0px 2px
	rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 2px
	rgba(0,0,0,0.5);
	text-shadow: 1px 1px 1px
rgba(255,255,255,0.5);
font-weight:bold;
}




.class_btn_Talkroom_aendern:hover {
text-shadow: 1px 1px 1px
rgba(0,0,0,0.5);
cursor:pointer;
}



.ksPacketbenennen{
   margin:20px;
    width:60%;max-width:27em;
    height:2.5em;

}

.ksteilnehmer{
   background:url("/wp-content/plugins/koalatalk/img/E_Mail_hinzuf.png") top right no-repeat; 
   background-size: 100%;
   border-radius:6px; 
   border:2px solid silver;
   outline: none; 
   height:150px;
   max-width:27em;
   margin:10px;
   }
   
 .kskurzbeschreibung{
	height:100px;
	max-width:27em;
	margin:10px;
 }