.navbar{
    background-color:#34495E;
    margin:0
}

.navbar-brand img{
    width:1.5rem;
    height:1.5rem;
    margin-right:1rem;
}

.centered-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.navbar a{
    color:#fffff;
    justify-content:center
}

.navbar a:hover{
    color: #f7a11c;
}

.track-checkbox{
    display:none;
    transform: scale(1.8);
     margin: 0 auto; 
}
#mainContainer{
    margin-top:1.5rem
}

.select-column{
    display:none
}

th { 
    cursor: pointer; 
}

td{
    text-align:center;
     vertical-align: middle;
}

.positionColumn {
  display: none;
}

#buttonRow .col{
    text-align:center
}

.col-hide-wrapper {
  display: flex;
  flex-direction: column;   /* vertical layout */
  align-items: center;      /* center horizontally */
  gap: 4px;                 /* space between button and text */
}

.hide-col {
  background: #f7a11c;
  border: none;
  border-radius: 4px;
  padding: 0 6px;
  cursor: pointer;
  font-weight: bold;
  width:4rem;
  opacity:.8
}
.hide-col:hover{
    background-color: #f7a11c;
    opacity:1
}
.btn-primary{
    min-height:3.5rem;
    background-color:#18a999;
    opacity:.8
}

.btn-primary:disabled{
    background-color:#18a999;
    opacity:.3
}

.btn-primary:hover{
    background-color:#18a999;
    opacity:1
}


.audioBox{
    margin:1rem;
    border-color:black;
    border-width:.2rem;
    border-style:solid;
    padding:2rem;
    max-width:20rem;
    justify-self:center; 
    border-radius:2rem;
    display: flex;
    flex-direction: column;
    align-items: center;   
    justify-content: flex-start; 
}

h2.audioBoxTitle{
    font-size:2rem;
    justify-self:center
}

#playButton, #pauseButton, #restartButton, #nextButton{
    padding:1rem;
    border-radius:1rem;
    background-color:white;
    color:white;
    width:5rem;
    /* justify-content:center; */
    /* display:flex; */
}

#nextButton{
    transform: scaleX(-1)
}
.controlBar{
    width:100%;
    justify-content:space-evenly;
    display: flex;
}

.audioIcon{
    width:3rem;
    justify-self:center
}

#progress{

}

.progress-bar {
  width: 15rem;
  height: 20px;
  background: #ddd;
  border-radius: 10px;
  margin: 1rem 0 0 0;
}

.progress-fill {
  height: 90%;
  width: 0%;
  background: black;
  transition: width 0.1s linear;
    cursor:pointer;

} 

.noSelect{
    user-select: none;    /* modern browsers */
  -webkit-user-select: none; /* Safari/iOS */
  -ms-user-select: none;     /* old IE */

    -webkit-tap-highlight-color: transparent;
}
.progress-label-container {
  display: block;        /* take full width */
  text-align: center;    /* center inline content inside */
  margin-top: 4px;       /* spacing from the progress bar */
  font-size: 0.8rem;
}
#eqCanvas {
    background:black;
    margin: 1rem auto;  
    display: block;
    width:15rem;
    height:10rem;
    border-radius:1rem;
}.mess{
    margin-top:1rem
}

#artist, #title{
    text-align:center;
    margin:0;
}
#title{
    font-size:1.5rem;
        font-weight:bold;
}

tr.playing {
    border-width:.2rem;
    border-color:black;
}

#selectHeader, #positionHeader{
    visibility:collapse;
}

td.positionColumn,td.selectColumn{
    width:5rem;
    padding:0;
        text-align: center;
        vertical-align: middle;

}
.posBut{
    width:3rem;
    margin:.3rem
}

#modalLogo{
    width:3rem
}

#playerLogo{
    width:3rem;
    display:block;
    justify-self:center;
    margin-bottom:1rem;
}

.modal-header h2{
    width:100%;
    text-align:center
}

.selectColumn{
   width:2rem!important;
}


.same-width {
  min-width: 9rem;
    max-width:9rem
}
#deleteRow{
    justify-content:center;
    margin-top:2rem
}
#deleteIcon{
    width:3rem;
    justify-self:center;
    display:none
}

#playlistAlertText{
    display:none
}

#playlistModal h3{
    justify-self:center
}
.inputDiv, .alert, .butDiv{
    width:100%;
    justify-content:center;
    text-align:center;
    margin:0;
}
#playlistTitle{
    width:100%;
    padding:1rem;
    border-radius:1rem
}

#title{
    justify-self:center;
    margin-top:1rem
}
.pickerBtnDiv{
    justify-self:center
}


.share-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin: 2rem 0;
}

.share-btn {
  font-size: 1.6rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Colors per platform */
.share-btn.facebook    { background: #1877f2; }
.share-btn.twitter     { background: #111; } /* X brand is black */
.share-btn.reddit      { background: #ff4500; }
.share-btn.linkedin    { background: #0a66c2; }
.share-btn.whatsapp    { background: #25d366; }
.share-btn.email       { background: #6c757d; }

/* Hover animations */
.share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.22);
}

/* Icon tweaks */
.share-btn i {
  pointer-events: none;
}

h2, h3{
    justify-self:center;
    text-align:center
}



.centered-ul {
  margin: 1rem auto;          /* center the ul horizontally */
  display: table;          /* shrink-wrap to content width */
  text-align: left;        /* keep list items left-aligned */
  padding: 0;              /* optional: remove default padding */
  list-style-position: inside; /* optional: ensure bullets align nicely */
}

.centered-ul li {
  margin-bottom: 0.5rem;   /* spacing between items */
}
/* Footer */

.footer-links {
  display: flex;
  flex-direction: column; /* stack vertically by default (mobile) */
  align-items: center;
  gap: 0.5rem;            /* spacing between links */
  font-size: 0.9rem;

}
.footer-links a {
  color: inherit;       /* use the surrounding text color */
  text-decoration: none; /* remove underline */
}

.footer-links a:hover {
  text-decoration: underline; /* optional: underline on hover */
  color: inherit;             /* keep the same color on hover */
}
/* Add separators for larger screens */
.footer-links a::after {
  content: "";
}

/* Last link shouldn't have separator */
.footer-links a:last-child::after {
  content: "";
}

/* Desktop: inline links with separators */
@media (min-width: 600px) {
  .footer-links {
    flex-direction: row;     /* inline on larger screens */
    justify-content: center;
  }

  .footer-links a::after {
    content: "|";            /* add separator */
    margin: 0 0.5rem;
  }

  .footer-links a:last-child::after {
    content: "";
  }
}
#copyright{
    justify-self:center;
    margin-bottom:1rem!important
}


p.lead{
    justify-self:center
}
#picker-status{
    display:block;
    margin:0!important
}

/* Container for the SSE progress bar */
#loading-container {
  position: relative;
  width: 100%;
    max-width:20rem;
  min-height: 60px;           
  margin: 20px 0;
  display: flex;
  flex-direction: column;     
  justify-content: center; 
    justify-self:center
     

}

/* Progress bar wrapper */
.sse-progress {
  width: max-width:20rem;
  height: 2rem;             /* desired bar height */
  background-color: #e9ecef;  /* light gray background */
  border-radius: 1rem;
    align-items:center!important

}

/* The moving progress bar */
.sse-progress-bar {
  display: flex;               /* flex for centering text */
  align-items: center;         /* vertical center text inside bar */
  justify-content: center;     /* horizontal center text */
  height: 2rem;                /* fill the wrapper height */
  width: 0%;                   /* start empty, update with JS */
  background-color: #ced4da;  /* Bootstrap primary blue */
  color: white;                /* text color */
  font-weight: bold;
  line-height: 1;              /* reset line-height */
  border-radius: 1rem; /* rounded left side only */
  transition: width 0.3s ease; /* smooth width change */
    
}

/* Text below the progress bar */
#loading-text {
  margin-top: .5rem;
  text-align: center;
  font-size: 0.8rem;
  white-space: nowrap;       /* prevent line breaks */
  overflow: hidden;          /* hide overflow */
  text-overflow: ellipsis; 
}

.pageNotFound{
    text-align:center;

}
.illustration{
    text-align:center;
    width:100%;
    margin:1rem

}
#pageNotFound{
   width:80%;
    max-width:20rem;
    justify-self:center
}

.error-container {
        background-color: #fff;
        padding: 2rem 3rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        text-align: center;
        max-width: 500px;
        width: 90%;
        justify-self:center;
        margin-top:2rem
      }
      .error-container h1 {
        color: #e74c3c;
        margin-bottom: 1rem;
      }
      .error-container p {
        color: #333;
        font-size: 1.1rem;
      }
      .error-container .code {
        margin-top: 0.5rem;
        color: #999;
        font-size: 0.9rem;
          margin-bottom:2rem
      }