.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: .9;
    z-index: 9999;
    display: none;
}

.zoom {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 9998;
    display: none;
}

.loading {
    display: none;
}

.ui-slider-handle {
    background: #FFA500 !important;
    border-color: #FFAC00 !important;
}

.vjs-overlay-background {
   background-color: transparent !important;
}

/* for logo and logo2 */
.vjs-overlay-top-left,
.vjs-overlay-top-right {
   max-width: 300px;
   max-height: 300px;
}

.vjs-overlay-top-left img,
.vjs-overlay-top-right img {
   max-width: 300px;
   max-height: 300px;
}

/* for banner */
.video-js .vjs-overlay-top {
   left: 0px;
   top: 0px;
   margin-left: 0px;
   padding: 0px;
   width: 100%;
   max-width: 100% !important;
   max-height: 100% !important;
}

.vjs-overlay-top img {
   /* max-width: 100% !important; */
   max-height: 300px;
}

/* for timelapse/recording overlay */

.vjs-vidsource-banner {
   position: absolute;
   width: 96%;
   top: 5px;
   left: 2%;
   right: 2%;
   background-color: #333c;
   border: 1px solid #333;
   border-radius: 15px;
   z-index: 4;
   display: none;
}

.vjs-vidsource-inner {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: start;
   align-items: stretch;
   gap: 15px;
   margin: 5px 10px 5px 10px;
   overflow-x: auto;
}

.vjs-vidsource-container {
   position: relative;
   display: inline-block;
   margin-bottom: 5px;
   border-radius: 10px;
   border: 1px solid transparent;
   color: white;
   cursor: pointer;
}

.vjs-vidsource-current {
   box-shadow: 5px 5px 5px #333;
   border: 1px solid white;
}

.vjs-vidsource-container:hover {
   box-shadow: none !important;
   filter: drop-shadow(0px 0px 4px white);
}

.vjs-vidsource-label {
   position: absolute;
   top: 48%;
   left: 50%;
   transform: translate(-50%, -50%);
   /* font-size: 25pt; */
   font-size: 2vw;
   text-shadow: 0px 5px 5px #333;
}

.vjs-vidsource-thumbnail {
   /* border: 1px solid #333; */
   /* border-radius: 15px; */
   height: 165px;
   border-radius: 10px;
   background-color: black;
}

.vjs-bri-button,
.vjs-download-button,
.vjs-live-button,
.vjs-timelapse-button {
   cursor: pointer;
   font-size: 10pt !important;
   width: auto !important;
   padding: 5px !important;
   margin-right: 2px !important;
   margin-left: 2px !important;
}

.vjs-button:hover {
   filter: drop-shadow(0px 0px 1px white);
}

.vjs-live-button:focus,
.vjs-download-button:focus,
.vjs-timelapse-button:focus {
   text-shadow: none !important;
}

.vjs-download-button a {
   color: white !important;
}

.vjs-bri-button {
   bottom: 3px;
}

.vjs-bri-button:hover {
   filter: drop-shadow(0px 0px 1px #e07423);
}

.vjs-playback-button {
   cursor: pointer;
   font-size: 10pt !important;
   width: auto !important;
   margin-right: 2px !important;
   margin-left: 2px !important;
}

.vjs-playback-button select {
   border: none;
   background-color: transparent;
   color: white;
   font-size: 10pt;
   padding: 5px;
   cursor: pointer;
}

.vjs-control-bar {
   z-index: 3;
}

.thumbnail-icon-container {
   position: absolute;
   opacity: 0;
   top: 2px;
   right: 2px;
   background-color: rgba(0, 0, 0, 0.35);
   border-radius: 8px;
}

.vjs-vidsource-container:hover .thumbnail-icon-container {
   opacity: 1;
}

.thumbnail-icon {
   display: inline-block;
   font-size: medium;
   z-index: 5;
   padding: 8px;
   border-radius: 8px;
}

.thumbnail-icon:hover {
   filter: drop-shadow(0px 0px 1px white);
}

.thumbnail-icon a {
   color: white !important;
}

.vjs-poster {
   overflow: hidden;
}