* {
   box-sizing: border-box;
}

body {
   font-family: Roboto, Arial, Helvetica, sans-serif;
}

button {
   cursor: pointer;
}

/* width */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
   border: solid 1px gainsboro;
   border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: gainsboro;
   border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: rgb(100, 0, 100);
}

[part="timeline"] {
   margin-bottom: 5px;
   border-bottom: solid 1px gray;
}

#SideBar {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: 300px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   /* border-right: solid 1px rgb(100, 0, 100); */
}

#WorkContainer {
   position: fixed;
   top: 0;
   left: 300px;
   right: 0;
   bottom: 0;
   display: flex;
   flex-direction: column;
}

#Header {
   border-bottom: solid 1px rgb(100, 0, 100);
   padding-bottom: 15px;
   background-color: #fff0f5;
}

#WSInstrumental,
#WSVocals {
   height: 60px;
   background-color: #fff0f5;
   position: relative;
   margin-top: 10px;
}

#Volumes {
}

#Volumes > div {
   padding: 10px 14px;
}

#Volumes .label {
   font-size: 12px;
   color: rgb(100, 0, 100);
   display: inline-block;
   padding: 3px 0 3px 3px;
   margin-bottom: 5px;
   display: flex;
}

#Volumes .label #InstrumentalVolumeValue,
#Volumes .label #VocalsVolumeValue {
   flex-grow: 1;
   text-align: right;
}

#Volumes input {
   width: 100%;
}

input[type="range"] {
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
   cursor: pointer;
   width: 15rem;
   display: block;
   margin-bottom: 15px;
}

input[type="range"]:focus {
   outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
   background: rgb(100, 0, 100);
   height: 3px;
   border-radius: 3px;
}

input[type="range"]::-moz-range-track {
   background: rgb(100, 0, 100);
   height: 3px;
   border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   margin-top: -6px;
   background-color: #b178ac;
   outline: solid 2px white;
   height: 15px;
   width: 15px;
   border-radius: 10px;
}

input[type="range"]::-moz-range-thumb {
   appearance: none;
   margin-top: -6px;
   background-color: #b178ac;
   outline: solid 2px white;
   height: 15px;
   width: 15px;
   border-radius: 10px;
}

input[type="range"]::-webkit-slider-thumb:hover {
   background-color: rgb(200, 0, 200);
}

input[type="range"]::-moz-range-thumb:hover {
   background-color: rgb(200, 0, 200);
}

#WSInstrumental .label,
#WSVocals .label {
   font-size: 11px;
   color: white;
   position: absolute;
   top: -8px;
   left: 2px;
   display: inline-block;
   padding: 3px 10px;
   border-radius: 3px;
   min-width: 110px;
   background-color: rgba(100, 0, 100, 0.5);
   z-index: 100000;
   text-align: center;
}

#WorkArea {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   padding: 10px 10px 10px 0;
   min-height: 0;
}

#Tabs {
   display: flex;
}

#TabButtons {
   display: flex;
   height: 30px;
   overflow: visible;
}

#TabButtons button {
   min-width: 150px;
   height: 31px;
   border: none;
   border-top: solid 3px rgb(100, 0, 100);
   border-left: solid 1px gainsboro;
   background-color: gainsboro;
   border-right: solid 1px white;
}

#TabButtons button[data-active] {
   background-color: white;
}

#Timer {
   font-size: 18px;
   color: white;
   display: flex;
   align-items: center;
}

#Timer > div {
   flex-grow: 1;
   text-align: center;
}

#Timer > span {
   flex-grow: 1;
   background-color: rgb(100, 0, 100);
   padding: 3px 10px;
   border-radius: 3px;
   text-align: center;
}

#StartPause {
   font-size: 72px;
   color: rgb(100, 0, 100);
   padding: 0;
   line-height: 72px;
   border: none;
   background-color: transparent;
}

#StartPause:hover,
#Temporalis button:hover {
   color: rgb(200, 0, 200);
}

#Temporalis {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#Temporalis button {
   font-size: 32px;
   color: rgb(100, 0, 100);
   padding: 0;
   line-height: 32px;
   border: none;
   background-color: transparent;
}

#Temporalis span {
   font-size: 32px;
   text-align: center;
   color: gainsboro;
}

#Title {
   background-color: #fff0f5;
   border: solid 1px #b178ac;
   border-radius: 15px;
   margin: 10px;
   padding: 10px;
   cursor: pointer;
   color: rgb(100, 0, 100);
}

#Title * {
   pointer-events: none;
}

#Title:hover,
#Title:hover button {
   background-color: rgb(100, 0, 100);
   color: white;
}

#Title p,
#Title h1 {
   padding: 0;
   margin: 0;
}

#OpenFile {
   display: flex;
}

#OpenFile p {
   flex-grow: 1;
}

#OpenFile button {
   font-size: 32px;
   line-height: 32px;
   background-color: transparent;
   padding: 0;
   border: none;
   color: rgb(100, 0, 100);
}

#Frames {
   background-color: white;
   border-top: solid 1px gainsboro;
   border-left: solid 1px gainsboro;
   flex-grow: 1;
   line-height: 1.2;
   display: flex;
   min-height: 0;
   overflow: hidden;
}

#Lyrics {
   flex-grow: 1;
   display: flex;
   gap: 5px;
}

#TSLyrics {
   flex-grow: 1;
   width: 50%;
   padding: 10px;
   overflow: scroll;
}

#TSLyrics button {
   width: 100%;
   padding: 5px;
   text-align: left;
   font-size: 14px;
}

#TSLyrics button span {
   display: inline-block;
   pointer-events: none;
}

.TimeStamp {
   width: 60px;
   font-weight: bolder;
   color: green;
}

.TimeStamp[data-timestamp="00:00"] {
   color: rgb(100, 0, 100);
}

#RawLyrics {
   flex-grow: 1;
   width: 50%;
   padding: 10px;
   overflow: scroll;
}

#Preview {
   width: 400px;
   padding: 10px;
   text-align: center;
}

#Ratio16x9 {
   width: 352px;
   height: 198px;
   border: solid 1px gray;
   margin: 0 auto 3px auto;
}

#Ratio4x3 {
   width: 280px;
   height: 210px;
   border: solid 1px gray;
   margin: 10px auto 3px auto;
}

#Songs {
   flex-grow: 1;
   border: solid 1px red;
   margin: 0 10px 10px 10px;
   border: solid 1px #b178ac;
   border-radius: 15px;
}

ul {
   list-style-type: none;
   padding: 0;
}

.Authors,
.Songs {
   padding: 0 20px;
}

.Author {
   font-weight: bold;
   color: rgb(200, 0, 200);
}

[data-song] {
   color: rgb(100, 0, 100);
   border-radius: 5px;
   padding: 5px 10px;
}

[data-song]:hover {
   color: white;
   background-color: rgb(100, 0, 100);
}

.Songs li {
   margin-top: 5px;
}

ul li button {
   width: 100%;
   text-align: left;
   border: none;
   background-color: transparent;
}

[data-function="ScrollVolume"] {
   border: none;
   background-color: transparent;
   margin-left: 20px;
   font-size: 18px;
   color: gray;
   padding: 0;
   line-height: 0;
}

[data-function="ScrollVolume"]:hover {
   color: rgb(200, 0, 200);
}

[data-function="ScrollVolume"][data-enabled] {
   color: rgb(200, 0, 200);
}

.Curtain {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
}

#OpenFileContainer {
   position: fixed;
   inset: 100px;
   background-color: white;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   display: none;
}

.ModalContainer > * {
   width: 100%;
}

.TitleContainer {
   display: flex;
   background-color: #fff0f5;
   border-bottom: solid 1px gainsboro;
}

.ModalTitle {
   padding: 10px 20px;
   font-size: 24px;
   color: gray;
   flex-grow: 1;
}

.ExitModal {
   font-size: 32px;
   line-height: 0;
   background-color: transparent;
   border: none;
   padding: 0 5px;
   color: gray;
}

.ExitModal:hover {
   color: red;
}

#OpenFileBody {
   display: flex;
   flex-grow: 1;
   min-height: 0;
}

#AuthorsContainer {
   /* border-right: solid 1px gray; */
   display: flex;
   flex-direction: column;
}

#AuthorsSearch {
   display: flex;
   align-items: center;
   color: gray;
   padding: 5px;
   gap: 5px;
   border: solid 1px gainsboro;
   margin: 5px 0 5px 5px;
   border-radius: 5px;
   background-color: #fff0f5;
}

#AuthorsSearch input {
   flex-grow: 1;
   font-size: 16px;
   padding: 5px;
}

#AuthorsSearch button {
   flex-grow: 1;
   font-size: 24px;
   line-height: 0;
   padding: 0;
   background-color: transparent;
   border: none;
   color: gray;
}

#AuthorsSearch button:hover {
   color: rgb(100, 0, 100);
}

#AuthorsList {
   flex-grow: 1;
   overflow-y: scroll;
   padding: 5px;
}

.AuthorButton,
.SongButton {
   border: none;
   color: rgb(100, 0, 100);
   background-color: transparent;
   width: 100%;
   padding: 10px;
   font-family: Roboto;
   font-size: 16px;
   text-align: left;
   border-radius: 5px;
   margin-bottom: 2px;
}

.AuthorButton:hover,
.AuthorButton[data-selected],
.SongButton:hover,
.SongButton[data-selected] {
   background-color: rgb(100, 0, 100);
   color: white;
}

#SongsList {
   padding: 5px;
   width: 100%;
   overflow-y: scroll;
}

.ModalControls {
   padding: 20px;
   background-color: #fff0f5;
   border-top: solid 1px gainsboro;
   text-align: right;
}

.ModalControls button {
   border: solid 1px rgb(100, 0, 100);
   color: rgb(100, 0, 100);
   background-color: transparent;
   min-width: 120px;
   padding: 10px;
   font-family: Roboto;
   font-size: 16px;
   border-radius: 5px;
}

.ModalControls button:hover {
   background-color: rgb(100, 0, 100);
   color: white;
}