@charset "UTF-8";
#mvSequencer .tagging-panel,
.playgroundEditor .container {
  position: relative;
  vertical-align: middle;
  margin: 0 auto;
  text-align: center;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-origin: border-box;
  /* ---- CHRONOMETER ---- */
  /* ----- PLAYGROUND ----- */
  /* ----- IMPACTS ----- */
}
#mvSequencer .tagging-panel.preview,
.playgroundEditor .container.preview {
  border: 1px dashed #c0c0c0;
}
#mvSequencer .tagging-panel #video-player-interactive,
.playgroundEditor .container #video-player-interactive {
  z-index: 1;
}
#mvSequencer .tagging-panel #video-player-interactive.hidden,
.playgroundEditor .container #video-player-interactive.hidden {
  /* Needed so the JS doesn't set a wrong video's size */
  visibility: hidden;
  display: block !important;
}
#mvSequencer .tagging-panel #video-player-interactive .meta-video,
.playgroundEditor .container #video-player-interactive .meta-video {
  padding: 0 !important;
}
#mvSequencer .tagging-panel #video-player-interactive video,
.playgroundEditor .container #video-player-interactive video {
  width: 100%;
  height: 100%;
}
#mvSequencer .tagging-panel .team,
#mvSequencer .tagging-panel .global-attribute,
#mvSequencer .tagging-panel .player-attribute,
.playgroundEditor .container .team,
.playgroundEditor .container .global-attribute,
.playgroundEditor .container .player-attribute {
  z-index: 2;
}
#mvSequencer .tagging-panel .global-attribute .attribute-label,
#mvSequencer .tagging-panel .player-attribute .attribute-label,
.playgroundEditor .container .global-attribute .attribute-label,
.playgroundEditor .container .player-attribute .attribute-label {
  border: none !important;
  text-align: left;
}
#mvSequencer .tagging-panel .global-attribute.label-position-top .attribute-label,
#mvSequencer .tagging-panel .player-attribute.label-position-top .attribute-label,
.playgroundEditor .container .global-attribute.label-position-top .attribute-label,
.playgroundEditor .container .player-attribute.label-position-top .attribute-label {
  margin: 0 auto 1% auto;
}
#mvSequencer .tagging-panel .global-attribute.label-position-left,
#mvSequencer .tagging-panel .player-attribute.label-position-left,
.playgroundEditor .container .global-attribute.label-position-left,
.playgroundEditor .container .player-attribute.label-position-left {
  display: flex;
}
#mvSequencer .tagging-panel .global-attribute.label-position-left .attribute-label,
#mvSequencer .tagging-panel .player-attribute.label-position-left .attribute-label,
.playgroundEditor .container .global-attribute.label-position-left .attribute-label,
.playgroundEditor .container .player-attribute.label-position-left .attribute-label {
  margin-right: 1%;
}
#mvSequencer .tagging-panel .global-attribute.label-position-left select,
#mvSequencer .tagging-panel .player-attribute.label-position-left select,
.playgroundEditor .container .global-attribute.label-position-left select,
.playgroundEditor .container .player-attribute.label-position-left select {
  height: -moz-fit-content;
  height: fit-content;
}
#mvSequencer .tagging-panel .global-attribute.label-position-left .selectize-control,
#mvSequencer .tagging-panel .player-attribute.label-position-left .selectize-control,
.playgroundEditor .container .global-attribute.label-position-left .selectize-control,
.playgroundEditor .container .player-attribute.label-position-left .selectize-control {
  flex-grow: 1;
}
#mvSequencer .tagging-panel .global-attribute.label-position-inside .attribute-label,
#mvSequencer .tagging-panel .player-attribute.label-position-inside .attribute-label,
.playgroundEditor .container .global-attribute.label-position-inside .attribute-label,
.playgroundEditor .container .player-attribute.label-position-inside .attribute-label {
  display: none;
}
#mvSequencer .tagging-panel .global-attribute,
.playgroundEditor .container .global-attribute {
  position: absolute;
  width: 10%;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#mvSequencer .tagging-panel .global-attribute select,
.playgroundEditor .container .global-attribute select {
  width: 100%;
}
#mvSequencer .tagging-panel .global-attribute .selectize-control .selectize-input,
.playgroundEditor .container .global-attribute .selectize-control .selectize-input {
  border-radius: 0;
}
#mvSequencer .tagging-panel .global-attribute img,
.playgroundEditor .container .global-attribute img {
  -webkit-user-drag: none;
}
#mvSequencer .tagging-panel .player-attribute,
.playgroundEditor .container .player-attribute {
  position: absolute;
  margin: 5% 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#mvSequencer .tagging-panel .player-attribute .circular-icon,
#mvSequencer .tagging-panel .player-attribute .attribute-icon,
.playgroundEditor .container .player-attribute .circular-icon,
.playgroundEditor .container .player-attribute .attribute-icon {
  position: absolute;
  margin: 0 auto;
}
#mvSequencer .tagging-panel .photo,
.playgroundEditor .container .photo {
  border-radius: 5px;
  box-shadow: 2px 2px 6px 0px #c0c0c0;
  background-position: center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
#mvSequencer .tagging-panel textarea,
.playgroundEditor .container textarea {
  width: 100%;
  height: 100% !important;
  text-indent: 0;
}
#mvSequencer .tagging-panel .breadcrumb,
.playgroundEditor .container .breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 0.25rem;
  flex-wrap: wrap;
}
#mvSequencer .tagging-panel .breadcrumb .breadcrumb-item,
.playgroundEditor .container .breadcrumb .breadcrumb-item {
  padding: 0.15rem;
  cursor: pointer;
}
#mvSequencer .tagging-panel .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.playgroundEditor .container .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding-right: 0.25rem;
  color: #6c757d;
}
#mvSequencer .tagging-panel .breadcrumb .breadcrumb-item a,
.playgroundEditor .container .breadcrumb .breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}
#mvSequencer .tagging-panel .breadcrumb .breadcrumb-item a:hover,
.playgroundEditor .container .breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}
#mvSequencer .tagging-panel .attrList > div,
.playgroundEditor .container .attrList > div {
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}
#mvSequencer .tagging-panel .attrList > div.active,
.playgroundEditor .container .attrList > div.active {
  filter: brightness(150%);
}
#mvSequencer .tagging-panel .listCol,
.playgroundEditor .container .listCol {
  display: flex;
  flex-direction: column;
  border-radius: 3px;
}
#mvSequencer .tagging-panel .listCol input[type=text],
.playgroundEditor .container .listCol input[type=text] {
  border-radius: 3px 3px 0px 0px;
  padding: 3px;
  border-bottom: 0;
  margin-bottom: -2px;
  box-sizing: border-box;
}
#mvSequencer .tagging-panel .listCol .attrList,
.playgroundEditor .container .listCol .attrList {
  overflow-y: auto;
  border: 1px solid #c0c0c0;
  border-radius: 3px;
}
#mvSequencer .tagging-panel .listCol .attrList > div,
.playgroundEditor .container .listCol .attrList > div {
  padding: 3px;
  border-bottom: 1px solid #c0c0c0;
  box-sizing: border-box;
}
#mvSequencer .tagging-panel .listCol .attrList > div:last-child,
.playgroundEditor .container .listCol .attrList > div:last-child {
  border-bottom: 0;
}
#mvSequencer .tagging-panel .listRow,
.playgroundEditor .container .listRow {
  border-radius: 3px;
}
#mvSequencer .tagging-panel .listRow input[type=text],
.playgroundEditor .container .listRow input[type=text] {
  border-radius: 3px 3px 0px 0px;
  padding: 3px;
  margin: 0 0.25%;
  box-sizing: border-box;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill;
}
#mvSequencer .tagging-panel .listRow .attrList,
.playgroundEditor .container .listRow .attrList {
  display: flex;
  flex-wrap: wrap;
  border-radius: 3px;
  position: relative;
  height: 100%;
}
#mvSequencer .tagging-panel .listRow .attrList > div,
.playgroundEditor .container .listRow .attrList > div {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c0c0c0;
  border-radius: 3px;
  margin: 0.25%;
}
#mvSequencer .tagging-panel .listRow .attrList > div.iconItem,
.playgroundEditor .container .listRow .attrList > div.iconItem {
  height: -moz-fit-content;
  height: fit-content;
}
#mvSequencer .tagging-panel .iconAndList,
.playgroundEditor .container .iconAndList {
  border-radius: 3px;
}
#mvSequencer .tagging-panel .iconAndList .list-breadcrumb,
#mvSequencer .tagging-panel .iconAndList .attrList,
.playgroundEditor .container .iconAndList .list-breadcrumb,
.playgroundEditor .container .iconAndList .attrList {
  position: absolute;
  top: 0;
  border-radius: 3px;
  width: auto;
}
#mvSequencer .tagging-panel .iconAndList .list-breadcrumb > div,
#mvSequencer .tagging-panel .iconAndList .attrList > div,
.playgroundEditor .container .iconAndList .list-breadcrumb > div,
.playgroundEditor .container .iconAndList .attrList > div {
  padding: 3px;
  border: 1px solid #c0c0c0;
  box-sizing: border-box;
  white-space: nowrap;
}
#mvSequencer .tagging-panel .iconItem,
.playgroundEditor .container .iconItem {
  background-color: transparent;
  border: none !important;
}
#mvSequencer .tagging-panel .chronometer-attribute,
.playgroundEditor .container .chronometer-attribute {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #c0c0c0;
  border-radius: 3px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 0.5rem;
}
#mvSequencer .tagging-panel .chronometer-attribute .chronometer-row,
.playgroundEditor .container .chronometer-attribute .chronometer-row {
  display: flex;
  justify-content: space-between;
}
#mvSequencer .tagging-panel .chronometer-attribute .chronometer-row div:hover,
.playgroundEditor .container .chronometer-attribute .chronometer-row div:hover {
  cursor: pointer;
}
#mvSequencer .tagging-panel .playground,
.playgroundEditor .container .playground {
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  #mvSequencer .tagging-panel .playground,
  .playgroundEditor .container .playground {
    height: auto !important;
    aspect-ratio: 1;
  }
}
#mvSequencer .tagging-panel .playground .bgImg,
.playgroundEditor .container .playground .bgImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#mvSequencer .tagging-panel .playground .attrList,
.playgroundEditor .container .playground .attrList {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
#mvSequencer .tagging-panel .playground .attrList.fixOffset,
.playgroundEditor .container .playground .attrList.fixOffset {
  transition: all 0.2s ease-in-out;
}
#mvSequencer .tagging-panel .playground .attrList .impact.active:after,
.playgroundEditor .container .playground .attrList .impact.active:after {
  opacity: 1;
}
#mvSequencer .tagging-panel .playground .attrList > div,
.playgroundEditor .container .playground .attrList > div {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mvSequencer .tagging-panel .playground .attrList > div input,
.playgroundEditor .container .playground .attrList > div input {
  background-color: transparent;
  border: none;
  text-align: center;
}
#mvSequencer .tagging-panel .playground .attrList > div input:focus,
.playgroundEditor .container .playground .attrList > div input:focus {
  background-color: #fff;
}
#mvSequencer .tagging-panel .playground .attrList .coordinatesOnPlayground,
.playgroundEditor .container .playground .attrList .coordinatesOnPlayground {
  width: 1px;
  height: 1px;
}
#mvSequencer .tagging-panel .playground .attrList .coordinatesOnPlayground .mark,
.playgroundEditor .container .playground .attrList .coordinatesOnPlayground .mark {
  position: relative;
  top: -50%;
  left: -50%;
}
#mvSequencer .tagging-panel .invisible-impact:before,
.playgroundEditor .container .invisible-impact:before {
  display: none;
}
#mvSequencer .tagging-panel .impacts,
.playgroundEditor .container .impacts {
  min-height: 60px;
  padding-top: 26px;
}
#mvSequencer .tagging-panel .impact,
.playgroundEditor .container .impact {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: absolute;
  z-index: 50;
  width: 30px !important;
  height: 30px !important;
  transition: none !important;
  padding: 0 !important;
}
#mvSequencer .tagging-panel .impact.hidden,
.playgroundEditor .container .impact.hidden {
  display: none;
}
#mvSequencer .tagging-panel .impact:hover,
.playgroundEditor .container .impact:hover {
  cursor: default;
}
#mvSequencer .tagging-panel .impact .impactImage,
.playgroundEditor .container .impact .impactImage {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: move;
  top: -50%;
  left: -50%;
  background-size: 100%;
  background-attachment: initial;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}
#mvSequencer .tagging-panel .impact .impactImage img,
.playgroundEditor .container .impact .impactImage img {
  display: none;
}
#mvSequencer .tagging-panel .impact:before, #mvSequencer .tagging-panel .impact:after,
.playgroundEditor .container .impact:before,
.playgroundEditor .container .impact:after {
  position: absolute;
  font-size: 0.7em;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 1px 3px;
  border-radius: 3px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}
#mvSequencer .tagging-panel .impact:before,
.playgroundEditor .container .impact:before {
  content: attr(data-num);
  transform: translate(-50%, -50%);
  top: -26px;
  left: 0;
}
#mvSequencer .tagging-panel .impact:after,
.playgroundEditor .container .impact:after {
  content: attr(data-score);
  transform: translateY(-50%);
  top: 0;
  left: calc(50% + 5px);
  opacity: 0;
}
#mvSequencer .tagging-panel .impact.highlight:before,
.playgroundEditor .container .impact.highlight:before {
  font-size: 1.1em;
  background-color: red;
  font-weight: bold;
}
#mvSequencer .tagging-panel .playground .attrList .midpoint,
.playgroundEditor .container .playground .attrList .midpoint {
  position: absolute;
  background: none;
  width: 30px;
  height: 30px;
  z-index: 100;
}
#mvSequencer .tagging-panel .playground .attrList .midpoint .area,
.playgroundEditor .container .playground .attrList .midpoint .area {
  width: 100px;
  height: 100px;
  background: rgba(128, 128, 128, 0.5);
  border: 2px solid #000;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  pointer-events: none;
}
#mvSequencer .tagging-panel .playground .attrList .midpoint:before,
.playgroundEditor .container .playground .attrList .midpoint:before {
  content: "✴︎";
  color: #000;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#mvSequencer.mvSequencer-portrait .tagging-panel .playground {
  height: auto !important;
  aspect-ratio: 1;
}

.displayListScroll {
  display: -webkit-box !important;
  flex-wrap: inherit !important;
  overflow-x: auto;
}
.displayListScroll div {
  width: 3rem;
}

.scrollbar::-webkit-scrollbar {
  width: 2px;
  height: 8px;
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 20px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: rgb(153, 153, 153);
  border-radius: 20px;
}

.scrollbar {
  scrollbar-color: rgb(153, 153, 153) #fff;
}