/* Custom Video.js theme */
.vjs-custom-theme {
    /* Custom styles for the player container */
    background-color: #265e95;
}

.vjs-custom-theme .vjs-big-play-button {
    /* Custom styles for the big play button */
    background-color: #e74c3c;
    border-color: #c0392b;
}

.vjs-custom-theme .vjs-control-bar {
    /* Custom styles for the control bar */
    background-color: rgba(54, 230, 63, 0.7);
}

.vjs-custom-theme .vjs-button > .vjs-icon-placeholder:before {
    /* Custom styles for the control bar icons */
    color: #ecf0f1;
}

.vjs-custom-theme .vjs-play-progress,
.vjs-custom-theme .vjs-volume-level {
    /* Custom styles for the progress bar and volume bar */
    background-color: #e74c3c;
}

.vjs-custom-theme .vjs-slider {
    /* Custom styles for sliders (progress bar background, volume bar background) */
    background-color: rgba(236, 240, 241, 0.3);
}

.vjs-custom-theme .vjs-load-progress {
    /* Custom styles for the load progress */
    background: rgba(236, 240, 241, 0.5);
}

.vjs-custom-theme .vjs-big-play-button:hover{
    background-color: #1cdd1c; 
}
.vjs-custom-theme .vjs-play-progress:hover,
.vjs-custom-theme .vjs-volume-level:hover {
    /* Hover effects */
    background-color: #c0392b;
}

.video-js.vjs-keep-control-bar-visible .vjs-control-bar {
    visibility: visible !important;
    opacity: 1 !important;
    transition: visibility 0.1s, opacity 0.1s;
}

/* Add this at the end of your custom-videojs.css file */
.video-js {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.video-js .vjs-tech {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}