.header{ position: static !important;}
.video-js { width: 192px; height: 100px; }
.vjs-fluid { padding-top: 56.25%;}
#videoElement{width:100%; height:auto; top:0; bottom:0; }
/*  video frame  */
#live_fm{   width: 100%; display:grid;}
.video_fm{ display:inline; }
/*  chat message frame  */
ul{ margin:5px 5px 0px 5px; padding:0; height:inherit; }
.live_message_box{ display:inline;  width:auto;  height:100%; background-color:#FFF;  border-top-left-radius: 15px; border-bottom-left-radius: 15px;  }
#message_box{ display:none; width:auto; right:0; }
.chat-fm {
  height: auto;
  width: 100%;
  position: relative;
  bottom: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color: #FFF;
  border-radius: 15px;
}
.pri_input_box{  border-top:solid 1px #eaeaea;  padding-top:10px; bottom:0; }
.pri_input_box .fm{  padding:10px;  border:solid 1px #eaeaea;  border-radius:10px;  display: inline-flex; width:100%; }
.pri_input_box .in-box{  border:solid 0px #eaeaea;  border-radius:0px;  width:100%;  line-height: 22px;  -webkit-box-shadow:inset 0 0px 0px rgb(0 0 0 / 0%); }
.pri_input_box .in-box::placeholder{  color:#A4A4A4; }
.pri_input_box .btn-emoji{  padding:3px;  border:solid 0px #eaeaea;  background-color:#fff;  color:#6b6;  border-radius:10px;	font-size:20px;  float:right;  padding-right:10px; }
.pri_input_box .btn-send{  padding:7px;  border:solid 0px #eaeaea;  background-color:#6b6;  color:#fff;  border-radius:10px;  float:right;}
.pri_input_box .btn-send:hover{  background-color:#000;  color:#fff;}


/* close bottom */

.chat {
  display: flex;
  position:absolute;
  z-index:99;
  right:0;
}
.background {
  background-color: #000;
  border-radius: 50%;
  height: 35px;
  left: 10px;
  position: absolute;
  top: 10px;
  width: 35px;
}
.chat-bubble {
  cursor: pointer;
  position: relative;
}
.bubble {
  transform-origin: 50%;
  transition: transform 500ms cubic-bezier(0.17, 0.61, 0.54, 0.9);
}
.line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.75;
  stroke-linecap: round;
  transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 90;
  stroke-dashoffset: -20;
}
.line2 {
  stroke-dasharray: 67 87;
  stroke-dashoffset: -18;
}
.circle {
  fill: #ffffff;
  stroke: none;
  transform-origin: 50%;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.active .bubble {
  transform: translateX(24px) translateY(4px) rotate(45deg);
}
.active .line1 {
  stroke-dashoffset: 21;
}
.active .line2 {
  stroke-dashoffset: 30;
}
.active .circle {
  transform: scale(0);
}

	
/* chat-content */
.chat-content{ font-family:Arial, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 10px; line-height: 0px; background:rgba(223,223,223,0.20); width:fit-content; display:block; padding:8px; border-radius:20px; padding-top:20px; margin:5px 0; }
.chat-content .user-message{  }
.chat-content .username{ display:inline; font-size:15px; font-weight: bolder; }	
.chat-content .publish-time{ display:inline; color:#6B6B6B; }
.chat-content .message_txt{ display:block; font-size:15px; line-height: 20px;}
	
/* control landscape mobile horizontal full height */	
@media only screen and (orientation: landscape) {
.live_fm{ height: 100%;}
 ul{ /*--height:56.25%;	 --w: 100%;  --ratio: 2;  height: calc(var(--w)/var(--height)); */}
.live_message_box{  height: calc(100% - 15%); }
}