/*
  ------ Shared CSS Across All Tabs ------
*/

#clickContainer {
  background-color: var(--lowlight-color);
}

#instrumentTabContainer {
  overflow: hidden;
}

.multiplier {
  text-align: center;
  overflow: hidden;
}

.beatProgress {
  height: 8%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.beatProgress > progress[value] {
  width: 50%;
  height: 80%;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}

.beatProgress > progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

.beatProgress > progress[value]::-webkit-progress-value {
  background-color: var(--progress-color);
}

.beatProgress > progress::after {
  position: relative;
  top: -17px;
}

#laptopBeatProgress, #vocalBeatProgress, #keyboardBeatProgress {
  margin-left: 5%;
}

.instrumentResourceNumber {
  position: relative;
  opacity: 0;
  width: 5%;
  text-align: right;
}

/*
  ------ CSS For Instrument Tabs ------
*/

#laptopTab, #vocalTab, #keyboardTab, #guitarTab, #drumTab {
  color: white;
  float: left;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12px;
  width: 20%;
}

.instrumentActive {
  background-color: var(--background-color);
}

.instrument {
  background-color: var(--highlight-color);
  display: none;
}

.instrument:hover {
  background-color: var(--high-highlight-color);
}

.instrumentContent {
  padding-left: 6px;
  display: block;
  background-color: var(--background-color);
  border: 1px solid var(--background-color);
  height: 93%;
  color: white;
  display: none;
}

/*
  ------ CSS For Laptop Tab ------
*/

#beatContainer {
  height: 60%;
  width: 80%;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid transparent;
}

#marker {
  position: relative;
  width: 4%;
  height: 7%;
  margin-top: 18%;
  left: 1%;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 15px solid white;
}

#zones {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#greenZone {
  width: 15%;
  height: 5%;
  background-color: #00cc44;
  border: 1px solid #009933;
}

.yellowZone {
  width: 18%;
  height: 5%;
  background-color: #ffff33;
  border: 1px solid #cccc00;
}

.redZone {
  width: 22%;
  height: 5%;
  background-color: #ff5c33;
  border: 1px solid #cc2900;
}

#laptopMultiplier {
  margin-top: 5%;
}

#tempoSelector {
  height: 40%;
  width: 5%;
  overflow: hidden;
  border: 3px solid var(--lowlight-color);
  float: right;
  margin-right: 2.5%;
  margin-top: 10%;
  text-align: center;
  display: none;
}

#tempoSelector > p {
  margin-top: 3px;
  font-size: 9px;
}

#tempoSelector > input {
  margin: 9px 9px 9px 9px;
  cursor: pointer;
}

#beatButtonContainer {
  height: 10%;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

#beatButtonContainer > button {
  border: 1px solid white;
  color: white;
  background-color: var(--lowlight-color);
  width: 15%;
  height: 85%;
  font-size: 12px;
}

#beatButtonContainer > button:hover {
  cursor: pointer;
  background-color: var(--background-color);
}

/* Sub-genres */

#subgenreContainer {
  height: 8%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.subgenre {
  margin-right: 5px;
  border-radius: 15px;
  width: 2%;
  height: 50%;
  cursor: pointer;
}

#trance {
  background-color: #5DADE2;
  border: 1px solid #85C1E9;
  display: none;
}

#house {
  background-color: #E67E22;
  border: 1px solid #EB984E;
  display: none;
}

#drumAndBass {
  background-color: #0064FA;
  border: 1px solid #2177FA;
  display: none;
}

#hardstyle {
  background-color: #27AE60;
  border: 1px solid #52BE80;
  display: none;
}

#electro {
  background-color: #F7DC6F;
  border: 1px solid #F9E79F;
  display: none;
}

#industrial {
  background-color: #C0392B;
  border: 1px solid #CD6155;
  display: none;
}

#dubstep {
  background-color: #8E44AD;
  border: 1px solid #A569BD;
  display: none;
}

#dropProgressContainer {
  height: 4%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

#dropProgressContainer > progress[value] {
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}

#dropProgressContainer > progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

#dropProgressContainer > progress[value]::-webkit-progress-value {
  background-color: #8E44AD;
}

#dropProgressContainer > progress::after {
  top: -11px;
  font-size: 10px;
}

/* Sub-genre Pop-Up */

.popUpGenreText {
  font-size: 12px;
  margin-left: 10px;
  width: 75%;
}

/*
  ------ CSS For Vocals Tab ------
*/

#vocalContainer {
  height: 60%;
  width: 80%;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid transparent;
  position: relative;
}

#solutionCanvas {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}

#problemCanvas {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: transparent;
}

#waveAdjusterContainer {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#amplitudeAdjuster {
  margin-right: 15px;
}

#frequencyAdjuster {
  margin-left: 15px;
}

.vocalAdjuster {
  height: 25px;
  width: 25px;
  background: transparent;
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: contain; /* Resize the background image to be contained within the container */
  border: none;
}

.vocalAdjuster:hover {
  cursor: pointer;
}

.adjusterText {
  text-align: center;
  margin-top: 5px;
  border: 1px solid pink;
}

#upAmplitude {
  background-image: url("../resources/images/up_arrow.png");
}

#downAmplitude {
  background-image: url("../resources/images/down_arrow.png");
}

#leftFrequency {
  background-image: url("../resources/images/left_arrow.png");
}

#rightFrequency {
  background-image: url("../resources/images/right_arrow.png");
}

/*
  ------ CSS For Keyboard Tab ------
*/

#keyboardContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 70%;
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid transparent;
}

#whiteKeyContainer {
  position: absolute;
  z-index: 2;
  height: 90%;
  width: 100%;
}

#blackKeyContainer {
  position: absolute;
  z-index: 3;
  height: 90%;
  width: 100%;
}

.whiteKey {
  height: 100%;
  width: 6.6%;
  background-color: white;
  color: black;
  border: 1px solid black;
  float: left;
  text-align: center;
}

.blackKey, .spaceKey {
  height: 70%;
  width: 3.3%;
  background-color: black;
  color: white;
  border: 1px solid black;
  float: left;
  text-align: center;
  font-size: 10;
  margin-left: 3.3%;
}

.whiteKey:before, .blackKey:before { /* Bit of a hack to push the text to the bottom of the keys */
  content: "jamesisthegreatest";
  display: inline-block;
  height: 90%;
  opacity: 0;
}

.spaceKey { /* Space Keys are used to break up the black key groups naturally */
  opacity: 0;
}

#Db3Key { /* First black key on the keybaord requires more left spacing */
  margin-left: 5%;
}

#keyboardMultiplier, #vocalMultiplier {
  padding-top: 1%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}