.spacing-container{
padding-top:120px;
background-color: #111111!important;
}
@media only screen and (min-width: 768px) {.space-container{
margin-top:50px;
}}

.main-video-container{
    margin-top: 150px;
}
@media only screen and (min-width: 768px) {
    .main-video-container{
        margin-top: 100px;
    }
}

.accordion-button:hover , .accordion-button:active{
    background-color: #adadac;
    color: white;
}
/* .accordion-button, .accordion-button:hover, .accordion-button:active{
    color: white;
} */
.accordion-button:after {
    font-size: 1.2rem;
    float: right;
    transform: rotate(90deg);
    transition: transform 0.2s;
}

.accordion-button.collapsed:after {
    transform: rotate(0deg);
    /* background-color: #444!important; */
}
.accordion-button:not(.collapsed) {
    background-color: #7a0000;
    color: white;
}

.accordion-body {
    background-color: #000000;
    color: white;
}
.accordion-body h5 {
    color: white;
    margin: 20px 0px;
    font-size: 25px;
}

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

a.channel:hover {
    text-decoration: underline;
}

/* .sub-title {
    color: var(--grey);
    font-size: 13px;
} */

/* Playlist Container */
#playlist {
    display: block;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Main Video Display */
#video-dis {
    flex: 1 1 60%;
    background: black;
}

#video-dis iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

/* Playlist Video List */
.video-li {
    flex: 1 1 35%;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.ytp-cued-thumbnail-overlay-image {
    background-size: contain;
    -moz-background-size: contain!important;
    -webkit-background-size: contain!important;
    background-position: center;
}

/* Video List Info (Titles, Subtitles, Actions) */
#vli-info {
    padding: 5px 5px;
}

.upper-info {
    display: flex;
    background-color: #a70038;
    padding: 10px 20px;
}

#li-titles {
    flex: 9;
}

#li-titles div {
    padding-bottom: 5px;
}

#drop-icon {
    flex: 1;
    cursor: pointer;
    background-size: 50%;
}

/* Lower Info (Repeat, Shuffle, Save) */
#lower-info {
    display: flex;
    padding-top: var(--b-pad);
}

#lower-info div {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

#btn-repeat {
    margin-right: var(--b-pad);
    background-size: 50%;
}

#btn-suffle {
    margin-right: var(--b-pad);
    background-size: 45%;
}

#btn-save {
    margin-left: auto;
    order: 2;
    right: 10px;
    margin-right: var(--b-pad);
    background-size: 60%;
}
.video-list-container{
    height: 450px;
}

/* Video Items List */
#vli-videos {
    flex: 7;
    overflow: auto;
    padding: 20px 0px;
    background-color: #121212;
    color: white;
}

@media only screen and (max-width: 600px) {
    .ast-container, .ast-container-fluid {
        padding-left: 0px!important; 
        padding-right: 0px!important;
        width: 100vw;
    }
    .video-main-container{
        width: 100%;
    }
}

/* Individual Video Container */
.video-con {
    display: flex;
    padding: var(--s-pad);
    gap: var(--s-pad);
    margin-bottom: var(--b-pad);
    cursor: pointer;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 1px solid white;
}

.video-con:hover,
.active-con {
    background: rgba(255, 255, 255, 0.1); /* Highlight on hover */
    border-left: 4px solid var(--highlight-color); /* Optional border highlight */
}

/* Thumbnail */
.thumb {
    width: 120px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video Titles */
.v-titles {
    flex-grow: 1;
}

.v-titles {
    flex: 1;
    padding-left: 15px;
}

.title {
    font-size: 12px;
    font-weight: bold;
    color: var(--secondary);
}

/* .sub-title {
    font-size: 13px;
    color: var(--grey);
} */

/* Responsive Design */
@media (max-width: 1150px) {
    #playlist {
        flex-direction: column;
        align-items: center;
    }

    #video-dis {
        width: 100%;
    }

    .video-li {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #playlist {
        flex-direction: column;
    }
}

/* -------------------- remove default arrow icon ---------------------*/
.accordion-button:not(.collapsed)::after{
    /* color: #E1A026;
    background-color: #E1A026; */
    border-radius: 40%;
}



/* Override the background color of the accordion header */
.accordion-button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ddd !important;
}

/* Override the hover effect for the accordion header */
.accordion-button:not(.collapsed) {
    background-color: #961100 !important;
    color: #ffffff !important;
}

/* Override the background of the collapsed content */
.accordion-collapse .accordion-body {
    background-color: #000000 !important;
    /* color: #333 !important; */
}

/* Remove the default shadow or focus outline when clicking */
.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Optional: Add transition for smoother opening */
.accordion-button {
    transition: background-color 0.3s ease-in-out;
}