/*.container-playlist,*/
/*.menu-container {*/
/*    width: 100%;*/
/*}*/


.accordion-playlist,
.col-sm-12.right,
.menu-container {
    background-color: #fff;
}

.accordion-button,
.playlist-icon {
    transition: opacity 0.3s ease-out;
    opacity: 1;
}


.menu-horizontal.menu-dd-shadow-lg {
    height: 74px;
}

.container-playlist {
    display: flex;
    position: relative;
    justify-content: space-evenly;
    /*overflow: hidden;*/
}

.col-sm-12.left {
    width: 70%;
    position: relative;
    /*margin-right: 313px;*/
    /*display: block;*/
    flex-shrink: initial;

    transition: 0.3s ease-in-out;
}

.col-sm-12.right {
    min-width: 313px;
    width: 30%;
    position: relative;
    /*height: 448px;*/
    /*position: absolute;*/
    /*top: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    background-color: #f8f9fa !important;
    transition: 0.3s ease-in-out;
}

.col-sm-12.left.expanded {
    width: 100%;
    margin-right: 0;
}

.col-sm-12.right.hidden {
    width: 0;
    min-width: 0;
}

.col-sm-12.right.hidden * {
    padding: 0;
    opacity: 0;
}

.col-sm-12.right:not(.simplebar-scrollbar) {
    transition: 0s ease-in-out 0.1s;
}

.accordion-playlist {
    width: 100%;
    margin: 0;
    color: #777;
    background-color: #f8f9fa !important;
}

.accordion-button,
.filter-button {
    color: #303133;
    cursor: pointer;
}

.filter-button:focus,
.filter-button:hover {
    background-color: #e1e1e1;
    color: #303133;
}

.item_wrapper {
    display: flex !important;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.playlist .playlist_item.watched:hover,
.playlist .playlist_item:hover,
.playlist_item:hover {
    background-color: #e1e1e1;
}

.playlist_item.hidden {
    display: none;
}

.item_details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #303133;
    direction: ltr;
    margin-left: 10px;
}

.item_director,
.item_text,
.item_title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.item_title {
    margin: 0;
    -webkit-line-clamp: 1;
    font-size: 13px;
    text-align: left;
}

.item_director {
    margin-top: 0;
    -webkit-line-clamp: 1;
    font-size: 10px;
    text-align: left;
}

.item_text {
    -webkit-line-clamp: 2;
}

.plyr--youtube .plyr__video-wrapper.plyr__video-embed {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;
}

.plyr--youtube .plyr__video-wrapper.plyr__video-embed iframe {
    height: 0;
    padding-bottom: 205%;
    margin-top: -29.5%;
}

.player_container-playlist {
    z-index: 300;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    position: relative;
    padding: 0;
    margin: 0;
}

.playlist-wrapper {
    list-style: none;
    padding: 0 0 0 6px;
    height: 400px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.playlist {
    max-height: calc(100% );
    margin-top: 42px;
    margin-bottom: 39px;
    position: relative;
}

.playlist .playlist_item {
    cursor: pointer;
    margin-bottom: 6px;
    color: #c9c9c9;
    font-size: 90%;
}

.playlist .playlist_item:last-child {
    border-bottom: none;
}

.item_thumb_container {
    /*width: 60px;*/
    height: 60px;
    /*float: left;*/
    margin-right: 10px;
    border-radius: 0;
    position: relative;
    /*aspect-ratio: 1;*/
    flex-shrink: 0;
}

.item_thumb_play,
.item_thumb_restart {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 27%;
    /*left: 50%;*/
    transform: translate(-50%, -50%);
    opacity: 0;
}
.item_thumb_play:after {
    content: url("data:image/svg+xml,%3Csvg class='item_thumb_play' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='50%25' height='50%25' viewBox='-7 0 32 32' version='1.1'%3E%3Ctitle%3Eplay%3C/title%3E%3Cpath d='M0 6.688v18.906c0 0.344 0.156 0.625 0.469 0.813 0.125 0.094 0.344 0.125 0.5 0.125s0.281-0.031 0.438-0.125l16.375-9.438c0.313-0.219 0.5-0.5 0.5-0.844 0-0.313-0.188-0.594-0.5-0.813l-16.375-9.438c-0.563-0.406-1.406 0.094-1.406 0.813z'%3E%3C/path%3E%3C/svg%3E");
}

.item_thumb_restart:after {
    content:url("data:image/svg+xml,%3Csvg class='item_thumb_restart' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' height='50%25' width='50%25' version='1.1' id='Capa_1' viewBox='0 0 74.999 74.999' xml:space='preserve' transform='rotate(-60)'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg%3E%3Cpath d='M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.playlist .playlist_item.watched:hover .item_thumb_restart,
.playlist .playlist_item:not(.watched):hover .item_thumb_play,
.playlist-icon:hover, .playlist-icon.hidden:hover, .player_text:hover, .player_text.hidden:hover {
    opacity: 1;
}

.playlist .playlist_item.watched {
    background-color: #f9f9f9;
}

.playlist .playlist_item.watched .item_details {
    color: #b7babf;
}

.filter-button.active,
.playlist .playlist_item.active .item_details {
    color: #fff;
}

.playlist .playlist_item.watched:hover .item_details {
    color: #303133;
}

.playlist .playlist_item img {
    /*width: 100%;*/
    height: 100%;
}

.accordion-playlist .accordion-content {
    max-height: 0;
    transition: max-height 0.3s ease-out;
    overflow: initial;
    z-index: 100;
    position: relative;
    background-color: #fff;
}

.filter-button.active,
.playlist .playlist_item.active {
    background-color: #303133;
}

.accordion-playlist.active .accordion-content {
    max-height: calc(100% - 60px);
    padding: 8px;
}

.accordion-button {
    overflow: hidden;
    border-bottom: 1px solid #303133;
    text-transform: uppercase;
    padding: 8px;
}

.filter-menu {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    max-height: 100%;
}

.filter-button {
    padding: 6px 6px 6px 0;
    line-height: 1.5;
}

.search-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #f8f9fa !important;
    overflow: auto;
    max-height: 100%;
    z-index: 99;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 8px;
}

.search-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    position:relative;
}

.search-icon:after {
    content:url("data:image/svg+xml,%3Csvg class='search-icon' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8' /%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' /%3E%3C/svg%3E");
    position: absolute;
    top: -22%;
}

#searchInput {
    background-color: #f8f9fa !important;
    border: none;
    outline: 0;
    width: 100%;
    border-bottom: 1px solid #000;
    padding-bottom: 6px;
}


.player_text {
    color: #fff;
    text-decoration: none;
    display: block;
    position: absolute;
    top: 6px;
    left: 10px;
    z-index: 99;
    font-size: 18px;
}


.playlist-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    fill: #ffffff;
    z-index: 99;
}

.playlist-icon.hidden, .player_text.hidden {
    opacity: 0;
}

.playlist-icon:before {
    content: url("data:image/svg+xml,%3Csvg class='playlist-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style=' fill: white; width: 100%25; height: 100%25;%0A'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 0v64h64V96H64zm384 0H192v64H448V96zM64 224v64h64V224H64zm384 0H192v64H448V224zM64 352v64h64V352H64zm384 0H192v64H448V352z'%3E%3C/path%3E%3C/svg%3E");
    z-index: 3;
    display: block;
    position: relative;
}


.player_container-playlist .plyr__control.plyr__control--overlaid:after {
    content: "";
    width: 122%;
    height: 122%;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    position: absolute;
    top: -11%;
    left: -11%;
    z-index: 1;
    pointer-events: none;
    display:none
}
.player_container-playlist.loading .plyr__control.plyr__control--overlaid:after {
    display: block;
}
@keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}

@media only screen and (max-width: 768px) {
    .container-playlist {
        width: 100%;
        flex-direction: column-reverse;
        /*height: calc(100vh - 74px);*/
        margin-top: 40px;
    }

    .col-sm-12.left {
        width: 100%;
        margin-right: 0;
    }

    .col-sm-12.right {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .playlist-icon {
        display: none;
    }
    .playlist-wrapper{
        height: 200px !important;
    }
}

.plyr__progress__container{
    position: absolute;
    bottom: 36px;
    width: 96%;
}