.filterDiv {
          
          display: none; /* Hidden by default */
        }
        

        /* The "show" class is added to the filtered elements */
        .show {
            display:inline; 
    }
    

        .tabs {
            display: flex;
            overflow: hidden;
        }
       
        .tab-content {
          display: none;
          }
         
        .tab-content.active {
            display: flex;
        }
.thumb-list h1 {
  color: #ffffffff;
}

        .thumb-list {
          height: 807px;
          width: inherit;
          flex-direction: column; 
          justify-content: flex-start; 
          align-items: center;
          overflow-x: hidden;
            overflow-y: scroll;
          }
      .row {
       display: flex; 
      justify-content: flex-start; 
      align-items: center;
      flex-flow: row wrap;
       }
.thumb {
   outline: 2px solid #000000; 
   margin: 5px;
    width: 150px;
   background-color: #000000;
  box-shadow: inset 0px 0px 9px 11px #000000ff;
   overflow: hidden;
   opacity: 0.9;
}
.thumb:hover{
 opacity: 1;
    outline: 2px solid #ffffffff;
}



.full-view{
   border: 1px solid;
   height: 835px;
  margin-top: -20px;
   flex-direction: column; 
   justify-content: flex-start; 
   align-items: center;
	 z-index: 10;
	 padding: 5px;
   border-color: #474747; 
   background-color: #000000;
  overflow-y: scroll;
  
}
  .full-view img {
         height: auto ;
         width: auto ;
         max-width: 750px;
         max-height: 900px;
         border-radius: 0px;
         margin-bottom: 9px;
      } 
.full-view h2 {
    color: rgba(208, 149, 149, 0.6);
          padding: 15px;
  }
.full-view p {
  padding: 20px;
  color: #ffff;
}
.full-view b {
  color: #fff;
    margin-right: 5px;
}
.full-view i {
  color: #fff;
  }
.yap-box {
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  width: 752px;
  background-color: rgba(74, 74, 74, 0.57);
  border: solid 1px #5c5c5cff;
}
.yap-box img {
  max-width: 612px;
  border: solid 2px;
  margin-left: 65px;
}
 .back {
  text-decoration: none;
  border: 2px outset #eb5252; 
  padding: 2px 6px 1px 1px; 
  position: absolute;
   left: 33px;
   margin-top: 11px;
  border-radius: 10px; 
  background-color: rgba(208, 43, 43, 0.7);
   
          }
         
    .back:hover {
    border: 2px inset #d5726a;
      background-color: #ffd1d1;
      text-decoration: none;
      
  }
.back b {
    color: #2b0707;
  }
.back b:hover {
    color: #b6524d;
  }
  
  #toggleMuteBtn {
  border: solid 2px #5f1b1bff;
    border-radius: 4px;
    box-shadow: inset 0px 3px 4px 1px #ffffffa5;
    background-color: #7e0c0c;
    color: #ffffff;
    text-align: right;
    width: fit-content;
    height: 22px;
    font-style: ;
    font-size: 12px;
    padding: 4px 9px 16px 6px;
    margin: 1px 2px 0px -5px;
    cursor: pointer;
  }
  
  #toggleMuteBtn:hover {
    border: solid 2px #ac2222ff;
     background-color: #f02020;
    color: #ffffff;
    box-shadow: inset 0px 3px 4px 1px #6f000067;
  }

.socials{
  margin-left: 5px;
  font-size: 12px;
  margin-top: 7px;
  float: left;
  width: 1378px;
			}
		.socials a{
			color: #929292;
			margin-top: 5px;
			font-style: italic;
          font-weight: 700;
			}
.socials a:hover{
			color: #ff3361;
  
			}
		.socials a img{
			width: 15px;
			margin: 0px 5px -4px 5px;
			}

 /* ------------------- Buttons -----------------------*/


.button_socials {
    border: solid 1px #5f1b1bff;
    border-radius: 4px;
    box-shadow: inset 0px 3px 4px 1px #ffffffa5;
    background-color: #7e0c0c;
    color: #ffffff;
    text-align: right;
    width: fit-content;
    height: 22px;
    font-style: italic;
    font-size: 11px;
    padding: 4px 9px 16px 6px;
    margin: 1px 2px 0px -5px;
    cursor: pointer;
}

.button_socials:hover {
    background-color: #f02020;
    color: #ffffff;
    transform: rotate(-9deg);
    box-shadow: inset 0px 3px 4px 1px #6f000067;
}

.button_socials.unactive {
    background-color: #4f0808;
    color: #9d5b5b;
    box-shadow: inset 0px 5px 7px 1px #0000006f;
}

.button_socials.active {
    background-color: #2625ff;
    color: white;
}

.button_socials img {
    margin-top: -2px;
    margin-right: 3px;
}
/* ------------------- Buttons End -----------------------*/
  
   /* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: rgba(242, 255, 240, 0.4);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #9f9f9f;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #d0d0d0;
}



audio::-webkit-media-controls-panel {
  background-color:  rgba(80, 189, 255, 0.8);
   }

audio::-webkit-media-controls-current-time-display {
  color: #008FFF;
      }

audio::-webkit-media-controls-time-remaining-display {
   color: #008FFF;
}