html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

#filename {
    font-size: 1rem;
    line-height: 1.25;
}

/* Star rating css*/

.rating input {
    display: none;
}

/* Star rating css*/
.rating-inputs {
    direction: rtl;
    unicode-bidi: bidi-override;
    color: #ddd;
}

.rating input:checked + label,
.rating input:checked + label ~ label {
    color: #ffc107;
}

/* Video player */
.filter .flexDiv {
    display: flex;
    width: 100%;
}

/* Rating stars */
.rating-inputs label {
    cursor: pointer;
    padding-left: 2px;
}

.filter input {
    flex: 1;
}

.filter .tagify {
    flex: 1;
}

/* Video overview */

.video-header form {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.video-header form input {
    flex: 1;
}

.video a {
    text-decoration: none;
    color: inherit;
}

.video .tagify {
    --readonly-striped: 0;
    border: 0;
}

.video-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

#previewBubble {
    position: absolute;
    z-index: 9999;
    pointer-events: none;
}

/* Tags look integrated */
.video-js + .card-body .tagify {
    border-radius: 0.375rem;
}

/* Prevent metadata from growing too tall */
.card-body {
    overflow: hidden;
}

/* Skeleton thumbnail */
.vjs-playlist-thumbnail img {
    background-color: #1e1e1e;
}

.vjs-playlist-thumbnail.skeleton img {
    background: linear-gradient( 90deg, #2a2a2a 25%, #3a3a3a 37%, #2a2a2a 63% );
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.vjs-playlist-prev,
.vjs-playlist-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    font-size: 1.2em;
}

.vjs-playlist-prev:hover svg,
.vjs-playlist-next:hover svg {
    fill: #00aaff;
}

.video-js:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
}