@import url('https://vjs.zencdn.net/8.10.0/video-js.css');
@import url('https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.css');

.video-area {
    min-height: 84px;
    min-width: 150px;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.video-area img {
    position: absolute;   /* Absolute positioning for images to overlap */
    max-width: 100%;      /* Optional: ensures image is contained within the container */
    max-height: 100%;     /* Optional: ensures image is contained within the container */
}
.video-btn {
    opacity:0.7;
    cursor:pointer;
}
.video-btn:hover {
    opacity:1;
}

.video-js .vjs-tech {
    border-radius: 15px;
}
/* Responsive adjustments using media queries */
.video-js {
    width: 100%;  // Makes the video player responsive to modal size
    height: auto;
    border-radius: 15px;
}

.vjs-control-bar {
    border-radius: 15px;
}

.modal-content {
    background-color: transparent;
    border: none;
}

.modal-body {
    padding: 0;
    background-color: transparent;
    border: none;
}
.close-btn {
    position: absolute;
    top: -10px;  /* Adjust as necessary to move it outside the modal */
    right: -10px;  /* Adjust as necessary to move it outside the modal */
    z-index: 1050;  /* Ensure it's above the modal layers */
    background: #fff;  /* Give it a background so it's visible on any background */
    border: none;
    border-radius: 50%;  /* Circular button */
    padding: 5px 8px;
    cursor: pointer;  /* Cursor pointer for better UX */
    font-size: 24px;  /* Large X character */
    line-height: 1;  /* Tighter line height for the button */
}

.modal-dialog {
    max-width: none; /* Ensures no max-width restrictions are applied */
    margin: auto; /* Centers the modal horizontally */
    top: 25% /* center vertically */
 }