.youtuber-viewer {
    background-image: url("https://i.imgur.com/hszF9Wi.png");
    height: 115px;
    position: fixed;
    bottom: 112px;
    z-index: 99;
    right: 0px;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    display: flex;
    gap: 10px; /* This will add space between flex items */
    flex-wrap: no-wrap; /* Do not wrap child elements to the next line */
    align-items: center; /* Vertically align child elements in the center */
    justify-content: flex-start; /* Horizontally align child elements to the start */
    padding-right: 10px; /* Add padding to the right */
    padding-left: 10px; /* Add padding to the left */
    box-sizing: border-box; /* Padding and border included in the element's width and height */
    /* overflow-x: auto; */ /* Enable horizontal scrolling if content overflows */
}

.youtuber-viewer.minimizer {
    width: 130px!important;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.youtuber-viewer table {
    margin-left: 15px!important;
}
.youtuber-viewer table tr {
    background: transparent!important;
}
.youtuber-viewer table tr td {
    vertical-align: top!important;
    height: 100px!important;
    opacity: 0.7;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border: 0px!important;
    padding-top: 25px;
}
.youtuber-viewer table tr td:hover {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    opacity: 1.0;
}
.youtuber-viewer table tr td.fist {
    width: 35px!important;
    min-width: 55px!important;
    padding-left: 0px!important;
    text-align: left!important;
    color: #fff!important;
    cursor: pointer!important;
    padding-top: 50px!important;
    border: 0px!important;
    background: transparent!important;
}
.img-youtuber {
    display: flex;
    gap: 10px; /* This will add space between flex items */
    max-height: 100px; /* Maximum height for thumbnails */
    width: auto; /* Width of thumbnail adjusted automatically based on aspect ratio */
    margin-right: 10px; /* Space between thumbnails */
    border-radius: 20px; /* Rounded corners for thumbnails */
    /* Removing !important from float property to ensure flexbox alignment works */
    cursor: pointer;
    margin-right: 4px;
    margin-top: -27px;
}

.img-youtuber img {
    max-width: 100%; /* Ensure image does not overflow its container */
    height: auto; /* Adjust height automatically to maintain aspect ratio */
    border-radius: 20px; /* Rounded corners for images, if needed */
    margin-right: 4px;
}
.img-profile-youtuber {
    float: left!important;
    width: 20px!important;
    z-index: 102;
    margin-top: -30px!important;
    margin-left: -13px!important;
    border-radius: 50%!important;
    margin-right: 30px!important;
}




.youtuber2-viewer {
    background-image: url("../images/165e5057197f35.png");
    height: 80px;
    position: fixed;
    bottom: 21px;
    z-index: 99;
    right: 0px;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    display: flex;
    gap: 10px; /* This will add space between flex items */
    flex-wrap: no-wrap; /* Do not wrap child elements to the next line */
    align-items: center; /* Vertically align child elements in the center */
    justify-content: flex-start; /* Horizontally align child elements to the start */
    padding-right: 10px; /* Add padding to the right */
    padding-left: 10px; /* Add padding to the left */
    box-sizing: border-box; /* Padding and border included in the element's width and height */
    /* overflow-x: auto; */ /* Enable horizontal scrolling if content overflows */
}

.youtuber2-viewer.minimizer {
    width: 130px!important;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.youtuber2-viewer table {
    margin-left: 15px!important;
}
.youtuber2-viewer table tr {
    background: transparent!important;
}
.youtuber2-viewer table tr td {
    vertical-align: top!important;
    height: 100px!important;
    opacity: 0.7;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    border: 0px!important;
    padding-top: 25px;
}
.youtuber2-viewer table tr td:hover {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    opacity: 1.0;
}
.youtuber2-viewer table tr td.fist {
    width: 35px!important;
    min-width: 55px!important;
    padding-left: 0px!important;
    text-align: left!important;
    color: #fff!important;
    cursor: pointer!important;
    padding-top: 50px!important;
    border: 0px!important;
    background: transparent!important;
}
.img-youtuber2 {
    display: flex;
    gap: 10px; /* This will add space between flex items */
    max-height: 100px; /* Maximum height for thumbnails */
    width: auto; /* Width of thumbnail adjusted automatically based on aspect ratio */
    margin-right: 10px; /* Space between thumbnails */
    border-radius: 20px; /* Rounded corners for thumbnails */
    /* Removing !important from float property to ensure flexbox alignment works */
    cursor: pointer;
    margin-right: 4px;
    margin-top: -27px;
}

.img-youtuber2 img {
    max-width: 100%; /* Ensure image does not overflow its container */
    height: auto; /* Adjust height automatically to maintain aspect ratio */
    border-radius: 20px; /* Rounded corners for images, if needed */
    margin-right: 4px;
}
.img-profile-youtuber2 {
    float: left!important;
    width: 20px!important;
    z-index: 102;
    margin-top: -30px!important;
    margin-left: -13px!important;
    border-radius: 50%!important;
    margin-right: 30px!important;
}

.live-viewer {
    background-image: url("../images/165e5057197f35.png");
    height: 80px!important;
    position: fixed!important;
    bottom: 20px!important;
    padding-right: 15px!important;
    z-index: 99;
    right: 0px!important;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.live-viewer.minimizer {
    width: 130px!important;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.live-viewer table {
    margin-left: 15px!important;
}
.live-viewer table tr td {
    vertical-align: top!important;
    height: 80px!important;
    border: 0px!important;
    opacity: 0.7!important;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    background: transparent!important;
}
.live-viewer table tr {
    background: transparent!important;
}
.live-viewer table tr td:hover {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    opacity: 1.0;
}
.live-viewer table tr td.fist {
    width: 32px!important;
    min-width: 52px!important;
    padding-left: 0px!important;
    text-align: left!important;
    cursor: pointer!important;
    padding-top: 32px!important;
    border: 0px!important;
    background: transparent!important;
}
.img-live {
    max-height: 70px!important;
    width: 123px!important;
    border: 1px solid rgba(255, 255, 255, 0.2)!important;
    float: left!important;
    z-index: 100!important;
    cursor: pointer;
    border-radius: 12px!important;
    margin-top: 8px;
    /* margin-left: -6px; */
}
.img-profile {
    float: left!important;
    width: 20px!important;
    z-index: 102!important;
    margin-top: -20px!important;
    margin-left: 5px!important;
    border-radius: 50%!important;
    margin-right: 30px!important;
    background: #222!important;
    border: 1px solid rgba(255, 255, 255, 0.2)!important;
}

.img-sidebar {
    max-height: 100px!important;
    width: 148px!important;
    border: 1px solid rgba(255, 255, 255, 0.2)!important;
    float: left!important;
    z-index: 100;
    cursor: pointer;
    margin-top: -4px;
    margin-left: -10px;
    border-radius: 20px;
}
.img-profile-sidebar {
    float: left!important;
    width: 20px!important;
    z-index: 102;
    margin-top: -30px!important;
    margin-left: -13px!important;
    border-radius: 50%!important;
    margin-right: 30px!important;
}