body {
    font-family: Roboto, arial, helvetica, sans-serif;
}

* { box-sizing: border-box; }

::-webkit-scrollbar {
    width: 9px;
}
 
::-webkit-scrollbar-track {
    border-radius: 9px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 9px;
    background-color: orangered;
}

.fr { float: right; }

/* ----------------------------------------------------------------- */

#EditWrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.W {
   background-color: #fff8c4;
   border-bottom: 1px solid #f2c779;
   color: brown;
}

.M {
    background-color: #e9ffd9;
    border-bottom: 1px solid #a6ca8a;
    color: darkgreen;
}

.A {
    background-color: #ffecec;
    border-bottom: 1px solid #f5aca6;
    color: red;
}

.SectionMarker {
    position: fixed;
    top: 0;
    height: 15px;
    background-color: #303030; /* black; */
    text-align: center;
    margin: 0;
    line-height: 0;
    font-size: 36px;
    border-top: solid 5px gray;
}

.SectionMarker i {
    line-height: 0;
    margin-top: 3px;
    color: gray;
}

.SectionMarker.active {
   border-top: solid 5px orangered;
}

.SectionMarker.active i {
   color: orangered;
}

/* ----------------------------------------------------------------- */

#SectionMarkerLetters {
    left: 0;
    width: 68px;
}

#Letters {
    position: fixed;
    left: 0;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 68px;
    background-color: black;
    border-top: solid 5px black;
}

#Letters button {
    height: 50px;
    width: 55px;
    font-size: 18px;
    background-color: black;
    color: white;
    border: none;
    cursor: pointer;
    outline: none;
    border-radius: 3px;
    margin-bottom: 3px;
}

#Letters button:hover {
    background-color: white;
    color: black;
}

#Letters button.active {
    background-color: orangered;
}

/* ----------------------------------------------------------------- */

#SectionMarkerArtists {
    left: 68px;
    width: calc(50% - 34px);
}

#ArtistToolbar {
    position: fixed;
    left: 68px;
    height: 59px;
    width: calc(50% - 34px);
    background-color: black;
    padding: 4px 4px 0 0;
    text-align: right;
}

#ArtistToolbar button {
    height: 50px;
    width: 55px;
    font-size: 18px;
    background-color: black;
    color: white;
    border: none;
    cursor: pointer;
    outline: none;
    border-radius: 3px;
}

#ArtistToolbar button:hover {
    background-color: orangered;
    color: white;
}

#Artists {
    position: fixed;
    left: 68px;
    bottom: 0;
    width: calc(50% - 34px);
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #F5F5F5;
}

#Artists button {
    height: 50px;
    width: 100%;
    font-size: 18px;
    background-color: #F5F5F5;
    color: gray;
    border: none;
    cursor: pointer;
    outline: none;
    text-align: left;
    border-bottom: solid 1px orangered;
    padding-left: 10px;
    display: block;
}

#Artists button span.SongCount {
    float: right;
    display: inline-block;
    padding: 3px 0;
    margin-right: 10px;
    border: solid 1px gray;
    color: gray;
    background-color: white;
    border-radius: 12px;
    font-size: 12px;
    width: 45px;
    text-align: center;
}

#Artists button:hover {
    background-color: black;
    color: white;
}

#Artists button.active {
    background-color: orangered;
    color: white;
}

#Artists button.active span.SongCount {
    border: solid 1px white;
}

#ArtistAddEditDelete {
    position: fixed;
    left: 68px;
    bottom: 0;
    width: calc(50% - 34px);
    background-color: #F5F5F5;
    display: none;
}

#ArtistMessage, #SongMessage {
    padding: 15px 20px;
}

#ArtistAddEditDelete .buttons {
    text-align: right;
    margin: 20px;
}

#ArtistAddEditDelete button {
    width: 100px;
    height: 70px;
    background-color: white;
    color: orangered;
    border: solid 1px orangered;
    border-radius: 10px;
    font-size: 24px;
    cursor: pointer;
    outline: none;
    line-height: 1;
}

#ArtistAddEditDelete button span {
    font-size: 12px;
}

#ArtistAddEditDelete button:hover {
    background-color: orangered;
    color: white;
}

#ArtistAddEditDelete input {
    width: calc(100% - 40px);
    margin: 10px 0 0 20px;
    font-size: 18px;
    border: none;
    border-bottom: solid 3px orangered;
    color: orangered;
    padding: 5px;
    background-color: #F5F5F5;
    outline: none;
}

#DeleteArtist {
    display: block;
    padding: 20px;
    font-size: 18px;
    color: red;
}

/* ----------------------------------------------------------------- */

#SectionMarkerSongs {
    left: calc(50% + 34px);
    border-left: solid 1px gray;
    right: 0;
}

#SongToolbar {
    position: fixed;
    left: calc(50% + 34px);
    height: 59px;
    right: 0;
    background-color: black;
    padding: 4px 4px 0 0;
    border-left: solid 1px gray;
    text-align: right;
}

#SongToolbar button {
    height: 50px;
    width: 55px;
    font-size: 18px;
    background-color: black;
    color: white;
    border: none;
    cursor: pointer;
    outline: none;
    border-radius: 3px;
}

#SongToolbar button:hover {
    background-color: orangered;
    color: white;
}

#SongTune { margin-right: 50px; }

#Songs {
    position: fixed;
    left: calc(50% + 34px);
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #F5F5F5;
    border-left: solid 1px gray;
}

#Songs button {
    height: 50px;
    width: 100%;
    font-size: 18px;
    background-color: #F5F5F5;
    color: gray;
    border: none;
    cursor: pointer;
    outline: none;
    text-align: left;
    border-bottom: solid 1px orangered;
    padding-left: 10px;
}

#Songs button:hover {
    background-color: black;
    color: white;
}

#Songs button.active {
    background-color: orangered;
    color: white;
}

#Songs button i {
    margin-right: 15px;
    font-size: 21px;
    color: orangered;
}

#Songs button:hover i, #Songs button.active i {
    color: white;
}

#SongAddEditDelete {
    position: fixed;
    left: calc(50% + 34px);
    bottom: 0;
    right: 0;
    background-color: #F5F5F5;
    border-left: solid 1px gray;
    display: none;
}

#SongAddEditDelete .buttons {
    text-align: right;
    margin: 20px;
}

#SongAddEditDelete button {
    width: 100px;
    height: 70px;
    background-color: white;
    color: orangered;
    border: solid 1px orangered;
    border-radius: 10px;
    font-size: 24px;
    cursor: pointer;
    outline: none;
    line-height: 1;
}

#SongAddEditDelete button span {
    font-size: 12px;
}

#SongAddEditDelete button:hover {
    background-color: orangered;
    color: white;
}

#SongAddEditDelete input {
    width: calc(100% - 40px);
    margin: 10px 0 0 20px;
    font-size: 18px;
    border: none;
    border-bottom: solid 3px orangered;
    color: orangered;
    padding: 5px;
    background-color: #F5F5F5;
    outline: none;
}

#DeleteSong {
    display: block;
    padding: 20px;
    font-size: 18px;
    color: red;
}

/* -------------------------------------------------------------------------- */
/* MOBILE MODE: ------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

@media only screen and (max-width: 600px) {

   .SectionMarker { display: none; }

   #ArtistToolbar, #Artists, #ArtistAddEditDelete {
      width: calc(100% - 68px);
   }

   #SongToolbar, #Songs, #SongAddEditDelete {
      display: none;
   }

   #ArtistToolbar, #SongToolbar, #Letters { top: 0; }

   #Artists, #ArtistAddEditDelete, #Songs, #SongAddEditDelete {
      top: 59px;
   } 
}

/* -------------------------------------------------------------------------- */
/* TABLET MODE: ------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 600px) and (max-width: 959px) {

   .SectionMarker { display: none; }

   #ArtistToolbar, #Artists, #ArtistAddEditDelete {
      width: calc(100% - 68px);
   }

   #SongToolbar, #Songs, #SongAddEditDelete {
      display: none;
   }

   #ArtistToolbar, #SongToolbar, #Letters { top: 0; }

   #Artists, #ArtistAddEditDelete, #Songs, #SongAddEditDelete {
      top: 59px;
   }

}

/* -------------------------------------------------------------------------- */
/* DESKTOP MODE: ------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 960px) {

   .KeyboardON1R { top: 15px; }
   .KeyboardOFF1R { top: 0; }

   .KeyboardON2R { top: 74px; }
   .KeyboardOFF2R { top: 59px; }

}