/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 02 2025 | 22:44:33 */
    .player-wrap {
    width: 90%;
    margin: 10px auto;
  }
  
    .main-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;

  }
  
  .icons {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid black;
    width: 100%;
    border-radius: 15px;
    padding: 5px 30px;
    margin: 0;
    justify-content: space-evenly;
    align-items: center;

  }


  
  .icons img {
    width: 45px;
    height: 45px;
    transition: transform 0.3s ease;
  }

  .icons img:hover {
    transform: scale(1.2);
  }
  
  .icons a {
    height: 45px;
  }
  
  .content {
    overflow: hidden;
    width: 0px;
    height: 0px;
    padding: 0px 0px;
    border: 0px;
    transition: width 0.6s ease-out;
    visibility: hidden;

  }
  
  .content.show{
    background-color: #a3cef1;
    width: 100%;
    border-radius: 15px;
    padding: 1px 30px;
    border: 2px solid black;
    margin: 0;
    visibility: visible;
    height: auto;
  }
  
  .material-symbols-rounded{
    cursor: pointer;
    background-color: bisque;
  }
  
  .player-controls {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .control-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .control-btn span{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
  }
  
  .control-btn span:active{
    box-shadow: inset 6px 6px 10px -1px rgba(0,0,0,0.15),
    inset -6px -6px 10px -1px rgba(255,255,255,0.7);
  }
  
  .activate {
    background-color: bisque;
    border: none;
    margin: none;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
  }
  
  .activate:active {
    box-shadow: inset 6px 6px 10px -1px rgba(0,0,0,0.15),
    inset -6px -6px 10px -1px rgba(255,255,255,0.7);
  }
  
  .escape-btn {
    background-color: bisque;
    border: none;
    margin: none;
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
  }
  
  .escape-btn:active {
    box-shadow: inset 6px 6px 10px -1px rgba(0,0,0,0.15),
    inset -6px -6px 10px -1px rgba(255,255,255,0.7);
  }

@media screen and (max-width: 600px) {
  .icons a {
    height: 35px;
  }
	
 .icons img {
    width: 35px;
    height: 35px;
}