*{
  font-family: 'Montserrat', sans-serif !important;
}
.login-outer {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
    flex-wrap: nowrap;
}
.login-outer input {
    margin: 0px 10px;
    height: 40px;
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: none;
}
.login-outer button {
    padding: 11px 30px;
    color: #fff;
    font-size: 15px;
    border: 0;
    border-radius: 4px;
    margin-left: 0;
    cursor: pointer;
    background: -moz-linear-gradient(left, rgba(102,197,238,1) 0%, rgba(46,86,166,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(102,197,238,1)), color-stop(100%, rgba(46,86,166,1)));
    background: -webkit-linear-gradient(left, rgb(76, 165, 204) 0%, rgb(12, 67, 177) 100%);
    font-weight: 500;
    height: 40px;
    line-height: 100%;
}
.login-outer button:hover, .login-outer button:focus{
    color: #fff;
}
.login-outer p {
    margin: 0px;
    font-weight: 500;
    font-size: 17px;
}
.logo-img {
    margin-bottom: 30px;
}
.text-muted {
    font-weight: 500;
    font-size: 19px;
    color: #333;
}
#inviteAddress {
    font-size: 14px;
    border: 1px solid #ccc;
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 10px;
    color: #ccc;
    border-radius: 3px;
    width: 100%;
    margin-left: 10px;
    word-break: break-all;
}
.height-video {
    position: relative;
}
.fp-remoteVideo {
    position: absolute !important;
    width: calc(100% - 70px);
    text-align: center;
    box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
    padding: 0;
    background: #f5f5f5;
    border: none;
}
.height-video, .fp-remoteVideo {
    height: 450px;
} 
#participant1Name {
    margin-top: 10px;
    width: calc(100% - 70px);
}
.btn-mute button{
    border-radius: 50%;
    height: 47px;
    width: 47px;
    overflow: hidden;
    text-align: center;
    align-items: center;
    background: -moz-linear-gradient(left, rgba(102,197,238,1) 0%, rgba(46,86,166,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(102,197,238,1)), color-stop(100%, rgba(46,86,166,1)));
    background: -webkit-linear-gradient(left, rgb(76, 165, 204) 0%, rgb(12, 67, 177) 100%);
    box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
    border: none;
    margin: 0px 5px;
    line-height: 100%;
}
.btn-mute button:active{
    background: -moz-linear-gradient(left, rgba(102,197,238,1) 0%, rgba(46,86,166,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(102,197,238,1)), color-stop(100%, rgba(46,86,166,1)));
    background: -webkit-linear-gradient(left, rgb(76, 165, 204) 0%, rgb(12, 67, 177) 100%);
    box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
}
.btn-mute {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    top: 0;
    position: absolute;
    right: 0;
    width: 60px;
    text-align: right;
}
.btn-mute img {
    max-width: 23px;
}
.fp-localVideo {
    border: 1px double #6b6b6b;
    position: absolute !important;
    width: 120px;
    height: 91px;
    margin: auto;
    z-index: 2147483647;
    text-align: center;
    background: #e0e0e0;
    bottom: 5px;
    left: 5px;
}
div#chat {
    height: 100px;
    border-radius: 2px;
    border: 1px solid #ccc;
    overflow-y: auto;
    margin-bottom: 15px;
}
textarea#message {
    height: 40px;
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: none;
}
button#sendMessageBtn {
    padding: 11px 30px;
    color: #fff;
    font-size: 15px;
    border: 0;
    border-radius: 4px;
    margin-left: 0;
    cursor: pointer;
    background: -moz-linear-gradient(left, rgba(102,197,238,1) 0%, rgba(46,86,166,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(102,197,238,1)), color-stop(100%, rgba(46,86,166,1)));
    background: -webkit-linear-gradient(left, rgb(76, 165, 204) 0%, rgb(12, 67, 177) 100%);
    font-weight: 500;
    height: 40px;
    line-height: 100%;
}
.logo-img {
    margin: 25px 0;
}
.position-relative {
    position: relative;
}
.btn-mute button {
    margin: 0 0 10px 0;
    font-size: 10px;
    padding: 0;
    color: #fff;
}
.btn-mute button:focus {
    outline: none;
    color: #fff;
}
.btn-mute button:hover {
    color: #fff;
}
.chat-outer h2 {
    margin-top: 0;
    font-size: 23px;
    font-weight: 600;
    color: #797979;
}
.chat-outer {
    background: whitesmoke;
    padding: 15px;
    border-radius: 3px;
}
#participant1Display {
    width: 100% !important;
    height: auto !important;
}

@media screen and (max-width:767px){
    .row {
        margin: 0px -7px;
    }
    .height-video, .fp-remoteVideo {
        height: 190px;
    }
    .fp-localVideo {
        width: 80px;
        height: 61px;
    }
    .fp-remoteVideo {
        width: 100%;
    }
    .btn-mute {
    width: 100%;
    justify-content: flex-end;
    width: 60px;
}
    .btn-mute button {
    margin: 4px 10px;
    font-size: 10px;
    padding: 0;
    color: #fff;
    width: 34px;
    height: 34px;
}
.btn-mute img {
    max-width: 18px;
}
#participant1Name {
    width: 100%;
    margin-bottom: 20px;
}
.chat-outer h2 {
    text-align: center;
}
}