mf-video-agora {
    text-align: center;
    display: -webkit-box;
    width: 100%;
    padding: 10px;
    background: rgb(0,0,0);
    height: 100%;
    max-height: 100%;
    min-height: 300px;
}
.mf-video-agora {
    width: 100%;
    border: 5px solid rgb(40, 45, 50);
    height: 100%;
    padding: 5px;
    text-align: center;
    position: relative;
    display: block;
    max-height: 100%;
    overflow: hidden;
    margin: -5px;
}
.mf-video-agora button{
	background-color: #1f78b1;
	border: 0;
	color: rgb(250, 250, 250);
	padding: 5px 15px;
}
mf-video-agora >div {
    position: absolute;
    top: 5px;
    left: 5px;
    margin-top: 0px;
    width: auto;
}

mf-video-agora #localVideo {
    height: 100px;
    position: absolute;
    display: inline-block;
    width: auto;
    left: 5px;
    z-index: 1;
}

mf-video-agora #remoteVideo {
    height: 100%;
    position: absolute;
    display: inline-block;
    width: auto;
    left: 5px;
}

mf-video-agora .mf-video-agora > div > div {
    width: auto !important;
    overflow: unset !important;
    display: inline-block;
}

mf-video-agora > div video {
    /*object-fit: fill;*/
    height: 100%;
    width: 100%;
    max-width: 280px;
    display: inline-block;
    max-height: 100%;
    left: 0px !important;
}

mf-video-agora #localVideo video {
    top: 0px !important;
    width: auto !important;
}