@charset "utf-8";
/* CSS Document */
	
.chat-window{
   position: fixed;
   right: 0;
   bottom: 0;
   max-width: 360px;
   background-color: transparent;
   color: gray;
   opacity: 100%;
   text-align: center;
   z-index:20;
}
@media screen and (min-width: 404px) {
	.chat-window{
	   right: 7%;
	}
}

@media screen and (min-width: 1146px) {
	.chat-window{
	   right: calc(50% - 500px);
	}
}
.chatWindow-controls{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #eeeeee; /*grey lt-3*/ 
	opacity:0.8;
	margin:0px;
	padding:0px;
	/*border: 2px solid #757575;*/ /* grey dk 1*/
	box-shadow: 1px 1px 1px #9e9e9e, 1px 1px 3px #9e9e9e;  /* grey */
	border-radius:10px 10px 0 0;
}
.chatWindow-controls a{
   cursor: pointer;
   color: #424242; /*grey darken-3*/ 
}
.chatWindow-controls-corner{
    background-color: #eeeeee; /*grey lt-3*/
	border-radius: 0 10px 0 0;
	color:#9e9e9e;
}
.chatWindow-controls-corner i{
    font-size:20px;
}
.chatWindow-controls-corner a{
   margin: 0px;
   padding: 2px;
}

.hide{
	display: none;
}

.ChatBrowse-modal {
	position:fixed;
	width: 100%;
	top:50%;
	margin-top:-150px;
	z-index: 20;
}
@media screen and (min-width: 700px) {
	.ChatBrowse-modal {
		width: 80%;
	}
}
.ChatBrowse-container {
	width:80%;
	max-width:550px;
	max-height: 400px;
	margin:0 auto;
	overflow-y: scroll;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .08), 0 12px 14px 0 rgba(0, 0, 0, .12)
}

.ChatBrowseOn-modal {
	width: 100%;
	position:fixed;
	top:50%;
	margin-top:-150px;
    z-index: 20;
}
@media screen and (min-width: 700px) {
	.ChatBrowseOn-modal {
		width: 80%;
	}
}
.ChatBrowseOn-container {
	width:80%;
	max-width:550px;
	max-height: 400px;
	margin:0 auto;
	overflow-y: scroll;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .08), 0 12px 14px 0 rgba(0, 0, 0, .12)
}

.tooltip {
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  top:-40px;
  right:20px;
  z-index: 1;
}
.left .tooltip .tooltiptext {
  right:200px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.button {
  background-color: #fafafa;
    border-radius: 3px 3px 3px 3px;
  border: 1px solid black;
  color: black;
  padding: 10px 10px;
  white-space:nowrap;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 6px;
  cursor: pointer;
}
.vln-mid{
	vertical-align: middle;
}
#ifrmVoiceChat {
	transition: height 1s;
}
.chat-window{
	opacity:0;
}
.fadeIn{
    -webkit-animation: fadeIn .5s linear forwards;
    animation: fadeIn .5s linear forwards;
}
.fadeOut{
    -webkit-animation: fadeOut .5s linear forwards;
    animation: fadeOut .5s linear forwards;
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0;  display:block;}
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0% { opacity: 0; display:block;}
  100% { opacity: 1; }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; display:none;}
}
@-webkit-keyframes fadeout {
  0% { opacity: 1; }
  100% { opacity: 0;  display:none;}
}