/* Auth */

.login-flow-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--bg-color);
  }
  
  .login-flow-container h5 {
    line-height: 2.5rem;
  }
  
  .password-change,
  .set-password {
    width: 380px;
  }
  
  .login,
  .password-reset,
  .check-email,
  .sign-up {
    display: none;
    width: 350px;
  }
  
  .login.on,
  .password-reset.on,
  .check-email.on,
  .sign-up.on {
    display: block;
  }
  
  .login-flow-container .m-input {
    width: 100%;
    font-size: 1.8rem;
    font-weight: 300;
  }
  
  .full-width-bottom-btn {
    width: 100%!important;
  }
  
  .login .double-button-box,
  .add-card .full-width-bottom-btn {
    margin-top: 25px;
  }
  
  .btn-go-to-login {
    margin: 15px 0 0 0!important;
  }
  
  .double-button-box button {
    width: calc(50% - 1px);
  }
  
  .login .double-button-box #login-btn {
    display: inline-flex;
    font-size: 1.8rem;
  }
  
  .login-flow-container h3 {
    font-weight: 500!important;
    margin-bottom: 3rem!important;
  }

  .m-input-box h5 {
    font-weight: 400!important;
    text-transform: none;
    margin-bottom: 25px!important;
  }
  
  .set-password h5 {
    color: var(--text-color-light);
    margin-bottom: 25px!important;
  }
  
  #forgot-password-btn {
    padding-top: 11px;
  }
  
  /* Show password icon */
  
  .input-container {
    position: relative;
  }
  
  .show-password {
    width: 33px;
    position: absolute;
    right: 0;
    top: 6px;
    bottom: 1px;
    cursor: pointer;
    z-index: 100;
    user-select: none;
    -moz-user-select: none;
    background: transparent;
  }
  
  /* Password strength meter */
  
  .pass-meter {
    position: absolute;
    bottom: 0px;
    height: 1px;
    width: 100%;
    opacity: 0;
    background: var(--bg-color);
  }
  .pass-meter.on {
    opacity: 1;
  }
  .pass-meter-element {
    display: inline-flex;
    width: 100%;
    border-bottom: none;
    margin-right: 5px;
    transition-duration: .5s;
    border-color: var(--bg-color);
  }
  .pass-meter-element:last-child {
    margin-right: 0;
  }
  .pass-meter-element.yellow {
    border-bottom: 1px solid var(--david-yellow);
    transition: border-color .5s;
  }
  .pass-meter-element.green {
    border-bottom: 1px solid var(--asimov-green);
    transition: border-color .5s;
  }
  .pass-meter-element.red {
    border-bottom: 1px solid var(--hal-red);
    transition: border-color .5s;
  }
  
  /* Password */
  
  #passwd {
    height: 46px;
    padding-left: 15px;
    border: 1px solid var(--cloud);
  }
  
  #passwd.yellow {
    border: 1px solid var(--david-yellow);
  }
  
  #passwd.green {
    border: 1px solid var(--asimov-green);
  }
  
  .passwd-strength-label {
    position: absolute;
    right: 46px;
    top: 12px;
    padding: 5px 6px;
    border-radius: 4px;
    background-color: transparent;
    opacity: 0;
    transition: opacity .2s ease;
  }
  
  .yellow + .passwd-strength-label {
    background-color: rgba(255,175,81,.3);
  }
  
  .green + .passwd-strength-label {
    color: var(--asimov-green);
    background-color: rgba(111,207,151,.3);
  }
  
  .passwd-label-weak,
  .passwd-label-strong {
    display: none;
    font-size: 1.2rem!important;
    color: var(--david-yellow);
    line-height: normal;
  }
  
  .passwd-label-strong {
    color: var(--asimov-green);
  }
  
  .yellow + .passwd-strength-label .passwd-label-weak,
  .green + .passwd-strength-label .passwd-label-strong {
    display: block;
  }
  
  #passwd[type=text].green + .passwd-strength-label,
  #passwd.green:focus + .passwd-strength-label,
  #passwd[type=text].yellow + .passwd-strength-label,
  #passwd.yellow:focus + .passwd-strength-label {
    opacity: 1;
  }
  
  .input-container {
    position: relative;
  }
  
  .show-password {
    width: 38px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 1px;
    cursor: pointer;
    z-index: 100;
    user-select: none;
    -moz-user-select: none;
    background: transparent;
  }
  
  .input-container::after {
    content: '';
    position: absolute;
    right: 0;
    height: 32px;
    background-image: url(../imgs/icon-sprites.svg);
    background-repeat: no-repeat;
    background-position: -336px 1px;
    width: 25px;
    opacity: .5;
    top: 6px;
  }
  
  .dark-mode .input-container::after {
    filter: invert(1);
  }
  
  /* Form errors */
  
  .form-message {
    display: none;
    width: 100%;
    font-size: 13px;
    padding: 7px 0 0 0;
  }
  
  .form-message.error, .form-message.error a {
    color: #eb5757!important;
  }
  .form-message.help, .form-message.help a {
    color: #FFAF51!important;
  }
  
  .form-message.show {
    display: block;
  }
  
  .form-message i {
    font-size: 13px;
    vertical-align: -2px;
  }
  
  @media only screen and (max-width: 768px) {
  
    .login,
    .check-email,
    .password-reset,
    .sign-up,
    .set-password,
    .password-change {
      position: fixed;
      top: calc(100% - 420px);
      width: 100%;
      padding: 0 25px;
      max-width: 100%;
    }
  
    .password-reset {
      top: calc(100% - 260px);
    }
  
    .password-change {
      bottom: 110px;
      top: unset;
    }
  
    .set-password {
      top: calc(100% - 410px);
    }
  
    .success-container {
      position: fixed;
      bottom: 110px;
    }
  
    .login h5,
    .password-reset h5,
    .check-email h5 {
      font-size: 2.1rem;
      margin-bottom: 1.2rem !important;
      font-weight: 400;
      line-height: 2.8rem;
    }
  
    .m-modal-footer {
      display: flex;
      justify-content: flex-end;
      text-align: right;
      margin-top: 40px;
      width: 100%;
    }
  
    #password-form-reset .m-input {
      height: 50px;
      font-size: 1.5rem;
      border-bottom: 1px solid #edf1f3;
    }
  
    .full-width-bottom-btn,
    .double-button-box,
    .btn-go-to-login {
      position: fixed;
      bottom: 25px;
      left: 25px;
      right: 25px;
      height: 60px;
      width: calc(100% - 50px)!important;
      border-radius: 1px;
    }
  }

  .m-modal {
    display: flex;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 352;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    overscroll-behavior: contain;
    transition: .1s ease;
  }
  
  .m-modal.current {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.3);
    user-select: unset;
    pointer-events: unset;
  }
  
  .dark-mode .m-modal.current {
    background: rgba(29, 29, 29, 0.8);
  }
  
  .m-modal-header .page-title.collection-name {
    max-width: calc(100vw - 335px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Special m-btn-pseudo for modals */
  
  .m-modal-footer .m-btn-pseudo {
    background-color: var(--cloud);
  }
  
  .m-modal-footer button.btn-left,
  .m-modal-footer a.btn-left {
    margin-left: 0;
    margin-right: 12px!important;
  }
  
  .close:hover {
    cursor: pointer
  }
  
  .m-modal-body span {
    font-size: var(--size-normal);
    line-height: normal;
    user-select: auto;
  }
  
  .modal-description {
    margin-top: 0;
  }
  
  @media (hover: hover) {
    .close:hover {
      color: var(--black);
      text-decoration: none;
      cursor: pointer
    }
  }

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.main-nav-container .top-bar-account-options a {
  font-size: var(--size-normal);
}

#account-dropdown .switch-color .light-mode-label,
#account-dropdown .switch-color .dark-mode-label {
  transition: 0s;
}

#main-nav #login-btn.channel {
  margin-left: 20px;
}

#login-btn i {
  margin-right: 7px;
}

#login-btn span {
  font-size: 1.8rem;
  transition: .2s ease;
}

.top-btns a {
  color: var(--black);
}

.nav #muse-logo {
  position: relative;
  background-image: url('../imgs/logo_skiv.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none!important;
  outline: none;
  width: 131px;
  height: 25px;
}

.btn-help {
  padding-right: 5px!important;
  margin-left: 21px!important;
  opacity: 1;
}

.btn-help.channel {
  margin-left: 0!important;
}

.topbar-account-options {
  margin-left: 20px;
}

.nav-links nav {
  display: inline-flex;
}

.nav-links #login-btn i,
html.dark-mode .nav-links #login-btn i {
  filter: invert(46%) sepia(0%) saturate(860%) hue-rotate(285deg) brightness(115%) contrast(95%);
  transition: .2s ease;
}

@media (hover: hover) {
  .nav-links #login-btn:hover span {
    color: var(--black);
  }

  .nav-links #login-btn:hover i {
    filter: unset;
    transition: .2s ease;
  }
  html.dark-mode .nav-links #login-btn:hover i {
    filter: invert(1);
    transition: .2s ease;
  }
}

.logged-in .nav-links #account-dropdown,
.logged-in #account-dropdown-mobile {
  display: inline-flex;
}

html.dark-mode .mobile-menu-btn {
  filter: invert(1);
}

.mobile-menu-btn.on {
  position: fixed;
  right: 25px;
}

.m-dropdown::after {
  content: '';
}

.m-dropdown.rotated::after {
  content: '';
}

.m-dropdown-content {
  right: 0;
  min-width: none;
}

#login-btn,
#account-dropdown,
#account-dropdown-mobile {
  display: none;
}

.header-box .cta-button,
.header-box .btn-go-to-muse {
  animation: fadein 1s;
}

html.logged-in #account-dropdown,
html.logged-in #account-dropdown-mobile,
html.logged-in #logout-btn-mobile,
html.logged-in .header-box .btn-go-to-muse {
  visibility: visible!important;
  display: inline-flex!important;
}

.account-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  text-decoration: none;
  width: 100%;
}

.alias-switch {
  display: none;
  min-width: 100%;
  background-color: var(--ghost);
  min-height: 65px;
  max-height: calc(100vh - 385px);
  overflow: auto;
  overscroll-behavior: contain;
}

.alias-row {
  display: flex;
  align-items: center;
  position: relative;
  height: 45px;
  padding: 0 50px 0 20px;
  border-bottom: 1px solid var(--cloud);
}

.alias-row::after {
  content: '';
  display: inline-flex;
  background-repeat: no-repeat;
  background-image: url(../imgs/icon-sprites.svg);
  background-position: -226px -431px;
  position: absolute;
  right: 11px;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  opacity: .5;
}

.dark-mode .alias-row::after {
  filter: invert(1);
}

.alias-row.own::after {
  background-position: -84px -126px;
}

.alias-row .radio-box {
  width: 100%;
  margin-bottom: 0;
}

.alias-row .radio-box input {
  width: 100vw;
  width: calc(100% + 40px);
  right: 0;
  height: 45px;
  left: -20px;
  margin: 0;
}

html.logged-in #btn-go-to-muse-mobile {
  display: flex!important;
}

html.logged-in .btn-go-to-muse {
  visibility: visible!important;
  display: inline-flex!important;
  margin-left: 0!important;
}

.header-box .cta-button {
  display: none;
  margin-left: 0!important;
}

html.logged-in header #login-btn,
html.logged-in #main-nav .cta-topbar,
html.logged-in .header-box .cta-button,
html.logged-in #login-btn-mobile,
html.logged-in .validate.homepage {
  display: none;
  visibility: visible;
}

html.logged-out #account-dropdown,
html.logged-out #account-dropdown-mobile,
html.logged-out #logout-btn-mobile,
html.logged-out .btn-go-to-muse,
html.logged-out #btn-go-to-muse-mobile {
  display: none;
}

html.logged-out header #login-btn,
html.logged-out #main-nav .cta-topbar,
html.logged-out .header-box .cta-button,
html.logged-out #login-btn-mobile,
html.logged-out .validate.homepage {
  visibility: visible!important;
  display: inline-flex!important;
}

#account-dropdown .switch-color,
#account-dropdown-mobile .switch-color {
  position: static;
}
#account-dropdown .switch-color .dark-mode-icon,
#account-dropdown .switch-color .light-mode-icon,
#account-dropdown-mobile .switch-color .dark-mode-icon,
#account-dropdown-mobile .switch-color .light-mode-icon {
  padding: 0;
}

@media (hover: hover) {
  .switch-color:hover>.dark-mode-label,
  .switch-color:hover>.light-mode-label {
    opacity: 1;
    transition-duration: .2s;
  }
}

.header-mobile {
  display: none;
}

@media only screen and (max-width: 885px) {
  .container-topbar-buttons {
    width: 280px;
  }
  #muse-topbar .search-container {
    width: calc(100% - 465px);
  }
  #record-btn,
  #upload-btn {
    width: 50px;
    height: 42px;
    min-width: unset;
    padding: 0!important;
  }
  #record-btn span,
  #upload-btn span {
    display: none;
  }
  #record-btn i,
  #upload-btn i {
    margin: 0!important;
  }
}


@media only screen and (max-width: 768px) {
  .container-topbar-buttons {
    display: none;
  }

  .account-header {
    border-bottom: 1px solid var(--cloud);
  }

  .account-header .account-name {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Dropdown */

.m-dropdown {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.m-dropdown.over .m-dropdown-content {
  transform: translateY(-120%);
}

.m-dropdown.over.on .m-dropdown-content {
  transform: translateY(-137%);
  margin: 0;
}

.m-dropdown.on .m-dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.secondary-topbar .m-dropdown.on .m-dropdown-content {
  transform: translateY(10px);
}

.dropdown-searchable a {
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
}

.m-dropdown .m-dropdown-content i {
  margin-right: 10px;
}

.m-dropdown.topbar-account-options button::after {
  display: none !important;
}

.m-dropdown button::after {
  content: '';
  display: inline-flex;
  background-repeat: no-repeat;
  background-image: url(../imgs/icon-sprites.svg);
  width: 26px;
  height: 26px;
  background-position: -546px -42px;
  transition: all .2s ease;
  vertical-align: bottom;
  transform-origin: center;
  background-position: -35px -431px;
  margin-left: 3px;
}

.m-dropdown.rotated button::after {
  transform: rotate(180deg);
  transform-origin: center;
}

.dark-mode .m-dropdown button::after {
  filter: invert(1);
}

.m-dropdown select {
  display: none;
}

.m-dropdown-content.input {
  padding: 3px 8px;
  max-height: 65vh;
  overflow: auto;
}

.m-checkbox-container.input {
  padding: 0 0 0 30px;
  margin: 10px 7px;
}

.m-checkbox-container.input .m-checkmark {
  margin-top: 3px;
}

.down-caret {
  margin-left: 6px;
  position: relative;
  top: 4px;
  transform: rotate(180deg);
  transition: .25s ease-out;
}

.open-caret {
  display: inline-flex;
  position: relative;
  margin-left: 6px;
  top: 1px;
  transform: rotate(0deg);
  transition: .25s ease-in;
}

.rotate-caret {
  display: inline-flex;
  position: relative;
  margin-left: 6px;
  top: 4px;
  transform: rotate(180deg);
  transition: .25s ease-in;
}

.m-dropdown.no-caret button::after {
  content: '';
  display: none;
}

.m-dropdown.rotated.no-caret button::after {
  content: '';
  display: none;
}

.dropdown-background {
  pointer-events: none;
  opacity: 0;
}

/* Channel / Manager toggle */

a.toggle-channel-manager::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 10px;
  background-image: url(../imgs/icon-sprites.svg);
  width: 26px;
  height: 26px;
  background-position: -210px -126px;
  opacity: .5;
}

.dark-mode a.toggle-channel-manager::after {
  filter: invert(1);
}

.toggle-channel-manager.mobile-menu-row::after {
  right: 25px;
  top: 15px;
}

/* Searchable dropdowns */

.dropdown-searchbox {
  display: flex;
  align-items: center;
  position: relative;
  height: 42px;
  width: 100%;
  padding: 0 0 1px 51px;
  border: 1px solid var(--cloud);
  background: var(--cloud);
  border-radius: 1px;
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  transition: left .2s;
  font-size: var(--size-normal);
  font-weight: 300;
  color: var(--black);
  -webkit-appearance: none;
  z-index: 1;
}

.dropdown-searchbox::-webkit-search-decoration,
.dropdown-searchbox::-webkit-search-cancel-button,
.dropdown-searchbox::-webkit-search-results-button,
.dropdown-searchbox::-webkit-search-results-decoration { display: none; }
.dropdown-searchbox::-ms-clear {  display: none; width : 0; height: 0; }
.dropdown-searchbox:-ms-reveal {  display: none; width : 0; height: 0; }

.dropdown-searchbox::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 15px;
  background-image: url(../imgs/icon-sprites.svg);
  background-repeat: no-repeat;
  width: 26px;
  height: 26px;
  background-position: -252px -210px;
  z-index: 1;
}

.dark-mode .dropdown-searchbox::after {
  filter: invert(1);
}

.dropdown-searchable .m-dropdown-content {
  width: 251px;
}

.dropdown-searchable-list {
  margin: 0;
  max-height: 210px;
  overflow: auto;
  overscroll-behavior: contain;
}

.dropdown-searchable-list a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-searchable-list a:focus {
  color: var(--black);
  background-color: var(--ghost);
  border-top: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate);
  opacity: 1;
}

.dropdown-searchable-list a[data-value*="@"] {
  font-weight: 500;
}

@media only screen and (max-width: 768px) {

  .m-dropdown:not(.topbar-account-options, .dropdown-no-mobile) .m-dropdown-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: fixed;
    bottom: 59px;
    left: 0;
    width: 100%;
    transform: translateY(100vh);
    border: none;
    border-bottom: 1px solid var(--cloud);
    border-top: 1px solid var(--cloud);
    background-color: var(--cloud);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .actionbar-on .secondary-topbar .m-dropdown.on .m-dropdown-content {
    transform: translateY(-59px);
  }

  .m-modal .m-dropdown-content {
    padding-bottom: 0;
  }

  .dropdown-searchable .m-dropdown-content {
    display: unset!important;
    padding-bottom: 57px!important;
    max-height: calc(100% - env(safe-area-inset-bottom));
    margin: 0;
  }

  .dropdown-searchable .m-dropdown-content a {
    max-width: 100%!important;
    padding: 25px 20px!important;
  }

  .dropdown-searchable .searchbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 3;
  }

  .dropdown-searchbox {
    height: 58px;
  }

  .dropdown-searchable-list {
    max-width: unset;
    max-height: calc(100vh - 120px);
  }

  .team-member-cell .m-dropdown-content {
    bottom: -1px!important;
  }

  .action-bar .m-dropdown-content {
    padding-bottom: 0!important;
  }

  .actionbar-on .m-dropdown-content:not(.context-menu):not(.dropdown-video-view) {
    bottom: 59px;
  }

  .action-bar .m-dropdown-content {
    bottom: 59px;
    z-index: -4;
  }

  .action-bar .dropdown-background {
    top: -100vh!important;
    bottom: 60px!important;
    z-index: -5!important;
  }

  .dark-mode .m-dropdown:not(.topbar-account-options, .dropdown-no-mobile) .m-dropdown-content {
    background-color: var(--cloud);
  }

  .m-dropdown:not(.topbar-account-options, .dropdown-no-mobile).on .m-dropdown-content,
  .secondary-topbar .m-dropdown.on .m-dropdown-content {
    transform: translateY(0);
    transition: transform .25s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  #search-topbar .m-dropdown.on .m-dropdown-content {
    transform: translateY(0)!important;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .m-modal .m-dropdown:not(.topbar-account-options, .dropdown-no-mobile).on .m-dropdown-content {
    bottom: 0;
  }

  .m-dropdown:not(.topbar-account-options, .dropdown-no-mobile) .dropdown-background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    transition: opacity .25s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .dark-mode .dropdown-background {
    background-color: rgba(29, 29, 29, 0.8);
  }

  .m-dropdown.on .dropdown-background {
    opacity: 1;
    pointer-events: all;
  }

  .m-dropdown:not(.topbar-account-options, .dropdown-no-mobile) .m-dropdown-content a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: calc(50% - .5px);
    margin-bottom: 1px;
    padding: 15px 12px;
    line-height: 36px;
    background-color: var(--white);
    text-align: center;
    opacity: 1;
    flex-grow: 1;
  }

  .m-dropdown-content a.full-width {
    min-width: 100%;
  }

  .dark-mode .m-dropdown-content a {
    background-color: var(--bg-color);
  }

  .topbar-account-options {
    max-width: calc(100vw - 50px);
  }

}

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(../imgs/icon-sprites.svg);
  position: relative;
  vertical-align: middle;
  width: 26px;
  height: 26px;
}

[class^="icon-"].small, [class*=" icon-"].small {
  transform: scale(.8);
}

button [class^="icon-"],
button [class*=" icon-"],
a [class^="icon-"],
a [class*=" icon-"]  {
  margin-right: 7px;
}

i {
  font-style: normal;
}

@media (prefers-color-scheme: dark) {
  i {
    filter: invert(1);
  }
}

.light-mode i {
  filter: invert(0);
}

.dark-mode i {
  filter: invert(1);
}

.m-modal-header i {
  margin-right: 0;
}

.icon-m-player {
  background-position: 0 0;
}
.icon-m-star-filled {
  background-position: -42px 0;
}
.icon-m-star {
  background-position: -84px 0;
}
.icon-m-face-ignore {
  background-position: -126px 0;
}
.icon-m-sign-out {
  background-position: -169px 0;
}
.icon-m-sign-in {
  background-position: -210px 0;
}
.icon-m-image {
  background-position: -252px 0;
}
.icon-m-scenes {
  background-position: -294px 0;
}
.icon-m-eye {
  background-position: -336px 1px;
}
.icon-m-eye-crossed {
  background-position: -124px -399px;
}
.icon-m-trim {
  background-position: -378px 0;
}
.icon-m-zoom-out {
  background-position: -420px 0;
}
.icon-m-zoom-in {
  background-position: -462px 0;
}
.icon-m-transcript {
  background-position: -504px 0;
}
.icon-m-action {
  background-position: -546px 0;
}
.icon-m-add-to-collection {
  background-position: -588px 0;
}
.icon-m-collections {
  background-position: -630px 0;
}
.icon-m-analyze {
  background-position: 2px -42px;
}
.icon-m-sun-moon {
  background-position: -42px -42px;
}
.icon-m-05x {
  background-position: -84px -42px;
}
.icon-m-action1 {
  background-position: -126px -42px;
}
.icon-m-add {
  background-position: -168px -42px;
}
.icon-m-add-to-collection1 {
  background-position: -210px -42px;
}
.icon-m-arrow-forward {
  background-position: -252px -41px;
}
.icon-m-arrow-back {
  background-position: -294px -41px;
}
.icon-m-approx {
  background-position: -336px -42px;
}
.icon-m-caret-left {
  background-position: -378px -42px;
}
.icon-m-caret-right {
  background-position: -417px -41px;
}
.icon-m-caret-up {
  background-position: -462px -42px;
}
.icon-m-calendar {
  background-position: -504px -40px;
}
.icon-m-caret {
  background-position: -545px -41px;
}
.icon-m-checkmark {
  background-position: -588px -41px;
}
.icon-m-airplay {
  background-position: -630px -42px;
}
.icon-m-airplay-on {
  background-position: 0 -84px;
}
.icon-m-chromecast-on {
  background-position: -42px -84px;
}
.icon-m-1x {
  background-position: -84px -84px;
}
.icon-m-chromecast {
  background-position: -126px -84px;
}
.icon-m-clock {
  background-position: -167px -82px;
}
.icon-m-brain {
  background-position: -210px -84px;
}
.icon-m-close {
  background-position: -252px -83px;
}
.icon-m-collections1 {
  background-position: -294px -84px;
}
.icon-m-colors {
  background-position: -336px -84px;
}
.icon-m-concepts {
  background-position: -378px -84px;
}
.icon-m-copy {
  background-position: -420px -83px;
}
.icon-m-paste {
  background-position: -462px -84px;
}
.icon-m-delete {
  background-position: -504px -84px;
}
.icon-m-dev {
  background-position: -546px -84px;
}
.icon-m-download {
  background-position: -587px -82px;
}
.icon-m-edit {
  background-position: -630px -83px;
}
.icon-m-expand {
  background-position: 0 -126px;
}
.icon-m-external {
  background-position: -41px -125px;
}
.icon-m-face {
  background-position: -84px -126px;
}
.icon-m-fast-back {
  background-position: -126px -126px;
}
.icon-m-film {
  background-position: -168px -126px;
}
.icon-m-flow {
  background-position: -210px -126px;
}
.icon-m-frame-back {
  background-position: -252px -126px;
}
.icon-m-frame-forward {
  background-position: -294px -126px;
}
.icon-m-fast-forward {
  background-position: -335px -126px;
}
.icon-m-eye1 {
  background-position: -378px -126px;
}
.icon-m-fullscreen-close {
  background-position: -420px -126px;
}
.icon-m-grid {
  background-position: -462px -126px;
}
.icon-m-fullscreen {
  background-position: -504px -126px;
}
.icon-m-fetch {
  background-position: -546px -126px;
}
.icon-m-home {
  background-position: -588px -126px;
}
.icon-m-info {
  background-position: -630px -126px;
}
.icon-m-help {
  background-position: -305px -399px;
}
.icon-m-link {
  background-position: 0 -166px;
}
.icon-m-list {
  background-position: -42px -167px;
}
.icon-m-lock {
  background-position: -84px -167px;
}
.icon-m-logo {
  background-position: -125px -167px;
}
.icon-m-menu {
  background-position: -168px -168px;
}
.icon-m-moon {
  background-position: -210px -168px;
}
.icon-m-more {
  background-position: -252px -168px;
}
.icon-m-motion {
  background-position: -294px -168px;
}
.icon-m-mute {
  background-position: -336px -168px;
}
.icon-m-ocr {
  background-position: -378px -168px;
}
.icon-m-pause {
  background-position: -420px -168px;
}
.icon-m-person-lock {
  background-position: -462px -168px;
}
.icon-m-person {
  background-position: -504px -168px;
}
.icon-m-pip-rev {
  background-position: -546px -168px;
}
.icon-m-pip {
  background-position: -588px -168px;
}
.icon-m-play-segment {
  background-position: -630px -168px;
}
.icon-m-play {
  background-position: 0 -209px;
}
.icon-m-rec {
  background-position: -42px -210px;
}
.icon-m-save {
  background-position: -84px -210px;
}
.icon-m-replay {
  background-position: -126px -210px;
}
.icon-m-settings {
  background-position: -168px -209px;
}
.icon-m-share {
  background-position: -210px -208px;
}
.icon-m-search {
  background-position: -252px -210px;
}
.icon-m-shrink {
  background-position: -294px -210px;
}
.icon-m-skip-back {
  background-position: -336px -210px;
}
.icon-m-skip-forward {
  background-position: -378px -210px;
}
.icon-m-sort {
  background-position: -420px -210px;
}
.icon-m-stop {
  background-position: -462px -210px;
}
.icon-m-storage {
  background-position: -504px -208px;
}
.icon-m-storage-tag {
  background-position: -239px -367px;
}
.icon-m-storage-warning {
  background-position: -271px -367px;
}
.icon-m-spectrogram {
  background-position: -546px -210px;
}
.icon-m-sun {
  background-position: -587px -209px;
}
.icon-m-thumb-large {
  background-position: -630px -210px;
}
.icon-m-sound {
  background-position: 0 -252px;
}
.icon-m-thumb-medium {
  background-position: -42px -251px;
}
.icon-m-thumb-small {
  background-position: -84px -251px;
}
.icon-m-thumb-tiny {
  background-position: -126px -251px;
}
.icon-m-thumb-detailed {
  background-position: -341px -397px;
}
.icon-m-unlock {
  background-position: -168px -252px;
}
.icon-m-upload {
  background-position: -210px -250px;
}
.icon-m-volume0 {
  background-position: -252px -252px;
}
.icon-m-volume1 {
  background-position: -294px -252px;
}
.icon-m-volume2 {
  background-position: -336px -252px;
}
.icon-m-volume3 {
  background-position: -378px -252px;
}
.icon-m-world {
  background-position: -420px -251px;
}
.icon-m-05x1 {
  background-position: -462px -252px;
}
/*.icon-m-logo-full {*/
/*  width: 100px;*/
/*  background-position: -549px -249px;*/
/*}*/
.icon-m-center {
  background-position: 0 -294px;
}
.icon-m-select-all {
  background-position: -42px -294px;
}
.icon-m-deselect-all {
  background-position: -87px -294px;
}
.icon-m-col-public {
  background-position: -128px -294px;
}
.icon-m-col-private {
  background-position: -169px -294px;
}
.icon-m-quota {
  background-position: -209px -293px;
}
.icon-m-warning {
  background-position: -249px -293px;
}
.icon-m-trademark {
  background-position: -292px -293px;
}
.icon-m-copyright {
  background-position: -334px -292px;
}
.icon-m-abuse {
  background-position: -377px -292px;
}
.icon-m-explicit {
  background-position: -420px -293px;
}
.icon-m-cut {
  background-position: -461px -291px;
}
.icon-m-support {
  background-position: -498px -291px;
}
.icon-m-label {
  background-position: -535px -291px;
}
.icon-m-embed-player {
  background-position: -609px -291px;
}
.icon-m-embed-search {
  background-position: -572px -291px;
}
.icon-m-server {
  background-position: 0px -368px;
}
.icon-m-shield {
  background-position: -42px -367px;
}
.icon-m-dashhls {
  background-position: -83px -367px;
}
.icon-m-4k {
  background-position: -123px -367px;
}
.icon-m-block {
  background-position: -165px -367px;
}
.icon-m-price {
  background-position: -202px -367px;
}
.icon-m-top {
  background-position: -308px -365px;
}
.icon-m-pin {
  background-position: -341px -367px;
}
.icon-m-cover {
  background-position: -375px -366px;
}
.icon-m-insights {
  background-position: -410px -366px;
}
.icon-m-channel {
  background-position: -164px -399px;
}
.icon-m-studio {
  background-position: -200px -399px;
}
.icon-m-immersive {
  background-position: -238px -399px;
}
.icon-m-user-channel {
  background-position: -509px -366px;
}
.icon-m-user-channel-filled {
  background-position: -473px -366px;
}
.icon-m-bulb {
  background-position: -440px -366px;
}
.icon-m-analytics {
  background-position: -546px -364px;
}
.icon-m-subtitles {
  background-position: -574px -365px;
}
.icon-m-subtitles-on {
  background-position: -609px -365px;
}
.icon-m-embed {
  background-position: -2px -398px;
}
.icon-m-sidebar-collapse {
  background-position: -44px -399px;
}
.icon-m-sidebar-expand {
  background-position: -85px -399px;
}
.icon-m-key {
  background-position: -271px -399px;
}
.icon-m-docs {
  background-position: -376px -398px;
}
.icon-m-sort-az {
  background-position: -409px -398px;
}
.icon-m-arrow-small {
  background-position: -440px -399px;
}
.icon-m-objects {
  background-position: -472px -398px;
}
.icon-m-chapters {
  background-position: -508px -398px;
}
.icon-m-cta {
  background-position: -544px -396px;
}
.icon-m-cloud {
  background-position: -578px -397px;
}
.icon-m-cloud-price {
  background-position: -609px -396px;
}
.icon-m-team {
  background-position: -225px -431px;
}
.icon-m-team-admin {
  background-position: -260px -431px;
}
.icon-m-team-crew {
  background-position: -296px -431px;
}
.icon-m-popcorn {
  background-position: -356px -428px;
}
.icon-m-coins {
  background-position: -386px -428px;
}
.icon-m-camera {
  background-position: -420px -428px;
}
.icon-m-screen {
  background-position: -453px -428px;
}
.icon-m-microphone {
  background-position: -507px -429px;
}
.icon-m-microphone-muted {
  background-position: -481px -429px;
}
.icon-m-envelope {
  background-position: -67px -457px;
}

/* Player controls */

.icon-m-controls-airplay {
  background-position: -34px -329px;
}
.icon-m-controls-airplay-on {
  background-position: 0 -329px;
}
.icon-m-controls-chromecast {
  background-position: -102px -329px;
}
.icon-m-controls-chromecast-on {
  background-position: -68px -329px;
}
.icon-m-controls-expand {
  background-position: -136px -329px;
}
.icon-m-controls-shrink {
  background-position: -340px -329px;
}
.icon-m-controls-fullscreen {
  background-position: -205px -329px;
}
.icon-m-controls-fullscreen-close {
  background-position: -171px -329px;
}
.icon-m-controls-mute {
  background-position: -238px -329px;
}
.icon-m-controls-play {
  background-position: -306px -330px;
}
.icon-m-controls-pause {
  background-position: -272px -330px;
}
.icon-m-controls-skip-back {
  background-position: -375px -329px;
}
.icon-m-controls-skip-forward {
  background-position: -409px -329px;
}
.icon-m-controls-volume0 {
  background-position: -442px -329px;
}
.icon-m-controls-volume1 {
  background-position: -476px -329px;
}
.icon-m-controls-volume2 {
  background-position: -510px -329px;
}
.icon-m-controls-volume3 {
  background-position: -544px -329px;
}
.icon-m-portal {
  background-position: -613px -329px;
}
.icon-m-replace {
  background-position: -622px -427px;
}
.icon-m-logo-zoom {
  background-position: -2px -457px;
}
.icon-m-rec-person {
  background-position: -36px -457px;
}

/* Small icons */

.icon-m-add-small {
  background-position: -1px -432px;
}
.icon-m-caret-small {
  background-position: -35px -431px;
}
.icon-m-info-small {
  background-position: -68px -431px;
}
.icon-m-close-small {
  background-position: -99px -432px;
}
.icon-m-checkmark-small {
  background-position: -131px -433px;
}
.icon-m-edit-small {
  background-position: -165px -431px;
}
.icon-m-delete-small {
  background-position: -196px -431px;
}
.icon-m-analytics-small {
  background-position: -328px -430px;
}
.icon-m-play-small {
  background-position: -534px -427px;
}
.icon-m-col-small {
  background-position: -564px -428px;
}
.icon-m-clock-small {
  background-position: -593px -427px;
}
.icon-m-sparkle {
  background-position: -101px -455px;
}
.icon-m-sparkle-filled {
  background-position: -99px -456px;
}
.icon-m-gift {
  background-position: -130px -456px;
}
.icon-m-mobile {
  background-position: -165px -457px;
}
.icon-m-desktop {
  background-position: -194px -457px;
}
.icon-m-mail {
  background-position: -227px -457px;
}
.icon-m-logo-full {
  background-position: -262px -455px;
  width: 65px;
}
/* Icon colors */

[class^="icon-"].white, [class*=" icon-"].white {
  filter: invert(1)!important;
}

[class^="icon-"].green, [class*=" icon-"].green {
  filter: invert(70%) sepia(38%) saturate(422%) hue-rotate(92deg) brightness(98%) contrast(89%)!important;
}

[class^="icon-"].dark-green, [class*=" icon-"].dark-green {
  filter: invert(70%) sepia(38%) saturate(922%) hue-rotate(92deg) brightness(38%) contrast(89%)!important;
}

[class^="icon-"].red, [class*=" icon-"].red {
  filter: invert(71%) sepia(41%) saturate(7250%) hue-rotate(325deg) brightness(94%) contrast(96%)!important;
}

[class^="icon-"].blue, [class*=" icon-"].blue {
  filter: invert(26%) sepia(48%) saturate(5898%) hue-rotate(231deg) brightness(98%) contrast(101%)!important;
}

[class^="icon-"].yellow, [class*=" icon-"].yellow {
  filter: invert(93%) sepia(19%) saturate(6557%) hue-rotate(319deg) brightness(103%) contrast(112%)!important;
}


/* Helpers */

.left {
  float: left;
}

.right {
  float: right;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.no-margin {
  margin: 0;
}

.margin-bottom {
  margin-bottom: 25px!important;
}
.margin-bottom.small {
  margin-bottom: 15px!important;
}
.margin-bottom.large {
  margin-bottom: 50px!important;
}
.margin-bottom.huge {
  margin-bottom: 80px!important;
}

.margin-top {
  margin-top: 25px!important;
}
.margin-top.small {
  margin-top: 15px!important;
}
.margin-top.large {
  margin-top: 50px!important;
}
.margin-top.huge {
  margin-top: 80px!important;
}

.divider {
  width: 100%;
  margin: 25px 0;
  border-bottom: 1px solid var(--cloud);
}

.divider.or {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 2.5rem 0;
}

.divider.or::after {
  content: 'OR';
  position: absolute;
  width: 190px;
  font-size: 1rem;
  text-align: center;
  color: var(--slate);
  background-color: var(--bg-color);
  z-index: 1;
  font-weight: 300;
}

#modal-login .divider.or::after {
  content: 'or login with email';
}

#modal-sign-up .divider.or::after {
  content: 'or sign up with email';
}

.divider.small {
  margin: 10px 0;
}

.divider.large {
  margin: 25px 0;
}

.divider.vertical {
  min-height: 100%;
  width: 0px;
  border-left: 1px solid var(--slate);
  border-bottom: none;
  margin: 0 25px;
}

.divider-sidebar {
  width: 130%;
  margin: 10px 0;
  border-bottom: 1px solid var(--cloud);
  margin-left: -40px;
}

.m-section {
  margin: 2rem 0;
}

.disabled {
  opacity: .5!important;
  cursor: default;
  pointer-events: none;
}

.m-btn[disabled] {
  opacity: .5!important;
  cursor: default;
}

.no-scroll {
  overflow: hidden;
}

.hide {
  display: none!important;
}