.local-video-holder{
  position:relative;
  bottom: 0;
  right: 0;
  margin:0;
  width:100%;
  height:100%;
  overflow: hidden;
}

.local-video-holder video{
  position: relative;
  width: 100% !important;
  height: auto !important;
  transition: 1s opacity;
  z-index: 100;
} 

.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

.participant-list-item {
	background: white;
	cursor: pointer;
	/*flex: 0 0 220px;*/
	/*height: 100px*/
}

.participant-list-item:hover {
	background: hsl(0, 0%, 95%);
}

.participant-list-item:active {
	background: hsl(0, 0%, 85%);
}

.participant-list-item:focus {
	background: hsl(0, 0%, 90%);
	outline: none;
}

.stream-thumbnail-row{

}

.stream-thumbnail-block{
  border: 2px solid rgb(255, 255, 255);
  border: 2px solid rgba(255, 255, 255, .5);
  /*display: flex;*/
}

.stream-thumbnail-block-selected{
	background-color: #bababa;
}

.stream-thumbnail-block-hidden{
	background-color: red;
	display: none;
}

.stream-thumbnail-block:hover{
	/*background-color: #bababa;*/
}

.stream-thumbnail-block:hover .stream-options {
	display: block;
}

.stream-thumbnail-block:hover .mobile-stream-options {
  display: block;
}

.stream-thumbnail-block-selected .stream-options {
	display: block;
}

.self-publisher-panel:hover .stream-options {
	display: block;
}

.stream-options {
	color: white;
	display: none;
}

.stream-options :hover{
  font-size:1.1em;
  /*transition: 0.2s;*/
  color: #00bfc6;
}

.mobile-stream-options{
  color: white;
  display: none;
}

.speaker-preview-options {
  color: white;
  display: none;
}
.speaker-preview-block:hover .speaker-preview-options{
  display: block;
}



.stream-name {
	top:0; 
	position:absolute;
	color: white; 
	text-align: center; 
	font-size: 15px;
	
}

.stream-name p{
	background-color: hsl(0, 0%, 0%, 0.4);
}

.stream-options-fullscreen {
	padding-top: 20px;	
	padding-right: 7px;
	position: absolute;
	right: 0;
	top: 0;
	font-size: 30px;
}

.stream-selected-fullscreen {
	width: 100%; 
	height: 100%;
	position: absolute;
	top: 0;
	right: 0; 
	bottom: 0; 
	left: 0;
}

.stream-selected-fullscreen .stream-options {
	display: block;
}

.ticker_message {
	background: none repeat scroll 0 0;
	color: #646464;
	font-size: 14px;
	margin: 0;
	word-wrap: break-word;
  white-space: normal
}


.horizontal-scroll-stream > .row {
  overflow-x: auto;
  overflow-y: none;
  white-space: nowrap;
  /*display: none;*/
  transition: .1s ease-in-out 1s;
}

.horizontal-scroll-stream:hover .row{
  display: flex;
  visibility: visible;
  transition: .1s ease-in-out 0s; 
}

.horizontal-scroll-stream:hover .strip-scroll-button-exp{
  display: flex;
  visibility: visible;
  transition: .25s ease-in-out 0s; 
}


.horizontal-scroll-stream > .row > .strip-thumbnail{
  display: inline-block;
  float: none;
}

.strip-thumbnail {
  /*width: 177.77px; */
  height: 120px;
}

.strip-scroll-button {
    background-color: grey;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

.strip-scroll-button-exp{
    width:30px;
    height:30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px;
    border-radius: 50%;
    box-sizing: border-box;

    background-color: grey;
    background-repeat:no-repeat;
    border: 1px solid white;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    /*display: none;*/
}

.speaker-preview-options-button{
    width:50px;
    height:50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px;
    border-radius: 50%;
    box-sizing: border-box;

    background-color: hsl(0, 0%, 0%, 0.4);
    background-repeat:no-repeat;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

.navbar-icon-vertical-separator{
  border-left: 1px solid #ccc;
  opacity: 30%;
  height: 80%;
}

.modal-dialog-full-width {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width:none !important;

}

.modal-content-full-width  {
    height: auto !important;
    min-height: 100% !important;
    border-radius: 0 !important;
    background-color: #ececec !important 
}

.modal-header-full-width  {
    border-bottom: 1px solid #9ea2a2 !important;
}

.modal-footer-full-width  {
    border-top: 1px solid #9ea2a2 !important;
}

.grecaptcha-badge { 
    visibility: hidden;
}

 @keyframes fa-blink {
     0% { opacity: 1; }
     25% { opacity: 0.25; }
     50% { opacity: 0.5; }
     75% { opacity: 0.75; }
     100% { opacity: 0; }
 }
 
 .loss-indicator {
 	display: none!important;
 }

 .participant-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
 }

 .fit-video {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

.videoWrapper {
  ...
  /* falls back to 16/9, but otherwise uses ratio from HTML */
  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%); 
}

.visuallyhidden:not(:focus):not(:active) {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;

  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}


input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.fa-rotate-225 {
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
}

.connection-indicator{
  height: 10px;
  background-color: #00999f;
  border-radius: 70%;
  display: inline-block;
}

 .screen-share-options > a:hover, .screen-share-options > a:focus {
            background-image:none !important;
 }
 .screen-share-options > a:hover, .screen-share-options > a:focus {
            background-color:#006d72 !important;
 }


.navbar-icon-with-label {
  display: flex!important;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  float: left;
  width: 60px;
  height: 60px;
  font-size: 20px;
  text-align: center;
  color: white;
  border-radius: 0;
  white-space: normal;
}

.navbar-icon-with-label  .action-icon {
  font-size: 30px;
  display: block;
  /*margin-bottom: .1em;*/
}

video::-webkit-media-controls {
  display:none !important;
}