html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    position:  relative;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000;
}

#controls {
    position: fixed;
    right: 5px;
    top: 160px;
    z-index: 100;
}

#controls.controls-1 {
    width: 95px;
}

#controls.controls-2 {
    width: 195px;
}

#controls button {
    display:block;
    width: 100%;
    margin-bottom: 2px;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
    font-size: 10px;
    padding: .175rem .175rem;
}

#controls select {
    font-size: 10px;
    padding: .175rem .175rem;
    margin-bottom: 3px;
    height: 24px;
}

#controls .row > div {
    /*padding: 3px;*/
    padding-bottom: 5px;
}

#breakout-ui {
    position: fixed;
    left: 10px;
    top: 70px;
    width: 110px;
    z-index: 100;
}


.hidden {
    display: none!important;
}

#container {
    width: 100vw;
    height:100vh;
    position: absolute;
    overflow: hidden;
}

#container .video-js {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#container #presentation-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
}


#home-logo {
    position: absolute;
    width: 70vw;
    max-width: 600px;
    top: 10vh;
    left: 0;
    right: 0;
    margin: auto;
}

#home-form-container {
    position: absolute;
    width: 100%;
    top: 50vh;
    color: #fff;
}

video {
    /*object-fit: cover;*/
    object-fit: contain;
}

.vjs-poster {
    background-size: cover !important;
}

.top {
    z-index: 2 !important;
}

#video_3 {
    z-index: 5 !important;
    /*mix-blend-mode: overlay;*/
}

.vjs-big-play-button {
    display: none !important;
}

#nointeract {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#webinar-poster {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    z-index: 9;
}

.formError {
    width: 200px !important;
}

.custom-control-label::before,
.custom-control-label::after {
    top: 0.075rem;
    width: 1.25rem;
    height: 1.25rem;
}

.conference-holder{
    width: 100vw;
    height: 100vh;
}

#cnt-participant {
    position: fixed;
    top: 150px;
    left: 48px;
    width: 28px;
    height: 28px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 28px;
    border: 1px solid #fff;
    border-radius: 14px;
    z-index: 100;
}

#iframe-compatibility {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/****************
present
****************/
.not-connected {
    opacity: .2;
}

#present-preview {
    max-width: 100vw;
    max-height: 100vh;
    margin: auto auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#present-toolbar {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 100px;
}

#present-toolbar  .ico {
    margin: 8px;
    width: 42px;
    height: 42px;
    background-size: contain;
    cursor: pointer;
}


/****************
player
****************/
#video-player-server {
    width: 100vw;
    height: 100vh;
}

#video-player {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#player-message {
    position: fixed;
    top: 5px;
    left: 5px;
    background-color: rgba(0,0,0,.4);
    color: #fff;
    width: 350px;
    height: 16px;
    line-height: 12px;
    font-size: 12px;
    padding: 2px;
}

/****************
icons
****************/
.ico {
    margin: 3px;
    width: 28px;
    height: 28px;
    background-size: contain;
    cursor: pointer;
    -webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
    filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
}

.ico-chat {
background-image: url('/img/ico/chat.png');
}

.ico-video {
background-image: url('/img/ico/cam-on.png');
}

.ico-video.off{
background-image: url('/img/ico/cam-off.png');
}

.ico-audio {
background-image: url('/img/ico/mic-on.png');
}

.ico-audio.off{
background-image: url('/img/ico/mic-off.png');
}

.ico-settings {
background-image: url('/img/ico/settings.png');
}

.ico-mute-all {
background-image: url('/img/ico/mute-all.png');
}

.ico-home {
background-image: url('/img/ico/home.png');
}

.ico-present {
background-image: url('/img/ico/present.png');
}

.ico-close {
background-image: url('/img/ico/close.png');
}

.ico-remove {
background-image: url('/img/ico/remove.png');
}

.ico-hand {
background-image: url('/img/ico/hand-off.png');
}

.ico-hand.off{
background-image: url('/img/ico/hand-on.png');
animation: blinker 1s linear infinite;
}

/*********************
webinar
*******************/
#volume {
    width: 100%;
    height: 4px;
    margin-bottom: 10px;
}

#cmdTabs .nav-item {
    margin-bottom: 5px;
    width: 19px;
    text-align: center;
}

#cmdTabs {
    border-bottom: 0;
}

#cmdTabs .nav-link {

}

#cmdTabs .nav-link {
    color: #495057;
    background-color: #fff;
    padding: 3px 0px;
    border: 0;
    border-radius: .25rem;
    margin-right: 1px;
    font-size: 10px;
}

#cmdTabs .nav-link.active {
    color: #fff;
    background-color: #c00;
    border-color: #c00;
}

#controls .tab-pane, #controls .tab-content {
    width: 100%;
}

#_1 button.btn-primary {
    background-color: #5484d8;
}

#_2 button.btn-primary {
    background-color: #f57575;
}

#_3 button.btn-primary {
    background-color: #05ad25;
}

#_4 button.btn-primary {
    background-color: #e37b00;
}

#controls .tab-pane button {
    display:block;
    width: 100%;
    margin-bottom: 1px;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);
    font-size: 10px;
    padding: .1rem .175rem;
    border: 1px solid rgba(0,0,0,0);
}

#controls .tab-pane button.active {
    background-color: #c00;
    border: 1px solid #fff;
}

.child-list {
    /*padding-left: 20px;*/
    display: none;
}

.child-list button {
    font-size: 9px !important;
    padding: .175rem 0rem !important;
}

.child-list.always-open {
    display: block;
}

.child-list.active {
    display: block;
}

.child-list button.active {
    background-color: #c00;
    border: 1px solid #fff;
}

.child-list button.disabled {
    background-color: #999;
    border: 1px solid #fff;
}

#breakout-selector {
    width: 80vw;
    height: 80vh;
    position: absolute;
    z-index: 150;
    background-color: rgba(0, 125, 255, .5);
    margin: 10vh 10vw;
    border-radius: 30px;
}

#breakout-selector > div {
    background-color: rgba(255, 255, 255, .5);
    width: 24vw;
    height: 24vh;
    float: left;
    border-radius: 30px;
    font-size: 6vh;
    font-weight: bold;
    text-align: center;
    margin: 1.3vh 1.3vw;
    line-height: 24vh;
    cursor: pointer;
}

#wbo {
    position: fixed;
    width: 70vw;
    height: 100vh;
    left: 15vw;
    background-color: #fff;
    z-index: 150;
}

.btn-xs {
    padding: 0.125rem .5rem;
    font-size: .875rem;
    line-height: 1;
    border-radius: .2rem;
}

.small {
    font-size: 0.75rem;
}



/********************
Thumbs Try
 *******/
@keyframes heartfade {
    0% {
        opacity : 1;
    }
    50% {
        opacity : 0;
    }
}
.heart {
    z-index : 999;
    animation : heartfade 6s linear;
    position : absolute;
}
.heart:before,
.heart:after {
    content : "";
    background-color : #fc2a62;
    position : absolute;
    height : 30px;
    width : 45px;
    border-radius : 15px 0px 0px 15px;
}

.heart:before {
    transform : rotate(45deg);
}

.heart:after {
    left : 10.5px;
    transform : rotate(135deg);
}