#debugButtons {
    position:absolute;
    top:0px;
    left:0px;
    z-index: 1000;
}

#avatarVideoPreview{
    position: absolute;
    top:0px;
    left:0px;
    /* z-index: 999; */
    width:100%;
    height: 100vh;
    overflow: hidden;
    width:100%;
    height:100%;
    background-color: black;
    display: none;
}

#avatarVideoPreview__videoContainer__video {
    position: absolute;
    top: 0px;
    left: 0px;
    /* z-index: 1; */
}

#avatarVideoPreview__videoContainer__video video{
    /* width:100%;
    height: 100%; */
    display: block;
    object-fit: cover;
}

#avatarVideoPreview__videoContainer__previewImage {
    position: absolute;
    left:0px;
    right:0px;
    width:100%;
    height:100%;
    /* z-index: 2; */
    pointer-events: none;
}

#avatarVideoPreview__videoContainer__previewImage img {
    width:100%;
    height:auto;
}

/* #avatarVideoPreview__closeBtn {
    position:absolute;
    bottom: 70px;
    color:black;
    z-index: 100;
    cursor: pointer;
    background:url('./restart.png') 0 0 no-repeat;
    background-size:cover;
    left:50%;
    transform:translate(-50%);
    
}

#avatarVideoPreview__shareBtn {
    position:absolute;
    bottom: 70px;
    right: 25px;
    color:black;
    z-index: 100;
    cursor: pointer;
    background:url('./Share_Collapsed.png') 0 0 no-repeat;
    background-size:cover;
} */

#avatarVideoPreview__playBtn {
    position:absolute;
    color:black;
    z-index: 100;
    /* background-color: white; */
    cursor: pointer;
    background:url('./play_button.png') 0 0 no-repeat;
    background-size:cover;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

.video-preview-item {
    width:12vmin;
    height:12vmin;
}

@media (max-width: 500px) {
    .video-preview-item {
        width:50px;
        height:50px;
    }

    /* #avatarVideoPreview__shareBtn {
        right:12px;
    }

    #avatarVideoPreview__closeBtn{
        bottom:25px;
    }

    #avatarVideoPreview__shareBtn {
        bottom:25px;
    } */
}

@media (max-width: 250px) {
    .video-preview-item {
        width:30px;
        height:30px;
    }

    /* #avatarVideoPreview__shareBtn {
        right:5px;
        bottom:25px;
    } */
}
/*
@media (min-width: 1024px) {

}
  
@media (min-width: 1280px) {

}
*/

/*combining ui containers*/

#unity-container__closeBtn{
    background:url('./restart.png') 0 0 no-repeat;
    background-size:cover;
    transform: scale(0.8);
    display: none;
    cursor: pointer;
}

#unity-container__shareBtn{
    background:url('./download.png') 0 0 no-repeat;
    background-size:cover;
    transform:scale(0.65);
    display:none;
    cursor: pointer;
}

.ui-container.playback-state-on .ui__record-btn-container,
.ui-container.playback-state-on .ui__bark-btn-container{
    display:none;
}

.ui-container.playback-state-on #unity-container__closeBtn,
.ui-container.playback-state-on #unity-container__shareBtn{
    display:block;
}

/*debug*/
#debugCanvas {
    position: fixed;
    z-index: 100;
  }