html { height: 100%; }
body { height: 100%; padding: 0 !important; }
div.container-fluid { height: 100%; }
div#participants { /*overflow-y: auto;*/ }

div.participant { background: center no-repeat url("data:image/svg+xml;utf8,<svg class='bi bi-person-fill' width='80' height='45' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 100-6 3 3 0 000 6z' clip-rule='evenodd'/></svg>"); border: 1px solid gray; display: inline-flex; margin: 0; overflow: hidden; }
div.participant > video { width: 100%; height: 100px; }
div.participant.main { height: inherit; margin: 10px 0; max-width: 100%; width: 100%; } 
div.participant.main > video { height: 720px; } 
div.participant.active { border: 1px solid crimson; box-shadow: 0 0 5px crimson; } 
div.participant.active.pinned { border: 1px solid limegreen; box-shadow: 0 0 5px limegreen; } 
div.participant:hover { cursor: pointer; } 
div.participant::before { background-color: black; color: white !important; content: attr(data-identity); font-size: 10px; padding: 0 5px; position: absolute; z-index: 1000; } 
div.participant.main::before { font-size: 14px; padding: 0 10px; } 
button#muteVideoBtn { margin: 0px 5px 0 0; } @media (max-width: 576px) { #muteVideoBtn { margin: 5px 0px !important; } 
div.participant.main > video { height: 180px; } } 
@media (max-width: 768px) { 
  div.participant.main > video { height: 270px; } 
} 
.bg-dark { background-color: #a3292e !important; } 
.modal-header { background-color: #a3292e !important; color: #fff !important; } 
.btn-primary { background-color: #a3292e !important; border-color: #a3292e !important; } 
.btn.disabled, .btn:disabled { cursor: not-allowed; } 

/*NEW STYLE START*/ 
body { background: #eaeef3; } 
nav.navbar { border-bottom: 1px solid #e1e1e1; padding: 15px; background: #fff; margin-bottom: 15px; } 
div.participant.main > video { background: #616161; } 
div.participant.main { margin-top: 0px; margin-bottom: 0px; } 
.relative { position: relative; } 
.relative .ficon { position: absolute; right: 15px; top: 15px; z-index: 1; } 
.card { border-radius: 0px; min-height: 100%; } 
.card .title { font-size: 16px; text-align: left; } 
.card .participant { width: 100%; border: 2px solid #d8d8d8; margin: 0 0 20px 0; } 
.card .participant.active { border: 2px solid #a3292e; } 
.card .participant video { margin: 0; } 
.card-body { overflow-y: auto; } 
@media screen and (max-width: 767px) { 
  .card { margin-top: 0px; } 
} 
@media (max-width: 567px) { 
  .card .participant { width: 45%; margin: 10px 2%; } 
} 
/*NEW STYLE END*/


.modal{text-align:center;}
@media screen and (min-width: 768px) { 
	.modal:before{display:inline-block;vertical-align:middle;content:" ";height:100%;}
}
.modal-dialog{display:inline-block;text-align:left;vertical-align:middle;}
#divAuthBg{background:url(authentication-bg.jpg);position:fixed;left:0;top:0;width:100%;height:100%;z-index:9;background-size:cover;background-position:center;}
.modal-header{background-color:transparent !important;}
.modal-title{color:#000 !important;}

.tbl-browser{color:#856404;font-size:12px;}
.tbl-browser, .tbl-browser tr, .tbl-browser td, .tbl-browser th{border-color:#ccc !important;padding:5px;}
.tbl-browser th, .tbl-browser td{text-align:center;vertical-align:top;font-weight:normal;}