.pos-rel {
  position: relative;
}

.tbl {
  width: 100%;
  height: 100%;
  display: table;
}

.tbl .cell {
  display: table-cell;
  vertical-align: middle;
}

.main .css-video #homePage {
  text-align: center;
}

.main .css-video #homePage .t1 {
  color: #47484C;
  font-size: 30px;
  line-height: 35px;
}

.main .css-video #homePage .form-control {
  border: 1px solid #DCDCDC;
  margin: 40px 0 30px;
  color: #47484C;
  display: inline-block;
  width: 490px;
  font-size: 16px;
  line-height: 26px;
  padding: 21px 20px;
  text-align: center;
}

.main .css-video #homePage a.link {
  display: inline-block;
  font-size: 16px;
  line-height: 26px;
  color: #909090;
  cursor: pointer;
  transition: all 0.3s;
}

.main .css-video #homePage a.link:hover {
  color: #47484C;
  font-weight: bold;
}

.main .css-video .video-frame {
  height: 100% !important;
}

.main .css-video .video-frame-container {
  line-height: 0;
}

.main .css-video .text-admin {
  position: absolute;
  top: 15px;
  left: 30px;
  color: white;
  font-size: 12px;
  line-height: 17px;
  padding: 8px 10px;
  background-color: rgba(71, 72, 76, 0.3);
}

.main .css-video .btn {
  box-shadow: none;
  transition: all 0.3s;
  background-color: #47484C;
}

.main .css-video .btn:active:focus,
.main .css-video .btn:focus {
  outline: transparent;
  outline-offset: 0;
}

.main .css-video #joinPage .hJoin {
  height: 400px;
  margin: auto;
}

.main .css-video #joinPage input#joinMeetingName {
  width: 365px;
  border: 0.5px solid #919191;
  border-radius: 5px;
  color: #47484C;
  font-size: 14px;
  padding: 13px 15px;
  background-color: white;
  height: auto;
}

.main .css-video #joinPage .btn#btnJoin {
  color: white;
  transition: all 0.3s;
  border-radius: 0;
  padding: 13px 25px;
  font-size: 14px;
  border: 1px solid #47484C;
  border-radius: 5px;
}

.main .css-video #joinPage .btn#btnJoin:hover {
  background-color: #47484C;
  color: white;
  opacity: 0.7;
}

.main .css-video .tools {
  margin-top: 10px;
}

.main .css-video .tools ul.l-tools {
  margin: 0;
  padding: 0;
  color: white;
}

.main .css-video .tools ul.l-tools.tools1 li:last-child {
  margin-left: -4px;
}

.main .css-video .tools ul.l-tools.tools1 li input.form-control {
  border-radius: 0;
  color: white;
  font-size: 16px;
  line-height: 26px;
  background-color: #47484C !important;
  border: 0;
  width: 145px;
  padding-right: 0;
}

.main .css-video .tools ul.l-tools.tools1 li #btnCopy.btn {
  padding: 15px 15px 15px 15px;
  border-radius: 0;
  border: 0;
}

.main .css-video .tools ul.l-tools.tools1 li #btnCopy.btn:hover {
  background-color: #47484C;
  color: white;
  opacity: 0.7;
}

.main .css-video .tools ul.l-tools.tools1 li #btnCopy.btn i {
  font-size: 18px;
}

.main .css-video .tools ul.l-tools.tools2 li {
  margin-right: 5px;
}

.main .css-video .tools ul.l-tools.tools2 li .btn {
  border-radius: 0;
  border: 0;
  transition: all 0.3s;
}

.main .css-video .tools ul.l-tools.tools2 li .btn:hover {
  background-color: #47484C;
  color: white;
  opacity: 0.7;
}

.main .css-video .tools ul.l-tools.tools2 li .btn i {
  font-size: 18px;
  color: white;
}

.main .css-video .tools ul.l-tools.tools2 li .btn#btnVirtual {
  padding: 15px 23px;
}

.main .css-video .tools ul.l-tools.tools2 li .btn#btnMic {
  padding: 15px 20px;
  background-color: #47484C;
}

.main .css-video .tools ul.l-tools.tools2 li .btn#btnMic.red {
  padding: 15px 15px;
  background-color: #DD3444;
}

.main .css-video .tools ul.l-tools.tools2 li .btn#btnShareScreen {
  padding: 15px 16px;
}

.main .css-video .tools ul.l-tools.tools2 li .btn#btnShareScreen.active {
  background-color: #DD3444;
}

.main .css-video .tools ul.l-tools.tools2 li .btn#btnVideo {
  padding: 15px 16px;
}

.main .css-video .tools ul.l-tools.tools2 li .btn#btnVideo.pad {
  padding: 15px 15px;
  background-color: #DD3444;
}

.main .css-video .tools ul.l-tools.tools2 li .btn#btnEndCall,
.main .css-video .tools ul.l-tools.tools2 li .btn#btnRemoveBG {
  padding: 15px 17px;
  background-color: #DD3444;
}

.main .css-video .tools ul.l-tools.tools2 li .btn#btnEndCall i {
  transform: rotate(90deg);
}

.main .css-video .tools ul.l-tools.tools2 li:last-child {
  margin-right: 0;
}

.main .css-video .tools ul.l-tools.tools2 li .box-virtual {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background-color: white;
  border-radius: 5px;
  padding: 0;
  width: 250px;
  left: 0;
  bottom: 65px;
  text-align: left;
}

.main .css-video .tools ul.l-tools.tools2 li .box-virtual.open {
  visibility: visible;
  opacity: 1;
}

.main .css-video .tools ul.l-tools.tools2 li .box-virtual ul {
  margin: 0;
  padding: 5px;
}

.main .css-video .tools ul.l-tools.tools2 li .box-virtual ul li {
  margin: 0;
  display: block;
}

.main .css-video .tools ul.l-tools.tools2 li .box-virtual ul li a {
  color: #47484C;
  transition: all 0.3s;
  font-size: 15px;
  line-height: 22px;
  display: block;
  padding: 5px 20px;
  cursor: pointer;
}

.main .css-video .tools ul.l-tools.tools2 li .box-virtual ul li a.active {
  background-color: #47484C;
  color: white;
}

.main .css-video .tools ul.l-tools.tools2 li .box-virtual ul li a:hover {
  background-color: rgba(71, 72, 76, 0.1);
}

.main .css-video .tools ul.l-tools.tools3 li {
  margin-right: 5px;
}

.main .css-video .tools ul.l-tools.tools3 li:last-child {
  margin-right: 0;
}

.main .css-video .tools ul.l-tools.tools3 li .btn {
  padding: 14px;
  border-radius: 0;
}

.main .css-video .tools ul.l-tools.tools3 li .btn#btnChatModal {
  padding: 14px 16px;
}

.main .css-video .tools ul.l-tools.tools3 li .btn:hover {
  background-color: #47484C;
  color: white;
  opacity: 0.7;
}

.main .css-video .tools ul.l-tools.tools3 li .btn i {
  font-size: 18px;
  color: white !important;
}

.main .css-video .tools ul.l-tools li {
  display: inline-block;
  vertical-align: middle;
}

.css-modal-video .modal .vertical-alignment-helper {
  display: table;
  height: 100%;
  width: 100%;
}

.css-modal-video .modal .vertical-align-center {
  display: table-cell;
  vertical-align: middle;
}

.css-modal-video .modal .modal-content {
  border-radius: 5px !important;
}

.css-modal-video .modal .modal-content .close-pop {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.css-modal-video .modal .modal-content .close-pop:hover {
  opacity: 0.7;
}

.css-modal-video .modal#modalJoin .modal-content {
  width: 550px;
  padding: 40px;
  margin: 0 auto;
}

.css-modal-video .modal#modalJoin .modal-content .t-modal {
  font-size: 14px;
  line-height: 20px;
  color: #47484C;
  margin-bottom: 8px;
}

.css-modal-video .modal#modalJoin .modal-content .form-group {
  width: 100%;
}

.css-modal-video .modal#modalJoin .modal-content .form-group .input-group {
  width: 100%;
}

.css-modal-video .modal#modalJoin .modal-content .form-group .input-group .input-group-addon {
  padding: 0;
  border: 0;
}

.css-modal-video .modal#modalJoin .modal-content .form-group .input-group .input-group-addon .input-join {
  background-color: white;
  border: 1px solid #909090;
  color: #47484C;
  font-size: 14px;
  line-height: 20px;
  padding: 14px 15px;
  width: 100%;
  height: auto;
}

.css-modal-video .modal#modalJoin .modal-content .form-group .input-group .input-group-addon .btn-join {
  background-color: #47484C;
  border: 1px solid #47484C;
  color: white;
  font-size: 14px;
  line-height: 20px;
  padding: 14px 15px;
  width: 100%;
  height: auto;
  transition: all 0.3s;
}

.css-modal-video .modal#modalJoin .modal-content .form-group .input-group .input-group-addon .btn-join:hover {
  opacity: 0.7;
}

.css-modal-video .modal#participantModal .modal-content {
  width: 530px;
  padding: 25px 25px;
  margin: 0 auto;
}

.css-modal-video .modal#participantModal .close-pop {
  top: 25px;
  right: 25px;
}

.css-modal-video .modal.modal-chat .modal-content .t-modal {
  font-size: 18px;
  line-height: 26px;
  color: #47484C;
  font-weight: bold;
  margin-bottom: 20px;
}

.css-modal-video .modal.modal-chat .modal-content ul.l-group {
  margin: 0;
  padding: 0;
}

.css-modal-video .modal.modal-chat .modal-content ul.l-group li {
  position: relative;
  display: block;
  border-bottom: 1px solid #DCDCDC;
  margin-bottom: 15px;
  padding-bottom: 15px;
  color: #47484C;
  font-size: 14px;
  line-height: 19px;
}

.css-modal-video .modal.modal-chat .modal-content ul.l-group li .date {
  color: #909090;
  font-size: 10px;
}

.css-modal-video .modal.modal-chat .modal-content ul.l-group li .name {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #909090;
}

.css-modal-video .modal.modal-chat .modal-content ul.l-group li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.css-modal-video .modal.modal-call .form-control {
  border-radius: 0;
  background-color: #F7F7F7 !important;
  color: #909090;
  font-size: 14px;
  line-height: 19px;
  padding: 14px 15px 15px;
  border: 0;
}

.css-modal-video .modal.modal-call .btn {
  border-radius: 0;
  width: 100%;
  color: white;
}

.css-modal-video .modal.modal-call .btn:hover {
  color: white;
  opacity: 0.7;
  background-color: #47484C;
}

.css-modal-video .modal.modal-call .row {
  margin-left: -7.5px;
  margin-right: -7.5px;
}

.css-modal-video .modal.modal-call .row > div {
  padding-left: 7.5px;
  padding-right: 7.5px;
}

.css-modal-video .modal.modal-call .modal-content {
  padding: 25px 25px;
}

.css-modal-video .modal.modal-call .modal-content .btn-close {
  line-height: 1;
  top: 15px;
  right: 15px;
}

.css-modal-video .modal.modal-call .close-pop {
  line-height: 1;
  top: 25px;
  right: 25px;
}

.css-modal-video .modal.modal-call .modal-dialog {
  max-width: 530px;
  width: 530px;
}

.css-modal-video .modal.modal-call .t-modal {
  font-size: 18px;
  line-height: 26px;
  color: #47484C;
  font-weight: bold;
  margin-bottom: 20px;
}

.css-modal-video .modal.modal-call .list-image .item {
  margin-bottom: 20px;
  position: relative;
}

.css-modal-video .modal.modal-call .list-image .item label.radio-card {
  display: block;
  cursor: pointer;
  margin-bottom: 0;
}

.css-modal-video .modal.modal-call .list-image .item label.radio-card .check-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: solid 1px #47484C;
  border-radius: 50%;
  transition: all 0.3s;
  position: absolute;
  top: 10px;
  left: 10px;
}

.css-modal-video .modal.modal-call .list-image .item label.radio-card .check-icon:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center center;
  transform: scale(1.3);
  transition: all 0.3s;
  opacity: 0;
}

.css-modal-video .modal.modal-call .list-image .item label.radio-card input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: none;
}

.css-modal-video .modal.modal-call .list-image .item label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon {
  background: #47484C;
  border-color: #47484C;
  transform: scale(1.2);
}

.css-modal-video .modal.modal-call .list-image .item label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon:before {
  transform: scale(1);
  opacity: 1;
}

.css-modal-video .modal.modal-call .list-image .item label.radio-card .card-content img {
  width: 100%;
}

.css-modal-video .modal#chatModal .modal-content {
  width: 530px;
  padding: 25px 0;
  margin: 0 auto;
}

.css-modal-video .modal#chatModal .modal-content ul.l-group#chatArea {
  height: 50vh;
  overflow-y: scroll;
  padding-right: 15px;
}

.css-modal-video .modal#chatModal .modal-content ul.l-group#chatArea::-webkit-scrollbar {
  width: 8px;
}

.css-modal-video .modal#chatModal .modal-content ul.l-group#chatArea::-webkit-scrollbar-track {
  background-color: rgb(240, 242, 246);
  border-radius: 3px;
}

.css-modal-video .modal#chatModal .modal-content ul.l-group#chatArea::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #47484C;
}

.css-modal-video .modal#chatModal .modal-content ul.l-group#chatArea li {
  padding-bottom: 0;
  border-bottom: 0;
}

.css-modal-video .modal#chatModal .pad25 {
  padding: 0 25px;
}

.css-modal-video .modal#chatModal .pad25.bdr {
  margin-top: 15px;
  padding-top: 25px;
  border-top: 1px solid #DCDCDC;
}

.css-modal-video .modal#chatModal .form-control {
  border-radius: 0;
  background-color: #F7F7F7 !important;
  color: #909090;
  font-size: 14px;
  line-height: 19px;
  padding: 14px 15px 15px;
  border: 0;
  height: auto;
}

.css-modal-video .modal#chatModal .btn {
  padding: 13px 25px;
  border-radius: 0;
  width: 100%;
  color: white;
  height: auto;
}

.css-modal-video .modal#chatModal .btn:hover {
  color: white;
  opacity: 0.7;
  background-color: #47484C;
}

.css-modal-video .modal#chatModal .close-pop {
  top: 25px;
  right: 25px;
}

.css-modal-video .modal#chatModal .row {
  margin-left: -7.5px;
  margin-right: -7.5px;
}

.css-modal-video .modal#chatModal .row > div {
  padding-left: 7.5px;
  padding-right: 7.5px;
}