#mvSequencer #sequencerHeader {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  z-index: 4;
  top: 0;
  transition: top 0.5s ease;
  /* CUSTOM SELECT */
}
#mvSequencer #sequencerHeader .btn:not(.headerScore div),
#mvSequencer #sequencerHeader #cancel {
  text-transform: capitalize;
  display: flex;
  align-items: center;
  padding: 0.9375rem;
  color: var(--header-text-color);
  background-color: var(--header-bg-color);
  box-shadow: none;
}
#mvSequencer #sequencerHeader .sequencerHeaderTopRow,
#mvSequencer #sequencerHeader .sequencerHeaderBottomRow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 0 1rem;
}
#mvSequencer #sequencerHeader .sequencerHeaderBottomRow {
  background-color: white;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14);
}
#mvSequencer #sequencerHeader .sequencerHeaderBottomRowRight {
  display: flex;
  align-items: center;
  border-left: 1px solid #ccc;
  padding: 0.5rem 2.5rem;
}
#mvSequencer #sequencerHeader .sequencerHeaderBottomRow:has(.panelSelectorButton:not(:only-child)) {
  padding: 0;
}
#mvSequencer #sequencerHeader .sequencerHeaderBottomRow:has(.panelSelectorButton:only-child) .sequencerHeaderBottomRowRight {
  border-left: none;
}
#mvSequencer #sequencerHeader .sequencerHeaderTitle {
  color: var(--header-text-color);
  font-weight: bold;
}
#mvSequencer #sequencerHeader .sequencerFormatText {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
#mvSequencer #sequencerHeader #cancel .btnLabel {
  margin-left: 0.5rem;
}
#mvSequencer #sequencerHeader #cancel:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
  cursor: pointer;
}
#mvSequencer #sequencerHeader .extra-header {
  display: flex;
  position: absolute;
  left: 1rem;
}
#mvSequencer #sequencerHeader .extra-header .sync-container {
  display: flex;
}
#mvSequencer #sequencerHeader .extra-header #elementPositioningBtn.btn.active div,
#mvSequencer #sequencerHeader .extra-header .sync-button.btn.active div {
  color: red;
}
#mvSequencer #sequencerHeader #panelSelector:has(.panelSelectorButton:not(:only-child)) {
  display: flex;
  width: 100%;
  height: 100%;
}
#mvSequencer #sequencerHeader #panelSelector:has(.panelSelectorButton:not(:only-child)):hover {
  cursor: pointer;
}
#mvSequencer #sequencerHeader #panelSelector:has(.panelSelectorButton:not(:only-child)) .panelSelectorButton {
  flex: 1;
  height: 100%;
  text-align: center;
  color: #919191;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0rem;
}
#mvSequencer #sequencerHeader #panelSelector:has(.panelSelectorButton:not(:only-child)) .panelSelectorButton.selected {
  border-bottom: solid 0.25em var(--header-bg-color);
  color: var(--header-bg-color);
  font-weight: 600;
}
#mvSequencer #sequencerHeader .sequencerHeaderTopRow {
  background-color: var(--header-bg-color);
  gap: 5rem;
}
@media (hover: hover) {
  #mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn:hover {
    background-color: hsla(0, 0%, 100%, 0.1);
    box-shadow: none;
  }
}
#mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn div,
#mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn i {
  vertical-align: middle;
  display: inline-block;
}
#mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn div.material-icons, #mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn div.material-symbols-outlined,
#mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn i.material-icons,
#mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn i.material-symbols-outlined {
  font-size: 1rem;
  line-height: 0.8rem;
  color: var(--header-text-color);
}
#mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn div.btnLabel,
#mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn i.btnLabel {
  margin-left: 0.5rem;
}
#mvSequencer #sequencerHeader .logo {
  width: 5%;
}
#mvSequencer #sequencerHeader .mvSelect {
  position: relative;
  margin-right: 2rem;
  /* Hide the items when the select box is closed: */
}
#mvSequencer #sequencerHeader .mvSelect select {
  display: none; /*hide original SELECT element: */
}
#mvSequencer #sequencerHeader .mvSelect .select-selected {
  color: var(--header-bg-color);
  text-align: center;
  background-color: var(--header-text-color);
  width: -moz-fit-content;
  width: fit-content;
  padding: 12px 40px 12px 30px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  border-radius: 0.2rem;
  box-sizing: border-box;
  /* Style the arrow inside the select element: */
  /* Point the arrow upwards when the select box is open (active): */
}
@media (hover: hover) {
  #mvSequencer #sequencerHeader .mvSelect .select-selected:hover {
    cursor: pointer;
  }
}
#mvSequencer #sequencerHeader .mvSelect .select-selected:after {
  position: absolute;
  content: "";
  top: 42%;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: var(--header-bg-color) transparent transparent transparent;
  right: 15px;
}
#mvSequencer #sequencerHeader .mvSelect .select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--header-bg-color) transparent;
  top: 28%;
}
#mvSequencer #sequencerHeader .mvSelect .select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  box-sizing: border-box;
  border-radius: 0.2rem;
  width: 100%;
  background-color: var(--header-bg-color);
}
#mvSequencer #sequencerHeader .mvSelect .select-items div {
  color: var(--header-text-color);
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding: 8px 16px;
}
#mvSequencer #sequencerHeader .mvSelect .select-hide {
  display: none;
}
#mvSequencer #sequencerHeader .mvSelect .select-items div:hover,
#mvSequencer #sequencerHeader .mvSelect .same-as-selected {
  background-color: hsla(0, 0%, 100%, 0.1);
  border-radius: 0.2rem;
}
#mvSequencer #sequencerHeader #chrono {
  padding: 0.25rem 0.5rem;
  border: solid var(--header-bg-color) 4px;
}
#mvSequencer #sequencerHeader #chrono div {
  display: inline-block;
  vertical-align: middle;
}
#mvSequencer #sequencerHeader #chrono #status {
  color: var(--header-text-color);
  padding-left: 0.5rem;
}
#mvSequencer #sequencerHeader #chrono.chrono-paused {
  background-color: #ff0000 !important;
  border-color: #ff0000;
  color: white !important;
}
#mvSequencer #sequencerHeader #chrono.chrono-paused #status {
  color: white;
}
#mvSequencer #sequencerHeader .headerScore {
  border-radius: 5px;
  display: flex;
  align-items: center;
  position: relative;
}
#mvSequencer #sequencerHeader .headerScore .material-icons {
  visibility: hidden;
  font-size: 1rem;
  margin: 0 0.5rem 0 0;
  color: gold;
}
#mvSequencer #sequencerHeader .headerScore div {
  border-radius: 5px;
  border: solid 4px;
  color: black;
  padding: 0.25rem 0.5rem;
  background-color: transparent;
}
#mvSequencer #sequencerHeader .headerScore.winner .material-icons {
  visibility: visible;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderBottomRowRight {
  padding: 0.5rem 0 0.5rem 1rem;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderBottomRow #panelSelector:has(.panelSelectorButton:not(:only-child)),
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderBottomRow .mvSelect {
  margin-right: 1rem;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderBottomRow .mvSelect .select-selected {
  padding: 8px 22px 8px 8px;
  width: 6rem;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderBottomRow .mvSelect .select-selected:after {
  right: 6px;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderBottomRow .select-items {
  font-size: 85%;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderBottomRow .select-items div {
  padding: 8px 8px;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderTopRow {
  padding: 0;
  gap: 1rem;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderTopRow .btn .btnLabel,
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderTopRow .extra-header,
#mvSequencer.mvSequencer-portrait #sequencerHeader .sequencerHeaderTopRow .logo {
  display: none;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .headerScore {
  padding: 6px;
}
#mvSequencer.mvSequencer-portrait #sequencerHeader .headerScore div {
  padding: 2px 6px;
}
@media (max-width: 700px) {
  #mvSequencer #sequencerHeader .sequencerHeaderBottomRowRight {
    padding: 0.5rem 0 0.5rem 1rem;
  }
  #mvSequencer #sequencerHeader .sequencerHeaderBottomRow #panelSelector:has(.panelSelectorButton:not(:only-child)),
  #mvSequencer #sequencerHeader .sequencerHeaderBottomRow .mvSelect {
    margin-right: 1rem;
  }
  #mvSequencer #sequencerHeader .sequencerHeaderBottomRow .mvSelect .select-selected {
    padding: 8px 22px 8px 8px;
    width: 6rem;
  }
  #mvSequencer #sequencerHeader .sequencerHeaderBottomRow .mvSelect .select-selected:after {
    right: 6px;
  }
  #mvSequencer #sequencerHeader .sequencerHeaderBottomRow .select-items {
    font-size: 85%;
  }
  #mvSequencer #sequencerHeader .sequencerHeaderBottomRow .select-items div {
    padding: 8px 8px;
  }
  #mvSequencer #sequencerHeader .sequencerHeaderTopRow {
    padding: 0;
    gap: 1rem;
  }
  #mvSequencer #sequencerHeader .sequencerHeaderTopRow .btn .btnLabel,
  #mvSequencer #sequencerHeader .sequencerHeaderTopRow .extra-header,
  #mvSequencer #sequencerHeader .sequencerHeaderTopRow .logo {
    display: none;
  }
  #mvSequencer #sequencerHeader .headerScore {
    padding: 6px;
  }
  #mvSequencer #sequencerHeader .headerScore div {
    padding: 2px 6px;
  }
}