/*************** ADD CUSTOM CSS HERE.   ***************/

.hidden {
    display:none !important;
}

#fullscreen-expand {

    color: white;

    border: 1px solid #22395a !important;;

    border-radius: 5px;

    padding: .5em 1em;

}

.agora .btn-danger, .agora .btnIcon.btn-danger {

    background-color: #22395a !important;

}



.agora {

    --agora-background: #ffffff !important;

}



div.left-button {

    visibility: hidden !important;

}





.agora .leave-meeting {

	border: 1px solid #22395a !important;

}



.agora .btnIcon {

    background: #333 !important;

}





i#fullscreen-expand {

    color: #22395a;

}



i#fullscreen-expand:hover {

    color: #22395a;

}



.agora-header {

    background: #fff !important;

}



/* for broadcast video */

.agora .screen-users-1 .user {

    width: 100% !important;

    height: 80vh !important;

}



/* Video Aspect Ratios */

/* screen with 1 user */

.agora .screen-users-1 #local-video {

  width: 100% !important;

  height: 80vh !important;

}



.agora .screen-users-2 .user {

  width: 49% !important;

  height: 50vh !important;

}



/* screen with 3-4 users */

.agora .screen-users-3 .user,

.agora .screen-users-4 .user{

  width: 50% !important;

  height: 40vh !important;

}



/* screen with 5 y 6 users */

.agora .screen-users-5-6 .user{

    width: 33% !important;

    height: 30vh !important;

}



/* screen with 7 y 8 users */

.agora .screen-users-7-9 .user{

    width: 33% !important;

    height: 25vh !important;

}



/* pantalla 10, 11 y 12*/

.agora .screen-users-10-12 .user{

    width: 24.5% !important;

    height: 20vh !important;

}



.agora .screen.sharescreen .screenshare-container {

    width: 90% !important;

    height: 80vh !important;

    margin: 0 auto !important;

}



.share-title, .video-section-title {

    text-align: center;

}



.video-section-title {

    margin-top: 10px;

}



.share-title>h2 {

    color: #22395a !important;

}



.video-section-title>h4 {

    color: #22395a !important;

}



.audience-fullscreen {

    margin: 0 auto;

}

/*************** ADD MOBILE ONLY CSS HERE  ***************/