.custom-video-title{
    width:100%;
    float:left;
    padding:10px;
}
.custom-video-title i{
    color:#7f00ff;
}
body.dark-mode .custom-video-title i{
    color:#00c6ff;
}
.custom-comment{
    width:100%;
    float:left;
    padding:10px;
}
.video-wrapper {
  display: flex;
  margin-top: 3px;
  flex-wrap: wrap;
}

.video-three-quarter {
  flex: 0 0 75%; /* fixed 75% width */
}

.video-quarter {
  flex: 0 0 25%; /* fixed 25% width */
}

.video-card-watch{
    background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 320px;
  margin-left: 10px;
  padding-top:20px;
  padding-bottom:10px;
}
body.dark-mode .video-card-watch{
    background:#1e1e1e;
}
.video-card-watch img{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.video-card-watch h3{
    color:#7f00ff!important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size:1rem;
}
.video-card-watch-third-1{
    width:100%;
    float:left;
}
.video-card-watch-third-2{
    width:100%;
    float:left;
    padding-top:0px;
    margin-top:-10px;
    padding-bottom:10px;
}
.video-card-watch-third-3{
    width:100%;
    float:left;
}
body.dark-mode .video-card-watch h3{
    color:#00c6ff!important;
}
.custom-full i{
    color:#7f00ff;
}
body.dark-mode .custom-full i{
    color:#00c6ff;
}
.ad-full{
    width:100%;
    float:left;
    box-sizing:border-box;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    padding-right:0px;
}

h2#swal2-title.swal2-title{
    color:#333;
}
.sawl2-confirm.swal2-styled{
    background: linear-gradient(to right, #8e2de2, #4a00e0) !important;
    color:#fff;
}
.swal2-cancel.swal2-styled{
    background:#333;
    color:#fff;
}

.video-des-left{
    width:75%;
    float:left;
    box-sizing:border-box;
    padding:10px;
}
.video-des-right{
    width:25%;
    float:left;
    box-sizing:border-box;
    padding:10px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    transition: background 0.3s ease, color 0.3s ease;
}
body.dark-mode .video-des-right{
    background:#1e1e1e;
}

.watch-third {
    width: 33%; 
    float: left; 
    box-sizing: border-box; 
    padding: 0px;
    color:#333!important;
}
body.dark-mode .watch-third {
    color:#fff!important;
}

.reply-info a{
    color:#7f00ff!important;
}
body.dark-mode .reply-info a{
    color:#00c6ff!important;
}
.reply-info small{
    color:#333;
}
body.dark-mode .reply-info small{
    color:#fff;
}
#load-more-status{
    color:#333;
}
body.dark-mode #load-more-status{
    color:#fff;
}

.report-left-col{
    width:4%;
    float:left;
    padding-top:13px;
}
.report-right-col{
    width:96%;
    float:left;
}

.reply-button:hover{
    background: linear-gradient(to right, #7f00ff, #00c6ff) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-2px) !important;
    color: white !important;
}

body.dark-mode select#change-video-rating {
    background: #1e1e1e;
    color:#fff;
}
.report-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: #e74c3c;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    margin-top:-20px;
}
.report-button .fa{
    font-size:15px;
}
.report-button:hover {
    background-color: #c0392b;
}
.highlight-rating {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    transform: scale(1.5);
}
.logged-out-button{
    border: 2px solid #7f00ff;
    border-radius: 25px;
    width:180px;
    padding:5px;
}
.tube-button{
    width:180px;
    margin-top:20px;
}
.sub-count{
    margin-top:-20px;
}
.logged-out-sub-button{
    margin-bottom:2px!important;
    margin-top:30px;
}

@media screen and (min-width: 1024px) and (max-width: 1102px){
    
    .report-left-col{
        width:10%;
    }
    .report-right-col{
        width:90%;
    }
}

/* Tablet */
@media screen and (max-width: 1024px){
    .video-quarter {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top:10px;
        margin-left:0px;
    }
    .video-three-quarter {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top:10px;
    }
    
    .video-card-watch{
        max-width:100%;
        margin-left:0px;
    }
    .video-card-watch-third-1{
        width:33%;
        float:left;
    }
    .video-card-watch-third-2{
        width:33%;
        float:left;
        padding-top:20px;
    }
    .video-card-watch-third-3{
        width:33%;
        float:left;
        padding-top:40px;
    }
    .custom-video-title{
        width:100%;
        padding-left:10px;
        margin-top:10px;
    }
    
    .video-des-left{
        width:100%;
        margin-top:20px;
        padding-left:10px;
        padding-right:10px;
    }
    .video-des-right{
        width:100%;
    }
    .custom-comment{
        width:100%;
        margin-top:20px;
        padding-left:10px;
        padding-right:10px;
    }
    .report-left-col{
        width:10%;
    }
    .report-right-col{
        width:90%;
    }
}

@media (max-width: 768px) {
  .video-wrapper {
    justify-content: center;
  }
 }

@media screen and (max-width: 626px){
    .video-card-watch-third-1{
        width:40%;
        float:left;
    }
    .video-card-watch-third-2{
        width:60%;
        float:left;
        padding-top:10px;
    }
    .video-card-watch-third-3{
        width:100%;
        float:left;
        padding-top:0px;
    }
    .tube-button{
        margin-top:20px;
    }
}

@media screen and (min-width: 717px) and (max-width:1023px){
    
    .custom-half{
        padding-left:0px;
    }
    .report-left-col{
        width:10%;
    }
    .report-right-col{
        width:90%;
    }
    .video-des-left{
        width:100%;
    }
    .video-des-right{
        width:100%;
    }
}

@media screen and (min-width: 601px) and (max-width:716px){
    
    .report-left-col{
        width:10%;
    }
    .report-right-col{
        width:90%;
    }
    .video-des-left{
        width:100%;
    }
    .video-des-right{
        width:100%;
    }
}

/* Mobile */
@media screen and (max-width: 600px) {
   .video-card-watch img{
       width:100px;
       height:100px;
   }
   .custom-video-title{
       padding-left:0px;
       padding-right:0px;
   }
    .video-des-left{
        width:100%;
        margin-top:0px;
        padding-left:0px;
        padding-right:0px;
    }
    .video-des-right{
        width:100%;
        padding-left:0px;
        padding-right:0px;
    }
    .custom-comment{
        padding-left:0px;
        padding-right:0px;
    }
    .custom-half{
        padding-left:0px;
    }
    .report-left-col{
        width:17%;
    }
    .report-right-col{
        width:83%;
    }
}

@media screen and (max-width: 351px){
    .channel-name{
        font-size:13px!important;
    }
    .sub-count{
        font-size:13px;
    }
    .logged-out-button{
        width:150px;
        font-size:13px;
    }
    .tube-button{
        width:150px;
        font-size:13px!important;
        margin-top:5px;
    }
    .video-card-watch img {
        width:70px;
        height:70px;
    }
    .video-card-watch-third-3{
        width:100%;
        float:left;
        padding-top:0px;
    }
}

@media screen and (max-width: 350px){
    .video-card-watch img {
        width:90px;
        height:90px;
    }
    
    .video-card-watch-third-1{
        width:100%;
        float:left;
    }
    .video-card-watch-third-2{
        width:100%;
        float:left;
        padding-top:10px;
    }
    .video-card-watch-third-3{
        width:100%;
        float:left;
        padding-top:0px;
    }
    .tube-button{
        width:180px;
        font-size:13px!important;
        margin-top:20px;
    }
    .logged-out-button{
        width:180px;
    }
}
