.modal-open .modal .model-close-button {
    color: white;
    position: absolute;
    margin-right: 10px;
    right: 0px;
    font-size: 10px !important;
    padding: 10px;
    z-index: 999999;
    cursor: pointer;
    top: 8px;
    background-color: red;
    border-radius: 10px;
}

.model-close-duplicate{
    color: white;
    position: absolute;
    margin-right: 10px;
    right: 0px;
    font-size: 10px !important;
    padding: 10px;
    z-index: 10;
    cursor: pointer;
    top: 8px;
    background-color: red;
    border-radius: 10px;
}

#close-button-detailed{
    background-color: #0000003d !important;
    color: #FFF;
    font-size: 12px;
    border-radius: 50%;
    padding: 10px;
}
#close-button-detailed:hover{
    background: #111 !important;
}
#detailCall {
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
    background-color: #0000003d;
    border-radius: 50%;
}
#detailCall:hover{
    background-color: #111;
}

#simpleCall {
    background-color: #0000003d !important;
    color: #FFF;
    font-size: 12px;
    border-radius: 50%;
    padding: 10px;
}
#simpleCall:hover{
    background: #111 !important;
}

#video-call .main-container {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 !important;
}

#video-call .main-container .remote-main-container {
    height: 100%;
    width: 100%;
    padding: 0;
}

#video-call .main-container .remote-main-container .videoContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#videoContainer{
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
    height: 100vh;
    flex: 8;
}

.remotePerContainers {
    display: inline-flex;
}

#remotePerContainer0 {
    display: flex;
    justify-content: center;
    visibility: visible;
}

#video-call .main-container .remote-main-container i {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#answerCall {
    border-radius: 4px;
    color: #FFF;
    width: 50px;
    height: 50px;
    background: #5f9e73;
    font-size: 20px;
    z-index: 2;
    padding: 16px 0;
    text-align: center;
    cursor: pointer;
    margin: 0 6px;
}

#answerCall:hover{
    background: #3ecc6a;
}


#answerCob {
    background-color: #20bd1e;
    border-radius: 50%;
    font-size: 25px;
    width: 45px;
    height: 45px;
    padding: 12px;
    /* bottom: 10%; */
    /* left: 60%; */
    margin-right: 10px;

    /* transform: translate(-50%, -50%); */
    opacity: 0.7;
    z-index: 999;
}

#answerMobile {
    background-color: #20bd1e;
    border-radius: 50%;
    font-size: 25px;
    width: 45px;
    height: 45px;
    padding: 12px;
    opacity: 0.7;
    z-index: 999;
}
.declineCall {
    -webkit-appearance: none;
    background-color: #c33232;
    border-radius: 4px;
    width: 50px;
    min-width: 50px;
    max-width: 50px !important;
    min-height: 50px !important;
    max-height: 50px;
    height: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 250ms;
    font-weight: 300;
    font-size: 32px;
    outline: 0;
    border: 0;
    margin: 0 6px;
}

.declineCall:hover {
    background-color: #f30f0f;
}

#declineCob {
    background-color: #bd0808;
    border-radius: 50%;
    font-size: 25px;
    width: 45px;
    height: 45px;
    padding: 12px;
    transform: rotate(135deg);
    /* bottom: 10%; */
    /* left: 40%; */
    /* transform: translate(-50%, -50%); */
    opacity: 0.7;
    z-index: 999;

}

#declineMobile {
    background-color: #bd0808;
    border-radius: 50%;
    font-size: 25px;
    width: 45px;
    height: 45px;
    padding: 12px;
    transform: rotate(135deg);    opacity: 0.7;
    z-index: 999;
}
#minimizedView{
    height: 202px;
    width: 270px;
    border-radius: 5%;
    border-style : solid solid solid solid;
    border-color:  black;
    border: 1px;
}
#minimizedLocal{
    height: 100px;
    width: 100px;
    left: 160px;
    top: 160px;
    position: absolute;
    z-index: 2;
}
#minimize {
    background-color: #0000003d !important;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
}
#minimize:hover {
    background: #111 !important;
}
#minimizeDetailed {
    background-color: #0000003d !important;
    color: #FFF;
    font-size: 12px;
    border-radius: 50%;
    padding: 10px;
}
#minimizeDetailed:hover {
    background: #111 !important;
}
#endcall:hover {
    opacity: 1 !important;
}

#video-call .main-container .video-container-local {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#video-call .main-container .video-container-local .local-video {
    height: 100%;
    width: 100%;
    position: relative;
}

#menu-control_customer {
    /* top: 5px; */
    /* font-size: 17px; */
    cursor: pointer;
    /* padding: 5px 5px; */
}
.callingUser {
    color: white;
    font-size: 0px;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    left: -50%;
    top: 80px;
    z-index: 999;
}
#callingUserName {
    bottom: 30%;
    left: 28%;
}
.blinky {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
#callReceivedLabel {
    bottom: 45%;
    left: 35%;

}
.callingUserL {
    font-size: 0px;
    color: white;
    position: relative;
    left: -19%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    z-index: 999;
    top: 60px;
}
#video-call-img {
    position: absolute;
    display: block;
    width: 40%;
    opacity: 0.8;
    z-index: 0;
    transform: translate(75%, 7%);
}
.call_labels {
    left: 50%;
    position: absolute;
}
#pencilDropdown {
    padding: 2px;
    z-index: 10;
    cursor: pointer;
    font-size: 20px;
    color:#FFF;
}
#tintDropdown {
    padding: 2px;
    z-index: 10;
    cursor: pointer;
    font-size: 20px;
    color:#FFF;
}

#tintDropdown .dropdown-menu {
    left: -64px !important;
}


#locationDropdown {
    z-index: 10;
    cursor: pointer;
    font-size: 20px;
    color:#FFF;
}
#sendSmsDetailedVideoCall{
    position: absolute;
    top: 8px;
    right: 132px;
    padding: 10px;
    z-index: 10;
    cursor: pointer;
    font-size: 10px;
    color:white;
    background-color: #F8781C;
    border-radius: 10px;
}
#sendSmsDetailedVideoCall:hover{
    background-color: #005591;

}
#sendSmsVideoCall{
    position: absolute;
    top: 5px;
    right: 160px;
    padding: 10px;
    z-index: 10;
    cursor: pointer;
    font-size: 20px;
    background-color: #F8781C;
    border-radius: 10px;
}
#sendSmsVideoCall:hover{
    background-color: #005591;
}
#pointer {
    opacity: 0;
    width: 20px;
    z-index:10;
    height: 20px;
    background: #0009ff;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 0px;
}


#pointerOperator {
    opacity: 0;
    width: 20px;
    z-index:10;
    height: 20px;
    background: #0009ff;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 0px;
}

#setPointer {
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    color: white !important;
    background-color: #0000003d !important;
    border-radius: 50%;
}

#setPointerDetailed {
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    color: white !important;
    background-color: #0000003d !important;
    border-radius: 50%;
}
#setPointer:hover{
    background: #111 !important;
}
#setPointerDetailed:hover{
    background: #111 !important;
}

#coBrowsingButtons{
    width:180px;
    /* height:90px; */
    margin:0 auto;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    /* vertical-align: bottom; */
    /* bottom: 0; */
    /* position: fixed; */
}

#coBrowsingRequest{
    display:none;
    z-index: 10;
    width: 250px;
    border-radius: 10px;
    padding: 10px;
    color: white;
    /* height: 107px; */
    position: absolute;
    text-align: center;
    background-color: #40404080;
}

.coBrowsingView{
    border-radius: 10px;
    padding: 10px;
    color: white;
    /* height: 107px; */
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    /* background-color: #40404080; */
}

.cob-close-duplicate{
    color: white !important;
    position: absolute !important;
    margin-right: 10px !important;
    right: 10px !important;
    width: 25px !important;
    height: 25px !important;
    font-size: 10px !important;
    /* padding: 10px; */
    z-index: 10 !important;
    cursor: pointer !important;
    top: 4px !important;
    background-color: red !important;
    border-radius: 50% !important;
}
.minimizeCob {
    position: absolute !important;
    top: 4px !important;
    right: 49px !important;
    /* padding: 24px !important; */
    width: 25px !important;
    height: 25px !important;
    z-index: 10 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    background: lightsteelblue !important;
    background-color: #796e6e !important;
    border-radius: 50% !important;
    color: white !important;
}
.cobButtons{color:white;background: #40404099;width: 100%;height: 32px;left: 0;border-radius: 15px;top: 3px;z-index: 11;position: absolute;}

.play-pause{display:none;}
.play-pause .center{display:none;}

#joinedVideoContainerList {
    flex: 2;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    place-content: flex-end;
    gap: 10px;
    visibility: visible;
}

video {
    object-fit: contain;
}

.call-items {
    position: fixed;
    display: flex;
    z-index: 2;
}

.call-bottom-center-items {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.call-top-right-items {
    gap: 5px;
    top: 10px;
    right: 20px;
}

#hidevideo, #reconnect, #desktopShare, #mute {
    border-radius: 4px;
    background-color: #ffffff;
    width: 50px;
    height: 50px;
    color: #868686;
    font-size: 20px;
    z-index: 2;
    padding: 16px 0;
    text-align: center;
    cursor: pointer;
    margin: 0 6px;
}

#desktopShare:hover, #reconnect:hover, #hidevideo:hover, .sendVideoCallButton:hover, #mute:hover {
    background-color: #43474a;
}

.sendVideoCallButton {
    width: 50px;
    height: 50px;
    background-color: #2d2d2d;;
    border-radius: 5px;
    color: #ffffff;
    font-size: 21px !important;
    text-align: center;
    padding: 13px 0;
}

.answer-call {
    overflow: scroll;
    position: absolute;
    color: #4a4a4a;
    max-width: 431px;
    width: 90%;
    z-index: 99999999;
    overflow-x: hidden;
    background-color: #fff;
    border-radius: 4px;
    max-height: 500px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-box-shadow: 0px 0px 14.24px 1.76px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 0px 14.24px 1.76px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 14.24px 1.76px rgba(0, 0, 0, 0.08);
}

.answer-call-button {
    width: 100%;
    max-width: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5f9e73;
    color: #fff;
    text-align: left;
    border-radius: 4px;
    font-weight: 600;
    padding: 0 20px 0 10px;
    outline: 0;
    border: 0;
    transition:0s none;
    -webkit-transition:0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
    height: 50px;
}

.answer-call-button:hover {
    background: #3ecc6a;
}

.waiting-call-button {
    width: 100%;
    max-width: 570px;
    display: flex;
    align-items: center;
    background: #888;
    color: #fff;
    text-align: left;
    border-radius: 4px;
    justify-content: center;
    font-weight: 600;
    padding: 0 20px 0 10px;
    outline: 0;
    border: 0;
    cursor: wait;
    transition: 0s none;
    -webkit-transition: 0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
    height: 50px;
}

.answer-call-button:focus,
.answer-call-button:active,
.call-items > button:active,
.call-items > button:focus,
.declineCall:focus,
.declineCall:active,
.waiting-call-button:focus,
.waiting-call-button:active {
    outline: 0;
    border: 0;
}

.video-container {
    background: #fff;
    border-radius: 4px;
    padding: 8px;
}

.detailed-upload-container {
    background: #fff;
    border-radius: 4px;
    margin-top: 4px;
}

.detailed-upload-header {
    height: 58px;
    border-bottom: 1px solid #f1f1f1;
    font-weight: 700;
    font-size: 20px;
    color: #1b3452;
    padding-left: 28px;
    display: flex;
    align-items: center;
}

.detailed-upload-content {
    padding: 18px 28px;
}

.videoControlContainer {
    width: 300px;
    margin: 0 auto;
    position: relative;
}

.videoControlContainer > video {
    background: #f1f1f1;
    width: 100%;
    border-radius: 4px;
    animation: play 2s ease infinite;
}

.video-control-icons {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
}

.video-control-item {
    width: 50px;
    height: 35px;
    background: #00000094;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    cursor: pointer;
}

.video-control-item:hover {
    background: #000;
}

@keyframes play {
    0% {
        transform: scale(1);
    }
    15% {
        box-shadow: 0 0 0 2px rgba(67, 220, 128, 0.4);
    }
    25% {
        box-shadow: 0 0 0 4px rgba(67, 220, 128, 0.4), 0 0 0 8px rgba(67, 220, 128, 0.2);
    }
    25% {
        box-shadow: 0 0 0 6px rgba(67, 220, 128, 0.4), 0 0 0 12px rgba(67, 220, 128, 0.2);
    }
}

.sendVideoCallForOp {
    margin: 0 6px;
}

.sendVideoCallForOpList {
    background: #2d2d2dba;
    border-radius: 4px;
    position: absolute;
    overflow-y: hidden;
    bottom: 66px;
    display: none;
    padding: 10px 12px;
    box-shadow: 0px 0px 24px rgb(0 0 0 / 10%);
}

.sendVideoCallForOpList > ul {
    margin: 0;
    padding: 0;
}

.sendVideoCallForOpList > ul > span {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    color: #868686;
    padding: 0 10px;
    cursor: default;
}
.sendVideoCallForOpList > ul > li {
    color: #f1f1f1;
    text-transform: capitalize;
    list-style-type: none;
    padding: 8px 10px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
}

/*.sendVideoCallForOpList ul li:not(:last-child) {
    border-bottom: 1px solid #d9d9d9;
}*/

.sendVideoCallForOpList > ul > li:hover {
    background: #1b3452;
}

.videoCallRemoteStreamGuestName{
    width: 100%;
    position: absolute;
    left: 0;
    background: #40404073;
    color: white;
    text-align: center;
}

.change-devices {
    position: relative;
}

.change-devices > i {
    position: absolute;
    top: 7px;
    left: 7px;
}

.scrollable-right-panel-forms {
    display: block;
    width: 100%;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 34px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) ;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.scrollable-right-panel-forms:hover, .scrollable-right-panel-forms:focus {
    border-color: rgb(156, 158, 160);
}
.scrollable-right-panel-forms:focus {
    box-shadow: rgba(153, 153, 153, 0.2) 0px 0px 0px 3px;
    outline: 0;
}

.pip-video-bar {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
    background-color: #0000003d;
    border-radius: 4px;
    z-index: 10;
}

.pip-video-bar:hover {
    background: #000;
}

.video-send-modal-video-disabled {
    color: #4c4c4c;
}

.video-call-waiting {
    -webkit-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    color: #FFF;
    text-shadow: 1px 1px #0f0f0f5c;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: pre-line;
}

#fullConnected {
    visibility: visible;
}

.appointment-time-counter-videocall {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 55;
    margin: auto;
    width: max-content;
    height: max-content;
    color: #FFF;
    background: #bbb;
    border-radius: 4px;
    padding: 10px;
}

@media only screen and (max-width: 1080px) {
    .video-call-bottom-item > span,
    .video-call-appointment-duration > span:first-of-type,
    .video-call-record{
        display: none !important;
    }

    .gallery-view-top-mobile {
        position: fixed;
        top: 10px;
        z-index: 1;
        left: 0;
    }

    .gallery-view-top-mobile .video-call-user-container,
    .gallery-view-top-mobile .video-call-self-container,
    .gallery-view-top-mobile .video-call-user-container:hover,
    .gallery-view-top-mobile .video-call-self-container:hover,
    .screen-view .video-call-user-container,
    .screen-view .video-call-self-container,
    .screen-view .video-call-user-container:hover,
    .screen-view .video-call-self-container:hover{
        border: none !important;
    }

    .video-call-bottom-mobile {
        position: fixed;
        bottom: 10px;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .screen-view video {
        width: 100% !important;
        height: 100% !important;
    }
    .screen-view-is-mobile {
        max-height: unset !important;
    }
    .video-call-modal-mobile {
        padding: 10px !important;
    }
    .screen-view-mobile .video-call-name-area {
        bottom: 60px !important;
    }
    .screen-view > div {
        background: none !important;
    }
    .video-call-wrapper-gallery-maximize-mobile .gallery-view {
        display: grid !important;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, auto);
        height: 100%;
    }
    .video-call-wrapper-gallery-maximize-mobile .gallery-view video {
        position: absolute;
        height: 100% !important;
    }

    .video-call-settings-is-open {
        bottom: 42px !important;
    }
    .video-call-bottom-item {
        padding: 0 8px !important;
    }

    .video-call-bottom,
    .video-call-answer {
        gap: 10px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
    /*.video-call-user-container, .video-call-self-container {*/
    /*    flex: 33%;*/
    /*}*/

    /*.gallery-view-top {*/
    /*    flex-wrap: nowrap !important;*/
    /*    position: fixed !important;*/
    /*    top: 10px;*/
    /*    z-index: 1;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*}*/

    /*.gallery-view {*/
    /*    flex-wrap: wrap;*/
    /*}*/

    /*.gallery-view-top .video-call-user-container, .gallery-view-top .video-call-self-container {*/
    /*    flex: unset;*/
    /*}*/

    /*.screen-view {*/
    /*    position: fixed;*/
    /*    left: 0;*/
    /*    top: 0;*/
    /*    width: 100%;*/
    /*}*/

    /*.screen-view .video-call-name-area {*/
    /*    bottom: 70px;*/
    /*}*/

    /*.video-call-bottom-list {*/
    /*    z-index: 1;*/
    /*    background: #00000085 !important;*/
    /*}*/
    /*.screen-view video {*/
    /*    max-height: 100vh !important;*/
    /*}*/
    /*.video-call-appointment-duration,*/
    /*.video-call-record,*/
    /*.gallery-view-top,*/
    /*.video-call-bottom {*/
    /*    position: absolute;*/
    /*    opacity: 0;*/
    /*}*/
    /*.video-call-modal-mobile-view {*/
    /*    position: unset;*/
    /*    opacity: 1;*/
    /*}*/
    /*.video-call-user-container:hover, .video-call-self-container:hover,*/
    /*.video-call-user-container, .video-call-self-container {*/
    /*    border: none !important;*/
    /*}*/
    /*.gallery-view video {*/
    /*    max-height: calc(100vh - 300px) !important;*/
    /*}*/

    /*.gallery-view-top video {*/
    /*    max-height: 112px !important;*/
    /*}*/
}

.video-call-modal-mobile-view {
    position: absolute;
    opacity: 0;
    top: -106px;
    left: 0;
}
.video-call-modal-minimize .video-call-modal-mobile-view,
.video-call-wrapper-gallery-view-mobile .video-call-modal-mobile-view{
    position: unset !important;
    opacity: 1 !important;
}

.video-call-modal {
    display: flex;
    flex-direction: column;
    background: #202125;
    color: #FFF;
    height: 100%;
    width: 100vw;
    justify-content: space-between;
    padding: 20px;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    -webkit-transform: translateZ(0);
}

.video-call-modal-minimize {
    padding: 20px !important;
    display: inline-table !important;
    width: 300px !important;
    height: auto !important;
    border-radius: 4px;
    top: unset;
    left: unset;
    bottom: 20px;
    right: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.video-call-modal-minimize .video-call-bottom-item {
    padding: 0 8px;
}

.video-call-modal-minimize .video-call-bottom,
.video-call-modal-minimize .video-call-answer {
    gap: 10px;
    height: 40px;
    min-height: 40px;
}

.video-call-modal-minimize .video-call-bottom-item > img {
    width: 24px;
}

.video-call-bottom,
.video-call-answer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    min-height: 50px;
    margin-top: 20px;
    gap: 20px;
    user-select: none;
}

.video-call-bottom-list {
    background: #3c4042;
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 4px;
}

.video-call-bottom-item {
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 4px;
    position: relative;
    background: #3c4042;
    border: none;
}

.video-call-bottom-item:hover {
    background-color: #43474a;
}

.screen-view {
    height: 100%;
}

.screen-view > div {
    height: 100%;
}

.screen-view video {
    max-height: calc(100vh - 255px);
}

.video-call-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.video-call-wrapper video {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.gallery-view {
    display: flex;
    width: 100%;
    gap: 20px;
}

.gallery-view video {
    max-height: calc(100vh - 116px);
}

.video-call-user-container,
.video-call-self-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3c4042;
    border-radius: 4px;
    transition: 100ms all ease-in-out;
    border: 3px solid transparent;
}

.video-call-user-container:hover,
.video-call-self-container:hover {
    border: 3px solid #dec955;
}

.video-call-name-bar {
    position: relative;
    padding: 0 10px;
    height: 100%;
    display: flex;
    cursor: pointer;
    background: #00000085;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.video-call-name-bar-is-open,
.video-call-settings-is-open {
    display: none;
    position: absolute;
    min-width: 160px;
    overflow: auto;
    bottom: 32px;
    margin: auto;
    background: #00000085;
    border-radius: 4px;
    right: 0;
    padding: 4px;
}

.video-call-settings-is-open {
    bottom: 57px !important;
    left: 0;
}

.video-call-name-bar-is-open img,
.video-call-settings-is-open img {
    width: 24px;
}

.video-call-settings-is-open img {
    filter: brightness(0.5);
}

.video-call-name-bar-is-open > div,
.video-call-settings-is-open > div {
    padding: 6px 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border-radius: 4px;
    color: #fff;
}

.video-call-name-bar-is-open > div:hover {
    background: #00000085;
}

.video-call-settings-is-open > div:hover {
    background: #0000001f;
}

.video-call-settings-open-item {
    padding: 6px 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border-radius: 4px;
    color: #202125;
}

.video-call-name-area {
    position: absolute;
    bottom: 8px;
    display: flex;
    justify-content: center;
    height: 40px;
    border-radius: 22px;
    font-size: 12px;
    align-items: center;
    transition: all 250ms linear;
}

.video-call-detailed-bar,
.video-call-pointer {
    padding: 4px 10px;
    background: #00000085;
    margin-left: 6px;
    border-radius: 20px;
    cursor: pointer;
}

.video-call-detailed-bar img,
.video-call-pointer img {
    width: 20px;
}

.video-call-modal-minimize .video-call-name-area {
    display: none;
}

.gallery-view-top video {
    max-height: 112px;
}

.gallery-view-top {
    justify-content: center;
    margin-bottom: 20px;
    transition: all 250ms linear;
}

.gallery-view-top > div {
    width: auto;
    background: none !important;
}

.gallery-view-top .video-call-name-area {
    display: none;
}

.video-call-name {
    padding: 4px 10px;
    cursor: default;
    background: #00000085;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.video-call-name > .video-call-name-title {
    font-size: 10px;
    opacity: .7;
}

.video-call-name-bar > img {
    width: 17px;
}

.video-call-bottom-item > img {
    gap: 10px;
    width: 30px;
}

.video-call-bottom-item > span {
    margin-left: 10px;
}

.video-call-profile {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-call-profile-non-stream {
    min-height: 200px;
}

.video-call-modal-minimize .video-call-profile > img,
.video-call-modal-minimize .video-call-profile > span,
.video-call-modal-minimize .video-call-profile > .video-call-connect-spin {
    max-width: 70px !important;
    max-height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
}

.video-call-modal-minimize .video-call-profile-non-stream {
    min-height: 86px !important;
}

.video-call-modal-minimize .video-call-profile > span:first-letter {
    font-size: 30px !important;
}

.video-call-modal-minimize .video-call-profile > span {
    line-height: 70px !important;
}

.video-call-profile > img,
.video-call-profile > span,
.video-call-profile > .video-call-connect-spin {
    border-radius: 4px;
    max-width: 100px;
    width: auto;
    height: auto;
    max-height: 100px;
    min-width: 100px;
    min-height: 100px;
}

.video-call-profile > span {
    font-size: 0;
    display: inline-block;
    line-height: 100px;
    text-align: center;
    user-select: none;
    background: #96c9a5;
    color: #509f67;
    width: 100%;
    height: 100% ;
}

.video-call-profile > span:first-letter {
    font-size: 40px;
    font-weight: 700;
    user-select: none;
}

.video-call-connect-spin {
    background: #fff;
    user-select: none;
}

#detailed-video-container video {
    width: auto;
    height: 100%;
    border-radius: 8px;
}

.video-call-modal-top-name {
    margin-bottom: 20px;
}

.video-call-modal-top-item {
    cursor: pointer;
}

.video-call-modal-top-item img {
    width: 24px;
}

.video-call-appointment-duration,
.video-call-record {
    position: absolute;
    padding: 10px;
    top: 80px;
    z-index: 1;
    left: 0;
    background: #00000085;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    user-select: none;
}

.video-call-record {
    left: unset !important;
    right: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-call-record .video-call-record-circle {
    min-width: 8px;
    min-height: 8px;
    width: 8px;
    height: 8px;
    background-color: #e14d55;
    border-radius: 50%;
    display: block;
}

.video-call-modal-top-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.video-call-modal-minimize .gallery-view video {
    max-height: 86px !important;
}

.video-call-permission {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: #00000069;
    z-index: 2;
    margin: auto;
    left: 0;
    justify-content: center;
    top: 0;
    display: flex;
    align-items: center;
}

.video-call-permission-modal {
    width: 300px;
    background: #fff;
    border-radius: 4px;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
    max-height: 400px;
}

.video-call-permission-modal-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.video-call-permission-modal-content {
    flex: 1;
    color: #0f0f0f;
    overflow: auto;
    display: flex;
    align-items: center;
    text-align: center;
}

.video-call-modal video::-webkit-media-controls-play-button,
.video-call-modal video::-webkit-media-controls-pausebutton,
.video-call-modal video::-webkit-media-controls-timeline {
    display: none;
}

/*video::-webkit-media-controls-panel*/

/*video::-webkit-media-controls-play-button*/

/*video::-webkit-media-controls-volume-slider-container*/

/*video::-webkit-media-controls-volume-slider*/

/*video::-webkit-media-controls-mute-button*/

/*video::-webkit-media-controls-timeline*/

/*video::-webkit-media-controls-current-time-display*/

/*video::-webkit-full-page-media::-webkit-media-controls-panel*/

/*video::-webkit-media-controls-timeline-container*/

/*video::-webkit-media-controls-time-remaining-display*/

/*video::-webkit-media-controls-seek-back-button*/

/*video::-webkit-media-controls-seek-forward-button*/

/*video::-webkit-media-controls-fullscreen-button*/

/*video::-webkit-media-controls-rewind-button*/

/*video::-webkit-media-controls-return-to-realtime-button*/

/*video::-webkit-media-controls-toggle-closed-captions-button*/