body {
    /*padding-top: 50px;*/
    padding-bottom: 20px;
    overflow-x: hidden;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    /*    padding-left: 15px;
    padding-right: 15px;*/
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.exception-text textarea {
    max-width: 100%;
}

a:not([class]) {
    text-decoration: none;
}

    a:not([class]):hover {
        text-decoration: underline;
    }

#searchClear, #searchClear2 {
    /*    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    div-hidden margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;*/

    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

#startSearch {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    /*    cursor: pointer;*/
    color: #ccc;
}

.inline {
    display: inline-block;
    /*vertical-align: middle;*/
    /*border: 1px solid blue;*/
}

.ui-autocomplete {
    z-index: 9999 !important;
}

.col-action {
    width: 200px;
}

/* Video manage */

.video-manage-container {
    position: relative;
    /*width: 100%;
    border-style: solid;
    border-color: hotpink;
    border-width: 1px;*/
}

.video-manage-main {
    width: 90%;
    /*    border-style: solid;
    border-color: red;
    border-width: 1px;*/
}

.video-manage-left {
    width: 0px;
    float: left;
    /*    border-style: solid;
    border-color: blue;
    border-width: 1px;*/
}

.video-manage-middle {
    overflow: auto;
    /*    border-style: solid;
    border-color: green;
    border-width: 1px;*/
}

.video-manage-right {
    float: right;
    /*    border-style: solid;
    border-color: purple;
    border-width: 1px;*/
}

/* Video stat */

.video-stat-container {
    position: relative;
    width: 100%;
    /*    border-style: solid;
    border-color: hotpink;
    border-width: 1px;*/
}

.video-stat-left {
    width: 95%;
    /*    border-style: solid;
    border-color: red;
    border-width: 1px;*/
}

.video-stat-right {
    float: right;
    /*    border-style: solid;
    border-color: purple;
    border-width: 1px;*/
}

/* TEST */
.container-master {
    max-width: 1600px;
}

.sub-container-left {
    margin-right: 0px;
    /*background-color: lightgray;*/
}

.sub-container-right {
    float: right;
    width: 0px;
    padding-right: 10px;
    /*background-color: lightblue;*/
}

.playlist-master {
    width: 400px;
}

.playlist-sub {
    width: 400px;
    height: 99px;
    margin-top: 5px;
}

.playlist-sub-left {
    float: left;
    width: 176px;
    /*background-color: lightblue;*/
}

.playlist-sub-right {
    float: left;
    margin-left: 5px;
    width: 214px;
    /*background-color: lightgoldenrodyellow;*/
}

.playlist-newline {
    margin-top: -5px;
}

/* Comment */
.comment-box {
    padding: 3px;
}

.comment-container {
    position: relative;
    width: 100%;
    /*    border-style: solid;
    border-color: hotpink;
    border-width: 1px;*/
}

.comment-left {
    width: 60px;
    float: left;
    /*    border-style: solid;
    border-color: blue;
    border-width: 1px;*/
}

.comment-middle {
    overflow: auto;
    /*    border-style: solid;
    border-color: green;
    border-width: 1px;*/
}

.comment-right {
    float: right;
    /*    border-style: solid;
    border-color: purple;
    border-width: 1px;*/
}

.comment-main {
    width: 95%;
    /*    border-style: solid;
    border-color: red;
    border-width: 1px;*/
}

/* Video title */

.video-title-container {
    position: relative;
    /*margin-left: 0px;*/
    width: 100%;
    /*    border-style: solid;
    border-color: orange;
    border-width: 1px;*/
    /*    content: "";
    display: table;
    clear: both;*/
}

.video-title-left {
    /*margin-left: 12px;*/
    width: 28px;
    float: left;
    /*    border-style: solid;
    border-color: blue;
    border-width: 1px;*/
}

.video-title-middle {
    overflow: auto;
    /*    margin-left: 10px;
    width: 80%;
    float: left;*/
    /*height: 100%;*/
    /*overflow: auto;*/
    /*display: block;*/
    /*    border-style: solid;
    border-color: green;
    border-width: 1px;*/
}

.video-title-right {
    float: right;
    /*    border-style: solid;
    border-color: purple;
    border-width: 1px;*/
}

.video-title-main {
    /*width: 100%;*/
    border-style: solid;
    border-color: white;
    border-width: 1px;
}

/* Channel */

.channel-container {
    position: relative;
    width: 100%;
    /*    border-style: solid;
    border-color: hotpink;
    border-width: 1px;*/
}

.channel-left {
    width: 90px;
    float: left;
    /*    border-style: solid;
    border-color: blue;
    border-width: 1px;*/
}

.channel-middle {
    overflow: auto;
    /*    border-style: solid;
    border-color: green;
    border-width: 1px;*/
}

.channel-right {
    float: right;
    /*    border-style: solid;
    border-color: purple;
    border-width: 1px;*/
}

.channel-main {
    width: 95%;
    /*    border-style: solid;
    border-color: red;
    border-width: 1px;*/
}

.image-text-top-right {
    position: absolute;
    top: 2px;
    right: 2px;
    opacity: 0.5;
}

.icon-hand {
    cursor: pointer;
}

.div-hidden {
    display: none;
    visibility: hidden !important;
}

.centerVH {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.image-container {
    width: 100%;
    height: 500px;
    text-align: center;
    line-height: 500px;
}

    .image-container img {
        vertical-align: middle;
    }

.image-preview-container {
    position: relative;
}

.image-text-bottom-right {
    position: absolute;
    bottom: 2px;
    right: 2px;
    opacity: 0.8;
}

.image-text-distance {
    line-height: 100%;
}

.image-text-ellipsis {
    display: block;
    display: -webkit-box;
    max-width: 100%;
    /*height: 43px;*/
    margin: 0 auto;
    /*font-size: 14px;*/
    /*line-height: 1;*/
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-name-ellipsis {
    display: block;
    display: -webkit-box;
    max-width: 200px;
    height: 36px;
    margin: 0 auto;
    /*font-size: 14px;*/
    /*line-height: 1;*/
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

dl {
    margin-top: -5px;
    margin-bottom: -15px;
}

.panel-black {
    border-color: #000000;
}

    .panel-black > .card-header {
        color: #FFFFFF;
        background-image: none;
        background-color: #000000 !important;
    }

    .panel-black > .card-body {
        background-image: none;
        background-color: #f9f9f9;
    }

    .panel-black > .card-footer {
        background-image: none;
        background-color: #DADADA;
    }

#channelCoverContainer {
    position: relative;
}

#channelSocialMedia {
    position: absolute;
    bottom: 10px;
    right: 10px;
    opacity: 1;
}

/*.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)*/

.daterangepicker .applyBtn {
    display: none;
}

.daterangepicker .cancelBtn {
    display: none;
}

.video-tile-container {
    padding-top: 5px;
    padding-right: 15px;
    padding-left: 15px;
}

#dropzone {
    background: white;
    border: black dashed 3px;
    /*width: 200px;
    padding: 50px;*/
    text-align: center;
    color: black;
    min-height: 100px;
    max-width: 600px;
}

.dropdown-channel {
    max-height: 360px;
    overflow-y: auto;
}

#container-wrapper {
    /*background: red;*/
    /*overflow: auto;*/
    /*overflow: hidden;*/
}

#container-video-view {
    /*    float: left;    */
    /*width: 100%;*/
    /*background: blue;*/
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

#banner-right {
    position: absolute;
    /*background: green;*/
    /*    float: left;*/
    /*    display: inline-block;*/
    /*width: 300px;*/
    /*box-sizing: border-box;*/
}

#banner-bottom-center {
    /*background: yellow;*/
    text-align: center;
    /*margin: 10px;*/
    /*display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;*/
}

.video-cover-channel {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.video-cover-manage {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#item-video {
    width: 100%;
}

.master-content {
    max-width: 1920px;
}

#user-menu-dropdown {
    width: 300px;
}

.dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu.dropend {
    margin-left: -1px !important
}

.note-editor .dropdown-toggle::after {
    all: unset;
}

.note-editor .note-dropdown-menu {
    box-sizing: content-box;
}

.note-editor .note-modal-footer {
    box-sizing: content-box;
}

/*.pagination-container {*/
/*    display: flex;
    flex: 1;*/
/*}

.pagination {*/
/*display: flex;*/
/*flex: 1;*/
/*list-style: none;*/
/*padding: 0;*/
/*gap: .625rem;*/
/*}*/

a.page-link:visited {
    /*background-color: red !important;*/
    color: black !important;
}

a.page-link:hover {
    background-color: lightsteelblue;
    color: black;
}

.page-item, .page-link {
    /*height: 2.5rem;*/
    /*width: 2.5rem;*/
    /*display: flex;*/
    /*    justify-content: center;
    align-items: center;*/
}

.PagedList-pageCountAndLocation {
    /*justify-content: start;*/
    background-color: lightgray;
    padding-inline: 5px;
    align-content: center;
    order: 0;
    /*flex: 1;*/
}

@media (min-width: 0px) {
    .btn-responsive {
        padding: 2px 4px;
        font-size: 80%;
        line-height: 1;
        border-radius: 3px;
    }

    #channelCover {
        object-fit: cover;
        width: 100%;
        height: 120px;
    }
}

@media (min-width: 576px) {
    #channelCover {
        object-fit: cover;
        width: 100%;
        height: 120px;
    }
}

@media (max-width: 768px) {
    #hls-video {
        max-height: 60vmin;
    }

    /* #item-video {
        width: 100%;
        max-height: 60vmin;
    }*/

    #container-banner-bottom {
        width: 100%;
        /*background-color: lightcyan;*/
    }

    #banner-right {
        /*  display: none;
        visibility: hidden;*/
    }
}

@media (min-width: 768px) {
    .btn-responsive {
        padding: 4px 9px;
        font-size: 90%;
        line-height: 1.2;
    }

    .form-group.row > .col-form-label {
        text-align: right;
    }

    #hls-video {
        max-height: 60vmin;
    }

    /*    #item-video {
        width: 60vw !important;
        max-height: 60vmin;
    }*/

    #container-video-view {
        padding-top: 15px;
        padding-left: 15px;
    }

    #banner-right {
        padding-top: 0px;
        padding-left: 15px;
    }

    /*    #container-banner-bottom {
        width: 60vw !important;
    }*/

    #channelCover {
        object-fit: cover;
        width: 100%;
        height: 160px;
    }
}

@media (max-width: 992px) {
    .sub-container-right {
        display: none;
        visibility: hidden;
    }
}

@media (min-width: 992px) {
    .sub-container-left {
        margin-right: 410px;
    }

    .sub-container-right {
        width: 400px;
        padding-top: 15px;
    }

    .video-tile-container {
    }

    .channel-container {
        display: block;
        position: relative;
        max-width: 1280px;
        height: 65px;
    }

    #channelCover {
        object-fit: cover;
        width: 100%;
        height: 220px;
    }

    #banner-bottom-center {
        text-align: center;
        margin-top: 10px;
    }
}

@media (min-width: 1200px) {
    #channelCover {
        object-fit: cover;
        width: 100%;
        height: 260px;
    }
}

@media all and (display-mode: fullscreen) {
    #hls-video {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    #item-video {
        max-width: 100% !important;
        max-height: 100% !important;
    }
}

.navbar-brand {
    height: 40px;
    width: 100px;
    margin-top: -30px;
    margin-left: 15px;
}

.navbar-custom {
    background-color: #f8edd7 !important;
  }

/* Make text black */
    .navbar-custom .navbar-brand,
    .navbar-custom .nav-link,
    .navbar-custom .navbar-text {
      color: #000 !important;
    }

    /* Keep hover active states visible */
    .navbar-custom .nav-link:hover,
    .navbar-custom .nav-link:focus {
      color: #333 !important;
    }

    /* Fix toggler icon color (hamburger) for mobile */
    .navbar-custom .navbar-toggler-icon {
      filter: invert(1);
    }

@media (max-width: 576px) {
    .navbar-brand {
        height: 60px; /* 20% smaller than 40px */
        width: 100px;  /* 20% smaller than 100px */
        margin-top: -5px; /* adjust slightly for alignment */
        margin-left: 10px;
    }
}