@import url(https://fonts.googleapis.com/css?family=Abel);
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap);
body{margin: 0;}
.text-ellipsis{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.fw-100{font-weight: 100;}
.fw-200{font-weight: 200;}
.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}
.fw-900{font-weight: 900;}
#app{position: relative;display: grid;grid-template-columns: 55px auto;width: 100%;height: 100%;background-color: #2E2E2E;}
.menu-logo{padding: 21px 12px;/* background-color: #241340; */}
.logo_menu_mini{display: block;}
.logo_menu_mini img{height: 37px;background-color: #ffffff8a;box-shadow: 0px 0px 9px 7px #ffffff8a;}
.logo_menu{display: none;}
.logo_menu img{height: 40px;background-color: #ffffffe0;box-shadow: 0px 0px 8px 7px #ffffffe0;transition: all .5s;}

.main-menu:hover .menu-logo{/* padding: 22px; */text-align: center;}
.main-menu:hover .logo_menu_mini{display: none;}
.main-menu:hover .logo_menu{display: block;}

.stm_a_content{background-color: #2E2E2E;width: calc(100% - 55px);width: 100%;height: 100vh;/* margin-left: 55px; */display: grid;grid-template-columns: auto 350px;position: relative;}
.stm_a_content_video{background-color: #263238;/* background: radial-gradient(circle, #051340 1%, #040f32 100%); */width: 100%;height: 100%;display: grid;grid-template-rows: -webkit-max-content auto -webkit-max-content;grid-template-rows: max-content auto max-content;position: relative;}
.stm_a_content_coments{position: relative;background-color: #212121;/* background: #01081f; */width: 100%;height: 100%;overflow: hidden;display: grid;grid-template-rows: -webkit-max-content auto -webkit-max-content;grid-template-rows: max-content auto max-content;}

.stm_chat_t{text-align: center;font-weight: 600;font-size: 14px;background-color: #00000069;color: white;/* padding: 10px 0px; */box-shadow: 0px 1px 4px 1px black;}
.stm_chat_t ul{display: grid;grid-template-columns: auto auto;}
.stm_chat_t ul li{border-radius: none!important;}
.stm_chat_t ul li a{color: #b2bec9;border-radius: 0px;/* border: none!important; */font-size: 12px;}
.stm_chat_t ul li a.active{border-radius: 0px;background-color: #ffffff26!important;color: white!important;border-color: #ffffff61!important;border: solid 2px;}
.stm_chat_b{overflow: auto;height: auto;/* margin-right: 5px; */}
.stm_chat_b_c{padding: 8PX 8PX;margin-top: 8px;margin-left: 10px;margin-right: 10px;border-radius: 5px;border: solid 1px #ffffff61;color: white;display: grid;grid-template-columns: -webkit-max-content auto;grid-template-columns: max-content auto;background-color: #f0f8ff0f;/* margin-right: 5px; */}
.stm_chat_b{
  overflow-y: hidden;
  overflow-x: hidden;
}
.stm_chat_b:hover{
  overflow-y: auto;
  overflow-x: hidden;
}
.stm_chat_f{background-color: #00000069;color: white;padding: 10px 10px;box-shadow: 0px 1px 10px 1px black;}
.stm_chat_f_btn{position: absolute;margin: 0;top: 0;right: 0;height: 100%;font-size: 18px!important;padding: 5px 20px!important;border-radius: 0px;}
.stm_chat_f_input{padding-right: 66px;padding-left: 8px;padding-top: 5px;padding-bottom: 5px;line-height: 14px;background-color: #ffffff4a;color: white;font-size: 12px;font-weight: 400;}
.stm_chat_b_c_icon{background-color: #4285f4;color: white;width: 35px;height: 35px;border-radius: 50px;display: flex;justify-content: center;align-items: center;font-size: 14px;}
.stm_chat_b_c_c{margin-left: 8px;}
.stm_chat_b_c_name{font-size: 10px;color: silver;text-transform: uppercase;}
.stm_chat_b_c_coment{font-size: 12px;line-height: 16px;color: #efefef;}
.stm_a_content_video_curse_span{color: red;font-size: 16px;line-height: 0;margin-right: 4px;}


.stm_a_content_video_user{background-color: #212121;/* background: #01081f; */color: #c8d8d8;padding: 11px;font-weight: 400;box-shadow: 0px 0px 5px 0px #0000007a;border-left: solid 1px #ffffff29;border-right: solid 1px #ffffff29;text-align: center;position: relative;line-height: 19px;font-size: 12px;}
.stm_a_content_video_frame{margin: 8px;}
.stm_a_content_video_curse{background-color: #ffffff1f;color: silver;/* text-transform: uppercase; */padding: 8px;margin: 8px;font-size: 12px;position: relative;}



.stm_a_content_video_frame_{width: -webkit-fill-available;height: -webkit-fill-available;position: relative;/* padding-top: 8px; *//* padding-left: 10px; *//* padding-right: 10px; */}
.stm_a_content_video_iframe_{border: none;width: -webkit-fill-available;height: 100%;/* padding: 8px; *//* max-width: fit-content; */position: relative;}
.stm_content_video{width: -webkit-fill-available;height: inherit;width: -moz-available;}
.stm_content_video_mask{position: absolute;background-color: #00000000;width: 100%;height: 100%;top: 0;left: 0;}
.stm_content_video_mask_content{position: absolute;background-color: #000000;width: 100%;height: 100%;top: 0;left: 0;display: flex;justify-content: center;align-items: center;}
.stm_content_video_mask_content button{font-size: 22px;padding: 7px 30px;}
.stm_content_video_mask_content i{  }

/* ScrolBar  */
.scrollbar
{height: 100%;width: 100%;overflow-y: hidden;overflow-x: hidden;}

.scrollbar:hover
{
/* height: 90%; */
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}

/* Scrollbar Style */ 



::-webkit-scrollbar-track
{
  border-radius: 2px;
}

::-webkit-scrollbar
{
  width: 5px;
  background-color: #F7F7F7;
  height: 5px;
}

::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #BFBFBF;
}
/* Scrollbar End */ 




.fa-lg {
  font-size: 1em;
  
}
.fa {
  position: relative;
  display: table-cell;
  width: 55px;
  height: 36px;
  text-align: center;
  top:12px;
  font-size:20px;
}



.main-menu:hover, nav.main-menu.expanded {width: 200px;overflow:hidden;opacity:1;z-index: 1;}

.main-menu {
  background: #333;
  /* color: white; */
  position:absolute;
  top:0;
  bottom:0;
  height:100%;
  left:0;
  width:55px;
  overflow:hidden;
  transition:width .2s linear;
  -webkit-transform:translateZ(0) scale(1,1);
  box-shadow: 1px 0 5px rgb(0 0 0 / 18%);
  opacity:1;
  z-index: 999;
  display: grid;
  grid-template-rows: -webkit-max-content auto;
  grid-template-rows: max-content auto;
  /* height: 100vh; */
}

.main-menu>ul {
  margin:7px 0;

}

.main-menu li {position:relative;display:block;width: 200px;}

.main-menu li>a {
  position:relative;
  width:255px;
  display:table;
  border-collapse:collapse;
  border-spacing:0;
  /* color:#8a8a8a; */
  color: #efefef;
  font-size: 13px;
  text-decoration:none;
  -webkit-transform:translateZ(0) scale(1,1);
  transition:all .14s linear;
  font-family: 'Strait', sans-serif;
  border-top: 1px solid #737373;
  text-shadow: 0px 0px 1px #fff;
}



.main-menu .nav-icon {

  position:relative;
  display:table-cell;
  width:55px;
  height:36px;
  text-align:center;
  vertical-align:middle;
  font-size:18px;

}

.main-menu .nav-text  {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}

.main-menu .share {
}



.main-menu .fb-like {

  left: 180px;
  position:absolute;
  top: 15px;
}

.main-menu>ul.logout {
  position:absolute;
  left:0;
  bottom:0;
  
}

.no-touch .scrollable.hover {
  overflow-y:hidden;

}

.no-touch .scrollable.hover:hover {
  overflow-y:auto;
  overflow:visible;
  
}


/* Logo Hover Property */


.settings:hover, settings:focus {   
  background:url( https://s17.postimg.org/74cl7s05b/logo_hover.jpg);
  transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; 
}

.settings:active, settings:focus {   
  background:url( https://s3.postimg.org/bqfooag4z/startific.jpg);
  transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; 
}


a:hover,a:focus {
  text-decoration:none;
  border-left:0px solid #F7F7F7;



}

nav {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
  
}

nav ul,nav li {
  outline:0;
  margin:0;
  padding:0;
  text-transform: uppercase;
}




/* Darker element side menu Start*/


.darkerli
{
  background-color:#ededed;
  text-transform:capitalize;  
}

.darkerlishadow
{
  background-color:#ededed;
  text-transform:capitalize;
  box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}


.darkerlishadowdown
{
  background-color:#ededed;
  text-transform:capitalize;
  box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}

/* Darker element side menu End*/

.stm_content_add_user{position: fixed;z-index: 99999999999999;background-color: #28a745;bottom: 0;left: 0;right: 0;margin: auto;width: -webkit-max-content;width: -moz-max-content;width: max-content;padding: 8px 15px;font-size: 16px;font-weight: 500;color: white;}
html {scroll-behavior: smooth;}

.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {color:#fff;background-color:#00bbbb;text-shadow: 0px 0px 0px; }
.area {float: left;background: #e2e2e2;width: 100%;height: 100%;}
@font-face {font-family: 'Titillium Web';font-style: normal;font-weight: 300;src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');}


.stm_a_content_video_frame_pre_live{height: -webkit-max-content;height: -moz-max-content;height: max-content;width: calc(100% - 2.5em);/* height: 100%; *//* margin-top: 15px; */position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;z-index: 0;}

@media (min-width: 300px) and (max-width: 599px) {
  #app{display: block;}
  .content-main-menu{display: none;}
  .main-menu{  }
  .stm_chat_b{overflow-y: auto;overflow-x: auto;}
  .stm_a_content_video_frame_{  aspect-ratio: 16/9;}
}

@media (min-width: 300px) {
  .stm_a_content{grid-template-columns: 100%;grid-template-rows: -webkit-max-content auto;grid-template-rows: max-content auto;}
  .stm_a_content_video{/* grid-template-rows: max-content max-content max-content; *//* height: 330px; */}
  .stm_a_content_video_frame_pre_live{width: calc(100% - 2.5em);}
}
@media (min-width: 600px) {
  .stm_a_content{grid-template-columns: auto 350px;grid-template-rows: auto;}
  .stm_a_content_video{height: 100%;}
  .stm_a_content_video_frame_pre_live{width: calc(100% - 2.5em);}
}
@media (min-width: 1000px) {
  .stm_a_content{  }
  .stm_a_content_video{  }
  .stm_a_content_video_frame_pre_live{width: calc(100% - 2.5em);}
}
@media (min-width: 1200px) {
  .stm_a_content{  }
  .stm_a_content_video{  }
  .stm_a_content_video_frame_pre_live{width: calc(100% - 3.5em);}
}
@media (min-width: 1400px) {
  .stm_a_content{  }
  .stm_a_content_video{  }
  .stm_a_content_video_frame_pre_live{width: calc(100% - 8.5em);}
}

#toasts {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  position: fixed;
  bottom: 10px;
  margin: auto;
  top: auto;
  left: 0;
  right: 0;
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: flex-end; */
  /* background-color: aqua; */
}

.toast_ {
  background-color: #000000;
  color: black;
  border-radius: 5px;
  padding: .3rem 1rem;
  /* margin: 0.5rem; */
  opacity: 1;
  border: solid 1px #c0c0c036;
  margin-top: 4px;
  font-size: 12px;
}

.toast_.info {
  color: white;
}

.toast_.success {
  color: green;
}

.toast_.error {
  color: red;
}