@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/* COLORS */
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap");
.gradient-0 {
  background: #8f5cef;
  background: linear-gradient(135deg, #8f5cef, #a331cb);
}

.gradient-1 {
  background: #31499c;
  background: linear-gradient(135deg, #31499c, #15d1be);
}

.gradient-2 {
  background: #d993c0;
  background: linear-gradient(135deg, #d993c0, #a331cb);
}

.gradient-3 {
  background: #100f24;
  background: linear-gradient(135deg, #100f24, #31499c);
}

.gradient-4 {
  background: #d993c0;
  background: linear-gradient(135deg, #d993c0, #f9de5f);
}

.gradient-5 {
  background: #15d1be;
  background: linear-gradient(135deg, #15d1be, #a331cb);
}

.gradient-sfx {
  background: #f17c3b;
  background: linear-gradient(135deg, #f17c3b, #8f5cef);
}

.gradient-default {
  background: #f17c3b;
  background: linear-gradient(135deg, #f17c3b, #8f5cef);
}

/* CONSTANTS */
/* MIXINS */
/* STYLES */
body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-color: #100f24;
  color: white;
  margin: 0;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  user-select: none;
  -webkit-user-select: none;
}

a {
  text-decoration: none;
  color: white;
}

a.link {
  color: #e499eb;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.1s;
}
a.link:hover {
  color: #efc4f3;
}
a.link:active {
  color: #d96ee3;
}

a.link.link-electric-purple {
  color: #8f5cef;
}
a.link.link-electric-purple:hover {
  color: #af8af4;
}
a.link.link-electric-purple:active {
  color: #6f2eea;
}

a.link.link-blue {
  color: #31499c;
}
a.link.link-blue:hover {
  color: #3e5bc2;
}
a.link.link-blue:active {
  color: #253775;
}

a.link-no-underline {
  text-decoration: none;
}

button, .btn {
  background-color: #31499c;
  transition: background 0.1s;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 1.5em;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1000px;
  border: none;
  outline: none;
  padding: 10px 20px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  margin: 5px;
}
button:hover, .btn:hover {
  background-color: #3e5bc2;
}
button:active, .btn:active {
  background-color: #253775;
}
button:disabled, .btn:disabled {
  background-color: #31499c;
}
button:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.sprite-btn, .sprite-btn.sm {
  padding: 0;
  background: none;
}
.sprite-btn:hover, .sprite-btn.sm:hover {
  background: none;
}
.sprite-btn:active, .sprite-btn.sm:active {
  background: none;
}
.sprite-btn:disabled, .sprite-btn.sm:disabled {
  background: none;
}

.btn-disabled {
  opacity: 0.5;
  cursor: default;
}

button.secondary, .btn.secondary {
  background-color: #a331cb;
  transition: background 0.1s;
}
button.secondary:hover, .btn.secondary:hover {
  background-color: #b658d7;
}
button.secondary:active, .btn.secondary:active {
  background-color: #8227a2;
}
button.secondary:disabled, .btn.secondary:disabled {
  background-color: #a331cb;
}

button.danger, .btn.danger {
  background-color: #e32b2b;
  transition: background 0.1s;
}
button.danger:hover, .btn.danger:hover {
  background-color: #e95858;
}
button.danger:active, .btn.danger:active {
  background-color: #c11a1a;
}
button.danger:disabled, .btn.danger:disabled {
  background-color: #e32b2b;
}

button.gradient-0 {
  background: #8f5cef;
  background: linear-gradient(135deg, #8f5cef, #a331cb);
}
button.gradient-0:hover {
  background: #9c6ff1;
  background: linear-gradient(135deg, #9c6ff1, #ab40d1);
}
button.gradient-0:active {
  background: #8249ed;
  background: linear-gradient(135deg, #8249ed, #962dbb);
}

button.sm, .btn.sm {
  font-size: 0.7em;
  padding: 10px 12px;
}

.button-group {
  margin: 5px;
}
.button-group button {
  margin: 0;
  border-radius: 0;
  background: none;
  border: 1px solid #222;
  border-right: none;
  box-sizing: border-box;
}
.button-group button:hover {
  background: rgba(255, 255, 255, 0.2);
}
.button-group button:active {
  background: rgba(255, 255, 255, 0.4);
}
.button-group button:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.button-group button:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 1px solid #222;
}
.button-group button.active {
  background: white;
  color: black;
  border: white;
}

input, textarea {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background: white;
  border: none;
  border-radius: 5px;
  font-size: 1.2em;
  padding: 5px 2px;
  outline: none;
  transition: background 0.25;
}
input:hover, textarea:hover {
  background: #e6e6e6;
  border: none;
}
input:focus, textarea:focus {
  border: none;
}

input.rounded {
  border: none;
  padding: 5px 10px;
  border-radius: 100px;
}

img, .noselect {
  user-select: none;
  -webkit-user-select: none;
}

.spinning {
  animation: spinning 15s infinite linear;
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.yellow-banner, .red-banner {
  margin: 0 -20px;
  font-weight: bold;
  padding: 10px 20px;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.yellow-banner {
  background: #f9de5f;
  color: black;
}

.red-banner {
  background: #e32b2b;
}

/* POIROT */
.poirot * {
  color: initial;
  background: initial;
  border-radius: initial;
  font-size: initial;
  text-transform: initial;
  text-decoration: initial;
  outline: initial;
  padding: initial;
  cursor: initial;
  user-select: initial;
  -webkit-user-select: initial;
  margin: initial;
}

/* COLORS */
.gradient-0 {
  background: #8f5cef;
  background: linear-gradient(135deg, #8f5cef, #a331cb);
}

.gradient-1 {
  background: #31499c;
  background: linear-gradient(135deg, #31499c, #15d1be);
}

.gradient-2 {
  background: #d993c0;
  background: linear-gradient(135deg, #d993c0, #a331cb);
}

.gradient-3 {
  background: #100f24;
  background: linear-gradient(135deg, #100f24, #31499c);
}

.gradient-4 {
  background: #d993c0;
  background: linear-gradient(135deg, #d993c0, #f9de5f);
}

.gradient-5 {
  background: #15d1be;
  background: linear-gradient(135deg, #15d1be, #a331cb);
}

.gradient-sfx {
  background: #f17c3b;
  background: linear-gradient(135deg, #f17c3b, #8f5cef);
}

.gradient-default {
  background: #f17c3b;
  background: linear-gradient(135deg, #f17c3b, #8f5cef);
}

/* CONSTANTS */
/* MIXINS */
/* STYLES */
body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-color: #100f24;
  color: white;
  margin: 0;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  user-select: none;
  -webkit-user-select: none;
}

a {
  text-decoration: none;
  color: white;
}

a.link {
  color: #e499eb;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.1s;
}
a.link:hover {
  color: #efc4f3;
}
a.link:active {
  color: #d96ee3;
}

a.link.link-electric-purple {
  color: #8f5cef;
}
a.link.link-electric-purple:hover {
  color: #af8af4;
}
a.link.link-electric-purple:active {
  color: #6f2eea;
}

a.link.link-blue {
  color: #31499c;
}
a.link.link-blue:hover {
  color: #3e5bc2;
}
a.link.link-blue:active {
  color: #253775;
}

a.link-no-underline {
  text-decoration: none;
}

button, .btn {
  background-color: #31499c;
  transition: background 0.1s;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 1.5em;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1000px;
  border: none;
  outline: none;
  padding: 10px 20px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  margin: 5px;
}
button:hover, .btn:hover {
  background-color: #3e5bc2;
}
button:active, .btn:active {
  background-color: #253775;
}
button:disabled, .btn:disabled {
  background-color: #31499c;
}
button:disabled, .btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.sprite-btn, .sprite-btn.sm {
  padding: 0;
  background: none;
}
.sprite-btn:hover, .sprite-btn.sm:hover {
  background: none;
}
.sprite-btn:active, .sprite-btn.sm:active {
  background: none;
}
.sprite-btn:disabled, .sprite-btn.sm:disabled {
  background: none;
}

.btn-disabled {
  opacity: 0.5;
  cursor: default;
}

button.secondary, .btn.secondary {
  background-color: #a331cb;
  transition: background 0.1s;
}
button.secondary:hover, .btn.secondary:hover {
  background-color: #b658d7;
}
button.secondary:active, .btn.secondary:active {
  background-color: #8227a2;
}
button.secondary:disabled, .btn.secondary:disabled {
  background-color: #a331cb;
}

button.danger, .btn.danger {
  background-color: #e32b2b;
  transition: background 0.1s;
}
button.danger:hover, .btn.danger:hover {
  background-color: #e95858;
}
button.danger:active, .btn.danger:active {
  background-color: #c11a1a;
}
button.danger:disabled, .btn.danger:disabled {
  background-color: #e32b2b;
}

button.gradient-0 {
  background: #8f5cef;
  background: linear-gradient(135deg, #8f5cef, #a331cb);
}
button.gradient-0:hover {
  background: #9c6ff1;
  background: linear-gradient(135deg, #9c6ff1, #ab40d1);
}
button.gradient-0:active {
  background: #8249ed;
  background: linear-gradient(135deg, #8249ed, #962dbb);
}

button.sm, .btn.sm {
  font-size: 0.7em;
  padding: 10px 12px;
}

.button-group {
  margin: 5px;
}
.button-group button {
  margin: 0;
  border-radius: 0;
  background: none;
  border: 1px solid #222;
  border-right: none;
  box-sizing: border-box;
}
.button-group button:hover {
  background: rgba(255, 255, 255, 0.2);
}
.button-group button:active {
  background: rgba(255, 255, 255, 0.4);
}
.button-group button:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.button-group button:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 1px solid #222;
}
.button-group button.active {
  background: white;
  color: black;
  border: white;
}

input, textarea {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background: white;
  border: none;
  border-radius: 5px;
  font-size: 1.2em;
  padding: 5px 2px;
  outline: none;
  transition: background 0.25;
}
input:hover, textarea:hover {
  background: #e6e6e6;
  border: none;
}
input:focus, textarea:focus {
  border: none;
}

input.rounded {
  border: none;
  padding: 5px 10px;
  border-radius: 100px;
}

img, .noselect {
  user-select: none;
  -webkit-user-select: none;
}

.spinning {
  animation: spinning 15s infinite linear;
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.yellow-banner, .red-banner {
  margin: 0 -20px;
  font-weight: bold;
  padding: 10px 20px;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.yellow-banner {
  background: #f9de5f;
  color: black;
}

.red-banner {
  background: #e32b2b;
}

/* POIROT */
.poirot * {
  color: initial;
  background: initial;
  border-radius: initial;
  font-size: initial;
  text-transform: initial;
  text-decoration: initial;
  outline: initial;
  padding: initial;
  cursor: initial;
  user-select: initial;
  -webkit-user-select: initial;
  margin: initial;
}

.about-modal {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-modal-top {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-modal-top-logo, .about-modal-top-version {
  flex: 1 0;
  max-width: 250px;
}

.about-modal-top-version {
  display: flex;
  align-items: start;
}

.about-modal-top-version-text {
  margin-top: 0.5em;
  margin-left: 20px;
  margin-right: 8px;
  font-size: 0.8em;
}

.about-modal-top-version-number {
  font-size: 2.2em;
  font-weight: bold;
}

.about-modal-build-info {
  color: gray;
  font-size: 0.8em;
  margin: 10px 0;
  text-align: center;
}
.about-modal-build-info p {
  margin: 0;
  margin-bottom: 5px;
}

.about-modal-account-info {
  border: 1px solid #bbb;
  border-radius: 5px;
  font-size: 1.3em;
  text-align: center;
}

.about-modal-account-info-licensed {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-modal-account-info-name {
  margin: 10px;
  font-size: 2em;
  text-wrap-mode: nowrap;
}

.about-modal-account-info-email {
  font-size: 0.8em;
  color: gray;
  font-style: italic;
  margin: 10px;
  margin-top: 0px;
}

.about-modal-subscription-type {
  padding: 5px 15px;
  font-weight: bold;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.about-modal-subscription-type-premium {
  background-color: #a331cb;
}

.about-modal-subscription-type-free {
  background-color: rgb(43, 43, 43);
}
.about-modal-subscription-type-free a {
  color: #8f5cef;
}

.about-modal-subscription-type-premium-trial {
  background-color: #f9de5f;
  color: black;
}
.about-modal-subscription-type-premium-trial a {
  color: #8f5cef;
}

.about-modal-copyright {
  color: gray;
  margin-top: 20px;
}

.checkout-modal {
  min-width: 450px;
  min-height: 500px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.checkout-modal-centered {
  flex: 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.checkout-modal-centered .spinner {
  width: 50px;
  height: 50px;
}

.checkout-modal-items {
  margin-bottom: 40px;
  background: #30313d;
  padding: 20px;
  border-radius: 10px;
  box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.1);
  text-align: left;
  font-size: 18px;
}
.checkout-modal-items .checkout-modal-items-title {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  margin-bottom: 15px;
}

.checkout-modal-item {
  border-radius: 7px;
  color: white;
  background: #8f5cef;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.checkout-modal-item img {
  width: 40px;
  height: 40px;
  padding: 12px;
  pointer-events: none;
}
.checkout-modal-item .checkout-modal-item-info {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  align-items: flex-start;
  padding: 12px 0px;
}
.checkout-modal-item .checkout-modal-item-name {
  font-size: 24px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  padding-right: 12px;
  max-width: fit-content;
}
.checkout-modal-item .checkout-modal-item-price {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.checkout-modal-item .checkout-modal-item-promo {
  background: #f9de5f;
  color: black;
  font-size: 14px;
  font-weight: bold;
  padding: 0 5px;
  margin-left: 5px;
}

.checkout-modal-promo-code {
  text-align: left;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.checkout-modal-promo-code span {
  margin-right: 8px;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.checkout-modal-promo-code input {
  flex: 1 0;
  padding: 0.75rem;
  background: #30313d;
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  border: 1px solid #424353;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), 0px 1px 6px rgba(0, 0, 0, 0.25);
  font-size: 16px;
  color: white;
}
.checkout-modal-promo-code input:focus {
  outline: 0px;
  border-color: #8f5cef;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), 0px 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px hsla(261, 82%, 65%, 0.25), 0 1px 1px 0 rgba(255, 255, 255, 0.12);
}
.checkout-modal-promo-code input.checkout-modal-promo-code-error {
  border-color: #e32b2b;
}
.checkout-modal-promo-code button {
  border-radius: 5px;
  background-color: #8f5cef;
  transition: background 0.1s;
  margin: 0;
  margin-left: 10px;
  font-size: 0.9em;
  align-self: stretch;
}
.checkout-modal-promo-code button:hover {
  background-color: #af8af4;
}
.checkout-modal-promo-code button:active {
  background-color: #6f2eea;
}
.checkout-modal-promo-code button:disabled {
  background-color: #8f5cef;
}
.checkout-modal-promo-code button img {
  height: 0.8em;
  margin-right: 5px;
}
.checkout-modal-promo-code .checkout-modal-promo-code-applied {
  background-color: #4dc827 !important;
  opacity: 1 !important;
}

span.checkout-modal-promo-code-error {
  color: #e32b2b;
}

.checkout-modal-secured-box {
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-modal-secured {
  color: white;
  margin-bottom: 4px;
  margin-right: 8px;
  animation: secured-in 1s;
  animation-delay: 2s;
  animation-fill-mode: both;
}
.checkout-modal-secured span {
  font-size: 0.8em;
}
.checkout-modal-secured a {
  color: white;
  text-decoration: none;
}

.checkout-modal-stripe-logo {
  animation: fade-in 1s;
  animation-delay: 2.7s;
  animation-fill-mode: both;
}

.checkout-modal-error {
  color: #e32b2b;
  font-size: 1.2em;
  margin: 10px;
}

.checkout-modal-submit {
  width: 100%;
  animation: pulsing-glow 1.5s linear 0s infinite alternate;
  background-color: #a331cb;
  transition: background 0.1s;
  transition: transform 0.25s, background-color 0.5s;
}
.checkout-modal-submit:hover {
  background-color: #b658d7;
}
.checkout-modal-submit:active {
  background-color: #8227a2;
}
.checkout-modal-submit:disabled {
  background-color: #a331cb;
}
.checkout-modal-submit:hover {
  transform: scale(102%);
}
.checkout-modal-submit:active {
  transform: scale(98%);
}

.checkout-modal-trialing-note {
  margin-top: 10px;
  width: 450px;
  color: #bcbcbc;
  font-size: 0.8em;
}

.checkout-modal-payment-successful {
  max-width: 750px;
  display: grid;
}
.checkout-modal-payment-successful div {
  grid-row: 1;
  grid-column: 1;
}

.checkout-modal-payment-successful-bg-img, .checkout-modal-payment-successful-bg-overlay {
  margin: -20px;
  border-radius: 10px;
}

.checkout-modal-payment-successful-bg-img {
  background-image: url("https://static.wixstatic.com/media/11062b_f2a5963e2e404759be083473ecf181e2~mv2.jpg/v1/fill/w_1920,h_681,al_c,q_85,enc_avif,quality_auto/11062b_f2a5963e2e404759be083473ecf181e2~mv2.jpg");
  background-position: center;
  background-size: cover;
}

.checkout-modal-payment-successful-bg-overlay {
  background: linear-gradient(180deg, #8f5cef 19.0979003906%, #31499c 82.9895019531%);
  opacity: 85%;
}

.checkout-modal-payment-successful-main {
  z-index: 2;
}

.checkout-modal-payment-successful-back {
  background-color: black;
  transition: background 0.1s;
}
.checkout-modal-payment-successful-back:hover {
  background-color: #1a1a1a;
}
.checkout-modal-payment-successful-back:active {
  background-color: black;
}
.checkout-modal-payment-successful-back:disabled {
  background-color: black;
}

@keyframes secured-in {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(90%);
  }
  100% {
    opacity: 1;
    transform: scale(100%);
  }
}
@keyframes pulsing-glow {
  0% {
    filter: drop-shadow(0px 0px 10px #a331cb);
  }
  100% {
    filter: drop-shadow(0px 2px 2px #8227a2);
  }
}
.export-modal {
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.export-modal hr {
  margin: 20px 0;
  border: 1px solid gray;
}

.export-modal-centered {
  flex: 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.export-modal-centered .spinner {
  width: 50px;
  height: 50px;
}

.export-modal-using-purchased-export-warning {
  font-size: 0.8em;
  padding: 5px 20px;
  margin-bottom: 10px;
}

.export-modal-field {
  margin-bottom: 10px;
}
.export-modal-field span {
  margin-right: 5px;
}

.export-modal-filename input {
  min-width: 260px;
}

.export-modal-range {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.export-modal-range-start, .export-modal-range-end {
  display: flex;
  flex-direction: column;
  margin: 0 10px;
  margin-bottom: 10px;
}
.export-modal-range-start span, .export-modal-range-end span {
  margin-bottom: 5px;
}
.export-modal-range-start input, .export-modal-range-end input {
  max-width: 150px;
}

.export-modal-range-duration {
  font-size: 0.9em;
  color: gray;
  margin-bottom: 10px;
}

.export-modal-field-error {
  margin-bottom: 5px;
  color: #e32b2b;
}

.export-modal-silent-export-warning {
  color: #f15e1a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.export-modal-silent-export-warning img {
  height: 1em;
  margin-right: 5px;
}
.export-modal-silent-export-warning a {
  color: #f15e1a;
}

.export-modal-success-btns {
  display: flex;
  justify-content: center;
  align-items: center;
}
.export-modal-success-btns button, .export-modal-success-btns a {
  font-size: 1.2em;
}
.export-modal-success-btns .export-modal-download-btn {
  display: flex;
  align-items: center;
}
.export-modal-success-btns .export-modal-download-btn img {
  height: 0.7em;
}
.export-modal-success-btns .export-modal-download-btn-success {
  background-color: #4dc827;
  transition: background 0.1s;
}
.export-modal-success-btns .export-modal-download-btn-success:hover {
  background-color: #6adb47;
}
.export-modal-success-btns .export-modal-download-btn-success:active {
  background-color: #3d9d1f;
}
.export-modal-success-btns .export-modal-download-btn-success:disabled {
  background-color: #4dc827;
}
.export-modal-success-btns .export-modal-back-btn {
  background-color: #100f24;
  transition: background 0.1s;
  border: 1px solid white;
}
.export-modal-success-btns .export-modal-back-btn:hover {
  background-color: #201e48;
}
.export-modal-success-btns .export-modal-back-btn:active {
  background-color: black;
}
.export-modal-success-btns .export-modal-back-btn:disabled {
  background-color: #100f24;
}

.export-modal-ooe-or {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.export-modal-ooe-or hr {
  flex: 1 0;
  margin: 0 20px;
}

.export-modal-ooe-buy-sume {
  background-color: #20204c;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin: 0 -20px;
  margin-bottom: -20px;
  padding: 20px;
}
.export-modal-ooe-buy-sume h3 {
  font-size: 1.6em;
  margin-top: 0;
}
.export-modal-ooe-buy-sume button {
  margin-top: 20px;
  font-size: 1em;
  color: #20204c;
  background-color: white;
  padding: 10px 20px;
}
.export-modal-ooe-buy-sume button:hover {
  background-color: #ddd;
}
.export-modal-ooe-buy-sume button:active {
  background-color: #bbb;
}

.inline-feedback-form {
  margin: 0 -20px;
}

.inline-feedback-form-question {
  padding: 20px 30px;
}
.inline-feedback-form-question h3 {
  font-size: 1em;
  margin-top: 0;
}
.inline-feedback-form-question textarea {
  width: 100%;
  height: 4em;
  resize: none;
}

.inline-feedback-form-question:nth-child(even) {
  background-color: rgba(32, 32, 76, 0.5);
}

.inline-feedback-form-rest {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.2s ease;
}

.inline-feedback-form-rest-expanded {
  max-height: 500px;
}

.inline-feedback-radio-scale-radios {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 10px;
}

.inline-feedback-radio-scale-radio {
  text-align: center;
}
.inline-feedback-radio-scale-radio .radio {
  gap: 0 !important;
}
.inline-feedback-radio-scale-radio div {
  margin-top: 10px;
  font-size: 0.8em;
}

.inline-feedback-error {
  color: red;
  font-size: 0.8em;
  margin-top: 10px;
}

.feedback-banner-container {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
}

.feedback-banner {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 0.8em;
  font-weight: bold;
  z-index: 95;
}
.feedback-banner:hover .feedback-banner-close {
  opacity: 1;
}

.feedback-banner-bg {
  background-color: #20204c;
  transition: background 0.1s;
  padding: 10px 30px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  cursor: pointer;
}
.feedback-banner-bg:hover {
  background-color: #2f2f70;
}
.feedback-banner-bg:active {
  background-color: #111128;
}
.feedback-banner-bg:disabled {
  background-color: #20204c;
}
.feedback-banner-bg:hover {
  text-decoration: underline;
}
.feedback-banner-bg:active {
  text-decoration: underline;
}

.feedback-banner-close {
  margin: 0;
  position: absolute;
  right: -10px;
  top: -5px;
  opacity: 0;
  transition: opacity 0.2s;
}

.feedback-modal {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.feedback-modal h2 {
  margin-bottom: 0;
  text-align: center;
}
.feedback-modal hr {
  width: 100%;
  margin: 20px 0;
}

.feedback-modal-field {
  margin-bottom: 20px;
}
.feedback-modal-field textarea {
  margin-top: 5px;
  display: block;
  width: 100%;
  font-size: 1em;
  height: 6em;
}

.feedback-modal-field-required-indicator {
  color: #e32b2b;
}
.feedback-modal-field-required-indicator::before {
  content: " *";
}

.feedback-modal-field-error {
  color: #e32b2b;
  font-size: 0.8em;
  max-width: 350px;
}

.feedback-modal-field-error-link {
  cursor: pointer;
}
.feedback-modal-field-error-link:hover {
  text-decoration: underline;
}

.feedback-modal-info {
  font-size: 0.7em;
  display: block;
  width: 350px;
  text-align: center;
  align-self: center;
}

.feedback-modal-submit {
  margin-top: 20px;
  align-self: center;
}

.feedback-modal-webcam {
  width: 533.3333333333px;
  height: 300px;
  background: gray;
  position: relative;
  display: grid;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.feedback-modal-webcam video {
  width: 533.3333333333px;
  height: 300px;
}

.feedback-modal-webcam-msg {
  color: black;
  font-weight: bold;
  text-align: center;
}

.feedback-modal-webcam-settings, .feedback-modal-webcam-center-btns, .feedback-modal-webcam-timecode {
  grid-row: 1;
  grid-column: 1;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
}

.feedback-modal-webcam-settings {
  background: none;
  background-image: url("/img/settings-menu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s;
  width: 60px;
  height: 28px;
  margin-bottom: 10px;
}
.feedback-modal-webcam-settings:hover {
  background: none;
  background-image: url("/img/settings-menu-hover.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-settings:active {
  background: none;
  background-image: url("/img/settings-menu-active.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-settings[disabled] {
  cursor: default;
  opacity: 50%;
  background: none;
  background-image: url("/img/settings-menu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.feedback-modal-webcam-center-btns {
  justify-self: center;
  margin-bottom: 10px;
}

.feedback-modal-webcam-record {
  background: none;
  background-image: url("/img/record.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s;
  width: 40px;
  height: 40px;
}
.feedback-modal-webcam-record:hover {
  background: none;
  background-image: url("/img/record-hover.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-record:active {
  background: none;
  background-image: url("/img/record-active.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-record[disabled] {
  cursor: default;
  opacity: 50%;
  background: none;
  background-image: url("/img/record.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.feedback-modal-webcam-recording {
  background: none;
  background-image: url("/img/record-stop.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s;
}
.feedback-modal-webcam-recording:hover {
  background: none;
  background-image: url("/img/record-stop-hover.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-recording:active {
  background: none;
  background-image: url("/img/record-stop-active.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-recording[disabled] {
  cursor: default;
  opacity: 50%;
  background: none;
  background-image: url("/img/record-stop.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.feedback-modal-webcam-rerecord {
  background: none;
  background-image: url("/img/rerecord.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s;
}
.feedback-modal-webcam-rerecord:hover {
  background: none;
  background-image: url("/img/rerecord-hover.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-rerecord:active {
  background: none;
  background-image: url("/img/rerecord-active.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-rerecord[disabled] {
  cursor: default;
  opacity: 50%;
  background: none;
  background-image: url("/img/rerecord.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.feedback-modal-webcam-done {
  background: none;
  background-image: url("/img/check-circle.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s;
  width: 40px;
  height: 40px;
}
.feedback-modal-webcam-done:hover {
  background: none;
  background-image: url("/img/check-circle-hover.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-done:active {
  background: none;
  background-image: url("/img/check-circle-active.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feedback-modal-webcam-done[disabled] {
  cursor: default;
  opacity: 50%;
  background: none;
  background-image: url("/img/check-circle.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.feedback-modal-webcam-timecode {
  justify-self: right;
  margin: 10px;
  align-items: end;
}
.feedback-modal-webcam-timecode b {
  font-size: 1.7em;
  line-height: 1em;
  margin-right: 3px;
}

.feedback-modal-video-preview {
  width: 350px;
  margin-bottom: 10px;
}

.go-premium-modal {
  padding: 20px 0;
  text-align: center;
  max-width: 550px;
  padding: 20px;
}
.go-premium-modal h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  margin: 0;
  margin-bottom: 20px;
}
.go-premium-modal h3 span {
  white-space: nowrap;
}
.go-premium-modal h3 img {
  height: 1em;
  margin: 0 5px;
}

.go-premium-modal-nested {
  background-color: #a331cb;
  margin: 0 -20px;
  max-width: unset;
}
.go-premium-modal-nested .go-premium-modal-buttons button, .go-premium-modal-nested .go-premium-modal-buttons .btn {
  background-color: white;
  color: #a331cb;
  padding: 10px 20px;
}
.go-premium-modal-nested .go-premium-modal-buttons button:hover, .go-premium-modal-nested .go-premium-modal-buttons .btn:hover {
  background-color: #ddd;
}
.go-premium-modal-nested .go-premium-modal-buttons button:active, .go-premium-modal-nested .go-premium-modal-buttons .btn:active {
  background-color: #bbb;
}
.go-premium-modal-nested .go-premium-modal-plans {
  background: #20204c;
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  max-width: unset;
}

.go-premium-modal-description {
  font-size: 1.1em;
}

.go-premium-modal-list {
  display: grid;
  text-align: left;
  row-gap: 10px;
}
.go-premium-modal-list img {
  grid-column: 1;
  height: 1em;
  margin-right: 5px;
  justify-self: end;
}
.go-premium-modal-list span {
  grid-column: 2;
}

.go-premium-modal-buttons {
  margin-top: 20px;
}
.go-premium-modal-buttons button, .go-premium-modal-buttons .btn {
  font-size: 1em;
}

.go-premium-modal-plans-loading {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.go-premium-modal-plans-collapsed {
  overflow: hidden;
  height: 0;
}

.go-premium-modal-plans {
  background-color: #a331cb;
  padding: 20px;
  margin: 0 -20px;
  margin-bottom: -20px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-top: 20px;
  display: grid;
  max-width: 550px;
  column-gap: 20px;
  color: black;
}

.go-premium-modal-plans-discount-title {
  font-weight: bold;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background: #f9de5f;
  border-radius: 10px;
  color: black;
  padding: 10px;
  grid-row: 1;
  grid-column: 1/span 2;
  margin-bottom: 10px;
}

.go-premium-modal-plans-plan {
  flex: 1 0;
  background: white;
  border-radius: 10px;
  filter: drop-shadow(2px 4px 6px black);
  grid-row: 1/span 5;
}

.go-premium-modal-plans-plan-title {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 1.3em;
  text-transform: uppercase;
  grid-row: 1;
  z-index: 2;
  margin-top: 15px;
}

.go-premium-modal-plans-plan-prices {
  font-weight: bold;
  margin: 10px 0;
  grid-row: 2;
  z-index: 2;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.go-premium-modal-plans-plan-prices div {
  flex: 1 0;
}

.go-premium-modal-plans-plan-price-slash {
  text-decoration: line-through;
  color: gray;
  text-align: right;
}

.go-premium-modal-plans-plan-price {
  font-size: 2em;
  color: #a331cb;
}

.go-premium-modal-plans-plan-period {
  color: #a331cb;
  grid-row: 3;
  z-index: 2;
}

.go-premium-modal-plans-plan-description {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  text-align: left;
  font-size: 0.9em;
  line-height: 1.5em;
  grid-row: 4;
  z-index: 2;
}
.go-premium-modal-plans-plan-description b {
  color: #15d1be;
}

.go-premium-modal-plans-plan-select {
  background-color: black;
  transition: background 0.1s;
  color: white;
  font-size: 1em;
  grid-row: 5;
  z-index: 2;
  margin: 15px;
  margin-top: 0;
}
.go-premium-modal-plans-plan-select:hover {
  background-color: #1a1a1a;
}
.go-premium-modal-plans-plan-select:active {
  background-color: black;
}
.go-premium-modal-plans-plan-select:disabled {
  background-color: black;
}

.header {
  display: grid;
  align-items: center;
  padding: 15px;
}

.header-btns {
  grid-row: 1;
  grid-column: 1;
  position: sticky;
  width: fit-content;
}

.header-btns-right {
  justify-self: end;
}

.header-btn {
  width: 50px;
  height: 30px;
  border-radius: 0;
}

.header-logo {
  grid-row: 1;
  grid-column: 1;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  image-rendering: -webkit-optimize-contrast;
}
.header-logo img {
  max-height: 20px;
}

@media (max-height: 800px) {
  .header {
    padding: 2px;
    padding-left: 10px;
  }
  .header-btn {
    width: 42px;
    height: 24px;
  }
  .header-btn .sprite {
    transform: scale(1) !important;
  }
}
@media (max-width: 1200px) {
  .header-logo {
    grid-column: 2;
    justify-self: start;
  }
  .header-btns-right {
    grid-column: 3;
  }
}
.login-modal {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-width: 500px;
}

.login-modal-top {
  margin-bottom: 0.5em;
}
.login-modal-top h1 {
  font-size: 2.5em;
  margin-bottom: 0.7rem;
}

.login-modal-mid {
  flex: 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-modal-mid > button, .login-modal-mid > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
}
.login-modal-mid > button img, .login-modal-mid > .btn img {
  height: 24px;
  padding-right: 0.5em;
}
.login-modal-mid > button img.spinner, .login-modal-mid > .btn img.spinner {
  height: 1em;
  padding-right: 0;
}
.login-modal-mid > button span, .login-modal-mid > .btn span {
  flex: 1 0;
}

.login-modal-input {
  display: grid;
  align-items: center;
  width: 70%;
  position: relative;
  grid-template-columns: calc(24px + 1rem) auto;
}
.login-modal-input img {
  grid-column: 1;
  grid-row: 2;
  width: 24px;
}
.login-modal-input span {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: left;
  margin-bottom: 3px;
}
.login-modal-input input {
  grid-column: 2;
  grid-row: 2;
}
.login-modal-input input::-ms-reveal {
  display: none;
}
.login-modal-input input.login-modal-input-invalid {
  border: 2px solid #e32b2b;
}
.login-modal-input input.login-modal-input-disabled {
  background: gray;
}
.login-modal-input span.login-modal-input-error {
  grid-column: 2;
  grid-row: 3;
}

.login-modal-error {
  color: #e32b2b;
  margin-top: 3px;
  max-width: 70%;
}

.login-modal-password-visibility-btn {
  position: absolute;
  top: 0.7em;
  right: 0;
  width: 32px;
  background-repeat: no-repeat;
  background-position: center center;
}
.login-modal-password-visibility-btn:hover {
  filter: opacity(60%);
}

a.login-modal-forgot-password {
  grid-column: 2;
  grid-row: 4;
  text-align: left;
  text-decoration: none;
  font-size: 0.8rem;
  margin-top: 3px;
}

.login-modal-or {
  display: flex;
  width: 70%;
  margin: 1.5em 0;
}
.login-modal-or hr {
  flex: 1 0;
  height: 0px;
}
.login-modal-or span {
  margin: 0 1em;
}

.login-modal-btn-facebook {
  background-color: rgb(24, 119, 242);
  transition: background 0.1s;
  margin-bottom: 1em;
}
.login-modal-btn-facebook:hover {
  background-color: #4893f5;
}
.login-modal-btn-facebook:active {
  background-color: #0b5fcc;
}
.login-modal-btn-facebook:disabled {
  background-color: rgb(24, 119, 242);
}

.login-modal-btn-google {
  background-color: white;
  color: black;
  transition: background 0.1s;
}
.login-modal-btn-google:hover {
  background-color: #ddd;
}
.login-modal-btn-google:active {
  background-color: #bbb;
}

.login-modal-btn-email {
  background-color: #a331cb;
  transition: background 0.1s;
}
.login-modal-btn-email:hover {
  background-color: #b658d7;
}
.login-modal-btn-email:active {
  background-color: #8227a2;
}
.login-modal-btn-email:disabled {
  background-color: #a331cb;
}

.login-modal-submit {
  margin-top: 2rem;
}

.login-modal-social-icons {
  margin-top: -0.4em;
}
.login-modal-social-icons button {
  width: 32px;
  height: 32px;
  background: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transition: opacity 0.1s;
}
.login-modal-social-icons .login-modal-social-icon-facebook {
  background-image: url("/img/facebook.svg");
  margin-right: 0.4em;
}
.login-modal-social-icons .login-modal-social-icon-facebook:hover:not(:disabled) {
  opacity: 90%;
}
.login-modal-social-icons .login-modal-social-icon-google {
  background-image: url("/img/google.png");
}
.login-modal-social-icons .login-modal-social-icon-google:hover:not(:disabled) {
  opacity: 90%;
}

.login-modal-verify-description {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-modal-verify-description p, .login-modal-verify-description span {
  margin-bottom: 0.3em;
}

.login-modal-resend-btn {
  max-width: 50%;
}

.login-modal-resend-btn-success {
  cursor: default;
  background-color: rgb(46, 139, 46);
  transition: background 0.5s;
}
.login-modal-resend-btn-success:hover {
  background-color: rgb(46, 139, 46);
}
.login-modal-resend-btn-success:active {
  background-color: rgb(46, 139, 46);
}

.login-modal-bottom {
  font-size: 0.8rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.master-container-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.6s;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.master-container-overlay-box {
  background-color: black;
  border-radius: 10px;
  padding: 20px;
  pointer-events: none;
}

.settings-modal {
  max-width: 400px;
  padding: 20px;
}
.settings-modal h1 {
  text-align: center;
  margin: 0;
  margin-bottom: 20px;
}

.settings-modal-desc {
  font-size: 0.8em;
  color: gray;
  margin-top: 0.5em;
}

.settings-modal-item {
  padding-bottom: 1em;
  margin-bottom: 1em;
}
.settings-modal-item:not(:last-of-type) {
  border-bottom: 1px solid gray;
}

.sidebar-container {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 50;
  pointer-events: none;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.6));
}

.sidebar {
  width: 475px;
  height: 70vh;
  padding: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  flex-direction: column;
  pointer-events: all;
}

.sidebar-tabs {
  display: flex;
  flex-direction: column;
  pointer-events: all;
  pointer-events: all;
}

.sidebar-tab {
  cursor: pointer;
}
.sidebar-tab img {
  width: 100%;
  height: 100%;
}

.sidebar-tab-tutorials {
  margin-top: -12px;
}

.sidebar-top {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.sidebar-title {
  flex: 1 0;
  margin-right: 12px;
}

.sidebar-search {
  display: flex;
  align-items: center;
  background: #535262;
  border-radius: 100px;
  margin-right: 12px;
}
.sidebar-search img {
  grid-row: 1;
  grid-column: 1;
  height: 1em;
  margin-left: 10px;
  margin-right: 8px;
}
.sidebar-search input {
  grid-row: 1;
  grid-column: 1;
  border: none;
  background: none;
  color: white;
}

.sidebar-close {
  cursor: pointer;
}

.sidebar-inner-wrapper {
  border: 2px solid #535262;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 0;
}

.sidebar-inner {
  overflow: hidden;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.sidebar-inner-scrollable {
  overflow: scroll;
  direction: rtl;
}
.sidebar-inner-scrollable::-webkit-scrollbar {
  width: 10px;
}
.sidebar-inner-scrollable::-webkit-scrollbar-thumb {
  background: #535262;
  border-radius: 10px;
}
.sidebar-inner-scrollable::-webkit-scrollbar-corner {
  background: none;
}
.sidebar-inner-scrollable div {
  direction: ltr;
}

.sidebar-start {
  transform: translateX(-515px);
  pointer-events: none;
}

.sidebar-closed, .sidebar-opened {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.54, 0.26, 0.31, 0.99);
  animation-fill-mode: both;
}

.sidebar-closed {
  animation-name: sidebar-close;
  pointer-events: none;
}

.sidebar-opened {
  animation-name: sidebar-open;
}

@keyframes sidebar-close {
  0% {
    transform: none;
  }
  100% {
    transform: translateX(-515px);
  }
}
@keyframes sidebar-open {
  0% {
    transform: translateX(-515px);
  }
  100% {
    transform: none;
  }
}
@media (max-height: 800px) {
  .sidebar-container {
    top: 35px;
    height: calc(100vh - 35px);
  }
  .sidebar {
    max-height: 80vh;
  }
  .sidebar-tab {
    width: 40px;
    height: 102px;
  }
}
.start-modal, .start-modal-new {
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-color: white;
}

.start-modal {
  flex-direction: column;
  align-items: stretch;
  border-radius: 0;
  transition: border-radius 1s;
}

.start-modal-trial-banner {
  font-size: 0.8em;
  text-align: center;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  margin: 0 -10px;
  height: 32px;
  transition: height 1s, opacity 0.5s, margin 1s, font-size 0.5s;
  opacity: 1;
}
.start-modal-trial-banner button {
  float: right;
  color: #e32b2b;
  padding: 0;
  margin: 0;
  margin-top: -2px;
}

.start-modal-trial-expired-banner {
  height: 18px;
}

.start-modal-new {
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 20px;
  margin: 20px 10px;
  width: 200px;
  height: 210px;
  cursor: pointer;
  background-color: #100f24;
  transition: background 0.1s;
  transition: background 0.25s, width 1s;
}
.start-modal-new:hover {
  background-color: #201e48;
}
.start-modal-new:active {
  background-color: black;
}
.start-modal-new:disabled {
  background-color: #100f24;
}
.start-modal-new img {
  height: 50px;
}
.start-modal-new h1 {
  font-size: 1.5em;
}
.start-modal-new h2 {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 0.9em;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  margin-bottom: 5px;
}
.start-modal-new img, .start-modal-new h1, .start-modal-new h2 {
  transition: height 1s, opacity 0.5s, margin 1s;
  opacity: 1;
}

.start-modal-account {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: white;
  height: 40px;
  transition: height 1s, padding 1s;
}
.start-modal-account h2 {
  font-size: 1em;
  color: #555;
}
.start-modal-account h2 span {
  color: black;
}
.start-modal-account button {
  margin-left: 10px;
}
.start-modal-account .start-modal-account-menu-open {
  height: 20px;
  filter: invert(1);
  cursor: pointer;
  transition: filter 0.25s;
}
.start-modal-account .start-modal-account-menu-open:hover {
  filter: invert(0.6);
}

.start-modal-account-menu {
  background-color: white !important;
}
.start-modal-account-menu .menu-item {
  background-color: white;
  color: black;
}
.start-modal-account-menu .menu-item:hover {
  background-color: #ddd;
}
.start-modal-account-menu .menu-item:active {
  background-color: #bbb;
}

.start-modal-bottom {
  padding: 0px 10px;
  background-color: #100f24;
  border-radius: 20px;
  transition: border-top-left-radius 1s, border-top-right-radius 1s;
}

.start-modal-new, .start-modal-list-border {
  border-radius: 20px;
  border: 2px dashed rgba(255, 255, 255, 0.3);
}

.start-modal-right {
  padding: 20px;
  transition: width 1s, opacity 0.5s, padding 1s;
  width: 354px;
  opacity: 1;
}

.start-modal-right-title, .start-modal-new-hidden-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.start-modal-right-title img, .start-modal-new-hidden-title img {
  height: 24px;
}
.start-modal-right-title h1, .start-modal-new-hidden-title h1 {
  margin: 0;
  margin-left: 12px;
  font-size: 1.5em;
  white-space: nowrap;
}

.start-modal-list-border {
  border-style: solid;
}

.start-modal-list {
  height: 200px;
  width: 350px;
  overflow-x: hidden;
  box-sizing: border-box;
  clip-path: inset(0% 0% 0% 0% round 20px);
}
.start-modal-list::-webkit-scrollbar {
  width: 20px;
}
.start-modal-list::-webkit-scrollbar-thumb {
  background: #535262;
  border-radius: 20px;
  border: solid 7px #100f24;
}
.start-modal-list::-webkit-scrollbar-track {
  border: solid 7px #100f24;
}
.start-modal-list::-webkit-scrollbar-corner {
  background: none;
}

.start-modal-list-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.start-modal-list-loading {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: gray;
}

.start-modal-list-signup {
  text-align: center;
}
.start-modal-list-signup button {
  font-size: 1em;
  margin-left: 1em;
}

.start-modal-listitem {
  display: grid;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #100f24;
  transition: background 0.1s;
}
.start-modal-listitem:hover {
  background-color: #201e48;
}
.start-modal-listitem:active {
  background-color: black;
}
.start-modal-listitem:disabled {
  background-color: #100f24;
}
.start-modal-listitem:nth-child(odd) {
  background-color: #20204c;
  transition: background 0.1s;
}
.start-modal-listitem:nth-child(odd):hover {
  background-color: #2f2f70;
}
.start-modal-listitem:nth-child(odd):active {
  background-color: #111128;
}
.start-modal-listitem:nth-child(odd):disabled {
  background-color: #20204c;
}

.start-modal-listitem-menu-btn, .start-modal-listitem-size {
  justify-self: end;
}

.start-modal-listitem-premium {
  height: 1em;
  margin-right: 5px;
  transform: translateY(2px);
}

.start-modal-listitem-title {
  grid-row: 1;
  grid-column: 1;
  font-size: 1em;
  margin: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.start-modal-listitem-menu-btn {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  margin: 0;
  width: 20px;
  height: 20px;
}

.start-modal-listitem-date, .start-modal-listitem-size {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 0.7em;
  white-space: nowrap;
  display: flex;
  margin-top: 8px;
}

.start-modal-listitem-date {
  grid-row: 2;
  grid-column: 1;
}

.start-modal-listitem-size {
  grid-row: 2;
  grid-column: 2;
  text-align: right;
}

.start-modal-nocuts {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  margin-top: 20px;
  font-style: italic;
  color: gray;
  text-align: center;
}

.start-modal-new-open {
  border-radius: 20px;
}
.start-modal-new-open .start-modal-new-hidden {
  opacity: 1;
  height: 100%;
}
.start-modal-new-open .start-modal-trial-banner {
  opacity: 0;
  height: 0;
  font-size: 0px;
  margin: 0;
}
.start-modal-new-open .start-modal-new {
  width: 400px;
  border-style: solid;
  cursor: default;
}
.start-modal-new-open .start-modal-new:hover {
  background-color: #100f24;
}
.start-modal-new-open .start-modal-new:active {
  background-color: #100f24;
}
.start-modal-new-open .start-modal-new > img, .start-modal-new-open .start-modal-new > h1, .start-modal-new-open .start-modal-new > h2 {
  opacity: 0;
  height: 0;
  margin: 0;
}
.start-modal-new-open .start-modal-right {
  width: 0px;
  overflow: hidden;
  padding: 0;
  opacity: 0;
}
.start-modal-new-open .start-modal-bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.start-modal-new-open .start-modal-account {
  height: 0;
  padding: 0;
}
.start-modal-new-open .start-modal-free-info {
  height: 0;
  margin: 0;
}

.start-modal-new-hidden {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1s, height 1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.start-modal-new-hidden-title,
.start-modal-new-hidden-name,
.start-modal-new-hidden-btns {
  display: flex;
  align-items: center;
  justify-content: center;
}

.start-modal-new-hidden-name {
  margin-bottom: 20px;
  font-size: 0.8em;
  width: 100%;
}
.start-modal-new-hidden-name > span {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  margin-right: 10px;
  white-space: nowrap;
}
.start-modal-new-hidden-name > input {
  flex: 1 0;
}

.start-modal-new-hidden-btns {
  flex-wrap: nowrap;
}
.start-modal-new-hidden-btns > button {
  white-space: nowrap;
}

.start-modal-free-info {
  margin: 0 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 24px;
  transition: height 1s, margin 1s;
}

.start-modal-free-info-left {
  width: 50%;
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.start-modal-free-info-left .progress-bar {
  max-width: calc(100% - 40px);
  margin-right: 5px;
}

.start-modal-free-info-right {
  flex: 1 0;
  display: flex;
  align-items: center;
}
.start-modal-free-info-right .progress-bar {
  max-width: calc(100% - 40px);
  margin-right: 5px;
}

.toolbar {
  font-weight: bold;
  background-color: #20204c;
  padding-left: 10px;
  z-index: 97;
  display: grid;
  position: relative;
  align-items: center;
  position: relative;
}
.toolbar > div {
  grid-row: 1;
  grid-column: 1;
}

.toolbar-left {
  display: flex;
}

.toolbar-item {
  padding: 5px 10px;
}
.toolbar-item:hover {
  background-color: #2f2f70;
}

.toolbar-item-active {
  background-color: #2f2f70;
}

.toolbar-title {
  height: 100%;
  font-size: 0.8em;
  font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.toolbar-title div {
  display: flex;
  height: 100%;
  width: fit-content;
  align-items: center;
  background-color: #8f5cef;
  padding: 0px 10px;
  margin-bottom: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
  pointer-events: all;
}
.toolbar-title div:hover {
  text-decoration: underline;
}

.toolbar-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  cursor: pointer;
  display: flex;
}

.toolbar-right-close {
  padding: 0 10px;
  font-size: 1.5em;
  justify-content: end;
  align-items: center;
  background-color: #8f5cef;
  transition: background 0.1s;
}
.toolbar-right-close:hover {
  background-color: #af8af4;
}
.toolbar-right-close:active {
  background-color: #6f2eea;
}
.toolbar-right-close:disabled {
  background-color: #8f5cef;
}

.toolbar-right-trial {
  padding: 0 10px;
  display: flex;
  font-size: 0.8em;
  background-color: #f9de5f;
  transition: background 0.1s;
  color: black;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  justify-content: end;
  align-items: center;
}
.toolbar-right-trial:hover {
  background-color: #fbe890;
}
.toolbar-right-trial:active {
  background-color: #f7d42e;
}
.toolbar-right-trial:disabled {
  background-color: #f9de5f;
}
.toolbar-right-trial:hover {
  text-decoration: underline;
}

.toolbar-right-expired {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.toolbar-right-expired:hover {
  background: #e95858;
}

@media (max-height: 800px) {
  .toolbar {
    font-size: 0.8em;
  }
}
.alert-actions {
  display: grid;
}

.alert-container {
  grid-row: 1;
  grid-column: 1;
  max-width: 800px;
  background-color: #100f24;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.alert-container .alert-top {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-container .alert-top .sprite {
  margin-right: 0.8em;
  user-select: none;
  -webkit-user-select: none;
}
.alert-container .alert-top span {
  font-size: 2em;
  font-weight: bold;
}
.alert-container .alert-msg {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.alert-container .alert-msg:last-child {
  margin-bottom: 20px;
}
.alert-container .alert-btns {
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert-container .alert-btns button, .alert-container .alert-btns a {
  white-space: nowrap;
  font-size: 1em;
}

.alert-error .alert-btns button, .alert-error .alert-btns a, .alert-warning .alert-btns button, .alert-warning .alert-btns a {
  background-color: white;
}
.alert-error .alert-btns button:hover, .alert-error .alert-btns a:hover, .alert-warning .alert-btns button:hover, .alert-warning .alert-btns a:hover {
  background-color: #eee;
}
.alert-error .alert-btns button:active, .alert-error .alert-btns a:active, .alert-warning .alert-btns button:active, .alert-warning .alert-btns a:active {
  background-color: #ccc;
}

.alert-error:not(.sprite, .sprite-img) {
  background-color: #e32b2b;
}
.alert-error:not(.sprite, .sprite-img) .alert-btns button, .alert-error:not(.sprite, .sprite-img) .alert-btns a {
  color: #e32b2b;
}

.alert-warning:not(.sprite, .sprite-img) {
  background-color: #f15e1a;
}
.alert-warning:not(.sprite, .sprite-img) .alert-btns button, .alert-warning:not(.sprite, .sprite-img) .alert-btns a {
  color: #f15e1a;
}

.checkbox {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  display: grid;
  grid-template-columns: 1em auto;
  align-items: baseline;
  gap: 0.5em;
  text-align: left;
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  border: 1.5px solid gray;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1em;
  height: 1em;
  border-radius: 0.2em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
}
.checkbox input:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.checkbox input::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 6px;
  transition: 120ms transform ease-in-out;
  background-color: white;
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: 0.25em 0.25em;
}

.checkbox-checked input {
  background-color: #31499c;
  border: none;
}
.checkbox-checked input::before {
  transform: scale(1);
}
.checkbox-checked input:hover {
  background-color: rgba(49, 73, 156, 0.8);
}

.help-button {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  justify-self: end;
  font-size: 0.8em;
  width: 22px;
  height: 22px;
  padding: 0;
  background-color: #100f24;
  transition: background 0.1s;
  position: relative;
}
.help-button:hover {
  background-color: #201e48;
}
.help-button:active {
  background-color: black;
}
.help-button:disabled {
  background-color: #100f24;
}

.help-button-pale-dark-blue {
  background-color: #20204c;
  transition: background 0.1s;
}
.help-button-pale-dark-blue:hover {
  background-color: #2f2f70;
}
.help-button-pale-dark-blue:active {
  background-color: #111128;
}
.help-button-pale-dark-blue:disabled {
  background-color: #20204c;
}

.help-button-light-blue {
  background-color: #31499c;
  transition: background 0.1s;
}
.help-button-light-blue:hover {
  background-color: #3e5bc2;
}
.help-button-light-blue:active {
  background-color: #253775;
}
.help-button-light-blue:disabled {
  background-color: #31499c;
}

.help-button-cyan {
  background-color: #15d1be;
  transition: background 0.1s;
}
.help-button-cyan:hover {
  background-color: #2fead7;
}
.help-button-cyan:active {
  background-color: #10a394;
}
.help-button-cyan:disabled {
  background-color: #15d1be;
}

.help-button-electric-purple {
  background-color: #8f5cef;
  transition: background 0.1s;
}
.help-button-electric-purple:hover {
  background-color: #af8af4;
}
.help-button-electric-purple:active {
  background-color: #6f2eea;
}
.help-button-electric-purple:disabled {
  background-color: #8f5cef;
}

.help-button-dark-electric-purple {
  background-color: #4b219c;
  transition: background 0.1s;
}
.help-button-dark-electric-purple:hover {
  background-color: #5f2ac6;
}
.help-button-dark-electric-purple:active {
  background-color: #371872;
}
.help-button-dark-electric-purple:disabled {
  background-color: #4b219c;
}

.help-button-light-purple {
  background-color: #b898f5;
  transition: background 0.1s;
}
.help-button-light-purple:hover {
  background-color: #d8c6fa;
}
.help-button-light-purple:active {
  background-color: #986af0;
}
.help-button-light-purple:disabled {
  background-color: #b898f5;
}

.help-button-violet {
  background-color: #a331cb;
  transition: background 0.1s;
}
.help-button-violet:hover {
  background-color: #b658d7;
}
.help-button-violet:active {
  background-color: #8227a2;
}
.help-button-violet:disabled {
  background-color: #a331cb;
}

.help-button-light-violet {
  background-color: #974e9e;
  transition: background 0.1s;
}
.help-button-light-violet:hover {
  background-color: #af6ab5;
}
.help-button-light-violet:active {
  background-color: #763d7c;
}
.help-button-light-violet:disabled {
  background-color: #974e9e;
}

.help-button-pink {
  background-color: #d993c0;
  transition: background 0.1s;
}
.help-button-pink:hover {
  background-color: #e6b9d6;
}
.help-button-pink:active {
  background-color: #cc6daa;
}
.help-button-pink:disabled {
  background-color: #d993c0;
}

.help-button-yellow {
  background-color: #f9de5f;
  transition: background 0.1s;
  color: black;
}
.help-button-yellow:hover {
  background-color: #fbe890;
}
.help-button-yellow:active {
  background-color: #f7d42e;
}
.help-button-yellow:disabled {
  background-color: #f9de5f;
}

.help-button-red {
  background-color: #e32b2b;
  transition: background 0.1s;
}
.help-button-red:hover {
  background-color: #e95858;
}
.help-button-red:active {
  background-color: #c11a1a;
}
.help-button-red:disabled {
  background-color: #e32b2b;
}

.help-button-track-color {
  background-color: #28273d;
  transition: background 0.1s;
}
.help-button-track-color:hover {
  background-color: #3c3b5c;
}
.help-button-track-color:active {
  background-color: #14131e;
}
.help-button-track-color:disabled {
  background-color: #28273d;
}

.help-button-pale-gray {
  background-color: #535262;
  transition: background 0.1s;
}
.help-button-pale-gray:hover {
  background-color: #6b697e;
}
.help-button-pale-gray:active {
  background-color: #3b3b46;
}
.help-button-pale-gray:disabled {
  background-color: #535262;
}

.lasso-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.lasso {
  position: absolute;
  opacity: 40%;
  background: #31499c;
  background: linear-gradient(135deg, #31499c, #20204c);
  border: 1px solid #b2bee7;
  border-radius: 3px;
  z-index: 97;
}

.menu {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: #20204c;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 97;
}

.menu-topmost {
  z-index: 199;
}

.menu-floating, .menu-dropdown {
  border-radius: 10px;
}
.menu-floating .menu-item:first-child, .menu-dropdown .menu-item:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.menu-floating {
  box-shadow: 2px 2px 6px black;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background-color: #20204c;
  transition: background 0.1s;
}
.menu-item:hover {
  background-color: #2f2f70;
}
.menu-item:active {
  background-color: #111128;
}
.menu-item:disabled {
  background-color: #20204c;
}
.menu-item:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.menu-item-click {
  cursor: pointer;
}

.menu-check {
  width: 0.7em;
  height: 0.7em;
  padding: 0.2em;
  margin-right: 0.5em;
  margin-top: 0.1em;
  border: 1px solid white;
  border-radius: 5px;
}

.menu-title {
  margin-right: 20px;
  flex: 1 0;
}

.menu-action {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 0.8em;
  color: gray;
}

.menu-submenu {
  height: 0.5em;
}

.menu-item-disabled {
  cursor: default;
  color: gray;
}
.menu-item-disabled:hover {
  background-color: #20204c;
}
.menu-item-disabled:active {
  background-color: #20204c;
}

.menu-hr {
  width: calc(100% - 1em);
  border-color: gray;
  border-right: none;
}

.menu-titled-hr {
  display: flex;
  margin: 0 0.5rem;
  margin-top: 5px;
  color: gray;
  font-size: 0.5em;
  font-weight: bold;
}
.menu-titled-hr span {
  margin-right: 0.5em;
}
.menu-titled-hr hr {
  border-color: gray;
  border-right: none;
  flex: 1 0;
}

.menu-item-highlighted {
  background-color: #9898d3;
  box-shadow: inset 0px 0px 0px 2px white;
  cursor: default;
}
.menu-item-highlighted:hover {
  background-color: #9898d3;
}
.menu-item-highlighted:active {
  background-color: #9898d3;
}

.modal-dlg-hidden {
  pointer-events: none;
}
.modal-dlg-hidden .modal-dlg-backdrop {
  opacity: 0;
}
.modal-dlg-hidden .modal-dlg {
  opacity: 0;
  transform: scale(0.9);
}

.modal-dlg-visible .modal-dlg-backdrop {
  opacity: 1;
}
.modal-dlg-visible .modal-dlg {
  opacity: 1;
  transform: scale(1);
}

.modal-dlg-backdrop {
  z-index: 98;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: opacity 0.4s, background 0.4s;
}

.modal-dlg-backdrop-filedrag {
  background: rgba(0, 0, 0, 0.4);
}

.modal-dlg {
  z-index: 99;
  transition: transform 0.25s cubic-bezier(0.74, 0, 0.35, 1), opacity 0.25s;
  max-width: 70vw;
  display: grid;
  background-color: #100f24;
  border-radius: 20px;
  border: 6px solid white;
}

.modal-dlg-inner {
  grid-row: 1;
  grid-column: 1;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: white;
}
.modal-dlg-inner::-webkit-scrollbar {
  width: 10px;
}
.modal-dlg-inner::-webkit-scrollbar-thumb {
  background: gray;
  border-radius: 5px;
  outline: 1px solid #100f24;
}
.modal-dlg-inner::-webkit-scrollbar-corner {
  background: none;
}

.modal-dlg-exit-btn {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  justify-self: right;
  transform: translate(10px, -10px);
  top: 0;
  cursor: pointer;
  transition: background 0.25s;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

.progress-bar-rail, .progress-bar-thumb, .progress-bar-label {
  border-radius: 9999px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.progress-bar-rail {
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%;
}

.progress-bar-thumb {
  background-color: #8f5cef;
  background-size: 110px 40px;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  animation: progress-bar-stripes 1.5s linear infinite;
  transition: width 0.1s ease;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 110px 0;
  }
  100% {
    background-position: 0 0;
  }
}
.progress-bar-label {
  font-size: 0.7em;
  font-weight: bold;
  color: white;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-bar-static .progress-bar-thumb {
  animation: none;
  background-image: none;
}

.progress-bar-dark-blue .progress-bar-thumb {
  background-color: #100f24;
}

.progress-bar-pale-dark-blue .progress-bar-thumb {
  background-color: #20204c;
}

.progress-bar-light-blue .progress-bar-thumb {
  background-color: #31499c;
}

.progress-bar-cyan .progress-bar-thumb {
  background-color: #15d1be;
}

.progress-bar-electric-purple .progress-bar-thumb {
  background-color: #8f5cef;
}

.progress-bar-dark-electric-purple .progress-bar-thumb {
  background-color: #4b219c;
}

.progress-bar-light-purple .progress-bar-thumb {
  background-color: #b898f5;
}

.progress-bar-violet .progress-bar-thumb {
  background-color: #a331cb;
}

.progress-bar-light-violet .progress-bar-thumb {
  background-color: #974e9e;
}

.progress-bar-pink .progress-bar-thumb {
  background-color: #d993c0;
}

.progress-bar-yellow .progress-bar-thumb {
  background-color: #f9de5f;
}

.progress-bar-red .progress-bar-thumb {
  background-color: #e32b2b;
}

.progress-bar-track-color .progress-bar-thumb {
  background-color: #28273d;
}

.progress-bar-pale-gray .progress-bar-thumb {
  background-color: #535262;
}

.radio {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  display: grid;
  grid-template-columns: 1em auto;
  align-items: baseline;
  gap: 0.5em;
  text-align: left;
  cursor: pointer;
}
.radio input {
  appearance: none;
  border: 2px solid white;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.15s, border-color 0.15s;
}
.radio input:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.radio input::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 6px;
  transition: 120ms transform ease-in-out;
  background-color: #a331cb;
  transform-origin: bottom left;
  clip-path: circle(50%);
  transform: scale(0);
  transform-origin: 0.25em 0.25em;
  transition: background-color 0.3s;
}
.radio input:checked {
  border-color: #a331cb;
  cursor: default;
}
.radio input:checked::before {
  transform: scale(1);
}
.radio input:checked:hover {
  background-color: transparent;
}

.scrollbar {
  display: inline-block;
  width: 100%;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.scrollbar .scrollbar-rail {
  background: gray;
  position: absolute;
  width: 100%;
  border-radius: 100px;
}
.scrollbar .scrollbar-thumb {
  background-color: white;
  position: absolute;
  transition: background 0.1s;
  border-radius: 100px;
}
.scrollbar .scrollbar-thumb:hover {
  background: #ddd;
}
.scrollbar .scrollbar-thumb:active {
  background: #bbb;
}
.scrollbar .scrollbar-thumb.draggable--original {
  visibility: hidden;
}
.scrollbar .draggable-source--is-dragging {
  display: none;
}

.select {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 1em;
  color: black;
  background: white;
  border: none;
  outline: none;
  padding: 7px 15px;
  padding-right: 0.5em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  margin: 5px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.select:disabled {
  opacity: 0.5;
  cursor: default;
}
.select:hover {
  background: #eee;
}
.select:active {
  background: #ddd;
}

.select-arrow {
  width: 1em;
  margin-left: 0.5em;
  pointer-events: none;
}

.slider .MuiSlider-rail {
  background: gray;
}
.slider .MuiSlider-thumb {
  transition: background 0.1s;
}
.slider .MuiSlider-thumb:hover {
  background: #ddd;
}
.slider .MuiSlider-thumb:active {
  background: #bbb;
}

.snackbar-container {
  position: fixed;
  z-index: 96;
  display: flex;
  flex-direction: column;
  left: 16px;
  bottom: 16px;
  right: auto;
  justify-content: start;
  max-width: 560px;
  min-width: 300px;
  max-height: 50%;
  overflow-y: hidden;
  border-radius: 8px;
  border: 1px solid gray;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.snackbar-open {
  animation: snackbar-in-left 200ms;
}

.snackbar {
  padding: 0.75rem;
  color: white;
  background-color: #20204c;
  display: flex;
  align-items: center;
}
.snackbar:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.snackbar:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.snackbar:not(:last-child) {
  border-bottom: 1px solid gray;
}
.snackbar:hover .snackbar-close-btn {
  opacity: 1;
}

.snackbar-hidden {
  transform: translateX(calc(-100% - 16px));
}

.snackbar-closed {
  animation: snackbar-out-left 200ms;
}

.snackbar-action-btn {
  margin-left: 1em;
}

.snackbar-close-btn {
  margin: 0;
  opacity: 0;
  transition: opacity 0.2s;
  margin-left: 8px;
}

.snackbar-dark-blue {
  background-color: #100f24;
}

.snackbar-pale-dark-blue {
  background-color: #20204c;
}

.snackbar-light-blue {
  background-color: #31499c;
}

.snackbar-cyan {
  background-color: #15d1be;
}

.snackbar-electric-purple {
  background-color: #8f5cef;
}

.snackbar-dark-electric-purple {
  background-color: #4b219c;
}

.snackbar-light-purple {
  background-color: #b898f5;
}

.snackbar-violet {
  background-color: #a331cb;
}

.snackbar-light-violet {
  background-color: #974e9e;
}

.snackbar-pink {
  background-color: #d993c0;
}

.snackbar-yellow {
  background-color: #f9de5f;
}

.snackbar-red {
  background-color: #e32b2b;
}

.snackbar-track-color {
  background-color: #28273d;
}

.snackbar-pale-gray {
  background-color: #535262;
}

.snackbar-white {
  background-color: white;
}

@keyframes snackbar-in-left {
  from {
    transform: translateX(calc(-100% - 16px));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes snackbar-out-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 16px));
  }
}
.spinner {
  animation: spinner-anim 0.7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  height: 2rem;
  margin: 5px;
}

@keyframes spinner-anim {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.sprite {
  position: relative;
  overflow: hidden;
}

.sprite-img {
  position: absolute;
  background: url("../sprites.png") 0 0;
  background-size: 783px 852.75px;
  background-repeat: no-repeat;
  width: 783px;
  height: 852.75px;
}

.sprite-disabled {
  opacity: 50%;
}

.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.browse-folder {
  left: -203.75px;
  top: -2px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.browse-itunes {
  left: -320.75px;
  top: -2px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.browse-recent {
  left: -408.5px;
  top: -2px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.browse-search {
  left: -31px;
  top: -31px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-auto-snap-pts {
  left: -135.75px;
  top: -31px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-create-snap-pt {
  left: -276px;
  top: -31px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-music-mixed {
  left: -416.25px;
  top: -31px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-music-off {
  left: -556.5px;
  top: -31px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-music-on {
  left: -2px;
  top: -60px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-preview-music-pause {
  left: -142.25px;
  top: -60px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-preview-music-play {
  left: -282.5px;
  top: -60px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-preview-vocals-pause {
  left: -422.75px;
  top: -60px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-preview-vocals-play {
  left: -563px;
  top: -60px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-redo {
  left: -2px;
  top: -89px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-scissors {
  left: -142.25px;
  top: -89px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-settings {
  left: -282.5px;
  top: -89px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-sfx {
  left: -422.75px;
  top: -89px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-snap {
  left: -563px;
  top: -89px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-snap-open {
  left: -656.5px;
  top: -89px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-speed {
  left: -95.5px;
  top: -118px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-tutorials {
  left: -235.75px;
  top: -118px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-undo {
  left: -422.75px;
  top: -118px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-vocal-remover {
  left: -563px;
  top: -118px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-vocals-mixed {
  left: -703.25px;
  top: -118px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-vocals-off {
  left: -95.5px;
  top: -147px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.btn-vocals-on {
  left: -235.75px;
  top: -147px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.check-circle {
  left: -358.5px;
  top: -147px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.clip-lock-locked {
  left: -31.25px;
  top: -191px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.clip-lock-unlocked {
  left: -89.75px;
  top: -191px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.collapse-down-btn {
  left: -210.25px;
  top: -191px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.collapse {
  left: -281.25px;
  top: -191px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.collapse-up-btn {
  left: -310.5px;
  top: -191px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.ellipsis-menu {
  left: -553px;
  top: -220px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.exit-error {
  left: -669px;
  top: -220px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.exit {
  left: -727px;
  top: -220px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.exit-warning {
  left: -2px;
  top: -474px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.fast-forward {
  left: -288px;
  top: -474px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.favorite {
  left: -346px;
  top: -474px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.favorite-outline {
  left: -381.25px;
  top: -474px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.minus-black {
  left: -292.5px;
  top: -528px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.minus {
  left: -350.5px;
  top: -528px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.pause {
  left: -267.75px;
  top: -660px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.pause-red {
  left: -326.25px;
  top: -660px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.pitch {
  left: -459.25px;
  top: -660px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.play-bubble {
  left: -89.75px;
  top: -689px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.play {
  left: -148.25px;
  top: -689px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.play-red {
  left: -206.25px;
  top: -689px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.plus-black {
  left: -351.5px;
  top: -689px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.plus {
  left: -409.5px;
  top: -689px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.record {
  left: -89px;
  top: -718px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.record-stop {
  left: -147px;
  top: -718px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.rerecord {
  left: -263px;
  top: -718px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.rewind {
  left: -350px;
  top: -718px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.selection-cutout {
  left: -31.25px;
  top: -747px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.selection-in {
  left: -118.75px;
  top: -747px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.selection-out {
  left: -206px;
  top: -747px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.settings-menu {
  left: -303.75px;
  top: -747px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.star-off {
  left: -427px;
  top: -747px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.star-on {
  left: -485.5px;
  top: -747px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.stop-circle {
  left: -118.75px;
  top: -791px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.stop {
  left: -176.75px;
  top: -791px;
}
.sprite:hover:not(.sprite-disabled, .sprite-inverted) .sprite-img.volume {
  left: -379.25px;
  top: -791px;
}

.sprite:active:not(.sprite-disabled) .sprite-img.browse-folder, .sprite-inverted .sprite-img.browse-folder {
  left: -174.5px;
  top: -2px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.browse-itunes, .sprite-inverted .sprite-img.browse-itunes {
  left: -262.25px;
  top: -2px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.browse-recent, .sprite-inverted .sprite-img.browse-recent {
  left: -379.25px;
  top: -2px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.browse-search, .sprite-inverted .sprite-img.browse-search {
  left: -2px;
  top: -31px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-auto-snap-pts, .sprite-inverted .sprite-img.btn-auto-snap-pts {
  left: -89px;
  top: -31px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-create-snap-pt, .sprite-inverted .sprite-img.btn-create-snap-pt {
  left: -229.25px;
  top: -31px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-music-mixed, .sprite-inverted .sprite-img.btn-music-mixed {
  left: -369.5px;
  top: -31px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-music-off, .sprite-inverted .sprite-img.btn-music-off {
  left: -509.75px;
  top: -31px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-music-on, .sprite-inverted .sprite-img.btn-music-on {
  left: -650px;
  top: -31px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-preview-music-pause, .sprite-inverted .sprite-img.btn-preview-music-pause {
  left: -95.5px;
  top: -60px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-preview-music-play, .sprite-inverted .sprite-img.btn-preview-music-play {
  left: -235.75px;
  top: -60px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-preview-vocals-pause, .sprite-inverted .sprite-img.btn-preview-vocals-pause {
  left: -376px;
  top: -60px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-preview-vocals-play, .sprite-inverted .sprite-img.btn-preview-vocals-play {
  left: -516.25px;
  top: -60px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-redo, .sprite-inverted .sprite-img.btn-redo {
  left: -656.5px;
  top: -60px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-scissors, .sprite-inverted .sprite-img.btn-scissors {
  left: -95.5px;
  top: -89px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-settings, .sprite-inverted .sprite-img.btn-settings {
  left: -235.75px;
  top: -89px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-sfx, .sprite-inverted .sprite-img.btn-sfx {
  left: -376px;
  top: -89px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-snap, .sprite-inverted .sprite-img.btn-snap {
  left: -516.25px;
  top: -89px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-snap-open, .sprite-inverted .sprite-img.btn-snap-open {
  left: -609.75px;
  top: -89px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-speed, .sprite-inverted .sprite-img.btn-speed {
  left: -48.75px;
  top: -118px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-tutorials, .sprite-inverted .sprite-img.btn-tutorials {
  left: -189px;
  top: -118px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-undo, .sprite-inverted .sprite-img.btn-undo {
  left: -329.25px;
  top: -118px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-vocal-remover, .sprite-inverted .sprite-img.btn-vocal-remover {
  left: -516.25px;
  top: -118px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-vocals-mixed, .sprite-inverted .sprite-img.btn-vocals-mixed {
  left: -656.5px;
  top: -118px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-vocals-off, .sprite-inverted .sprite-img.btn-vocals-off {
  left: -48.75px;
  top: -147px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.btn-vocals-on, .sprite-inverted .sprite-img.btn-vocals-on {
  left: -189px;
  top: -147px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.check-circle, .sprite-inverted .sprite-img.check-circle {
  left: -329.25px;
  top: -147px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.collapse, .sprite-inverted .sprite-img.collapse {
  left: -181px;
  top: -191px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.ellipsis-menu, .sprite-inverted .sprite-img.ellipsis-menu {
  left: -524px;
  top: -220px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.exit, .sprite-inverted .sprite-img.exit {
  left: -611px;
  top: -220px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.exit-error, .sprite-inverted .sprite-img.exit-error {
  left: -640px;
  top: -220px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.exit-warning, .sprite-inverted .sprite-img.exit-warning {
  left: -756px;
  top: -220px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.fade-in, .sprite-inverted .sprite-img.fade-in {
  left: -143px;
  top: -474px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.fade-out, .sprite-inverted .sprite-img.fade-out {
  left: -201px;
  top: -474px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.fast-forward, .sprite-inverted .sprite-img.fast-forward {
  left: -259px;
  top: -474px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.minus, .sprite-inverted .sprite-img.minus {
  left: -234.25px;
  top: -528px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.minus-black, .sprite-inverted .sprite-img.minus-black {
  left: -263.5px;
  top: -528px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.pause, .sprite-inverted .sprite-img.pause {
  left: -238.5px;
  top: -660px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.pause-red, .sprite-inverted .sprite-img.pause-red {
  left: -297px;
  top: -660px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.pitch, .sprite-inverted .sprite-img.pitch {
  left: -430px;
  top: -660px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.play, .sprite-inverted .sprite-img.play {
  left: -31.25px;
  top: -689px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.play-bubble, .sprite-inverted .sprite-img.play-bubble {
  left: -60.5px;
  top: -689px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.play-red, .sprite-inverted .sprite-img.play-red {
  left: -177.25px;
  top: -689px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.plus, .sprite-inverted .sprite-img.plus {
  left: -293.5px;
  top: -689px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.plus-black, .sprite-inverted .sprite-img.plus-black {
  left: -322.5px;
  top: -689px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.record, .sprite-inverted .sprite-img.record {
  left: -60px;
  top: -718px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.record-stop, .sprite-inverted .sprite-img.record-stop {
  left: -118px;
  top: -718px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.rerecord, .sprite-inverted .sprite-img.rerecord {
  left: -234px;
  top: -718px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.rewind, .sprite-inverted .sprite-img.rewind {
  left: -321px;
  top: -718px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.selection-cutout, .sprite-inverted .sprite-img.selection-cutout {
  left: -2px;
  top: -747px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.selection-in, .sprite-inverted .sprite-img.selection-in {
  left: -89.75px;
  top: -747px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.selection-out, .sprite-inverted .sprite-img.selection-out {
  left: -177px;
  top: -747px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.settings-menu, .sprite-inverted .sprite-img.settings-menu {
  left: -264px;
  top: -747px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.stop, .sprite-inverted .sprite-img.stop {
  left: -60.5px;
  top: -791px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.stop-circle, .sprite-inverted .sprite-img.stop-circle {
  left: -89.75px;
  top: -791px;
}
.sprite:active:not(.sprite-disabled) .sprite-img.volume, .sprite-inverted .sprite-img.volume {
  left: -350px;
  top: -791px;
}

.sprite-img.alert-error, .sprite-hover-alert-error:hover > .sprite-img, .sprite-active-alert-error:active > .sprite-img {
  left: -2px;
  top: -2px;
}

.sprite.alert-error {
  width: 25px;
  height: 25px;
}

.sprite-img.alert-info, .sprite-hover-alert-info:hover > .sprite-img, .sprite-active-alert-info:active > .sprite-img {
  left: -31px;
  top: -2px;
}

.sprite.alert-info {
  width: 25px;
  height: 25px;
}

.sprite-img.alert-question, .sprite-hover-alert-question:hover > .sprite-img, .sprite-active-alert-question:active > .sprite-img {
  left: -60px;
  top: -2px;
}

.sprite.alert-question {
  width: 25px;
  height: 25px;
}

.sprite-img.alert-warning-exclamation, .sprite-hover-alert-warning-exclamation:hover > .sprite-img, .sprite-active-alert-warning-exclamation:active > .sprite-img {
  left: -89px;
  top: -2px;
}

.sprite.alert-warning-exclamation {
  width: 25.25px;
  height: 25px;
}

.sprite-img.alert-warning-question, .sprite-hover-alert-warning-question:hover > .sprite-img, .sprite-active-alert-warning-question:active > .sprite-img {
  left: -118.25px;
  top: -2px;
}

.sprite.alert-warning-question {
  width: 25px;
  height: 25px;
}

.sprite-img.amazon-music, .sprite-hover-amazon-music:hover > .sprite-img, .sprite-active-amazon-music:active > .sprite-img {
  left: -147.25px;
  top: -2px;
}

.sprite.amazon-music {
  width: 23.25px;
  height: 25px;
}

.sprite-img.browse-folder-active, .sprite-hover-browse-folder-active:hover > .sprite-img, .sprite-active-browse-folder-active:active > .sprite-img {
  left: -174.5px;
  top: -2px;
}

.sprite.browse-folder-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-folder-hover, .sprite-hover-browse-folder-hover:hover > .sprite-img, .sprite-active-browse-folder-hover:active > .sprite-img {
  left: -203.75px;
  top: -2px;
}

.sprite.browse-folder-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-folder, .sprite-hover-browse-folder:hover > .sprite-img, .sprite-active-browse-folder:active > .sprite-img {
  left: -233px;
  top: -2px;
}

.sprite.browse-folder {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-itunes-active, .sprite-hover-browse-itunes-active:hover > .sprite-img, .sprite-active-browse-itunes-active:active > .sprite-img {
  left: -262.25px;
  top: -2px;
}

.sprite.browse-itunes-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-itunes-disabled, .sprite-hover-browse-itunes-disabled:hover > .sprite-img, .sprite-active-browse-itunes-disabled:active > .sprite-img {
  left: -291.5px;
  top: -2px;
}

.sprite.browse-itunes-disabled {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-itunes-hover, .sprite-hover-browse-itunes-hover:hover > .sprite-img, .sprite-active-browse-itunes-hover:active > .sprite-img {
  left: -320.75px;
  top: -2px;
}

.sprite.browse-itunes-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-itunes, .sprite-hover-browse-itunes:hover > .sprite-img, .sprite-active-browse-itunes:active > .sprite-img {
  left: -350px;
  top: -2px;
}

.sprite.browse-itunes {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-recent-active, .sprite-hover-browse-recent-active:hover > .sprite-img, .sprite-active-browse-recent-active:active > .sprite-img {
  left: -379.25px;
  top: -2px;
}

.sprite.browse-recent-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-recent-hover, .sprite-hover-browse-recent-hover:hover > .sprite-img, .sprite-active-browse-recent-hover:active > .sprite-img {
  left: -408.5px;
  top: -2px;
}

.sprite.browse-recent-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-recent, .sprite-hover-browse-recent:hover > .sprite-img, .sprite-active-browse-recent:active > .sprite-img {
  left: -437.75px;
  top: -2px;
}

.sprite.browse-recent {
  width: 25.25px;
  height: 25px;
}

.sprite-img.browse-search-active, .sprite-hover-browse-search-active:hover > .sprite-img, .sprite-active-browse-search-active:active > .sprite-img {
  left: -2px;
  top: -31px;
}

.sprite.browse-search-active {
  width: 25px;
  height: 25px;
}

.sprite-img.browse-search-hover, .sprite-hover-browse-search-hover:hover > .sprite-img, .sprite-active-browse-search-hover:active > .sprite-img {
  left: -31px;
  top: -31px;
}

.sprite.browse-search-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.browse-search, .sprite-hover-browse-search:hover > .sprite-img, .sprite-active-browse-search:active > .sprite-img {
  left: -60px;
  top: -31px;
}

.sprite.browse-search {
  width: 25px;
  height: 25px;
}

.sprite-img.btn-auto-snap-pts-active, .sprite-hover-btn-auto-snap-pts-active:hover > .sprite-img, .sprite-active-btn-auto-snap-pts-active:active > .sprite-img {
  left: -89px;
  top: -31px;
}

.sprite.btn-auto-snap-pts-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-auto-snap-pts-hover, .sprite-hover-btn-auto-snap-pts-hover:hover > .sprite-img, .sprite-active-btn-auto-snap-pts-hover:active > .sprite-img {
  left: -135.75px;
  top: -31px;
}

.sprite.btn-auto-snap-pts-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-auto-snap-pts, .sprite-hover-btn-auto-snap-pts:hover > .sprite-img, .sprite-active-btn-auto-snap-pts:active > .sprite-img {
  left: -182.5px;
  top: -31px;
}

.sprite.btn-auto-snap-pts {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-create-snap-pt-active, .sprite-hover-btn-create-snap-pt-active:hover > .sprite-img, .sprite-active-btn-create-snap-pt-active:active > .sprite-img {
  left: -229.25px;
  top: -31px;
}

.sprite.btn-create-snap-pt-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-create-snap-pt-hover, .sprite-hover-btn-create-snap-pt-hover:hover > .sprite-img, .sprite-active-btn-create-snap-pt-hover:active > .sprite-img {
  left: -276px;
  top: -31px;
}

.sprite.btn-create-snap-pt-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-create-snap-pt, .sprite-hover-btn-create-snap-pt:hover > .sprite-img, .sprite-active-btn-create-snap-pt:active > .sprite-img {
  left: -322.75px;
  top: -31px;
}

.sprite.btn-create-snap-pt {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-music-mixed-active, .sprite-hover-btn-music-mixed-active:hover > .sprite-img, .sprite-active-btn-music-mixed-active:active > .sprite-img {
  left: -369.5px;
  top: -31px;
}

.sprite.btn-music-mixed-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-music-mixed-hover, .sprite-hover-btn-music-mixed-hover:hover > .sprite-img, .sprite-active-btn-music-mixed-hover:active > .sprite-img {
  left: -416.25px;
  top: -31px;
}

.sprite.btn-music-mixed-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-music-mixed, .sprite-hover-btn-music-mixed:hover > .sprite-img, .sprite-active-btn-music-mixed:active > .sprite-img {
  left: -463px;
  top: -31px;
}

.sprite.btn-music-mixed {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-music-off-active, .sprite-hover-btn-music-off-active:hover > .sprite-img, .sprite-active-btn-music-off-active:active > .sprite-img {
  left: -509.75px;
  top: -31px;
}

.sprite.btn-music-off-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-music-off-hover, .sprite-hover-btn-music-off-hover:hover > .sprite-img, .sprite-active-btn-music-off-hover:active > .sprite-img {
  left: -556.5px;
  top: -31px;
}

.sprite.btn-music-off-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-music-off, .sprite-hover-btn-music-off:hover > .sprite-img, .sprite-active-btn-music-off:active > .sprite-img {
  left: -603.25px;
  top: -31px;
}

.sprite.btn-music-off {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-music-on-active, .sprite-hover-btn-music-on-active:hover > .sprite-img, .sprite-active-btn-music-on-active:active > .sprite-img {
  left: -650px;
  top: -31px;
}

.sprite.btn-music-on-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-music-on-hover, .sprite-hover-btn-music-on-hover:hover > .sprite-img, .sprite-active-btn-music-on-hover:active > .sprite-img {
  left: -2px;
  top: -60px;
}

.sprite.btn-music-on-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-music-on, .sprite-hover-btn-music-on:hover > .sprite-img, .sprite-active-btn-music-on:active > .sprite-img {
  left: -48.75px;
  top: -60px;
}

.sprite.btn-music-on {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-music-pause-active, .sprite-hover-btn-preview-music-pause-active:hover > .sprite-img, .sprite-active-btn-preview-music-pause-active:active > .sprite-img {
  left: -95.5px;
  top: -60px;
}

.sprite.btn-preview-music-pause-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-music-pause-hover, .sprite-hover-btn-preview-music-pause-hover:hover > .sprite-img, .sprite-active-btn-preview-music-pause-hover:active > .sprite-img {
  left: -142.25px;
  top: -60px;
}

.sprite.btn-preview-music-pause-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-music-pause, .sprite-hover-btn-preview-music-pause:hover > .sprite-img, .sprite-active-btn-preview-music-pause:active > .sprite-img {
  left: -189px;
  top: -60px;
}

.sprite.btn-preview-music-pause {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-music-play-active, .sprite-hover-btn-preview-music-play-active:hover > .sprite-img, .sprite-active-btn-preview-music-play-active:active > .sprite-img {
  left: -235.75px;
  top: -60px;
}

.sprite.btn-preview-music-play-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-music-play-hover, .sprite-hover-btn-preview-music-play-hover:hover > .sprite-img, .sprite-active-btn-preview-music-play-hover:active > .sprite-img {
  left: -282.5px;
  top: -60px;
}

.sprite.btn-preview-music-play-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-music-play, .sprite-hover-btn-preview-music-play:hover > .sprite-img, .sprite-active-btn-preview-music-play:active > .sprite-img {
  left: -329.25px;
  top: -60px;
}

.sprite.btn-preview-music-play {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-vocals-pause-active, .sprite-hover-btn-preview-vocals-pause-active:hover > .sprite-img, .sprite-active-btn-preview-vocals-pause-active:active > .sprite-img {
  left: -376px;
  top: -60px;
}

.sprite.btn-preview-vocals-pause-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-vocals-pause-hover, .sprite-hover-btn-preview-vocals-pause-hover:hover > .sprite-img, .sprite-active-btn-preview-vocals-pause-hover:active > .sprite-img {
  left: -422.75px;
  top: -60px;
}

.sprite.btn-preview-vocals-pause-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-vocals-pause, .sprite-hover-btn-preview-vocals-pause:hover > .sprite-img, .sprite-active-btn-preview-vocals-pause:active > .sprite-img {
  left: -469.5px;
  top: -60px;
}

.sprite.btn-preview-vocals-pause {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-vocals-play-active, .sprite-hover-btn-preview-vocals-play-active:hover > .sprite-img, .sprite-active-btn-preview-vocals-play-active:active > .sprite-img {
  left: -516.25px;
  top: -60px;
}

.sprite.btn-preview-vocals-play-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-vocals-play-hover, .sprite-hover-btn-preview-vocals-play-hover:hover > .sprite-img, .sprite-active-btn-preview-vocals-play-hover:active > .sprite-img {
  left: -563px;
  top: -60px;
}

.sprite.btn-preview-vocals-play-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-preview-vocals-play, .sprite-hover-btn-preview-vocals-play:hover > .sprite-img, .sprite-active-btn-preview-vocals-play:active > .sprite-img {
  left: -609.75px;
  top: -60px;
}

.sprite.btn-preview-vocals-play {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-redo-active, .sprite-hover-btn-redo-active:hover > .sprite-img, .sprite-active-btn-redo-active:active > .sprite-img {
  left: -656.5px;
  top: -60px;
}

.sprite.btn-redo-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-redo-disabled, .sprite-hover-btn-redo-disabled:hover > .sprite-img, .sprite-active-btn-redo-disabled:active > .sprite-img {
  left: -703.25px;
  top: -60px;
}

.sprite.btn-redo-disabled {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-redo-hover, .sprite-hover-btn-redo-hover:hover > .sprite-img, .sprite-active-btn-redo-hover:active > .sprite-img {
  left: -2px;
  top: -89px;
}

.sprite.btn-redo-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-redo, .sprite-hover-btn-redo:hover > .sprite-img, .sprite-active-btn-redo:active > .sprite-img {
  left: -48.75px;
  top: -89px;
}

.sprite.btn-redo {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-scissors-active, .sprite-hover-btn-scissors-active:hover > .sprite-img, .sprite-active-btn-scissors-active:active > .sprite-img {
  left: -95.5px;
  top: -89px;
}

.sprite.btn-scissors-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-scissors-hover, .sprite-hover-btn-scissors-hover:hover > .sprite-img, .sprite-active-btn-scissors-hover:active > .sprite-img {
  left: -142.25px;
  top: -89px;
}

.sprite.btn-scissors-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-scissors, .sprite-hover-btn-scissors:hover > .sprite-img, .sprite-active-btn-scissors:active > .sprite-img {
  left: -189px;
  top: -89px;
}

.sprite.btn-scissors {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-settings-active, .sprite-hover-btn-settings-active:hover > .sprite-img, .sprite-active-btn-settings-active:active > .sprite-img {
  left: -235.75px;
  top: -89px;
}

.sprite.btn-settings-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-settings-hover, .sprite-hover-btn-settings-hover:hover > .sprite-img, .sprite-active-btn-settings-hover:active > .sprite-img {
  left: -282.5px;
  top: -89px;
}

.sprite.btn-settings-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-settings, .sprite-hover-btn-settings:hover > .sprite-img, .sprite-active-btn-settings:active > .sprite-img {
  left: -329.25px;
  top: -89px;
}

.sprite.btn-settings {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-sfx-active, .sprite-hover-btn-sfx-active:hover > .sprite-img, .sprite-active-btn-sfx-active:active > .sprite-img {
  left: -376px;
  top: -89px;
}

.sprite.btn-sfx-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-sfx-hover, .sprite-hover-btn-sfx-hover:hover > .sprite-img, .sprite-active-btn-sfx-hover:active > .sprite-img {
  left: -422.75px;
  top: -89px;
}

.sprite.btn-sfx-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-sfx, .sprite-hover-btn-sfx:hover > .sprite-img, .sprite-active-btn-sfx:active > .sprite-img {
  left: -469.5px;
  top: -89px;
}

.sprite.btn-sfx {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-snap-active, .sprite-hover-btn-snap-active:hover > .sprite-img, .sprite-active-btn-snap-active:active > .sprite-img {
  left: -516.25px;
  top: -89px;
}

.sprite.btn-snap-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-snap-hover, .sprite-hover-btn-snap-hover:hover > .sprite-img, .sprite-active-btn-snap-hover:active > .sprite-img {
  left: -563px;
  top: -89px;
}

.sprite.btn-snap-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-snap-open-active, .sprite-hover-btn-snap-open-active:hover > .sprite-img, .sprite-active-btn-snap-open-active:active > .sprite-img {
  left: -609.75px;
  top: -89px;
}

.sprite.btn-snap-open-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-snap-open-hover, .sprite-hover-btn-snap-open-hover:hover > .sprite-img, .sprite-active-btn-snap-open-hover:active > .sprite-img {
  left: -656.5px;
  top: -89px;
}

.sprite.btn-snap-open-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-snap-open, .sprite-hover-btn-snap-open:hover > .sprite-img, .sprite-active-btn-snap-open:active > .sprite-img {
  left: -703.25px;
  top: -89px;
}

.sprite.btn-snap-open {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-snap, .sprite-hover-btn-snap:hover > .sprite-img, .sprite-active-btn-snap:active > .sprite-img {
  left: -2px;
  top: -118px;
}

.sprite.btn-snap {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-speed-active, .sprite-hover-btn-speed-active:hover > .sprite-img, .sprite-active-btn-speed-active:active > .sprite-img {
  left: -48.75px;
  top: -118px;
}

.sprite.btn-speed-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-speed-hover, .sprite-hover-btn-speed-hover:hover > .sprite-img, .sprite-active-btn-speed-hover:active > .sprite-img {
  left: -95.5px;
  top: -118px;
}

.sprite.btn-speed-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-speed, .sprite-hover-btn-speed:hover > .sprite-img, .sprite-active-btn-speed:active > .sprite-img {
  left: -142.25px;
  top: -118px;
}

.sprite.btn-speed {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-tutorials-active, .sprite-hover-btn-tutorials-active:hover > .sprite-img, .sprite-active-btn-tutorials-active:active > .sprite-img {
  left: -189px;
  top: -118px;
}

.sprite.btn-tutorials-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-tutorials-hover, .sprite-hover-btn-tutorials-hover:hover > .sprite-img, .sprite-active-btn-tutorials-hover:active > .sprite-img {
  left: -235.75px;
  top: -118px;
}

.sprite.btn-tutorials-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-tutorials, .sprite-hover-btn-tutorials:hover > .sprite-img, .sprite-active-btn-tutorials:active > .sprite-img {
  left: -282.5px;
  top: -118px;
}

.sprite.btn-tutorials {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-undo-active, .sprite-hover-btn-undo-active:hover > .sprite-img, .sprite-active-btn-undo-active:active > .sprite-img {
  left: -329.25px;
  top: -118px;
}

.sprite.btn-undo-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-undo-disabled, .sprite-hover-btn-undo-disabled:hover > .sprite-img, .sprite-active-btn-undo-disabled:active > .sprite-img {
  left: -376px;
  top: -118px;
}

.sprite.btn-undo-disabled {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-undo-hover, .sprite-hover-btn-undo-hover:hover > .sprite-img, .sprite-active-btn-undo-hover:active > .sprite-img {
  left: -422.75px;
  top: -118px;
}

.sprite.btn-undo-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-undo, .sprite-hover-btn-undo:hover > .sprite-img, .sprite-active-btn-undo:active > .sprite-img {
  left: -469.5px;
  top: -118px;
}

.sprite.btn-undo {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocal-remover-active, .sprite-hover-btn-vocal-remover-active:hover > .sprite-img, .sprite-active-btn-vocal-remover-active:active > .sprite-img {
  left: -516.25px;
  top: -118px;
}

.sprite.btn-vocal-remover-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocal-remover-hover, .sprite-hover-btn-vocal-remover-hover:hover > .sprite-img, .sprite-active-btn-vocal-remover-hover:active > .sprite-img {
  left: -563px;
  top: -118px;
}

.sprite.btn-vocal-remover-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocal-remover, .sprite-hover-btn-vocal-remover:hover > .sprite-img, .sprite-active-btn-vocal-remover:active > .sprite-img {
  left: -609.75px;
  top: -118px;
}

.sprite.btn-vocal-remover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocals-mixed-active, .sprite-hover-btn-vocals-mixed-active:hover > .sprite-img, .sprite-active-btn-vocals-mixed-active:active > .sprite-img {
  left: -656.5px;
  top: -118px;
}

.sprite.btn-vocals-mixed-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocals-mixed-hover, .sprite-hover-btn-vocals-mixed-hover:hover > .sprite-img, .sprite-active-btn-vocals-mixed-hover:active > .sprite-img {
  left: -703.25px;
  top: -118px;
}

.sprite.btn-vocals-mixed-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocals-mixed, .sprite-hover-btn-vocals-mixed:hover > .sprite-img, .sprite-active-btn-vocals-mixed:active > .sprite-img {
  left: -2px;
  top: -147px;
}

.sprite.btn-vocals-mixed {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocals-off-active, .sprite-hover-btn-vocals-off-active:hover > .sprite-img, .sprite-active-btn-vocals-off-active:active > .sprite-img {
  left: -48.75px;
  top: -147px;
}

.sprite.btn-vocals-off-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocals-off-hover, .sprite-hover-btn-vocals-off-hover:hover > .sprite-img, .sprite-active-btn-vocals-off-hover:active > .sprite-img {
  left: -95.5px;
  top: -147px;
}

.sprite.btn-vocals-off-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocals-off, .sprite-hover-btn-vocals-off:hover > .sprite-img, .sprite-active-btn-vocals-off:active > .sprite-img {
  left: -142.25px;
  top: -147px;
}

.sprite.btn-vocals-off {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocals-on-active, .sprite-hover-btn-vocals-on-active:hover > .sprite-img, .sprite-active-btn-vocals-on-active:active > .sprite-img {
  left: -189px;
  top: -147px;
}

.sprite.btn-vocals-on-active {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocals-on-hover, .sprite-hover-btn-vocals-on-hover:hover > .sprite-img, .sprite-active-btn-vocals-on-hover:active > .sprite-img {
  left: -235.75px;
  top: -147px;
}

.sprite.btn-vocals-on-hover {
  width: 42.75px;
  height: 25px;
}

.sprite-img.btn-vocals-on, .sprite-hover-btn-vocals-on:hover > .sprite-img, .sprite-active-btn-vocals-on:active > .sprite-img {
  left: -282.5px;
  top: -147px;
}

.sprite.btn-vocals-on {
  width: 42.75px;
  height: 25px;
}

.sprite-img.check-circle-active, .sprite-hover-check-circle-active:hover > .sprite-img, .sprite-active-check-circle-active:active > .sprite-img {
  left: -329.25px;
  top: -147px;
}

.sprite.check-circle-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.check-circle-hover, .sprite-hover-check-circle-hover:hover > .sprite-img, .sprite-active-check-circle-hover:active > .sprite-img {
  left: -358.5px;
  top: -147px;
}

.sprite.check-circle-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.check-circle, .sprite-hover-check-circle:hover > .sprite-img, .sprite-active-check-circle:active > .sprite-img {
  left: -387.75px;
  top: -147px;
}

.sprite.check-circle {
  width: 25.25px;
  height: 25px;
}

.sprite-img.check-mark-button, .sprite-hover-check-mark-button:hover > .sprite-img, .sprite-active-check-mark-button:active > .sprite-img {
  left: -417px;
  top: -147px;
}

.sprite.check-mark-button {
  width: 40px;
  height: 40px;
}

.sprite-img.checkmark, .sprite-hover-checkmark:hover > .sprite-img, .sprite-active-checkmark:active > .sprite-img {
  left: -461px;
  top: -147px;
}

.sprite.checkmark {
  width: 25.25px;
  height: 25px;
}

.sprite-img.chevron-bottom-black, .sprite-hover-chevron-bottom-black:hover > .sprite-img, .sprite-active-chevron-bottom-black:active > .sprite-img {
  left: -490.25px;
  top: -147px;
}

.sprite.chevron-bottom-black {
  width: 25.25px;
  height: 25px;
}

.sprite-img.chevron-bottom, .sprite-hover-chevron-bottom:hover > .sprite-img, .sprite-active-chevron-bottom:active > .sprite-img {
  left: -519.5px;
  top: -147px;
}

.sprite.chevron-bottom {
  width: 25.25px;
  height: 25px;
}

.sprite-img.chevron-left, .sprite-hover-chevron-left:hover > .sprite-img, .sprite-active-chevron-left:active > .sprite-img {
  left: -548.75px;
  top: -147px;
}

.sprite.chevron-left {
  width: 25.25px;
  height: 25px;
}

.sprite-img.chevron-right, .sprite-hover-chevron-right:hover > .sprite-img, .sprite-active-chevron-right:active > .sprite-img {
  left: -578px;
  top: -147px;
}

.sprite.chevron-right {
  width: 25.25px;
  height: 25px;
}

.sprite-img.chevron-top, .sprite-hover-chevron-top:hover > .sprite-img, .sprite-active-chevron-top:active > .sprite-img {
  left: -2px;
  top: -191px;
}

.sprite.chevron-top {
  width: 25.25px;
  height: 25px;
}

.sprite-img.clip-lock-locked-hover, .sprite-hover-clip-lock-locked-hover:hover > .sprite-img, .sprite-active-clip-lock-locked-hover:active > .sprite-img {
  left: -31.25px;
  top: -191px;
}

.sprite.clip-lock-locked-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.clip-lock-locked, .sprite-hover-clip-lock-locked:hover > .sprite-img, .sprite-active-clip-lock-locked:active > .sprite-img {
  left: -60.5px;
  top: -191px;
}

.sprite.clip-lock-locked {
  width: 25.25px;
  height: 25px;
}

.sprite-img.clip-lock-unlocked-hover, .sprite-hover-clip-lock-unlocked-hover:hover > .sprite-img, .sprite-active-clip-lock-unlocked-hover:active > .sprite-img {
  left: -89.75px;
  top: -191px;
}

.sprite.clip-lock-unlocked-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.clip-lock-unlocked, .sprite-hover-clip-lock-unlocked:hover > .sprite-img, .sprite-active-clip-lock-unlocked:active > .sprite-img {
  left: -119px;
  top: -191px;
}

.sprite.clip-lock-unlocked {
  width: 25.25px;
  height: 25px;
}

.sprite-img.cloud-download, .sprite-hover-cloud-download:hover > .sprite-img, .sprite-active-cloud-download:active > .sprite-img {
  left: -148.25px;
  top: -191px;
}

.sprite.cloud-download {
  width: 28.75px;
  height: 25px;
}

.sprite-img.collapse-active, .sprite-hover-collapse-active:hover > .sprite-img, .sprite-active-collapse-active:active > .sprite-img {
  left: -181px;
  top: -191px;
}

.sprite.collapse-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.collapse-down-btn-hover, .sprite-hover-collapse-down-btn-hover:hover > .sprite-img, .sprite-active-collapse-down-btn-hover:active > .sprite-img {
  left: -210.25px;
  top: -191px;
}

.sprite.collapse-down-btn-hover {
  width: 31.5px;
  height: 25px;
}

.sprite-img.collapse-down-btn, .sprite-hover-collapse-down-btn:hover > .sprite-img, .sprite-active-collapse-down-btn:active > .sprite-img {
  left: -245.75px;
  top: -191px;
}

.sprite.collapse-down-btn {
  width: 31.5px;
  height: 25px;
}

.sprite-img.collapse-hover, .sprite-hover-collapse-hover:hover > .sprite-img, .sprite-active-collapse-hover:active > .sprite-img {
  left: -281.25px;
  top: -191px;
}

.sprite.collapse-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.collapse-up-btn-hover, .sprite-hover-collapse-up-btn-hover:hover > .sprite-img, .sprite-active-collapse-up-btn-hover:active > .sprite-img {
  left: -310.5px;
  top: -191px;
}

.sprite.collapse-up-btn-hover {
  width: 31.5px;
  height: 25px;
}

.sprite-img.collapse-up-btn, .sprite-hover-collapse-up-btn:hover > .sprite-img, .sprite-active-collapse-up-btn:active > .sprite-img {
  left: -346px;
  top: -191px;
}

.sprite.collapse-up-btn {
  width: 31.5px;
  height: 25px;
}

.sprite-img.collapse, .sprite-hover-collapse:hover > .sprite-img, .sprite-active-collapse:active > .sprite-img {
  left: -381.5px;
  top: -191px;
}

.sprite.collapse {
  width: 25.25px;
  height: 25px;
}

.sprite-img.cursor-grab-ew-resize, .sprite-hover-cursor-grab-ew-resize:hover > .sprite-img, .sprite-active-cursor-grab-ew-resize:active > .sprite-img {
  left: -410.75px;
  top: -191px;
}

.sprite.cursor-grab-ew-resize {
  width: 6.5px;
  height: 7px;
}

.sprite-img.cursor-grab-multi, .sprite-hover-cursor-grab-multi:hover > .sprite-img, .sprite-active-cursor-grab-multi:active > .sprite-img {
  left: -421.25px;
  top: -191px;
}

.sprite.cursor-grab-multi {
  width: 8.5px;
  height: 8.5px;
}

.sprite-img.cursor-grab, .sprite-hover-cursor-grab:hover > .sprite-img, .sprite-active-cursor-grab:active > .sprite-img {
  left: -433.75px;
  top: -191px;
}

.sprite.cursor-grab {
  width: 5.75px;
  height: 5.5px;
}

.sprite-img.cursor-resize-left, .sprite-hover-cursor-resize-left:hover > .sprite-img, .sprite-active-cursor-resize-left:active > .sprite-img {
  left: -2px;
  top: -220px;
}

.sprite.cursor-resize-left {
  width: 5.75px;
  height: 5.5px;
}

.sprite-img.cursor-resize-right, .sprite-hover-cursor-resize-right:hover > .sprite-img, .sprite-active-cursor-resize-right:active > .sprite-img {
  left: -11.75px;
  top: -220px;
}

.sprite.cursor-resize-right {
  width: 5.75px;
  height: 5.5px;
}

.sprite-img.cursor-scissor, .sprite-hover-cursor-scissor:hover > .sprite-img, .sprite-active-cursor-scissor:active > .sprite-img {
  left: -21.5px;
  top: -220px;
}

.sprite.cursor-scissor {
  width: 7.5px;
  height: 8px;
}

.sprite-img.dance-cuts-bubble, .sprite-hover-dance-cuts-bubble:hover > .sprite-img, .sprite-active-dance-cuts-bubble:active > .sprite-img {
  left: -33px;
  top: -220px;
}

.sprite.dance-cuts-bubble {
  width: 250.25px;
  height: 250px;
}

.sprite-img.dance-cuts-logo, .sprite-hover-dance-cuts-logo:hover > .sprite-img, .sprite-active-dance-cuts-logo:active > .sprite-img {
  left: -287.25px;
  top: -220px;
}

.sprite.dance-cuts-logo {
  width: 174.5px;
  height: 25px;
}

.sprite-img.dancer-spinner, .sprite-hover-dancer-spinner:hover > .sprite-img, .sprite-active-dancer-spinner:active > .sprite-img {
  left: -465.75px;
  top: -220px;
}

.sprite.dancer-spinner {
  width: 25.25px;
  height: 25px;
}

.sprite-img.download, .sprite-hover-download:hover > .sprite-img, .sprite-active-download:active > .sprite-img {
  left: -495px;
  top: -220px;
}

.sprite.download {
  width: 25px;
  height: 25px;
}

.sprite-img.ellipsis-menu-active, .sprite-hover-ellipsis-menu-active:hover > .sprite-img, .sprite-active-ellipsis-menu-active:active > .sprite-img {
  left: -524px;
  top: -220px;
}

.sprite.ellipsis-menu-active {
  width: 25px;
  height: 25px;
}

.sprite-img.ellipsis-menu-hover, .sprite-hover-ellipsis-menu-hover:hover > .sprite-img, .sprite-active-ellipsis-menu-hover:active > .sprite-img {
  left: -553px;
  top: -220px;
}

.sprite.ellipsis-menu-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.ellipsis-menu, .sprite-hover-ellipsis-menu:hover > .sprite-img, .sprite-active-ellipsis-menu:active > .sprite-img {
  left: -582px;
  top: -220px;
}

.sprite.ellipsis-menu {
  width: 25px;
  height: 25px;
}

.sprite-img.exit-active, .sprite-hover-exit-active:hover > .sprite-img, .sprite-active-exit-active:active > .sprite-img {
  left: -611px;
  top: -220px;
}

.sprite.exit-active {
  width: 25px;
  height: 25px;
}

.sprite-img.exit-error-active, .sprite-hover-exit-error-active:hover > .sprite-img, .sprite-active-exit-error-active:active > .sprite-img {
  left: -640px;
  top: -220px;
}

.sprite.exit-error-active {
  width: 25px;
  height: 25px;
}

.sprite-img.exit-error-hover, .sprite-hover-exit-error-hover:hover > .sprite-img, .sprite-active-exit-error-hover:active > .sprite-img {
  left: -669px;
  top: -220px;
}

.sprite.exit-error-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.exit-error, .sprite-hover-exit-error:hover > .sprite-img, .sprite-active-exit-error:active > .sprite-img {
  left: -698px;
  top: -220px;
}

.sprite.exit-error {
  width: 25px;
  height: 25px;
}

.sprite-img.exit-hover, .sprite-hover-exit-hover:hover > .sprite-img, .sprite-active-exit-hover:active > .sprite-img {
  left: -727px;
  top: -220px;
}

.sprite.exit-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.exit-warning-active, .sprite-hover-exit-warning-active:hover > .sprite-img, .sprite-active-exit-warning-active:active > .sprite-img {
  left: -756px;
  top: -220px;
}

.sprite.exit-warning-active {
  width: 25px;
  height: 25px;
}

.sprite-img.exit-warning-hover, .sprite-hover-exit-warning-hover:hover > .sprite-img, .sprite-active-exit-warning-hover:active > .sprite-img {
  left: -2px;
  top: -474px;
}

.sprite.exit-warning-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.exit-warning, .sprite-hover-exit-warning:hover > .sprite-img, .sprite-active-exit-warning:active > .sprite-img {
  left: -31px;
  top: -474px;
}

.sprite.exit-warning {
  width: 25px;
  height: 25px;
}

.sprite-img.exit, .sprite-hover-exit:hover > .sprite-img, .sprite-active-exit:active > .sprite-img {
  left: -60px;
  top: -474px;
}

.sprite.exit {
  width: 25px;
  height: 25px;
}

.sprite-img.facebook, .sprite-hover-facebook:hover > .sprite-img, .sprite-active-facebook:active > .sprite-img {
  left: -89px;
  top: -474px;
}

.sprite.facebook {
  width: 50px;
  height: 50px;
}

.sprite-img.fade-in-active, .sprite-hover-fade-in-active:hover > .sprite-img, .sprite-active-fade-in-active:active > .sprite-img {
  left: -143px;
  top: -474px;
}

.sprite.fade-in-active {
  width: 25px;
  height: 25px;
}

.sprite-img.fade-in, .sprite-hover-fade-in:hover > .sprite-img, .sprite-active-fade-in:active > .sprite-img {
  left: -172px;
  top: -474px;
}

.sprite.fade-in {
  width: 25px;
  height: 25px;
}

.sprite-img.fade-out-active, .sprite-hover-fade-out-active:hover > .sprite-img, .sprite-active-fade-out-active:active > .sprite-img {
  left: -201px;
  top: -474px;
}

.sprite.fade-out-active {
  width: 25px;
  height: 25px;
}

.sprite-img.fade-out, .sprite-hover-fade-out:hover > .sprite-img, .sprite-active-fade-out:active > .sprite-img {
  left: -230px;
  top: -474px;
}

.sprite.fade-out {
  width: 25px;
  height: 25px;
}

.sprite-img.fast-forward-active, .sprite-hover-fast-forward-active:hover > .sprite-img, .sprite-active-fast-forward-active:active > .sprite-img {
  left: -259px;
  top: -474px;
}

.sprite.fast-forward-active {
  width: 25px;
  height: 25px;
}

.sprite-img.fast-forward-hover, .sprite-hover-fast-forward-hover:hover > .sprite-img, .sprite-active-fast-forward-hover:active > .sprite-img {
  left: -288px;
  top: -474px;
}

.sprite.fast-forward-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.fast-forward, .sprite-hover-fast-forward:hover > .sprite-img, .sprite-active-fast-forward:active > .sprite-img {
  left: -317px;
  top: -474px;
}

.sprite.fast-forward {
  width: 25px;
  height: 25px;
}

.sprite-img.favorite-hover, .sprite-hover-favorite-hover:hover > .sprite-img, .sprite-active-favorite-hover:active > .sprite-img {
  left: -346px;
  top: -474px;
}

.sprite.favorite-hover {
  width: 31.25px;
  height: 25px;
}

.sprite-img.favorite-outline-hover, .sprite-hover-favorite-outline-hover:hover > .sprite-img, .sprite-active-favorite-outline-hover:active > .sprite-img {
  left: -381.25px;
  top: -474px;
}

.sprite.favorite-outline-hover {
  width: 31.25px;
  height: 25px;
}

.sprite-img.favorite-outline, .sprite-hover-favorite-outline:hover > .sprite-img, .sprite-active-favorite-outline:active > .sprite-img {
  left: -416.5px;
  top: -474px;
}

.sprite.favorite-outline {
  width: 31.25px;
  height: 25px;
}

.sprite-img.favorite, .sprite-hover-favorite:hover > .sprite-img, .sprite-active-favorite:active > .sprite-img {
  left: -451.75px;
  top: -474px;
}

.sprite.favorite {
  width: 31.25px;
  height: 25px;
}

.sprite-img.freeze-on, .sprite-hover-freeze-on:hover > .sprite-img, .sprite-active-freeze-on:active > .sprite-img {
  left: -487px;
  top: -474px;
}

.sprite.freeze-on {
  width: 25.25px;
  height: 25px;
}

.sprite-img.freeze, .sprite-hover-freeze:hover > .sprite-img, .sprite-active-freeze:active > .sprite-img {
  left: -2px;
  top: -528px;
}

.sprite.freeze {
  width: 25.25px;
  height: 25px;
}

.sprite-img.google, .sprite-hover-google:hover > .sprite-img, .sprite-active-google:active > .sprite-img {
  left: -31.25px;
  top: -528px;
}

.sprite.google {
  width: 128px;
  height: 128px;
}

.sprite-img.heart, .sprite-hover-heart:hover > .sprite-img, .sprite-active-heart:active > .sprite-img {
  left: -163.25px;
  top: -528px;
}

.sprite.heart {
  width: 31.5px;
  height: 25px;
}

.sprite-img.help, .sprite-hover-help:hover > .sprite-img, .sprite-active-help:active > .sprite-img {
  left: -198.75px;
  top: -528px;
}

.sprite.help {
  width: 14.75px;
  height: 25px;
}

.sprite-img.image-file, .sprite-hover-image-file:hover > .sprite-img, .sprite-active-image-file:active > .sprite-img {
  left: -217.5px;
  top: -528px;
}

.sprite.image-file {
  width: 12.75px;
  height: 12.5px;
}

.sprite-img.minus-active, .sprite-hover-minus-active:hover > .sprite-img, .sprite-active-minus-active:active > .sprite-img {
  left: -234.25px;
  top: -528px;
}

.sprite.minus-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.minus-black-active, .sprite-hover-minus-black-active:hover > .sprite-img, .sprite-active-minus-black-active:active > .sprite-img {
  left: -263.5px;
  top: -528px;
}

.sprite.minus-black-active {
  width: 25px;
  height: 25px;
}

.sprite-img.minus-black-hover, .sprite-hover-minus-black-hover:hover > .sprite-img, .sprite-active-minus-black-hover:active > .sprite-img {
  left: -292.5px;
  top: -528px;
}

.sprite.minus-black-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.minus-black, .sprite-hover-minus-black:hover > .sprite-img, .sprite-active-minus-black:active > .sprite-img {
  left: -321.5px;
  top: -528px;
}

.sprite.minus-black {
  width: 25px;
  height: 25px;
}

.sprite-img.minus-hover, .sprite-hover-minus-hover:hover > .sprite-img, .sprite-active-minus-hover:active > .sprite-img {
  left: -350.5px;
  top: -528px;
}

.sprite.minus-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.minus, .sprite-hover-minus:hover > .sprite-img, .sprite-active-minus:active > .sprite-img {
  left: -379.5px;
  top: -528px;
}

.sprite.minus {
  width: 25.25px;
  height: 25px;
}

.sprite-img.music-note, .sprite-hover-music-note:hover > .sprite-img, .sprite-active-music-note:active > .sprite-img {
  left: -408.75px;
  top: -528px;
}

.sprite.music-note {
  width: 25px;
  height: 25px;
}

.sprite-img.mute-on, .sprite-hover-mute-on:hover > .sprite-img, .sprite-active-mute-on:active > .sprite-img {
  left: -437.75px;
  top: -528px;
}

.sprite.mute-on {
  width: 25px;
  height: 25px;
}

.sprite-img.mute, .sprite-hover-mute:hover > .sprite-img, .sprite-active-mute:active > .sprite-img {
  left: -466.75px;
  top: -528px;
}

.sprite.mute {
  width: 25px;
  height: 25px;
}

.sprite-img.name, .sprite-hover-name:hover > .sprite-img, .sprite-active-name:active > .sprite-img {
  left: -495.75px;
  top: -528px;
}

.sprite.name {
  width: 25px;
  height: 25px;
}

.sprite-img.new, .sprite-hover-new:hover > .sprite-img, .sprite-active-new:active > .sprite-img {
  left: -524.75px;
  top: -528px;
}

.sprite.new {
  width: 25px;
  height: 25px;
}

.sprite-img.no-cover, .sprite-hover-no-cover:hover > .sprite-img, .sprite-active-no-cover:active > .sprite-img {
  left: -2px;
  top: -660px;
}

.sprite.no-cover {
  width: 25px;
  height: 25px;
}

.sprite-img.no-music, .sprite-hover-no-music:hover > .sprite-img, .sprite-active-no-music:active > .sprite-img {
  left: -31px;
  top: -660px;
}

.sprite.no-music {
  width: 25px;
  height: 25px;
}

.sprite-img.no-vocals, .sprite-hover-no-vocals:hover > .sprite-img, .sprite-active-no-vocals:active > .sprite-img {
  left: -60px;
  top: -660px;
}

.sprite.no-vocals {
  width: 25px;
  height: 25px;
}

.sprite-img.open, .sprite-hover-open:hover > .sprite-img, .sprite-active-open:active > .sprite-img {
  left: -89px;
  top: -660px;
}

.sprite.open {
  width: 33.75px;
  height: 25px;
}

.sprite-img.password-hidden, .sprite-hover-password-hidden:hover > .sprite-img, .sprite-active-password-hidden:active > .sprite-img {
  left: -126.75px;
  top: -660px;
}

.sprite.password-hidden {
  width: 37.25px;
  height: 25px;
}

.sprite-img.password-visible, .sprite-hover-password-visible:hover > .sprite-img, .sprite-active-password-visible:active > .sprite-img {
  left: -168px;
  top: -660px;
}

.sprite.password-visible {
  width: 37.25px;
  height: 25px;
}

.sprite-img.password, .sprite-hover-password:hover > .sprite-img, .sprite-active-password:active > .sprite-img {
  left: -209.25px;
  top: -660px;
}

.sprite.password {
  width: 25.25px;
  height: 25px;
}

.sprite-img.pause-active, .sprite-hover-pause-active:hover > .sprite-img, .sprite-active-pause-active:active > .sprite-img {
  left: -238.5px;
  top: -660px;
}

.sprite.pause-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.pause-hover, .sprite-hover-pause-hover:hover > .sprite-img, .sprite-active-pause-hover:active > .sprite-img {
  left: -267.75px;
  top: -660px;
}

.sprite.pause-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.pause-red-active, .sprite-hover-pause-red-active:hover > .sprite-img, .sprite-active-pause-red-active:active > .sprite-img {
  left: -297px;
  top: -660px;
}

.sprite.pause-red-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.pause-red-hover, .sprite-hover-pause-red-hover:hover > .sprite-img, .sprite-active-pause-red-hover:active > .sprite-img {
  left: -326.25px;
  top: -660px;
}

.sprite.pause-red-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.pause-red, .sprite-hover-pause-red:hover > .sprite-img, .sprite-active-pause-red:active > .sprite-img {
  left: -355.5px;
  top: -660px;
}

.sprite.pause-red {
  width: 25.25px;
  height: 25px;
}

.sprite-img.pause, .sprite-hover-pause:hover > .sprite-img, .sprite-active-pause:active > .sprite-img {
  left: -384.75px;
  top: -660px;
}

.sprite.pause {
  width: 25.25px;
  height: 25px;
}

.sprite-img.phone, .sprite-hover-phone:hover > .sprite-img, .sprite-active-phone:active > .sprite-img {
  left: -414px;
  top: -660px;
}

.sprite.phone {
  width: 12px;
  height: 12px;
}

.sprite-img.pitch-active, .sprite-hover-pitch-active:hover > .sprite-img, .sprite-active-pitch-active:active > .sprite-img {
  left: -430px;
  top: -660px;
}

.sprite.pitch-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.pitch-hover, .sprite-hover-pitch-hover:hover > .sprite-img, .sprite-active-pitch-hover:active > .sprite-img {
  left: -459.25px;
  top: -660px;
}

.sprite.pitch-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.pitch, .sprite-hover-pitch:hover > .sprite-img, .sprite-active-pitch:active > .sprite-img {
  left: -2px;
  top: -689px;
}

.sprite.pitch {
  width: 25.25px;
  height: 25px;
}

.sprite-img.play-active, .sprite-hover-play-active:hover > .sprite-img, .sprite-active-play-active:active > .sprite-img {
  left: -31.25px;
  top: -689px;
}

.sprite.play-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.play-bubble-active, .sprite-hover-play-bubble-active:hover > .sprite-img, .sprite-active-play-bubble-active:active > .sprite-img {
  left: -60.5px;
  top: -689px;
}

.sprite.play-bubble-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.play-bubble-hover, .sprite-hover-play-bubble-hover:hover > .sprite-img, .sprite-active-play-bubble-hover:active > .sprite-img {
  left: -89.75px;
  top: -689px;
}

.sprite.play-bubble-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.play-bubble, .sprite-hover-play-bubble:hover > .sprite-img, .sprite-active-play-bubble:active > .sprite-img {
  left: -119px;
  top: -689px;
}

.sprite.play-bubble {
  width: 25.25px;
  height: 25px;
}

.sprite-img.play-hover, .sprite-hover-play-hover:hover > .sprite-img, .sprite-active-play-hover:active > .sprite-img {
  left: -148.25px;
  top: -689px;
}

.sprite.play-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.play-red-active, .sprite-hover-play-red-active:hover > .sprite-img, .sprite-active-play-red-active:active > .sprite-img {
  left: -177.25px;
  top: -689px;
}

.sprite.play-red-active {
  width: 25px;
  height: 25px;
}

.sprite-img.play-red-hover, .sprite-hover-play-red-hover:hover > .sprite-img, .sprite-active-play-red-hover:active > .sprite-img {
  left: -206.25px;
  top: -689px;
}

.sprite.play-red-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.play-red, .sprite-hover-play-red:hover > .sprite-img, .sprite-active-play-red:active > .sprite-img {
  left: -235.25px;
  top: -689px;
}

.sprite.play-red {
  width: 25px;
  height: 25px;
}

.sprite-img.play, .sprite-hover-play:hover > .sprite-img, .sprite-active-play:active > .sprite-img {
  left: -264.25px;
  top: -689px;
}

.sprite.play {
  width: 25.25px;
  height: 25px;
}

.sprite-img.plus-active, .sprite-hover-plus-active:hover > .sprite-img, .sprite-active-plus-active:active > .sprite-img {
  left: -293.5px;
  top: -689px;
}

.sprite.plus-active {
  width: 25px;
  height: 25px;
}

.sprite-img.plus-black-active, .sprite-hover-plus-black-active:hover > .sprite-img, .sprite-active-plus-black-active:active > .sprite-img {
  left: -322.5px;
  top: -689px;
}

.sprite.plus-black-active {
  width: 25px;
  height: 25px;
}

.sprite-img.plus-black-hover, .sprite-hover-plus-black-hover:hover > .sprite-img, .sprite-active-plus-black-hover:active > .sprite-img {
  left: -351.5px;
  top: -689px;
}

.sprite.plus-black-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.plus-black, .sprite-hover-plus-black:hover > .sprite-img, .sprite-active-plus-black:active > .sprite-img {
  left: -380.5px;
  top: -689px;
}

.sprite.plus-black {
  width: 25px;
  height: 25px;
}

.sprite-img.plus-hover, .sprite-hover-plus-hover:hover > .sprite-img, .sprite-active-plus-hover:active > .sprite-img {
  left: -409.5px;
  top: -689px;
}

.sprite.plus-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.plus, .sprite-hover-plus:hover > .sprite-img, .sprite-active-plus:active > .sprite-img {
  left: -438.5px;
  top: -689px;
}

.sprite.plus {
  width: 25px;
  height: 25px;
}

.sprite-img.premium, .sprite-hover-premium:hover > .sprite-img, .sprite-active-premium:active > .sprite-img {
  left: -2px;
  top: -718px;
}

.sprite.premium {
  width: 25px;
  height: 25px;
}

.sprite-img.profile, .sprite-hover-profile:hover > .sprite-img, .sprite-active-profile:active > .sprite-img {
  left: -31px;
  top: -718px;
}

.sprite.profile {
  width: 25px;
  height: 25px;
}

.sprite-img.record-active, .sprite-hover-record-active:hover > .sprite-img, .sprite-active-record-active:active > .sprite-img {
  left: -60px;
  top: -718px;
}

.sprite.record-active {
  width: 25px;
  height: 25px;
}

.sprite-img.record-hover, .sprite-hover-record-hover:hover > .sprite-img, .sprite-active-record-hover:active > .sprite-img {
  left: -89px;
  top: -718px;
}

.sprite.record-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.record-stop-active, .sprite-hover-record-stop-active:hover > .sprite-img, .sprite-active-record-stop-active:active > .sprite-img {
  left: -118px;
  top: -718px;
}

.sprite.record-stop-active {
  width: 25px;
  height: 25px;
}

.sprite-img.record-stop-hover, .sprite-hover-record-stop-hover:hover > .sprite-img, .sprite-active-record-stop-hover:active > .sprite-img {
  left: -147px;
  top: -718px;
}

.sprite.record-stop-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.record-stop, .sprite-hover-record-stop:hover > .sprite-img, .sprite-active-record-stop:active > .sprite-img {
  left: -176px;
  top: -718px;
}

.sprite.record-stop {
  width: 25px;
  height: 25px;
}

.sprite-img.record, .sprite-hover-record:hover > .sprite-img, .sprite-active-record:active > .sprite-img {
  left: -205px;
  top: -718px;
}

.sprite.record {
  width: 25px;
  height: 25px;
}

.sprite-img.rerecord-active, .sprite-hover-rerecord-active:hover > .sprite-img, .sprite-active-rerecord-active:active > .sprite-img {
  left: -234px;
  top: -718px;
}

.sprite.rerecord-active {
  width: 25px;
  height: 25px;
}

.sprite-img.rerecord-hover, .sprite-hover-rerecord-hover:hover > .sprite-img, .sprite-active-rerecord-hover:active > .sprite-img {
  left: -263px;
  top: -718px;
}

.sprite.rerecord-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.rerecord, .sprite-hover-rerecord:hover > .sprite-img, .sprite-active-rerecord:active > .sprite-img {
  left: -292px;
  top: -718px;
}

.sprite.rerecord {
  width: 25px;
  height: 25px;
}

.sprite-img.rewind-active, .sprite-hover-rewind-active:hover > .sprite-img, .sprite-active-rewind-active:active > .sprite-img {
  left: -321px;
  top: -718px;
}

.sprite.rewind-active {
  width: 25px;
  height: 25px;
}

.sprite-img.rewind-hover, .sprite-hover-rewind-hover:hover > .sprite-img, .sprite-active-rewind-hover:active > .sprite-img {
  left: -350px;
  top: -718px;
}

.sprite.rewind-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.rewind, .sprite-hover-rewind:hover > .sprite-img, .sprite-active-rewind:active > .sprite-img {
  left: -379px;
  top: -718px;
}

.sprite.rewind {
  width: 25px;
  height: 25px;
}

.sprite-img.scissors-cursor, .sprite-hover-scissors-cursor:hover > .sprite-img, .sprite-active-scissors-cursor:active > .sprite-img {
  left: -408px;
  top: -718px;
}

.sprite.scissors-cursor {
  width: 23.25px;
  height: 25px;
}

.sprite-img.search, .sprite-hover-search:hover > .sprite-img, .sprite-active-search:active > .sprite-img {
  left: -435.25px;
  top: -718px;
}

.sprite.search {
  width: 25.5px;
  height: 25px;
}

.sprite-img.selection-cutout-active, .sprite-hover-selection-cutout-active:hover > .sprite-img, .sprite-active-selection-cutout-active:active > .sprite-img {
  left: -2px;
  top: -747px;
}

.sprite.selection-cutout-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.selection-cutout-hover, .sprite-hover-selection-cutout-hover:hover > .sprite-img, .sprite-active-selection-cutout-hover:active > .sprite-img {
  left: -31.25px;
  top: -747px;
}

.sprite.selection-cutout-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.selection-cutout, .sprite-hover-selection-cutout:hover > .sprite-img, .sprite-active-selection-cutout:active > .sprite-img {
  left: -60.5px;
  top: -747px;
}

.sprite.selection-cutout {
  width: 25.25px;
  height: 25px;
}

.sprite-img.selection-in-active, .sprite-hover-selection-in-active:hover > .sprite-img, .sprite-active-selection-in-active:active > .sprite-img {
  left: -89.75px;
  top: -747px;
}

.sprite.selection-in-active {
  width: 25px;
  height: 25px;
}

.sprite-img.selection-in-hover, .sprite-hover-selection-in-hover:hover > .sprite-img, .sprite-active-selection-in-hover:active > .sprite-img {
  left: -118.75px;
  top: -747px;
}

.sprite.selection-in-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.selection-in, .sprite-hover-selection-in:hover > .sprite-img, .sprite-active-selection-in:active > .sprite-img {
  left: -147.75px;
  top: -747px;
}

.sprite.selection-in {
  width: 25.25px;
  height: 25px;
}

.sprite-img.selection-out-active, .sprite-hover-selection-out-active:hover > .sprite-img, .sprite-active-selection-out-active:active > .sprite-img {
  left: -177px;
  top: -747px;
}

.sprite.selection-out-active {
  width: 25px;
  height: 25px;
}

.sprite-img.selection-out-hover, .sprite-hover-selection-out-hover:hover > .sprite-img, .sprite-active-selection-out-hover:active > .sprite-img {
  left: -206px;
  top: -747px;
}

.sprite.selection-out-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.selection-out, .sprite-hover-selection-out:hover > .sprite-img, .sprite-active-selection-out:active > .sprite-img {
  left: -235px;
  top: -747px;
}

.sprite.selection-out {
  width: 25px;
  height: 25px;
}

.sprite-img.settings-menu-active, .sprite-hover-settings-menu-active:hover > .sprite-img, .sprite-active-settings-menu-active:active > .sprite-img {
  left: -264px;
  top: -747px;
}

.sprite.settings-menu-active {
  width: 35.75px;
  height: 20.5px;
}

.sprite-img.settings-menu-hover, .sprite-hover-settings-menu-hover:hover > .sprite-img, .sprite-active-settings-menu-hover:active > .sprite-img {
  left: -303.75px;
  top: -747px;
}

.sprite.settings-menu-hover {
  width: 35.75px;
  height: 20.5px;
}

.sprite-img.settings-menu, .sprite-hover-settings-menu:hover > .sprite-img, .sprite-active-settings-menu:active > .sprite-img {
  left: -343.5px;
  top: -747px;
}

.sprite.settings-menu {
  width: 35.5px;
  height: 20.5px;
}

.sprite-img.sparkles, .sprite-hover-sparkles:hover > .sprite-img, .sprite-active-sparkles:active > .sprite-img {
  left: -383px;
  top: -747px;
}

.sprite.sparkles {
  width: 40px;
  height: 40px;
}

.sprite-img.star-off-hover, .sprite-hover-star-off-hover:hover > .sprite-img, .sprite-active-star-off-hover:active > .sprite-img {
  left: -427px;
  top: -747px;
}

.sprite.star-off-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.star-off, .sprite-hover-star-off:hover > .sprite-img, .sprite-active-star-off:active > .sprite-img {
  left: -456.25px;
  top: -747px;
}

.sprite.star-off {
  width: 25.25px;
  height: 25px;
}

.sprite-img.star-on-hover, .sprite-hover-star-on-hover:hover > .sprite-img, .sprite-active-star-on-hover:active > .sprite-img {
  left: -485.5px;
  top: -747px;
}

.sprite.star-on-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.star-on, .sprite-hover-star-on:hover > .sprite-img, .sprite-active-star-on:active > .sprite-img {
  left: -2px;
  top: -791px;
}

.sprite.star-on {
  width: 25.25px;
  height: 25px;
}

.sprite-img.star-white, .sprite-hover-star-white:hover > .sprite-img, .sprite-active-star-white:active > .sprite-img {
  left: -31.25px;
  top: -791px;
}

.sprite.star-white {
  width: 25.25px;
  height: 25px;
}

.sprite-img.stop-active, .sprite-hover-stop-active:hover > .sprite-img, .sprite-active-stop-active:active > .sprite-img {
  left: -60.5px;
  top: -791px;
}

.sprite.stop-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.stop-circle-active, .sprite-hover-stop-circle-active:hover > .sprite-img, .sprite-active-stop-circle-active:active > .sprite-img {
  left: -89.75px;
  top: -791px;
}

.sprite.stop-circle-active {
  width: 25px;
  height: 25px;
}

.sprite-img.stop-circle-hover, .sprite-hover-stop-circle-hover:hover > .sprite-img, .sprite-active-stop-circle-hover:active > .sprite-img {
  left: -118.75px;
  top: -791px;
}

.sprite.stop-circle-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.stop-circle, .sprite-hover-stop-circle:hover > .sprite-img, .sprite-active-stop-circle:active > .sprite-img {
  left: -147.75px;
  top: -791px;
}

.sprite.stop-circle {
  width: 25px;
  height: 25px;
}

.sprite-img.stop-hover, .sprite-hover-stop-hover:hover > .sprite-img, .sprite-active-stop-hover:active > .sprite-img {
  left: -176.75px;
  top: -791px;
}

.sprite.stop-hover {
  width: 25px;
  height: 25px;
}

.sprite-img.stop, .sprite-hover-stop:hover > .sprite-img, .sprite-active-stop:active > .sprite-img {
  left: -205.75px;
  top: -791px;
}

.sprite.stop {
  width: 25.25px;
  height: 25px;
}

.sprite-img.tab-sfx, .sprite-hover-tab-sfx:hover > .sprite-img, .sprite-active-tab-sfx:active > .sprite-img {
  left: -235px;
  top: -791px;
}

.sprite.tab-sfx {
  width: 12.5px;
  height: 30.75px;
}

.sprite-img.tab-tutorials, .sprite-hover-tab-tutorials:hover > .sprite-img, .sprite-active-tab-tutorials:active > .sprite-img {
  left: -251.5px;
  top: -791px;
}

.sprite.tab-tutorials {
  width: 12.5px;
  height: 30.75px;
}

.sprite-img.trash, .sprite-hover-trash:hover > .sprite-img, .sprite-active-trash:active > .sprite-img {
  left: -268px;
  top: -791px;
}

.sprite.trash {
  width: 19.5px;
  height: 25px;
}

.sprite-img.verified, .sprite-hover-verified:hover > .sprite-img, .sprite-active-verified:active > .sprite-img {
  left: -291.5px;
  top: -791px;
}

.sprite.verified {
  width: 25.25px;
  height: 25px;
}

.sprite-img.video-file, .sprite-hover-video-file:hover > .sprite-img, .sprite-active-video-file:active > .sprite-img {
  left: -320.75px;
  top: -791px;
}

.sprite.video-file {
  width: 25.25px;
  height: 25px;
}

.sprite-img.volume-active, .sprite-hover-volume-active:hover > .sprite-img, .sprite-active-volume-active:active > .sprite-img {
  left: -350px;
  top: -791px;
}

.sprite.volume-active {
  width: 25.25px;
  height: 25px;
}

.sprite-img.volume-hover, .sprite-hover-volume-hover:hover > .sprite-img, .sprite-active-volume-hover:active > .sprite-img {
  left: -379.25px;
  top: -791px;
}

.sprite.volume-hover {
  width: 25.25px;
  height: 25px;
}

.sprite-img.volume, .sprite-hover-volume:hover > .sprite-img, .sprite-active-volume:active > .sprite-img {
  left: -408.5px;
  top: -791px;
}

.sprite.volume {
  width: 25.25px;
  height: 25px;
}

.sprite-img.warning-orange, .sprite-hover-warning-orange:hover > .sprite-img, .sprite-active-warning-orange:active > .sprite-img {
  left: -2px;
  top: -825.75px;
}

.sprite.warning-orange {
  width: 25.25px;
  height: 25px;
}

.sprite-img.warning, .sprite-hover-warning:hover > .sprite-img, .sprite-active-warning:active > .sprite-img {
  left: -31.25px;
  top: -825.75px;
}

.sprite.warning {
  width: 25.25px;
  height: 25px;
}

.sprite-img.we-hear-you-survey, .sprite-hover-we-hear-you-survey:hover > .sprite-img, .sprite-active-we-hear-you-survey:active > .sprite-img {
  left: -60.5px;
  top: -825.75px;
}

.sprite.we-hear-you-survey {
  width: 41px;
  height: 25px;
}

.switch {
  display: flex;
  align-items: center;
}

.switch-disabled > .switch-label {
  opacity: 50%;
  cursor: not-allowed;
}

.MuiTooltip-tooltip {
  font-size: 0.85em !important;
  font-weight: bold !important;
}

.clip-tuner {
  pointer-events: all;
  position: relative;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.7em;
  transition: background 0.5s, padding 0.5s, left 0.5s, right 0.5s;
}
.clip-tuner .clip-tuner-label {
  transform: scale(0);
  transition: transform 0.5s;
  display: none;
}

.clip-volume-tuner-btn {
  margin-left: 5px;
  cursor: default;
}

.clip-pitch-tuner-btn {
  margin-right: 5px;
  cursor: default;
}

.clip-tuner-modified {
  background-color: rgba(0, 0, 0, 0.65);
}
.clip-tuner-modified .clip-volume-tuner-btn, .clip-tuner-modified .clip-pitch-tuner-btn {
  margin: 0;
}
.clip-tuner-modified .clip-tuner-label {
  transform: scale(1);
  display: block;
}

.clip-tuner-modified.clip-volume-tuner {
  left: 8px;
  padding-left: 2px;
  padding-right: 5px;
}

.clip-tuner-modified.clip-pitch-tuner {
  right: 8px;
  padding-left: 5px;
  padding-right: 2px;
}

.clip {
  cursor: url("/img/cursor-grab.png") 11 11, grab;
}

.clip {
  height: 80px;
  border-radius: 5px;
  box-sizing: border-box;
  position: absolute;
  outline: none;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.clip-multiselected {
  cursor: url("/img/cursor-grab-multi.png") 13 10, grab;
}

.clip-dragging-override-cursor > *, .clip-dragging-override-cursor > * > * > * {
  cursor: unset !important;
}

.clip-bg-0 {
  background: #8f5cef;
  background: linear-gradient(135deg, #8f5cef, #a331cb);
}

.clip-bg-1 {
  background: #31499c;
  background: linear-gradient(135deg, #31499c, #15d1be);
}

.clip-bg-2 {
  background: #d993c0;
  background: linear-gradient(135deg, #d993c0, #a331cb);
}

.clip-bg-3 {
  background: #100f24;
  background: linear-gradient(135deg, #100f24, #31499c);
}

.clip-bg-4 {
  background: #d993c0;
  background: linear-gradient(135deg, #d993c0, #f9de5f);
}

.clip-bg-5 {
  background: #15d1be;
  background: linear-gradient(135deg, #15d1be, #a331cb);
}

.clip-bg-default {
  background: #f17c3b;
  background: linear-gradient(135deg, #f17c3b, #8f5cef);
}

.clip-bg {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
}

.clip-bg-intersecting-top .clip-bg-intersecting-outline {
  border: 4px solid rgba(163, 49, 203, 0.75);
  border-left: none;
  border-radius: 0px 5px 5px 0px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.clip-bg-intersecting-bottom .clip-bg-intersecting-outline {
  border: 4px solid rgba(49, 73, 156, 0.75);
  border-right: none;
  border-radius: 5px 0px 0px 5px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.clip-bg-contained {
  transform: scaleX(-1);
  opacity: 40%;
}

.clip-bg-contained-border {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border-width: 4px;
  border-style: solid;
}

.clip-bg-contained-border.bg-0 {
  border-color: #8f5cef;
}

.clip-bg-contained-border.bg-1 {
  border-color: #31499c;
}

.clip-bg-contained-border.bg-2 {
  border-color: #d993c0;
}

.clip-bg-contained-border.bg-3 {
  border-color: #100f24;
}

.clip-bg-contained-border.bg-4 {
  border-color: #d993c0;
}

.clip-bg-contained-border.bg-5 {
  border-color: #15d1be;
}

.clip-bg-contained-border.bg-default {
  border-color: #f17c3b;
}

.clip.draggable-source--is-dragging {
  visibility: hidden;
}

.clip.draggable-mirror {
  z-index: 89;
  visibility: hidden;
}

.clip-waveform {
  position: absolute;
  height: 100%;
}

.clip-bg {
  box-sizing: border-box;
}

.clip-selected {
  filter: brightness(70%);
}
.clip-selected .clip-bg {
  border: 2px solid white;
}

.clip-selector.clip-selected {
  filter: none;
}

.clip-disabled {
  cursor: default;
}

.clip-selector .clip-bg-main {
  background: rgba(0, 0, 0, 0.6);
}

.clip-center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.clip-play-btn {
  cursor: pointer;
}

.clip-bpm {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
}

.clip-edge {
  position: absolute;
  width: 5px;
  height: 100%;
  z-index: 88;
  pointer-events: all;
  cursor: ew-resize;
}

.clip-edge-left {
  left: 0;
  box-sizing: border-box;
}

.clip-edge-right {
  right: 0;
}

.clip-edge-shorter {
  height: 75%;
  bottom: 0;
}

.clip-edge-outline {
  display: none;
  width: 8px;
  border: 2px solid white;
  box-sizing: border-box;
  opacity: 80%;
  pointer-events: none;
}

.clip-edge-left.clip-edge-outline {
  border-right: none;
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.clip-edge-right.clip-edge-outline {
  border-left: none;
  background: linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.clip:has(.clip-edge-left:hover) .clip-edge-outline.clip-edge-left {
  display: block;
}

.clip:has(.clip-edge-right:hover) .clip-edge-outline.clip-edge-right {
  display: block;
}

.clip-fade-in-handle, .clip-fade-out-handle {
  position: absolute;
  cursor: default;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.2s;
}

.clip-fade-in-handle {
  background-image: url("/img/fade-in.png");
}
.clip-fade-in-handle:hover {
  background-image: url("/img/fade-in-active.png");
}

.clip-fade-out-handle {
  background-image: url("/img/fade-out.png");
}
.clip-fade-out-handle:hover {
  background-image: url("/img/fade-out-active.png");
}

.clip-fade-in-overlay, .clip-fade-out-overlay {
  position: absolute;
  height: 100%;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
  pointer-events: none;
}

.clip-fade-in-overlay {
  left: 0;
}

.clip-fade-out-overlay {
  right: 0;
}

.clip-tuners-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
}

.clip-trash-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(227, 43, 43, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  visibility: hidden;
}
.clip-trash-overlay img {
  height: 50%;
}

.clip-peaks-progress {
  position: absolute;
  left: 20px;
  bottom: 0;
  display: flex;
  align-items: center;
  opacity: 70%;
  font-size: 0.7rem;
  width: calc(100% - 20px);
  overflow: hidden;
}
.clip-peaks-progress .spinner {
  height: 1rem;
}
.clip-peaks-progress span {
  margin-right: 0.7rem;
}

.clip-disabled .clip-peaks-progress {
  left: 0;
  width: 100%;
}

.clip-frozen-overlay {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(120deg, rgba(147, 201, 254, 0.1) 25%, transparent 25%, transparent 50%, rgba(147, 201, 254, 0.1) 50%, rgba(147, 201, 254, 0.1) 75%, transparent 75%, transparent);
  background-size: 23px 40px;
  box-shadow: inset 0px 0px 10px 1px rgb(147, 201, 254);
  box-sizing: border-box;
  border-radius: 8px;
  z-index: 50;
  background-color: rgba(147, 201, 254, 0.11);
  display: flex;
  align-items: center;
  justify-content: center;
}
.clip-frozen-overlay img {
  opacity: 50%;
}

.clip-top-left-badge {
  position: absolute;
  top: 7px;
  left: 12px;
}

.selection-scissor-tool-popup {
  display: flex;
  position: absolute;
  top: calc(50% - 18px);
  background: white;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.7));
  border-radius: 5px;
  padding: 3px 0;
}
.selection-scissor-tool-popup div {
  filter: invert(1);
}

.selection-scissor-tool-popup-btn {
  margin: 0 5px;
}

.selection-scissor-tool-popup-btn:last-of-type {
  margin-left: 0;
}

.snap-point {
  position: absolute;
  width: 8px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  cursor: url("/img/cursor-grab-ew-resize.png") 11 11, ew-resize;
}
.snap-point:hover:not(.dragging) .snap-point-line {
  background-color: #32e932;
  filter: drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 3px #00ff00);
}
.snap-point:active .snap-point-line {
  background-color: #11a411;
  filter: drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 3px #00ff00);
}

.snap-point-selected {
  border: 1px solid white;
}

.snap-point-disabled {
  pointer-events: none;
  opacity: 50%;
}

.snap-point-scissors-tool-active {
  cursor: unset;
}

.snap-point-line {
  width: 2px;
  height: 100%;
  background-color: #16d216;
  transition: background 0.1s;
  filter: drop-shadow(0px 0px 3px black);
}
.snap-point-line:hover {
  background-color: #32e932;
}
.snap-point-line:active {
  background-color: #11a411;
}
.snap-point-line:disabled {
  background-color: #16d216;
}

.songbank {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  background-color: #28273d;
  padding: 10px 0px;
  width: 130px;
  height: 104px;
}

.songbank-title {
  font-weight: bold;
  font-size: 0.8em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
  user-select: none;
  -webkit-user-select: none;
}

.songbank-songs {
  overflow-y: auto;
}
.songbank-songs::-webkit-scrollbar {
  width: 10px;
}
.songbank-songs::-webkit-scrollbar-thumb {
  background: #100f24;
  border-radius: 10px;
}
.songbank-songs::-webkit-scrollbar-corner {
  background: none;
}

.songbank-song {
  font-size: 0.8em;
  margin-top: 4px;
  padding: 0px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition: color 0.1s;
}
.songbank-song:hover {
  color: #ddd;
}
.songbank-song:active {
  color: #bbb;
}

.songbank-song-selected {
  box-shadow: inset 0px 0px 0px 1px white;
}

.edit-timecode {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  flex: 1 1;
  font-size: 1.2em;
  font-weight: bold;
  cursor: text;
  display: flex;
  justify-content: center;
}
.edit-timecode:hover {
  text-decoration: underline;
}

.edit-timecode-inner {
  text-align: left;
  width: 120px;
  text-align: center;
}
.edit-timecode-inner span {
  margin-left: 3px;
}

.edit-timecode-input {
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  background: rgba(42, 166, 243, 0.5294117647);
  color: white;
  transition: background 0.25;
  width: 120px;
}
.edit-timecode-input:hover {
  background: rgba(90, 186, 246, 0.5294117647);
}

.timeline-ruler {
  width: 100%;
  height: 100%;
}

.edit-comp {
  display: flex;
  height: 100%;
  overflow: hidden;
  outline: none;
  position: relative;
}

.edit-selection {
  transition: height 1s;
  overflow: hidden;
}
.edit-selection .edit-tracks {
  height: auto;
  overflow: hidden;
}

.edit-selection-collapsed {
  flex: none;
  height: 45px;
  grid-template-rows: 50%;
  min-height: 0px;
}
.edit-selection-collapsed .edit-ctrl, .edit-selection-collapsed .edit-timecode, .edit-selection-collapsed .edit-zoom-slider, .edit-selection-collapsed .edit-ruler, .edit-selection-collapsed .edit-tracks, .edit-selection-collapsed .edit-action, .edit-selection-collapsed .edit-right {
  opacity: 0;
}
.edit-selection-collapsed .edit-ctrl, .edit-selection-collapsed .edit-timecode {
  pointer-events: none;
}

.edit-active {
  background-color: #1b1a2e;
}

.edit-main {
  display: flex;
  align-items: start;
  flex: 1 0;
  height: 100%;
  flex-direction: column;
}

.edit-timecode, .edit-zoom-slider, .edit-ruler, .edit-tracks, .edit-action, .edit-right {
  transition: opacity 1s;
}

.edit-title {
  font-weight: bold;
  margin-right: 12px;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 175px;
  cursor: pointer;
}

.edit-selection > * > .edit-title {
  flex: 1 0;
}

.edit-mix .edit-main {
  flex-direction: column;
  height: auto;
  width: calc(100% - 175px - 140px);
}
.edit-mix .edit-title {
  flex-direction: column;
}
.edit-mix .edit-title span {
  margin-bottom: 10px;
}
.edit-mix .edit-zoom-slider {
  align-self: end;
}
.edit-mix .edit-controls {
  align-self: start;
}
.edit-mix .edit-action {
  margin-bottom: 10px;
}

.edit-collapse {
  margin-right: 10px;
  transition: transform 0.5s;
}

.edit-collapse-collapsed {
  transform: rotate(-90deg);
}

.edit-del-track[disabled] {
  cursor: default;
}

.edit-controls {
  display: flex;
  align-items: center;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  margin-bottom: 10px;
}

.edit-mix .edit-controls {
  margin-top: 10px;
}

.edit-ctrl {
  margin: 0px 10px;
}

.edit-ctrl-spacer {
  flex: 1 1;
}

.edit-zoom-slider {
  align-self: flex-end;
  max-width: 150px;
  padding: 20px 0px !important;
}
.edit-zoom-slider .MuiSlider-rail {
  background: linear-gradient(135deg, #15d1be, #8f5cef) !important;
}

.edit-vertical-zoom-slider {
  align-self: flex-start;
  margin-top: 9px;
}
.edit-vertical-zoom-slider .MuiSlider-rail {
  background: linear-gradient(135deg, #15d1be, #8f5cef) !important;
}

.edit-deck-wrapper {
  width: 100%;
  height: 100%;
  grid-row: 3;
  grid-column: 1;
  position: relative;
  overflow: hidden;
}

.edit-deck {
  width: 100%;
  position: relative;
}

.edit-playhead {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transform: translateX(175px);
}
.edit-playhead .edit-playhead-head {
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: white;
  position: absolute;
}
.edit-playhead .edit-playhead-tail {
  margin-left: -0.5px;
  border-left: 1.5px solid white;
  width: 0.25px;
  height: 100%;
}

.edit-snap-line {
  position: absolute;
  top: 12px;
  height: calc(100% - 12px);
  z-index: 2;
  width: 1px;
  background-color: #f9de5f;
  left: 500px;
  transform: translateX(175px);
  pointer-events: none;
}

.edit-ruler-wrapper {
  background-color: #100f24;
  width: 100%;
  z-index: 1;
  position: relative;
}

.edit-active .edit-ruler-wrapper {
  background-color: #1b1a2e;
}

.edit-ruler {
  left: 175px;
  height: 24px;
  width: 100%;
  position: relative;
}

.edit-left-bg {
  background-color: #100f24;
  position: absolute;
  left: 0;
  top: 0;
  width: 174px;
  height: 24px;
  z-index: 3;
}

.edit-active .edit-left-bg {
  background-color: #1b1a2e;
}

.edit-tracks {
  overflow: hidden;
  width: 100%;
  margin-bottom: 5px;
}
.edit-tracks::-webkit-scrollbar {
  height: 10px;
}
.edit-tracks::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 5px;
}
.edit-tracks::-webkit-scrollbar-corner {
  background: none;
}

.edit-scrollbar .scrollbar-rail {
  background: #0b0b19 !important;
}

.edit-scrollbar-horizontal {
  left: 175px;
  width: calc(100% - 175px);
}

.edit-active .edit-scrollbar .scrollbar-rail {
  background: #151424 !important;
}

.edit-deck-bottom {
  width: 100%;
  position: sticky;
  bottom: 0;
  background: #100f24;
  z-index: 2;
}

.edit-mix .edit-deck-bottom {
  padding: 5px 0px;
}

.edit-active .edit-deck-bottom {
  background: #1b1a2e;
}

.edit-action {
  margin-top: 10px;
  display: flex;
}

.edit-mix .edit-action {
  justify-content: right;
}

.edit-action-spacer-left {
  width: 175px;
}

.edit-action-spacer {
  flex: 1 0;
}

.edit-selection-controls {
  display: flex;
}

.edit-selection-control {
  width: 35px;
}

.edit-selection-controls-disabled {
  opacity: 0.4;
}
.edit-selection-controls-disabled .edit-selection-control {
  cursor: default;
}

.edit-action-btn {
  font-size: 0.9em;
  font-weight: normal;
  text-transform: none;
  background-color: #974e9e;
  transition: background 0.1s;
  padding: 8px 16px;
}
.edit-action-btn:hover {
  background-color: #af6ab5;
}
.edit-action-btn:active {
  background-color: #763d7c;
}
.edit-action-btn:disabled {
  background-color: #974e9e;
}

.edit-right {
  display: flex;
  align-items: center;
  margin: 0px 10px;
  width: 140px;
}

.edit-mix .edit-right {
  align-items: flex-start;
  margin-top: 90px;
}

.edit-right-controls {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.edit-mix-scrollbar-vertical {
  opacity: 1;
  transition: opacity 0.13s;
}

.edit-mix-scrollbar-vertical-hidden {
  opacity: 0;
}

.edit-last-saved-label {
  position: fixed;
  bottom: 10px;
  left: 20px;
  color: gray;
  font-size: 0.8em;
  z-index: 3;
}

@media (max-height: 800px) {
  .edit-action-btn {
    font-size: 0.8em;
    padding: 6px 12px;
    margin-top: -4px;
  }
  .edit-right-controls {
    flex-direction: row;
    gap: 10px;
  }
}
.track-container {
  display: flex;
  width: 100%;
}

.track {
  height: 80px;
  margin-bottom: 2px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: grid;
  flex: 1 0;
}
.track > div {
  grid-row: 1;
  grid-column: 1;
}

.track-bg {
  background-color: #28273d;
  border-radius: 8px;
}

.track-selected .track-bg {
  background-color: #444356;
}

.track-left {
  width: 175px;
  display: flex;
  justify-content: flex-end;
}

.track-actions {
  display: flex;
  align-items: center;
  margin-right: 5px;
  margin-bottom: 2px;
  width: 60px;
  height: 100%;
}

.track-action {
  width: 50%;
  background: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  opacity: 75%;
  transition: opacity 0.1s;
}
.track-action:hover {
  opacity: 1;
}

.track-action-on {
  opacity: 1;
}
.track-action-on:hover {
  opacity: 75%;
}

.track-overlay {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 23px 40px;
  box-sizing: border-box;
  border-radius: 8px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.track-overlay img {
  opacity: 30%;
}

.track-overlay-muted.track-overlay-frozen {
  background-image: linear-gradient(107deg, transparent 11%, rgba(235, 81, 76, 0.1) 11%, rgba(235, 81, 76, 0.1) 22%, transparent 22%, transparent 33%, rgba(147, 201, 254, 0.1) 33%, rgba(147, 201, 254, 0.1) 44%, transparent 44%, transparent 55%, rgba(235, 81, 76, 0.1) 55%, rgba(235, 81, 76, 0.1) 66%, transparent 66%, transparent 77%, rgba(147, 201, 254, 0.1) 77%, rgba(147, 201, 254, 0.1) 88%, transparent 88%);
  background-color: rgba(191, 141, 165, 0.11);
  box-shadow: inset 0px 0px 10px 1px #bf8da5;
  background-size: 36px 150px;
}
.track-overlay-muted.track-overlay-frozen img:nth-child(1) {
  margin-right: 10px;
}

.track-overlay-muted {
  background-image: linear-gradient(120deg, rgba(235, 81, 76, 0.1) 25%, transparent 25%, transparent 50%, rgba(235, 81, 76, 0.1) 50%, rgba(235, 81, 76, 0.1) 75%, transparent 75%, transparent);
  background-color: rgba(235, 81, 76, 0.11);
  box-shadow: inset 0px 0px 10px 1px #eb514c;
}

.track-overlay-frozen {
  background-image: linear-gradient(120deg, rgba(147, 201, 254, 0.1) 25%, transparent 25%, transparent 50%, rgba(147, 201, 254, 0.1) 50%, rgba(147, 201, 254, 0.1) 75%, transparent 75%, transparent);
  background-color: rgba(147, 201, 254, 0.11);
  box-shadow: inset 0px 0px 10px 1px #93c9fe;
}

.track-temporary .track-left {
  opacity: 10%;
}
.track-temporary .track-bg {
  background: none;
  border: 8px dashed #28273d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #28273d;
  font-style: italic;
}

.track-dragging-clip-cursor {
  cursor: url("/img/cursor-grab.png") 11 11, grab;
}

.track-dragging-clip-cursor.track-multiclips-selected {
  cursor: url("/img/cursor-grab-multi.png") 13 10, grab;
}

.header-tool {
  border: 3px solid white;
  border-radius: 10px;
  display: grid;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background: black;
}

.header-tool-arrow, .header-tool-arrow::before {
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: -1;
  top: -7px;
}
.header-tool-arrow::before {
  content: "";
  transform: rotate(45deg);
  background: #fff;
  top: 0;
  left: 0;
}

.header-tool-container {
  grid-row: 1;
  grid-column: 1;
  height: 100%;
  width: 100%;
}

.header-tool-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.snap-tool-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.snap-tool-inner {
  padding: 12px;
  padding-bottom: 26px;
}

.snap-tool-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}

.snap-tool-auto-add-settings {
  background: #a331cb;
  width: 100%;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  position: relative;
  margin-top: -14px;
  padding-bottom: 24px;
}

.snap-tool-auto-add-settings-arrow {
  background: #a331cb;
  position: absolute;
  top: -10px;
  right: 28px;
  transform: rotate(45deg);
  width: 22px;
  height: 22px;
}

.snap-tool-auto-add-settings-inner {
  padding: 4px 12px;
  position: relative;
  z-index: 1;
}

.snap-tool-auto-add-title {
  font-size: 0.8em;
  display: flex;
  align-items: center;
}

.snap-tool-auto-add-note {
  height: 1.5em;
  margin: 0 5px;
}

.snap-tool-auto-add-slider {
  padding-bottom: 8px !important;
}
.snap-tool-auto-add-slider .MuiSlider-rail {
  background-color: black;
  opacity: 0.7;
}
.snap-tool-auto-add-slider .MuiSlider-track {
  background-color: white;
  opacity: 0.7;
}

.snap-tool-auto-add-offset {
  width: calc(100% - 10px);
  display: flex;
}
.snap-tool-auto-add-offset button {
  flex: 1 0;
  font-size: 0.9em;
  padding: 5px;
}
.snap-tool-auto-add-offset button img {
  height: 18px;
}
.snap-tool-auto-add-offset button.active img {
  filter: invert(1);
}

.snap-tool-auto-add-offset-title {
  margin-top: 8px;
}

.speed-tool-top {
  width: 100%;
  display: flex;
}

.speed-tool-top-tab {
  font-weight: bold;
  font-size: 0.8em;
  text-align: center;
  flex: 1 0;
  background: black;
  padding: 8px 0px;
  cursor: pointer;
  text-transform: uppercase;
}
.speed-tool-top-tab:nth-child(1) {
  border-top-left-radius: 6px;
}
.speed-tool-top-tab:nth-child(2) {
  border-top-right-radius: 6px;
}
.speed-tool-top-tab:hover {
  background: #111;
}
.speed-tool-top-tab:active {
  background: #444;
}

.speed-tool-top-tab-active {
  background: #fff;
  color: black;
}
.speed-tool-top-tab-active:hover {
  background: #fff;
}
.speed-tool-top-tab-active:active {
  background: #fff;
}

.speed-tool-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.speed-tool-val-btn {
  cursor: pointer;
}

.speed-tool-ctrl {
  margin: 0px 20px;
  text-align: center;
}

.speed-tool-value, .speed-tool-value-type, .speed-tool-original-bpm {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7));
}

.speed-tool-value-container {
  position: relative;
  text-align: left;
  min-width: 140px;
}

.speed-tool-value, .speed-tool-value-input {
  font-size: 1.2em;
  font-weight: bold;
}

.speed-tool-value-type {
  font-size: 0.7em;
}

.speed-tool-value-input {
  width: 2em;
  text-align: center;
}

.speed-tool-slider {
  min-width: 50px;
}
.speed-tool-slider .MuiSlider-rail {
  background-color: #100f24;
  opacity: 0.7;
}

.speed-tool-original-bpm {
  font-size: 0.7em;
  cursor: pointer;
}
.speed-tool-original-bpm:hover {
  text-decoration: underline;
}

.speed-tool-tap {
  font-size: 0.8em;
  position: absolute;
  left: 10px;
  bottom: 5px;
  padding: 5px 10px;
  background-color: #100f24;
  transition: background 0.1s;
}
.speed-tool-tap:hover {
  background-color: #201e48;
}
.speed-tool-tap:active {
  background-color: black;
}
.speed-tool-tap:disabled {
  background-color: #100f24;
}

.speed-tool-btns {
  display: flex;
  margin-left: 20px;
  margin-bottom: 12px;
  flex-direction: column;
}
.speed-tool-btns .speed-tool-btn {
  font-size: 0.8em;
  background-color: #100f24;
  transition: background 0.1s;
  padding: 5px 20px;
}
.speed-tool-btns .speed-tool-btn:hover {
  background-color: #201e48;
}
.speed-tool-btns .speed-tool-btn:active {
  background-color: black;
}
.speed-tool-btns .speed-tool-btn:disabled {
  background-color: #100f24;
}

.speed-tool-help {
  align-self: end;
  justify-self: end;
  font-size: 0.8em;
  width: 22px;
  height: 22px;
  padding: 0;
  background-color: #100f24;
  transition: background 0.1s;
  bottom: 5px;
  right: 5px;
  position: absolute;
}
.speed-tool-help:hover {
  background-color: #201e48;
}
.speed-tool-help:active {
  background-color: black;
}
.speed-tool-help:disabled {
  background-color: #100f24;
}

.vocal-remover-tool-inner {
  padding: 10px;
  text-align: center;
}

.vocal-remover-tool-btns {
  display: flex;
}

.vocal-remover-tool-btn {
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vocal-remover-tool-btn-icon {
  margin-top: 5px;
  cursor: pointer;
}

.vocal-remover-tool-btn-label {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  margin-top: 5px;
}

.vocal-remover-tool-selection {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 0.8em;
}

.import-dlg-container {
  text-align: center;
  padding: 20px;
}
.import-dlg-container h1 {
  font-size: 1.5em;
  margin: 0;
  margin-bottom: 20px;
}

.import-dlg-btns {
  padding-top: 15px;
}
.import-dlg-btns button, .import-dlg-btns a {
  font-size: 1em;
}

.importing-modal {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.importing-modal h1 {
  margin: 0;
  margin-left: 10px;
  margin-top: 20px;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.import-dlg-start-container {
  width: 400px;
}

.import-dlg-start-dragdrop {
  grid-column: span 2;
  border-radius: 10px;
  border: 3px dashed gray;
  transition: border 0.6s, background 0.6s, color 0.6s;
  height: 100px;
}
.import-dlg-start-dragdrop button {
  background: none;
  border-radius: 10px;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-size: 1em;
  text-transform: none;
  background-color: #100f24;
  transition: background 0.1s;
  transition: background 0.6s, color 0.6s;
}
.import-dlg-start-dragdrop button:hover {
  background-color: #201e48;
}
.import-dlg-start-dragdrop button:active {
  background-color: black;
}
.import-dlg-start-dragdrop button:disabled {
  background-color: #100f24;
}

.import-dlg-start-dragdrop-filedrag {
  background-color: white;
  color: black;
  border: 3px dashed black;
}
.import-dlg-start-dragdrop-filedrag button {
  background-color: white;
  color: black;
}

.import-dlg-start-item-icon {
  width: 70px;
  height: 70px;
  margin: 10px;
}

.import-dlg-start-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.import-dlg-start-item:nth-child(1) {
  margin: 0;
}
.import-dlg-start-item span {
  white-space: nowrap;
}

.sfx-sidebar {
  position: relative;
  display: grid;
  flex-direction: column;
  width: 100%;
  height: 100%;
  grid-template-rows: 229px min-content auto;
  transition: grid-template-rows 0.5s;
}

.sfx-sidebar-categories-collapsed {
  grid-template-rows: 0px min-content auto;
}

.sfx-sidebar-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sfx-sidebar-categories {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.sfx-sidebar-category {
  font-size: 1em;
  text-transform: none;
  font-weight: normal;
  width: calc(33.33% - 0.8em);
  margin: 0.4em;
  padding: 0.2em 0;
  text-align: center;
  border-radius: 1em;
  background-color: #535262;
  transition: background 0.1s;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background 0.1s, opacity 0.2s;
}
.sfx-sidebar-category:hover {
  background-color: #6b697e;
}
.sfx-sidebar-category:active {
  background-color: #3b3b46;
}
.sfx-sidebar-category:disabled {
  background-color: #535262;
}
.sfx-sidebar-category img {
  height: 0.8em;
  margin-left: 0.4em;
}

.sfx-sidebar-category-active {
  font-weight: bold;
  background: #31499c;
  background: linear-gradient(90deg, #31499c, #a331cb);
}
.sfx-sidebar-category-active:hover {
  background: #3e5bc2;
  background: linear-gradient(90deg, #3e5bc2, #b658d7);
}
.sfx-sidebar-category-active:active {
  background: #253775;
  background: linear-gradient(90deg, #253775, #8227a2);
}

.sfx-sidebar-no-results {
  color: gray;
  font-size: 0.9em;
  text-align: center;
}

.sfx-sidebar-divider {
  display: grid;
}
.sfx-sidebar-divider hr {
  border-color: gray;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 0px;
  margin-block-start: calc(0.5em + 2px);
}

.sfx-sidebar-divider-collapse-btn {
  grid-row: 1;
  grid-column: 1;
  border-radius: 1em;
  margin: 0;
  width: fit-content;
  justify-self: center;
}

.sfx-sidebar-list-wrapper {
  overflow: hidden;
}

.sfx-sidebar-list {
  overflow-y: scroll;
  direction: rtl;
  padding-left: 0.5em;
  margin-top: 5px;
}
.sfx-sidebar-list::-webkit-scrollbar {
  width: 10px;
}
.sfx-sidebar-list::-webkit-scrollbar-thumb {
  background: #535262;
  border-radius: 10px;
}
.sfx-sidebar-list::-webkit-scrollbar-corner {
  background: none;
}

.sfx-sidebar-item {
  direction: ltr;
  display: flex;
  align-items: center;
  background: #f17c3b;
  background: linear-gradient(135deg, #f17c3b, #8f5cef);
  border-radius: 7px;
  height: 50px;
  padding: 0 0.7em;
  cursor: url("/img/cursor-grab.png") 11 11, grab;
}
.sfx-sidebar-item span {
  flex: 1 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sfx-sidebar-item i {
  font-size: 0.7em;
  opacity: 0.5;
  margin-right: 5px;
}

.sfx-sidebar-item-preview, .sfx-sidebar-item-favorite {
  height: 1.7em;
  width: 1.7em;
}

.sfx-sidebar-item-preview {
  cursor: pointer;
  user-select: none;
  margin-right: 0.7em;
}

.sfx-sidebar-item-premium {
  margin-right: 0.3em;
  cursor: pointer;
}

.sfx-sidebar-item-favorite {
  cursor: pointer;
}

.tutorials-sidebar-tutorial {
  margin: 10px;
  text-align: center;
}
.tutorials-sidebar-tutorial:first-of-type {
  margin-top: 0;
}

.tutorials-sidebar-tutorial-preview {
  width: 100%;
  display: grid;
  align-items: end;
  justify-items: right;
  cursor: pointer;
}
.tutorials-sidebar-tutorial-preview img, .tutorials-sidebar-tutorial-preview button, .tutorials-sidebar-tutorial-preview div {
  grid-row: 1;
  grid-column: 1;
}
.tutorials-sidebar-tutorial-preview img {
  width: 100%;
}
.tutorials-sidebar-tutorial-preview button {
  background: none;
  background-image: url("/img/play-bubble.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 50px;
  height: 50px;
  margin: 10px;
}
.tutorials-sidebar-tutorial-preview:hover button {
  background: none;
  background-image: url("/img/play-bubble-hover.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tutorials-sidebar-tutorial-preview:hover .tutorials-sidebar-tutorial-preview-hover {
  opacity: 10%;
}
.tutorials-sidebar-tutorial-preview:active button {
  background: none;
  background-image: url("/img/play-bubble-active.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tutorials-sidebar-tutorial-preview:active .tutorials-sidebar-tutorial-preview-hover {
  background-color: black;
  opacity: 10%;
}

.tutorials-sidebar-tutorial-preview-hover {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0%;
  transition: opacity 0.25s, background 0.25s;
}

.tutorials-sidebar-tutorial-description {
  margin-top: 5px;
  margin-bottom: 30px;
}

/* FULLSCREEN TUTORIALS MODAL */
.fullscreen-tutorials-modal {
  width: 70vw;
  height: 70vh;
  background-color: black;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-items: center;
}
.fullscreen-tutorials-modal iframe {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  outline: none;
  border: none;
}

.editor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.main-container {
  display: grid;
  height: 100vh;
  grid-template-rows: 30px 70px 248px;
  transition: grid-template-rows 1s;
  overflow: hidden;
}

.main-container-selection-collapsed {
  grid-template-rows: 30px 70px 45px;
}

.centered-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

@media (max-height: 800px) {
  .main-container {
    grid-template-rows: 26px 40px 208px;
  }
  .main-container-selection-collapsed {
    grid-template-rows: 26px 40px 45px;
  }
}
/* cutout-animation component is located at dancecuts.editor.registry.edit */
.cutout-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8em;
}

.cutout-animation-inner {
  background: #20204c;
  width: 300px;
  padding: 20px 30px;
  border-radius: 5px;
  display: grid;
  grid-template-columns: min-content auto;
  align-items: center;
}

.cutout-animation-tl {
  grid-row: 1;
  grid-column: 1;
  margin-right: 15px;
  margin-bottom: 30px;
}

.cutout-animation-selection {
  grid-row: 1;
  grid-column: 2;
  height: 30px;
  background: #8f5cef;
  background: linear-gradient(135deg, #8f5cef, #a331cb);
  border-radius: 5px;
  flex: 1 0;
  margin-bottom: 30px;
  position: relative;
}
.cutout-animation-selection div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cutout-animation-selection-left, .cutout-animation-selection-selector, .cutout-animation-selection-right, .cutout-animation-crossfade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33%;
  border-radius: 5px;
}

.cutout-animation-selection-left {
  left: 0;
}

.cutout-animation-selection-selector {
  left: 33%;
  background: rgba(0, 0, 0, 0.7);
}

.cutout-animation-selection-right {
  left: 66%;
  width: 34%;
}

.cutout-animation-crossfade {
  left: 33%;
  height: 30px;
  transform-origin: -10%;
}

.cutout-animation-selection-left, .cutout-animation-selection-right, .cutout-animation-crossfade {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.cutout-animation-selection-left, .cutout-animation-selection-right {
  background: #8f5cef;
  background: linear-gradient(135deg, #8f5cef, #a331cb);
}

.cutout-animation-selection-left {
  animation-name: cutout-animation-selection-left;
}

.cutout-animation-selection-right {
  animation-name: cutout-animation-selection-right;
}

.cutout-animation-crossfade {
  animation-name: cutout-animation-crossfade;
}

.cutout-animation-bl {
  grid-row: 2;
  grid-column: 1;
}

.cutout-animation-mix {
  grid-row: 2;
  grid-column: 2;
  flex: 1 0;
}

.cutout-animation-track {
  height: 30px;
  background-color: #100f24;
  border-radius: 5px;
}
.cutout-animation-track:not(:last-of-type) {
  margin-bottom: 5px;
}

@keyframes cutout-animation-selection-left {
  0%, 10% {
    transform: translateY(0%);
  }
  50%, 100% {
    transform: translateY(200%);
  }
}
@keyframes cutout-animation-selection-right {
  0%, 10% {
    transform: translate(0%, 0%);
  }
  50%, 100% {
    transform: translate(-110%, 200%);
  }
}
@keyframes cutout-animation-crossfade {
  0%, 40% {
    opacity: 0;
    transform: scaleX(0%) translate(-30%, 200%);
  }
  60%, 100% {
    opacity: 1;
    transform: scaleX(100%) translate(-30%, 200%);
  }
}

/*# sourceMappingURL=styles.css.map */