/* 1440 or lower */
@media screen and (min-width: 0px) and (max-width: 1440px) {
    .artistselected {
      overflow-y: scroll;
    }
}

@media screen and (max-width: 1279px) {
    .playlistSongNumbers {
      width: 50px;
      display: block;
      color: white;
      float: left;
      font-size: 2vw;
    }
}

@media screen and (max-width: 1023px) {
    .playlistSongNumbers {
      width: 50px;
      display: block;
      color: white;
      float: left;
      font-size: 5vw;
    }
}

@media screen and (min-width: 1441px) {
    .PlaylistBox {
      height: 80%;
      display: block;
      overflow: hidden scroll;
    }
}

@media screen and (max-width: 1440px) and (min-width: 1101px) {
    .PlaylistBox {
      height: 77%;
      display: block;
      overflow: hidden scroll;
    }
}

@media screen and (min-width: 1024px) {
    #sidebar {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 0;
      width: 200px;
      height: 100% !important;
      background-color: #252525;
    }
}

@media screen and (min-width: 950px) {
    #drag {
      position: absolute;
      cursor: pointer;
      width: 4px;
      z-index: 20;
      height: 100%;
      background-color: white;
    }

    #dragMobile{
      display: none;
    }
}

@media screen and (max-width: 950px) {
    #dragMobile {
      position: fixed;
      right: 0;
      z-index: 5;
      height: 83%;
      background-color:white;
    }
}

@media screen and (max-width: 960px) {
    #dropdownDiv {
      width: calc(100% - 40px) !important;
      margin-right: 20px;
    }
}

@media screen and (max-width: 1740px) and (min-width: 1000px) {
    .siteExplanation {
      overflow: hidden auto;
      height: 600px !important;
      width: 100%;
    }
}

@media screen and (max-width: 1100px) and (min-width: 901px) {
    .sideBarTabs {
      border-bottom: 0px solid white;
      padding-bottom: 20px;
      margin-top: 4vw;
    }
}

/* For mobile */
@media screen and (max-width: 1100px) {
    #pageButtons {
      display: none;
    }
    #SongInfo {
      display: none;
    }
    #SongInfoDesktop {
      display: none;
    }
    .gx_7 {
      --bs-gutter-x: .7rem;
    }
    .playerIcons {
      display: flex;
      align-items: center;
      top: 5vw;
      position: absolute;
    }
}

@media screen and (max-width: 1740px) {
    .viewStatRecords {
      width: 50%;
    }
    .viewRecordsGrid {
      grid-template-columns: repeat(4, 0fr) !important;
    }
}


@media screen and (max-width:  1024px) {
    .playerIcons {
      display: flex;
      align-items: center;
      top: 2vw;
      position: absolute;
    }
}

@media screen and (max-width: 912px) {
    .playerIcons {
      display: flex;
      align-items: center;
      top: 5vw;
      position: absolute;
    }
}

  /* For non-mobile */
@media screen and (min-width: 1100px) {
    #ShowMoreInfoButton {
        display: none;
    }
    #AdditionalSongInfo {
        display: none;
    }

    .gx_7 {
        --bs-gutter-x: 3rem;
    }
    .playerIcons {
        display: flex;
        align-items: center;
        top: 50%;
    }
}

@media screen and (max-width: 1100px) {
    .SongInformationFavorites {
      width: 30vw;
    }
    #AdditionalSongInfo {
      color: white;
      background-color: #212529;
      display: block;
      position: relative;
      top: 19vw;
    }
    #LoadAdditionalInformation {
      overflow: hidden;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1500px) {
    .playerIcons {
      display: flex;
      top: 50%;
      width: inherit;
      position: absolute;
      justify-content: center;
      margin: 0;
      transform: translateY(-50%);
    }
}